⚠️ For how our app's customization works, please read: Customization overview
To understand how product item works, please read: Product List Component
This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Functions to override
Override function ProductGridItem.prototype.compileTemplate and ProductListItem.prototype.compileTemplate (if any) in boost-pfs-filter.js
ProductGridItem.prototype.compileTemplate = function(data) {
// Use existing data or the default from this instance
if (!data) data = this.data;
// Retrieve the HTML template for the product grid item
var itemHtml = boostPFSTemplate.productGridItemHtml;
// Access theme settings from global configuration
var themeSettings = boostPFSThemeConfig;
// Insert your custom code here
//...
// Return the compiled HTML
return itemHtml;
};data: the product data returned from filter API.itemHtml: the product item HTML rebuilt based on the databoostPFSTemplate: the HTML template declared at the end ofsections/collection-template.liquidorsections/collection-template-boost-pfs-filter.liquidboostPFSThemeConfig: the theme config, declared at the end ofsections/collection-template.liquidorsections/collection-template-boost-pfs-filter.liquid
Example use case
In the boost-pfs-filter.js file, you will find the product item template as below.
⚠️ If the boostPFSTemplate variable does not exist in boost-pfs-filter.js, please look at 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):
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.
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].