Copy of Ratings and Review Add-on
Installation of Spurtcommerce Ratings and Review Add-On
This document will help you to install Ratings and Review add-on to your spurtcommerce server for single vendor as well as Multi vendor
you can install this Add-on through following steps
step 1: Setup an API (Step By Step) to add extension for admin
step 2: Admin setup
step 3: you can easily install admin storefront with store setup. spurtcommerce provides 3 admin storefronts, built with Angular, Flutter and React.
Along with the above steps you need to further follow these steps below to install this Add-on for Multi-vendor platform
step 4: Setup an API (Step By Step) to add extension for multi vendor
step 5 : Multi Vendor front end setup
step 6: you can easily install vendor storefront with store setup. spurtcommerce provides 3 vendor storefronts, built with Angular, Flutter and React.
About Addon :
The installation of Spurtcommerce Rating and Review Plugin helps to display the aggregate rating and review for products in the store. When this plugin is installed, the eCommerce site becomes ready for the Customers to post review about the product that they have purchased from the eCommerce store.
Features:
The Customer can provide a star rating.
The Customer can also add a comment along with the star rating.
Vendors and Admin can moderate the reviews.
Display of Reviews on the Storefront.
Display of number of 5 stars, 4 stars, 3 stars, 2 stars and 1s star ratings
Display of aggregate/overall rating.
For setting up the API, you need to execute the following steps:
Installing an extension
Run the application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Usually spurcommerce comes packed in a zip, whose name ends in "ratingandreview-addOn.zip". Extract the zip file, open api folder and open addon folder within that and copy the content of addon folder into the specified path.
Path - <PROJECT_ROOT>/addon
Step 2 : Run the application
After you have completed the installation of the above mentioned steps, you can run the application and also view the changes.
Once you execute the above command, add-on file will get integrated into the backend API.
Step 3 : Make the build
These are the steps that need to be followed for generating the build.
To run the below command
Then latest built files can be deployed into the server.
These are the steps that need to be followed to do the front end admin setup.
Installing an extension
Update the configuration
Module Detail
Run the application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Usually spurcommerce comes packed in a zip, whose name ends in "ratingand review-addOn.zip".
Extract the zip file and copy the content of admin/add-ons folder into the specified path
Path - admin/add-ons
Note:
Step 2 : Update the configuration
After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below.
Update Reducer Config
1) Import below line into the add-ons/add-ons-reducer.ts
2) Add the reducer into the below object
ratingReview: fromRatingReview.reducer,
3) After adding its looks like below
export const AddOnReducers: ActionReducerMap<State> = {
ratingReview: fromRatingReview.reducer,
};
Update State Config
1) Import below line into the add-ons/add-ons-state.ts
2) Add the state into the below object
ratingReview: RatingReviewState,
3) After adding its looks like below
export interface AddOnAppState {
ratingReview: RatingReviewState,
}
Step 3 : Change the routing file(cms.routing.ts)
Inside the src/theme/default/admin/cms/components/manage-content/manage.content.routing.ts
1)Import below line
Add these routes below the catalogRoutes array
2) For setting up the tab add this line in
src/theme/default/admin/cms/components/header/header.component.html
Below line no:35
Step 4 : Run the application
After you have integrated the Rating and Review Module into Spurtcommerce, you can use the following command to run the application.
Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.
Step 5 : Make the build
To run the below command
Then the latest built files can be deployed into the server.
These are the steps that need to be followed to do the front end store setup.
Installing an extension
Update the configuration
Module Detail
Run the application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Usually spurcommerce comes packed in a zip, whose name ends in "ratingand review-addOn.zip".
Extract the zip file and copy the content of store-angular/add-ons folder into the specified path
Path - store-angular/add-ons
Step 2 : Update the configuration
After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below.
Update Reducer Config
Import below line into the add-ons/add-ons-reducer.ts
Add the reducer into the below object
ratingReview: fromRatingReview.reducer,
After adding its looks like below
Update State Config
Import below line into the add-ons/add-ons-state.ts
Add the state into the below object
ratingReview: RatingReviewState;
After adding its looks like below
update effect config
Import below line into the add-ons/add-ons.effect.ts
Add the effect into the below object
After adding its looks like below
export const ADD_ON_EFFECT = [ RatingReviewEffect, ];
Update Component Config
Import below line into the add-ons/add-ons.shared.component.ts
Add the following components into the below object
After adding its looks like below
export const ADD_ON_COMPONENTS = [ RatingComponent, ReviewControlsComponent, ReviewComponent ];
Step 3 : Module Detail
The modules pertaining to ratings and reviews are listed below. You may use these modules, in any page of Spurtcommerce.
Also, you can find the steps below to use the modules in Ratings and Reviews in Spurtcommerce pages.
In the rating and review addon having three components.
RatingComponent
ReviewControlsComponent
ReviewComponent
RatingComponent
Directive
ReviewControlsComponent
Directive
In the above directive have one input fields
Review component
This is a one page component. You can configure the route for this component.
This component only works with orderProductID.
Because after placing the order only the user can give the rating.
Whatever application module you can configure this route. For eg
src/default/pages/account/account.module.ts import line;
Config this route in src/default/pages/account/account.module.ts inside route array add this following object
Step 4 : Run the application
After you have integrated the Rating and Review Module into Spurtcommerce, you can use the following command to run the application.
Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.
Step 5 : Make the build
To run the below command
Then the latest built files can be deployed into the server.
These are the steps that need to be followed to do the front end store setup.
Installing an extension
Update the configuration
Module Detail
Run the Application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Extract the store-flutter folder inside the folder go to (store-fluter → add-ons → RatingAndReview folder) and copy the RatingAndReview folder and place the copied folder
inside the project folder
Add on location:
projectFolder->lib->add-ons
After placing it it will look like this
projectFolder->lib->add-ons->RatingAndReview
Once you finish these steps continue to the next step
Step 2 : Update the configuration
After extracting the add on zip file for changing the configurations in addons.dart, you have to follow the steps below:
Go to
projectFolder->lib->add-ons->addonsshared.dart
Then inside addonsShared array paste the following content
{"ProductReview":SpurtProductRating(),"data":""},
After placing the above files it will look like this
List addonsShared = [ {"Rating": SpurtReviews(), "data":""},
{"ProductReview":SpurtProductRating(),"data":""},
];
Then give the following imports
import 'package:spurtcommerce/add_on/ratingsandreviews/ratings_reviews.dart';
Or
There will be a popup for quick fix
Step 3 : Module detail
After executing the above mentioned steps, we have to place these below lines in the core folder to show the rating and review to the user.
Detail rating and review
Once you finished updating the configuration then in the
projectFolder->lib->core->modules->detail->details.dart file update this line where you seem comfortable with paste this near 2554 line or below
Use this line for view the rating
findMyClass('Rating', { "productSlug": req["slug"],"rating":details["rating"],"id": productId}),
Post your rating and feedback
Use this line for post your rating and feedback
If you want to post your rating and feedback for your ordered products add the below line where you feel free in projectFolder->lib->core->modules->order->components->orderdetails.dart
findMyClass("ProductReview", {"orderdetail": orderDeatil}),
After insert the line restart your application and post your ordered products rating and feedback
Step 4 : Run the application
After integrating the Rating and Review Module into Spurt Commerce, you can use the following commands to run the application in terminal.
Or In Run menu select run without debugging
In case if throws any exception
$ flutter run –no-sound-null-safety
Once you execute the above command you can view the installed module in Spurt Commerce, within the page in which you have integrated
Step 5 : Make the build
In order to build, you need to run the following commands. In order to check the application, run the following commands and build the application.
If you want to split the abi then
For bundle build
These are the steps that need to be followed to do the front end store setup.
Installing an extension
Update the configuration
Run the application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Usually spurcommerce comes packed in a zip, whose name ends in "ratingand review-addOn.zip". Extract the zip file and copy the content of store-react/addOns folder into the specified path as given below
Path - addOns/RatingAndReview
Add on location:
projectFolder-> addOns
After placing it it will look like this
projectFolder->addOns-> RatingAndReview
Step 2 : Update the configuration
After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce addonsconfig.js files. For this, you need to follow the steps below.
Once you finish the first Step now declare the necessary plugins in the addonconfig.js file
Import below line into the addonconfig.js
Add the ReviewRation plugin into the below object
export const AddonsComponent={
SpurtRatingAndReview
}
Add the following component into the below AddonsComponent object:
`SpurtRatingAndReview`
`SpurtPartialReviews`
`SpurtRatingAndReviewFeedback`
After adding its looks like below:
export const AddonsComponent={
SpurtRatingAndReview ,
SpurtPartialReviews,
SpurtRatingAndReviewFeedback
}
Step 3 : Module Detail
The modules pertaining to ratings and reviews plugin are listed below. You may use these modules, you must send the product to use this module in any page of Spurtcommerce.
SpurtRatingAndReview Component:
{ConnectPlugin.SpurtRatingAndReview &&<ConnectPlugin.SpurtRatingAndReview product={product} />}
SpurtPartialReviews Component:
{ConnectPlugin. SpurtPartialReviews &&<ConnectPlugin. SpurtPartialReviews Productslug={Productslug} />}
SpurtRatingAndReviewFeedback Component:
{ConnectPlugin. SpurtRatingAndReviewFeedback &&<ConnectPlugin. SpurtRatingAndReviewFeedback orderId={orderId} />}
Step 4 : Run the application
After you have integrated the RatingandReview Module into Spurtcommerce, you can use the following command to run the application.
Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.
Step 5 : Make the build
To run the below command
Then the latest built files can be deployed into the server.
Setup an API (Step By Step) to add extension for Multi vendor
For setting up the API, you need to execute the following steps:
Installing an extension
Run the application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Usually spurcommerce comes packed in a zip, whose name ends in "vendorratingandreview-addOn.zip".
Extract the zip file and copy the content of api folder into the specified path
Path - <PROJECT_ROOT>/addon
Step 2 : Run the application
After you have completed the installation of the above mentioned steps, you can run the application and also view the changes.
Once you execute the above command, add-on file will get integrated into the backend API.
Step 3 : Make the build
These are the steps that need to be followed for generating the build.
To run the below command
Then latest built files can be deployed into the server.
These are the steps that need to be followed to do the front end vendor setup.
Installing an extension
Update the configuration
Module Detail
Run the application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Usually spurcommerce comes packed in a zip, whose name ends in "vendorratingandreview-addOn.zip".
Extract the zip file and copy the content vendor/add-ons folder into the specified path
Path - vendor/add-ons
Step 2 : Update the configuration add-ons/add-ons-reducer.ts
After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below.
Update Reducer Config
Import below line into the add-ons/add-ons-reducer.ts
Add the reducer into the below object
ratingReview: fromRatingReview.reducer,
After adding its looks like below
export const AddOnReducers: ActionReducerMap<State> = {
ratingReview: fromRatingReview.reducer,
};
Update State Config add-ons/add-ons-reducer.ts
Import below line into the add-ons/add-ons-state.ts
Add the state into the below object
ratingReview: RatingReviewState,
After adding its looks like below
export interface AddOnAppState {
ratingReview: RatingReviewState,
}
Update Effect Config
1) Import below line into the add-ons/add-ons.effect.ts
2) Add the effect into the below object
RatingReviewEffect
3) After adding its looks like below
export const ADD_ON_EFFECT = [
RatingReviewEffect,
];
Update Component Config
4) Import below line into the add-ons/add-ons.shared.component.ts
Add the following components into the below object
RatingreviewComponent
After adding its looks like below
export const ADD_ON_COMPONENTS = [
RatingreviewComponent
];
Step 3 : Module Detail
The modules pertaining to ratings and reviews are listed below. You may use these modules, in any page of Spurtcommerce.
Also, you can find the steps below to use the modules in Ratings and Reviews in Spurtcommerce pages.
In the rating and review addon having one component.
1) RatingreviewComponent
Add the below steps to configure routing
In src/app/default/pages/cms/manage-content/manage-content.module.ts
Import below line
2) Add these routes below the Routes and childrens
array
For setting up the tab add this line in
src/app/default/pages/cms/layout/products.component.html
Below line no: 37
Step 4 : Run the application
After you have integrated the Rating and Review Module into Spurtcommerce, you can use the following command to run the application.
Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.
Step 5 : Make the build
To run the below command
Then the latest built files can be deployed into the server.
These are the steps that need to be followed to do the front end store setup.
Installing an extension
Update the configuration
Module Detail
Run the application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Usually spurcommerce comes packed in a zip, whose name ends in "ratingand review-addOn.zip".
Extract the zip file and copy the content of store-angular/add-ons folder into the specified path
Path - store-angular/add-ons
Step 2 : Update the configuration
After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below.
Update Reducer Config
Import below line into the add-ons/add-ons-reducer.ts
Add the reducer into the below object
vendorRatingReview: fromVendorRatingReview.reducer,
After adding its looks like below
Update State Config
Import below line into the add-ons/add-ons-state.ts
Add the state into the below object
vendorRatingReview: VendorRatingReviewState,
After adding its looks like below
update effect config
Import below line into the add-ons/add-ons.effect.ts
Add the effect into the below object
VendorRatingReviewEffect,
After adding its looks like below
export const ADD_ON_EFFECT = [ RatingReviewEffect, ];
Update Component Config
Import below line into the add-ons/add-ons.shared.component.ts
Add the following components into the below object
VendorReviewControlsComponent,
After adding its looks like below
export const ADD_ON_COMPONENTS = [
VendorReviewControlsComponent,
];
Step 3 : Module Detail
The modules pertaining to vendor-rating and review are listed below. You may use these modules, in any page of Spurtcommerce.
Also, you can find the steps below to use the modules in Vendor-rating and review in Spurtcommerce pages.
In the vendorRatingAndReviews addon having one components.
1) VendorReviewControlsComponent,
VendorReviewControlsComponent
Directive
In the above directive have one input field
vendorId:numeric
Step 4 : Run the application
After you have integrated the Rating and Review Module into Spurtcommerce, you can use the following command to run the application.
Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.
Step 5 : Make the build
To run the below command
Then the latest built files can be deployed into the server.
These are the steps that need to be followed to do the front end store setup.
Installing an extension
Update the configuration
Module Detail
Run the Application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Extract the ratingandreview-addon.zip file and place the extracted files inside the add_on folder inside the project folder
Add on location:
projectFolder->lib->add-ons
After placing it it will look like this
projectFolder->lib->add-ons->RatingAndReview
Once you finish these steps continue to the next step
Step 2 : Update the configuration
After extracting the add on zip file for changing the configurations in addons.dart, you have to follow the steps below:
Go to
projectFolder->lib->add-ons->addonsshared.dart
Then inside addonsShared array paste the following content
{"ProductReview":SpurtProductRating(),"data":""},
After placing the above files it will look like this
List addonsShared = [ {"Rating": SpurtReviews(), "data":""}, {"ProductReview":SpurtProductRating(),"data":""},
];
Then give the following imports
import 'package:spurtcommerce/add_on/ratingsandreviews/ratings_reviews.dart';
Or
There will be a popup for quick fix
Step 3 : Module detail
After executing the above mentioned steps, we have to place these below lines in the core folder to show the rating and review to the user.
Detail rating and review
Once you finished updating the configuration then in the
projectFolder->lib->core->modules->detail->details.dart file update this line where you seem comfortable with paste this near 2554 line or below
Use this line for view the rating
findMyClass('Rating', { "productSlug": req["slug"],"rating":details["rating"],"id": productId}),
Post your rating and feedback
Use this line for post your rating and feedback
If you want to post your rating and feedback for your ordered products add the below line where you feel free in
projectFolder->lib->core->modules->order->components->orderdetails.dart
findMyClass("ProductReview", {"orderdetail": orderDeatil}),
After insert the line restart your application and post your ordered products rating and feedback
Step 4 : Run the application
After integrating the Rating and Review Module into Spurt Commerce, you can use the following commands to run the application in terminal.
Or In Run menu select run without debugging
In case if throws any exception
$ flutter run –no-sound-null-safety
Once you execute the above command you can view the installed module in Spurt Commerce, within the page in which you have integrated
Step 5 : Make the build
In order to build, you need to run the following commands. In order to check the application, run the following commands and build the application.
If you want to split the abi then
For bundle build
These are the steps that need to be followed to do the front end store setup.
Installing an extension
Update the configuration
Run the application
Make the build
Step 1 : Installing an extension
These are the steps that need to be executed for installation of the extension.
Usually spurcommerce comes packed in a zip, whose name ends in "ratingand review-addOn.zip". Extract the zip file and copy the content of store folder into the specified path as given below
Move RatingAndReview folder from addOns/RatingAndReview to
Path - <PROJECT_ROOT>/addOns
Add on location:
projectFolder-> addOns
After placing it it will look like this
projectFolder->addOns-> RatingAndReview
Step 2 : Update the configuration
After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce addonsconfig.js files. For this, you need to follow the steps below.
Once you finish the first Step now declare the necessary plugins in the addonconfig.js file
Import below line into the addonconfig.js
2. Add the VendorRatingReviews into the below object
export const AddonsComponent={
SpurtVendorRatingReviews,
SpurtvendorRatingAndReviewCount
}
Step 3 : Module Detail
The modules pertaining to VendorRating are listed below. You may use these modules, in any page of Spurtcommerce.
SpurtVendorRatingReviews Component:
{ConnectPlugin.SpurtVendorRatingReviews&&
<ConnectPlugin.SpurtVendorRatingReviews vendorId={vendorId} />}
SpurtvendorRatingAndReviewCount Component:
{ConnectPlugin.SpurtvendorRatingAndReviewCount && (
<ConnectPlugin.SpurtvendorRatingAndReviewCount
vendorId={data.vendorId}
/>
)}
Step 4 : Run the application
After you have integrated the RatingandReview Module into Spurtcommerce, you can use the following command to run the application.
Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.
Step 5 : Make the build
To run the below command
Then the latest built files can be deployed into the server.
Last updated