For dev - Product List Component (App Lib V2)

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

In this article

  1. Overview
  2. DOM element
  3. Settings in javascript
  4. How to customize

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

    Related Articles