Skip to main content
All CollectionsTechnical GuidelinesApp CustomizationExtra Elements or Functions
For Dev - Callbacks after rendering products on collection/search page (App Lib V2)
For Dev - Callbacks after rendering products on collection/search page (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.


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.$element

  • this.data

  • this.settings

  • this.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();
}
};

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.$element

  • this.data

  • this.settings

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

Did this answer your question?