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 Product Badges & Banners Integration

Flair Integration

Flair integrates Filter


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

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

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

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

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:

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

ProductGridItem.prototype.compileTemplate = function(data) {
	/***
	****
	***/
	
	var itemFlairHtml = '<div data-flair-product-id="' + data.id + '"></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) {
  /*****************/
  if (typeof FlairApp !== 'undefined' && FlairApp) {
        var productIds = data.map(function (value, index) { return value.id });
        FlairApp.getProductBadgesMulti({ 
        "ids" : productIds 
        }).then(function(badges) {
        var FlairHTMLWrapper = jQ.parseHTML(badges);
        for (var i = 0; i < productIds.length; i++) {
            var selector = Selector.products + ' [data-flair-product-id="' + productIds[i] + '"]';
            var productBadges = jQ(FlairHTMLWrapper).find('[data-product-id="' + productIds[i] + '"]');
            jQ(selector).html(productBadges)
        }
        })
    }
  /*****************/
};

Still need help? Contact Us Contact Us