Skip to main content

Integrate with 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:

Install LAI Product Reviews

Install Product Filter & Search by Boost Commerce


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.

img1

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:

img2

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.

img3

You’ll get the final result like this:

See demo https://harleyyshop.myshopify.com/collections/all

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:

'{{itemReviews}}' +

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:

img4

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:

[[itemReviews]]

For example, if you want the star ratings to display under the product title, paste that snippet under this code:

<div class="h4 grid-view-item__title product-card__title">[[itemTitle]]</div>

It should look like this:

img5

Step 2:#

In boost-pfs-filter.js file, search for ProductGridItem.prototype.compileTemplate

Then copy and paste this snippet there:

// Add reviewsvar itemReviewsHtml = "";if (  Utils.getProductMetafield(data, "scm_review_importer", "reviewsData") !== null) {  itemReviewsHtml +=    '<div class="scm-reviews-rate" data-rate-version2=' +    JSON.stringify(      JSON.parse(        Utils.getProductMetafield(data, "scm_review_importer", "reviewsData")      ).reviewCountInfo    ) +    ">";}itemHtml = itemHtml.replace(/{{itemReviews}}/g, itemReviewsHtml);

It should look like this:

img6

Then search for ProductList.prototype.afterRender,

Find this code line:

productSelector.addClass('grid grid--uniform grid--view-items')And paste this snippet under it:if(typeof SMARTIFYAPPS!== 'undefined' && SMARTIFYAPPS.rv.installed){    SMARTIFYAPPS.rv.scmReviewsRate.actionCreateReviews();}

It should look like this

img7

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

img8

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.

img9

You’ll get the final result like this:

img10