Product Compare Integration Guide

Product Compare app will help your store visitors to become customers by clearing their doubts with the right choice of product among your collection of products. Here is our guide for Product Compare integration with Boost Product Filter & Search app.

About Product Compare

1
App Information

2
About Product Compare Integration Benefit

  • Besides filtering products, shoppers can use the "Compare" checkbox in the product item to make the right decision.

Demo for Product Compare Integration with Boost

Here is our customer's store with our app and Product Compare integration.

Product Compare integration demo| Display Compare button


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.
1
Edit your current theme.
2
Copy the following code snippet to your clipboard:
'{{itemCompare}}' + // For boost-pfs-filter.js
[[itemcompare]] // For boost-pfs-filter-html.liquid
3
Go to the boost-pfs-filter.js file, then find productGridItemHtml and paste the snippet to where you want the Compare checkbox to appear, for example, above the product thumbnail:
Product Compare code

If productGridItemHtml variable does not exist, please check the file boost-pfs-filter-html.liquid

Product Compare code

4
Continue to copy the following function:
function buildCompareApp(data) {
  var html = '';
  var collectIdList = '';
  
  for (var i = 0; i < data.collections.length; i++) {
    collectIdList += data.collections[i]['id'];
    if (i < data.collections.length) {
      collectIdList += ',';
    }
  }
  
  // Add Compare
  html += '<label class="SPCMP_chk_lbl" style="display:none;">';
  html += '<input type="checkbox" class="SPCMP_Add " name="SPCMP_chk" spcmp_collids="' + collectIdList + '" spcmp_pid="' + data.id + '" spcmp_vid="' + data['variants'][0]['id'] + '">';
  html += '<span class="SPCMP_Add_span"></span>';
  html += '</label>';
  
  return html;
}

Then find the ProductGridItem.prototype.compileTemplate function and paste the script before "Add main attribute" comment:

itemHtml = itemHtml.replace(/{{itemCompare}}/g, buildCompareApp(data));
5
Call the initialization function of the app in the FilterResult.prototype.afterRender function.
if (SACMP_included == undefined) {
  var SACMP_included = false;
  if (SACMP_included == false) {
    if (typeof initSACMPJQuery != 'undefined') {
      initSACMPJQuery();
    }
  }
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us