Ali Reviews Integration Guide

Ali Reviews empowers 40,000 + Shopify stores to build social proof and maximize conversion rates by displaying reviews throughout buyer’s journey. Here is our guide for Ali Review integration with Boost Product Filter & Search.

About Ali Reviews

1
App Information

2
Ali Reviews Integration Benefit

  • Gain trust from visitors & trigger buying decisions by displaying reviews/ratings in the product item and using the rating filter option.
  • Get 10% off for all plans by using the coupon code "ALIREVIEWS10". This code is valid until December 2nd, 2020.

Demo for Ali Reviews integration with Boost

Here are some of our customers' stores with our app and Ali review integration.

Ali Reviews integration


Instruction

Attention: The current document only works with the new front-end lib from Boost Commerce. Please read this document first to know if you are using the latest version.

Build Rating for the product items

1
Please go to Product Filter & Search -> Integration -> Product reviews -> Ali review & turn on the setting:

Integration 1

2
Edit your current theme & go to the boost-pfs-filter.js in your current theme.
3
Copy the following snippet:
'<div product-id="{{itemId}}" class="arv-collection-boostcommerce arv-collection arv-collection--{{itemId}}">{{itemReviews}}</div>' + // For boost-pfs-filter.js

<div product-id="[[itemId]]" class="arv-collection-boostcommerce arv-collection arv-collection--[[itemId]]">[[itemReviews]]</div> // For boost-pfs-filter-html.liquid

Then paste it inside the block productGridItemHtml, where you want your Ratings to appear, for example, under the product price:

Code 1

If the variable productGridItemHtml does not exist in the boost-pfs-filter.js, please find it in the boost-pfs-filter-html.liquid

Code 2

4

Add the code below in the boost-pfs-filter.js

ProductGridItem.prototype.compileTemplate = function(data) {
  /*...*/
  // Add item reviews
  var itemReviewsHtml = '';
  if (data.review_ratings && data.review_ratings > 0) {
  	var itemReviewsHtml = '<input type="hidden" class="alr-rating" data-filled="alr-icon-star" data-empty="alr-icon-star" data-fractions="3" data-readonly value="' + data.review_ratings  + '"/>' +
      					'<span class="alrv-prod-rating__text">' + data.review_count + ' reviews</span>';
  }
  itemHtml = itemHtml.replace(/{{itemReviews}}/g, itemReviewsHtml);
  /*...*/
}

// Add additional feature for product list, used commonly in customizing product list
ProductList.prototype.afterRender = function(data, eventType) {
  /*...*/
  $(".alr-rating").rating();
  /*...*/
}
5

Everything should be good now:

Display

6

If you still not see the review, please try to force sync the data & check it again:

Sync

Build a filter option by rating/reviews

1
Please go to Product Filter & Search -> Integration -> Product reviews -> Ali review & turn on the setting:

Integration 1

2
Create the filter option by rating:
Filter option
3
Check it again on your store, everything should be good now:
Review rating
If something goes wrong, please contact us at support@boostcommerce.net.

Still need help? Contact Us Contact Us