Skip to main content
For dev - Product List Component (App Lib V2)
Thomas Ta avatar
Written by Thomas Ta
Updated over 6 months ago

⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.


Overview

Structure

  1. 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 = false

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

Did this answer your question?