LAI Docs
Search…
Product Filter & Search (Boost Commerce)
Product Filter & Search by Boost Commerce helps you create advanced & customizable filters for collections and search result pages.
First, please ensure that 2 apps were installed:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
The below document only works with the new frontend lib from Boost Commerce (the latest version)

Step 1: Enable the integration of LAI app

Please go to Product Filter & Search -> Tool -> Integration
Enable the LAI integration -> click on the Confirm button. By accepting it, the process will remove old integration data of LAI (if any) to use the newly selected app data for integration.
After the sync is completed, the star rating for products are automatically enabled.
By default, star ratings are placed under product titles. if you need to customize the position, please let us know via [email protected]
For example:
By default, star ratings are placed under product titles

Step 2: Set up the filter

By setting up this new filter, your customers can filter the product based on its star rating.
Go to the app's Homepage -> Manage Filter tree -> From a filter tree, click Add a filter option button -> Choose Review Ratings -> Click 2 Save buttons.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
If you are currently using the older version of Boost Commerce, kindly follow this instruction:

1. Set up the star ratings

Please log in to your store, then go to Online Store, click Edit code.

Step 1:

Search for boost-pfs-filter.js file, open it.
copy this snippet:
1
'{{itemReviews}}' +
Copied!
For example, if you want the star ratings to display under the product price, paste that snippet inside the block productGridItemHtml
It should look like this:
Could not load image
If you can not find the block productGridItemHtml in boost-pfs-filter.js, then go to boost-pfs-filter-html.liquid file and again search for productGridItemHtml
Copy this snippet:
1
[[itemReviews]]
Copied!
For example, if you want the star ratings to display under the product title, paste that snippet under this code:
1
<div class="h4 grid-view-item__title product-card__title">[[itemTitle]]</div>
Copied!
It should look like this:
Could not load image

Step 2:

In boost-pfs-filter.js file, search for ProductGridItem.prototype.compileTemplate
Then copy and paste this snippet there:
1
// Add reviews
2
var itemReviewsHtml = '';
3
if (Utils.getProductMetafield(data, 'scm_review_importer', 'reviewsData') !== null) {
4
itemReviewsHtml += '<div class="scm-reviews-rate" data-rate-version2=' + JSON.stringify(JSON.parse(Utils.getProductMetafield(data, 'scm_review_importer', 'reviewsData')).reviewCountInfo) + '>';
5
}
6
itemHtml = itemHtml.replace(/{{itemReviews}}/g, itemReviewsHtml);
Copied!
It should look like this:
Could not load image
Then search for ProductList.prototype.afterRender,
Find this code line:
1
productSelector.addClass('grid grid--uniform grid--view-items')
2
And paste this snippet under it:
3
if(typeof SMARTIFYAPPS!== 'undefined' && SMARTIFYAPPS.rv.installed){
4
SMARTIFYAPPS.rv.scmReviewsRate.actionCreateReviews();
5
}
Copied!
It should look like this:
Could not load image

2. Set up the filter

Please go to Product Filter & Search -> Tool -> Metafields
Add the new metafield with the following info:
Namespace: scm_review_importer
Key: reviewsData
Could not load image
Please wait a few minutes for the sync to finish. Then you can create a filter option by review ratings:
Go to the app's Homepage -> Manage Filter tree -> From a filter tree, click Add a filter option button -> Choose Review Ratings > Click 2 Save buttons.
Could not load image
You’ll get the final result like this:
Could not load image
Is this instruction helpful for you? Please vote below. Your feedback means a lot. Thanks so much 😊
Last modified 2mo ago