Growave Integration Guide

Growave is the all-in-one marketing platform that empowers your Shopify store with product reviews, wishlists, loyalty programs, referrals, social login, and UGC. Here is the guideline to make Growave Integration with Boost Product Filter & Search app work.

About Growave

1

App Information

Help merchants to grow sales with loyalty & rewards, reviews, wishlist, and UGC.
App details: https://apps.shopify.com/growave

2

Growave Integration Benefit

Display a wishlist heart icon as well as reviews in product items.
Build the filter by rating

Demo for Growave Integration

Here are some of our customers' stores with our app and Growave 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 Wishlist for the product items

Edit your current theme.

Please go to the collection-template.liquid in your current theme

Add the fave label in the variable boostPFSThemeConfig like the image below:

Go to the boost-pfs-filter.js file in your current theme.

Copy the following snippet:

'{{itemWishlist}}' // For boost-pfs-filter.js
[[itemWishlist]] // For boost-pfs-filter-html.liquid

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

Growave code

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

Growave integration

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

// Add ssw wishlist
var itemWishlistHtml = '';
itemWishlistHtml += '<div class="ssw-faveiticon sswfaveicon{{itemId}}">' +
                        '<i data-product-id="{{itemId}}" data-count="0" class="ssw-icon-heart-o ssw-fave-icon ssw-wishlist-element ssw-not-synch"' +
                        'title="' + boostPFSFilterConfig.label.fave + '"' +
                        'data-params=\'{"product_id":"{{itemId}}","event":"fave_button","page":"product_profile"}\'></i>' +
                        '<span class="faves-count">...</span>' +
                     '</div>';
itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishlistHtml);

Build Review rating

Please go to Product Filter & Search -> Tool -> Metafields

Add the new metafields like the image below:

Namespace: ssw
Key: review

How to edit metafield to prepare for the integration

(Optional) Build a filter option by ratings/reviews.

Wait about 3 minutes for the syncs done before creating 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. Refer to this article for more details.

(Optional) Build Rating for the product items

Copy the following code snippet to your clipboard:

'{{sswReviews}}' + // For boost-pfs-filter.js

[[sswReviews]] // For boost-pfs-filter-html.liquid

Go to the boost-pfs-filter.js file, then find boostPFSTemplate which is the template of the product item after filtering, and paste the snippet in a place you want the Ratings to appear, for example, under the product price:

Growave codes

If the variable boostPFSTemplate does not exist in boost-pfs-filter.js, please check the file boost-pfs-filter-html.liquid:

Growave integrate

Add the below script to the ProductGridItem.prototype.compileTemplate function:

ProductGridItem.prototype.compileTemplate = function(data) {
	/***
	****
	***/
	// Add ssw review
	var ssw_count_rate = 0;
	var ssw_avg_rate = 0;
	var sswReviewsHtml = '';
	if (Utils.getProductMetafield(data, 'ssw', 'review') !== null) {
		var ssw_rate_data = Utils.getProductMetafield(data, 'ssw', 'review');
		ssw_rate_data = JSON.parse(ssw_rate_data);
		ssw_count_rate = ssw_rate_data['count'];
		ssw_avg_rate = ssw_rate_data['avg'];
	}
	sswReviewsHtml += '<div class="ssw-widget-avg-rate-listing ssw-stars ssw-stars-large ';
	if (ssw_count_rate == 0) {
		sswReviewsHtml += 'ssw-hide';
	}
	sswReviewsHtml += '">';
	var ssw_j = Math.floor(ssw_avg_rate);
	for (var i = 1; i <= ssw_j; i++) {
		sswReviewsHtml += '<i class="ssw-icon-star"></i>\n';
	}
	var ssw_rate_last_star = 5 - ssw_avg_rate;
	var ssw_y = Math.floor(ssw_rate_last_star);
	var ssw_x = ssw_avg_rate - ssw_j;
	if (ssw_x > 0.74) {
		sswReviewsHtml += '<i class="ssw-icon-star"></i>\n';
	} else {
	if (ssw_x > 0.24) {
		sswReviewsHtml += '<i class="ssw-icon-star-half-alt"></i>\n';
	} else {
		if (ssw_x > 0) {
			ssw_y = ssw_y + 1;
		}
	}
	}
	for (var j = 0; j < ssw_y; j++) {
		sswReviewsHtml += '<i class="ssw-icon-star-empty"></i>\n';
	}
	sswReviewsHtml += '<span class="ssw-review-count">(' + ssw_count_rate + ')</span>\n';
	sswReviewsHtml += '</div>';
	itemHtml = itemHtml.replace(/{{sswReviews}}/g, sswReviewsHtml);
}

If something goes wrong or the solution does not work, please contact us at support@boostcommerce.net.

VIEW MORE INTEGRATED APPS

Growave Integration Guide

In this article

About Growave

1 App Information

2 Growave Integration Benefit