⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
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.jsfor customizing filter-related functions (collection/search page)boost-pfs-instant-search.jsfor instant search (all pages)
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.
Functions for filter
Override compileTemplate function to return HTML string for each element.
Important:
Use this.$element, this.data,... to access the component's data for rendering.
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(){};
Functions for instant search
SearchInput.prototype.customizeInstantSearch = function() {}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 = '';
// Your 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 elements, etc.) of the instant search
console.log(this);
// Accessing elements
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>');
};
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].