This plugin was written as an example on how we can implement different business requirements on a shop that has the FE built using falcon.de
On the product page (PDP) business wants to render the last 10 reviews of that product given by past clients. Display will be made as an accordion ( displaying only the email with button to show/hide the rest of the review )
- The components is composed of 4 packages that are using Lerna [https://github.com/lerna/lerna] to deploy them on npmjs.com.
- deity-reviews-api - package that does the communication with the reviews servers to pull the reviews and give them back to the grapql client
- deity-reviews-data - contains the graphql queries wrappers used by React frontend compoents to fetch info from graphql server
- deity-reviews-extension - contains the graphql schema definition
- deity-reviews-ui - implements the React components that displays the reviews received from graphql server
Steps to quick install and use this component.
-
Clone the example shop falcon.deity from here: https://github.com/deity-io/falcon
- use
yarn
instead ofnpm
( vianpm
can throuh some errors)
- use
-
Inside the cloned folder navigate to
examples/shop-with-blog/server
folder.-
Edit
package.json
and add these 2 packages underdependencies
node:"dependencies": { ... "@npmapopovici/deity-reviews-extension": "0.0.16", "@npmapopovici/deity-reviews-api": "0.1.1" }
- Please update 0.0.16 and 0.0.6 with the latest version of these packages if different
-
Edit
config/default.json
file. Underapis
node add thereviewsapi
node:"apis": { ... "reviewsapi": { "package": "@npmapopovici/deity-reviews-api", "config": { "host": "jsonplaceholder.typicode.com", "protocol": "https", "apiPrefix": "/comments" } }
and under
extensions
node add thereviews
node:"extensions": { ... "reviews": { "package": "@npmapopovici/deity-reviews-extension", "config": { "api": "reviewsapi" } }
-
From command line under ``examples/shop-with-blog/server` install server dependencies
yarn install
-
-
Navigate to the
examples/shop-with-blog/client
folder.- Edit
package.json
file, underdevDependencies
node add 2 packages:"devDependencies": { ... "@npmapopovici/deity-reviews-data": "^0.0.18", "@npmapopovici/deity-reviews-ui": "^0.1.1" }
- Install the newly added packages from command line inside
client
folder:yarn install
- Edit this React file under
client
folder:src/pages/shop/Product.js
.- Import the 'ProductReviews' component after the other imports but before const ProductPage:
... import { ProductReviews } from '@npmapopovici/deity-reviews-ui'; const ProductPage = ({ match: { params } }) => ( ...
- Navigate throught the code and around line 57 after the
<ProductDescription ... />
line add ourProductReviews
:... <ProductReviews productId={parseInt(product.id)} /> ...
- Try to see the network requests. The product.id is being matched to the postId on the reviews api. But the test reviews list only has postId's up to 100. If no reviews are being displayed on the page, replace
parseInt(product.id)
with any int value under100
. Usually browsing categories under "Gear" have products with id under 100.
- Import the 'ProductReviews' component after the other imports but before const ProductPage:
- Edit
-
Go to the root of the project where it was cloned ( you should see files like lerna.json, package.json) and from command line in this folder run "yarn run start". Once the server are up naviate to http://localhost:3000 and go to any PDP page.