Product List Component

1. Overview

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

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

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

3. Settings in javascript

You can set these settings for the product list in boost-pfs-filter.js , like so

// Override Settings
var boostPFSFilterConfig = {
  general: {
    // Settings list
    limit: boostPFSThemeConfig.custom.products_per_page
    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.

4. How to customize

See: Product List Customization