Here is the guide that helps you to customize your product items on a collection page with the help of Boost Product Filter & Search app.
When you install the filter, these files will be added to the theme assets folder:
bc-sf-filter-lib.js (Please don't unzip this file and modify it directly)
bc-sf-filter.js (If you do not find this file, please create a new one assets/bc-sf-filter.js)
bc-sf-filter.scss.liquid
Also, you can find the Asset files from this Zip package: https://bit.ly/2Tngo0C
Understand Product Item
After product filtering, the product item is rendered from the JavaScript code rather than the Liquid files of the theme.
In the bc-sf-filter.js file, you will find the product item template as below.
Attention
If the bcSfFitlerTemplate variable does not exist in bc-sf-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 bc-sf-filter-html.liquid
The above image is an example. Each theme will have a different template. You will find a function that builds the product item in the template below.
The data parameter is the data of a single product (JSON data type). The structure is just like the product Liquid object (Get more information about our API here):
The buildProductGridItem 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 code below, we replace the Title in the template by the product's title.
itemHtml = itemHtml.replace(/{{itemTitle}}/g, data.title);While modifying the template and the buildProductGridItem 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 bc-sf-filter.js file.
BCSfFilter.prototype.buildAdditionalElements = function(data, eventType) { // 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:
data: all products JSON data returned from the API
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 bc-sf-filter.scss.liquid file to overwrite the filter's styling.
Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.