⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Overview
We have some functions to support rendering extra elements, binding extra events, etc. after filtering or rendering product list on collection/search pages
Because the DOM is rebuilt, these functions will be called every time product list is rendered to bind events again.
Callback after rendering Product List
What this is used for
Bind events/modify elements in product items, for example:
Product swatches events
Product image slider
Match product image's height
Re-call some functions for 3rd party integration like reviews, wishlist, multi-currency
When this is called
Called when rendering product list
This won't be called on page's first load, when product list is rendered from liquid
Except in some cases: See 1.2 of Product List Component
Commonly used fields
ProductList.prototype.afterRender = function() {
// The product list data returned from API
var data = this.data;
// Insert your custom code here to handle the product list
// Example: console.log(data);
};You can access the product list's data, settings, DOM element,... by this
this.$elementthis.datathis.settingsthis.children: these are the individual product items
You can use console.log or check your debugger for all attributes in this
Example usage
ProductList.prototype.afterRender = function() {
// Integrate Review Shopify
if (window.SPR && boostPFSThemeConfig.custom.show_product_review) {
window.SPR.initDomEls();
window.SPR.loadBadges();
}
};Another example: Integrate with BEST currency converter
Callback after filtering
What this is used for
Rendering extra element related to filter tree, that needs to be updated when the filter tree update for example:
Text for total number of products
Text for number of selected filter
Add extra clear all button anywhere on the page
Add extra apply all button anywhere on the page
When this is called
When filter tree is rendered
Filter tree is rendered on first load
Filter tree is rendered when filtering
Filter tree is not rendered again when changing sorting/pagination
Commonly used fields
Filter.prototype.afterRender = function() {
// The filter data returned from API
var data = this.data;
// Insert your custom code here to handle the filter data
// Example: console.log(data);
};You can access the product list's data, settings, DOM element, etc. by this
this.$elementthis.datathis.settingsthis.children: these are the individual product items
You can use console.log or check your debugger for all attributes in this
Example usage
Add a span to show total products text
Filter.prototype.afterRender = function(data) {
// Define totalProduct based on the number of products returned
var totalProduct = data.total_product + '<span> ' + boostPFSThemeConfig.label.items_with_count_other + '</span>';
// Check if there's exactly one product and update totalProduct accordingly
if (data.total_product == 1) {
totalProduct = data.total_product + '<span> ' + boostPFSThemeConfig.label.items_with_count_one + '</span>';
}
// Update the HTML of the .boost-pfs-filter-total-product element with totalProduct
jQ('.boost-pfs-filter-total-product').html(totalProduct);
};Add a text to show number of selected filters
Filter.prototype.afterRender = function() {
var count = 0;
// Sum the number of applied filter items from the first filter tree
this.filterTrees[0].filterOptions.forEach(function(filterOption) {
count += filterOption.numberAppliedFilterItems;
});
// Prepend the count of selected filters above the filter tree
// Assuming you need to target a specific element to prepend to, replace '' with the correct selector
jQ('.target-element-selector').prepend('<div>Selected filters: ' + count + '</div>');
};Add a clear all button outside of filter tree on mobile view
Filter.prototype.afterRender = function() {
// Append the 'clear all' button from the first filter tree to the designated container
jQ('.clear-all-button-container').append(this.filterTrees[0].clearAllButton.$element);
};
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].