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.
In this article
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
Please go to the collection-template.liquid in your current theme
Add the fave label in the variable boostPFSThemeConfig like the image below:
'{{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:
If the variable productGridItemHtml does not exist in the boost-pfs-filter.js, please find it in the boost-pfs-filter-html.liquid
// 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
(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
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.