Skip to main content
All CollectionsTechnical GuidelinesApp CustomizationOverview
For Dev - Customization overview (App Lib V2)
For Dev - Customization overview (App Lib V2)
Thomas Ta avatar
Written by Thomas Ta
Updated over a week ago

⚠️ 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.js for customizing filter-related functions (collection/search page)

    • boost-pfs-instant-search.js for 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:

  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(){};

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].

Did this answer your question?