For Dev - Customization overview (App Lib V2)

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

In this article

  1. How customization works
  2. Commonly customized functions
  3. Functions for instant search

1. How customization works

  • Almost all functions in the minified JS files (boost-pfs-core.js, boost-pfs-core-instant-search.js) can be overridden, this allows for customizing code.
  • Override code goes in:
    • boost-pfs-filter.js for customizing filter-related functions (collection/search page)
    • boost-pfs-instant-search.js for instant search (all pages)

2. Commonly customized functions

We left out some empty functions commonly used for customization as below.

These functions will be called whenever an element is built into the DOM.

2.1. Functions for filter

Override compileTemplate function to return HTML string for each element.

Important:

  1. Use this.$element, this.data,... to access the component's data for rendering.
  2. The bindEvents function is optional, it is called after the component is rendered in the DOM. You can bind events here.
  • Product Items:
ProductGridItem.prototype.compileTemplate = function(){}
ProductListItem.prototype.compileTemplate = function(){} 
ProductCollageItem.prototype.compileTemplate = function(){}
  • Pagination:
ProductPaginationDefault.prototype.compileTemplate = function(){}
ProductPaginationDefault.prototype.bindEvents = function(){}
  • Other elements:
Breadcrumb.prototype.compileTemplate = function(){}

ProductDisplayType.prototype.compileTemplate = function(){}
ProductDisplayType.prototype.bindEvents = function(){}

ProductLimit.prototype.compileTemplate = function(){}
ProductLimit.prototype.bindEvents = function(){}

ProductSorting.prototype.compileTemplate = function(){}
ProductSorting.prototype.bindEvents = function(){}
  • Extra elements:
This function is called whenever re-render product list (won't call on first load) ProductList.prototype.afterRender = function(){};
	
This function is like the above function, but is called on first load Filter.prototype.afterRender = function(){};

2.2. Functions for instant search

SearchInput.prototype.customizeInstantSearch = function() {}

3. Example usage

// Customize product item
ProductGridItem.prototype.compileTemplate = function(data) {
	// See this product data (name, handle, product id,...)
	console.log(this.data);
	
	// The product item's HTML
	var itemHtml = '';
	
	// You code here to rebuild the product's HTML based on the product's data

	return itemHtml;
}
	
// Customize style of Suggestion box
SearchInput.prototype.customizeInstantSearch = function() {
  // See all attributes (data, DOM element,...) of the instant search
  console.log(this);
	
  var suggestionElement = this.$uiMenuElement;
  var searchElement = this.$element;
  var searchBoxId = this.id;

  // Your custom code here to customize the search elements
  // Example: append a <div> after the product's title
  suggestionElement.find('.boost-pfs-search-suggestion-product-title').append('<div></div>');
};

Related Articles