Flair Product Badges & Banners Integration Guide

Here is the guide for Flair Product Badges & Banners Integration with Boost Product Filter & Search app.

About Flair Product Badges & Banners

1
App Information

  • Flair Product Badges & Banners makes it easy to promote products and promotions so customers will take notice, which should translate to more profit.
  • App details: https://apps.shopify.com/flair

2
Integration Benefits

  • The integration between Flair and Boost Product Filter & Search increases sales by showing product labels, badges & banners in the product item while filtering.

Demo of Flair Product Badges & Banners Integration

Here are some of our customers' stores with our app and Flair Product Badges/Labels integration.

Flair 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.
1
Please make sure to turn on the Javascript API in Flair setting:

Flair settings Javascript API
2

Copy the following snippet & choose the position of Flair item:

Please check if the file  boost-pfs-filter-html.liquid file is available in your source code, if yes, please copy the following:
[[itemFlairHtml]]

If not, please take the below code instead

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

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

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

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

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

3

Go to the  boost-pfs-filter.js file in your current theme & copy the following snippet:

Add the below script to the  ProductGridItem.prototype.compileTemplate function:
ProductGridItem.prototype.compileTemplate = function(data) {
	/*** Add the code at the end of function before the close bracket ****/
	var itemFlairHtml = '<div data-flair-product-id="' + data.id.toString() + '"></div>';
    	itemHtml = itemHtml.replace(/{{itemFlairHtml}}/g, itemFlairHtml);
	// Add main attribute (Always put at the end of this function)
	/***
	****
	***/
}

Add the below script to the  ProductList.prototype.afterRender function:

ProductList.prototype.afterRender = function (data) {
  /*** Add the code at the end of function before the close bracket ****/
  if (typeof FlairApp !== 'undefined' && FlairApp) { FlairApp.refreshProductBadges(); }
  /*****************/
};

Add the below script to the ProductList.prototype.afterRender function: