How to customize product item on collection page (App Lib v2)

When installing the filter, you will find the 2 following files, which are used for customization:

  • assets/boost-pfs-filter.js
  • assets/boost-pfs-custom.scss.liquid

Also, you can find the Asset files from this Zip package: https://bit.ly/BoostManualSetupAssets.

For a complete list of files installed on your theme, please refer to this article.

Understand Product Item

After filtering, the product item is rendered from the JavaScript code rather than the Liquid files of the theme.

In the boost-pfs-filter.js file, you will find the product item template as below.

Attention

If the boostPFSTemplate variable does not exist in boost-pfs-filter.js, please look at the collection.liquid or collection-template.liquid. In this case, the main code of the product item layout will be in the boost-pfs-filter-html.liquid

The above image is just an example. Each theme will have a different template. You will find a function which builds the product item in the template below:

The function is named ProductGridItem.prototype.compileTemplate

The data parameter is the data of a single product (JSON data type). The structure is similar to the product Liquid object (Get more information about our API here):

https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/59a29a63042863033a1c5260/file-tKsPpnVzal.png

The ProductGridItem.prototype.compileTemplate function will build the product HTML code based on the mentioned template. In the function, you will find that we replace the variables in the template with the product JSON data. For example, in the below code, we replace the Title in the template with the product's title.

itemHtml = itemHtml.replace(/{{itemTitle}}/g, data.title);

While modifying the template and the ProductGridItem.prototype.compileTemplate function, you could customize the display and the function of the product item as you wish.


Custom functions after an Ajax call (Callback function)

To run any function after filtering, you could add the function to the end of the boost-pfs-filter.js file.

Callback function after the filter API is called, and the filter tree is rendered on the DOM:

FilterResult.prototype.afterRender = function() {
 var data = this.data;
 // Your code here
}

Callback function after product list is rendered (this won't be called on page's first load when product list is rendered from liquid):

ProductList.prototype.afterRender = function() {
  var data = this.data;
  // Your code here
}

In the function, you could call the custom functions you need to run after the Ajax call. We also add two parameters for you:

  • this.data: all products JSON data returned from the API
  • this.eventType: the event leads to the filtering, from the Back, Forward button, or from a selection of the filter.

Custom Styling CSS

You could add the custom CSS styling code at the end of the boost-pfs-custom.scss.liquid file to overwrite the filter's styling.

Still need help? Contact Us Contact Us