For Dev - Product List Customization (App Lib V2)

For how our app's customization works, please read: Customization overview

To understand how product item works, please read: Product List Component

1. Functions to override

Override function ProductGridItem.prototype.compileTemplate and ProductListItem.prototype.compileTemplate (if any) in boost-pfs-filter.js

ProductGridItem.prototype.compileTemplate = function(data)
 {
	if (!data) data = this.data;
	// Get Template	var itemHtml = boostPFSTemplate.productGridItemHtml;
		// Get the theme settings
	var themeSettings = boostPFSThemeConfig;
		// You custom code here	//...
	return itemHtml;}

• data: the product data returned from filter API.
• itemHtml: the product item HTML rebuilt based on the data
• boostPFSTemplate: the HTML template declared at the end of sections/collection-template.liquid or sections/collection-template-boost-pfs-filter.liquid
• boostPFSThemeConfig: the theme config, declared at the end of sections/collection-template.liquid or sections/collection-template-boost-pfs-filter.liquid

2. Example use case

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):

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.