⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Overview
Structure
In sections/collection-template-boost-pfs-filter.liquid
Includes boost-pfs-filter-pagination.liquid, boost-pfs-filter-product-item.liquid, boost-pfs-filter-product-item-list.liquid
Build the product items on first load (before filtering)
The names might be different depending on the theme.
Includes file snippets/boost-pfs-filter-html.liquid
This file has template (without data) to rebuild product item HTML.
The data in
[[ ]]brackets are product data, will be replaced later by data from filter API.Replace the
[[ ]]brackets with{{ }}, and load the snippet as string into the JS var boostPFSTemplate at the end of collection-template-boost-pfs-filter.liquid
Load theme settings into the JS var boostPFSThemeConfig
In assets/boost-pfs-filter.js
Reads the boostPFSThemeConfig and boostPFSTemplate variables to ****rebuild product item after filtering.
After filtering, the product item is rendered from the JavaScript code rather than the Liquid files of the theme.
In the boost-pfs-filter.js file, you will find code to rebuild product item. You can also customize it: Product List Customization
How it runs
The product list is rebuilt when:
Filtering products
Changing sorting, pagination, display type (grid/list)
On first page load IF:
Setting
loadProductFirst = falseOR if the products from filter API returns different than product in Shopify's liquid.
This happens when settings like "sort available product first" or "hide sold out products" are enabled
DOM element
Product List Component binds events and renders the product list on .boost-pfs-filter-products on collection/search page
For example: You will find a div with class boost-pfs-filter-products in sections/collection-template-boost-pfs-filter.liquid or sections/collection-template.liquid
<div class="boost-pfs-filter-products"></div>
Settings in javascript
You can set these settings for the product list in boost-pfs-filter.js , like so
// Override Settings
var boostPFSFilterConfig = {
general: {
limit: boostPFSThemeConfig.custom.products_per_page, // Settings list limit
loadProductFirst: true,
styleScrollToTop: 'style2'
}
};
In Admin: means that this setting is available to end-user in the App > Product Filter & Search page in Shopify
Product List Settings
Name | Type | Values | Default | Description |
loadProductFirst | boolean | true, false | False | true: on first load, render products by our app. false: on first load, don't do anything, show products by Shopify liquid. |
enableKeepScrollbackPosition | boolean | true, false | true | Scroll to the previous position after going back from Product page. Need to set paginationTypeAdvanced = true. |
How to customize
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].