Color Swatch Pug Integration Guide

Here is the guide for Color Swatch Pug Integration with Boost Product Filter & Search app.

About Color Swatch Pug

App Information
Integration Benefit
  • After integrating Color Swatch Pug with Boost Product Filter & Search app, merchants can display swatches based on their requirements in product items.

Demo of Color Swatch Pug Integration

We have not yet received any request to integrate with Color Swatch Pug. However, it should be exactly like in the screenshot.

Collection Swatch Pug Integration


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.

Access the link https://xxx/tools/csp/csp.js?shop=xxx (xxx being your store tenant id), copy and minify the whole content

Go to the boost-pfs-filter.js file in your current theme.
Copy the following snippet:
/* add product-selector attr */
product-selector="{{itemId}}" + /* For boost-pfs-filter.js */
product-selector="[[itemId]]" /* For boost-ofs-filter-html.liquid */

Then paste it inside the block  productGridItemHtml, for example:

Collection Swatch Pug CodeIf  productGridItemHtml variable does not exist, please check the file boost-pfs-filter-html.liquid

Pug Integration


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

/* remove body class */
ProductList.prototype.afterRender = function(data) {
  window.dispatchEvent( new Event('csp:render:swatches') );