For dev - Manual Setup Instruction for any theme (App Lib V2)

Please note below Manual Setup steps are only for Advanced Developer who is experienced in HTML, CSS, Liquid, Javascript.

Step 1: Upload asset files

• For setting up only filter feature, use the folder boost-pfs-filter
• For setting set up both filter and search feature, use the folder boost-pfs-filter-search

• All files in snippets folder into Snippets folder.
• All files in assets folder into Assets folder.

Step 2: Update theme.liquid file

{% include 'boost-pfs-style' %}

{% include 'boost-pfs' %}

Step 3: Update your collection template file (section/collection-template.liquid)

If your theme does not have this file, please use templates/collection.liquid instead

<script>
   // Declare boostPFSThemeConfig
var boostPFSThemeConfig = {
         label: {
             sorting: {% assign temp = 'collections.sorting.title' | t  %} {% unless temp contains 'translation missing'  %} {{ temp | json }} {% else %} "Sorting" {% endunless %},
             sorting_best_selling: {% assign temp = collection.sort_options[1].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Best Selling" {% endunless %},
             sorting_manual: {% assign temp = collection.sort_options[0].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Featured" {% endunless %},
             sorting_title_ascending: {% assign temp = collection.sort_options[2].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Alphabetically, A-Z" {% endunless %},
             sorting_title_descending: {% assign temp = collection.sort_options[3].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Alphabetically, Z-A" {% endunless %},
             sorting_price_ascending: {% assign temp = collection.sort_options[4].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Lowest Price" {% endunless %},
             sorting_price_descending: {% assign temp = collection.sort_options[5].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Highest Price" {% endunless %},
             sorting_date_ascending: {% assign temp = collection.sort_options[6].name %} {% unless temp == nil  %} {{ temp | json }} {% else %} "Date, Old to New" {% endunless %},
             sorting_date_descending: {% assign temp = collection.sort_options[7].name %} {% unless temp == nil  %} {{ temp | json }} {% else %} "Date, New to Old" {% endunless %},
             sorting_relevance: {% assign temp = 'collections.sorting.relevance' | t %} {% unless temp contains 'translation missing'  %} {{ temp | json }} {% else %} "Relevance" {% endunless %},
             sale: {{ 'products.product.on_sale' | t | json }},
             sale_price: {{ 'products.product.sale_price' | t | json }},
             sold_out: {{ 'products.product.sold_out' | t | json }},
             vendor: {{ 'products.product.vendor' | t |json }},
             regular_price: {{ 'products.product.regular_price' | t | json }},
             items_with_count_one: {{ 'collections.general.items_with_count.one' | t | json}},
             items_with_count_other: {{ 'collections.general.items_with_count.other' | t | json }},
             current_page: {{ 'general.pagination.current_page' | t | json }},
     },
         custom: {
             // Add custom value here
        products_per_page: 20,
        product_grid_class: '',
    }
   };// Declare Templates
var boostPFSTemplate = {
    'soldOutClass': ' sold-out',
    'saleClass': ' on-sale',
    'soldOutLabelHtml': {% render 'boost-pfs-filter-html', layout: 'soldOutLabelHtml' %},
    'saleLabelHtml': {% render 'boost-pfs-filter-html', layout: 'saleLabelHtml' %},
    'tagLabelHtml': {% render 'boost-pfs-filter-html', layout: 'tagLabelHtml' %},
    'vendorHtml': {% render 'boost-pfs-filter-html', layout: 'vendorHtml' %},
    // Grid Template
    'productGridItemHtml': {% render 'boost-pfs-filter-html', layout: 'productGridItemHtml' %},
    // For List View
    // List Template
    'productListItemHtml': {% render 'boost-pfs-filter-html', layout: 'productListItemHtml' %},
    // End For List View
    // Pagination Template
    'previousActiveHtml': {% render 'boost-pfs-filter-html', layout: 'previousActiveHtml' %},
    'previousDisabledHtml': {% render 'boost-pfs-filter-html', layout: 'previousDisabledHtml' %},
    'nextActiveHtml': {% render 'boost-pfs-filter-html', layout: 'nextActiveHtml' %},
    'nextDisabledHtml': {% render 'boost-pfs-filter-html', layout: 'nextDisabledHtml' %},
    'pageItemHtml': {% render 'boost-pfs-filter-html', layout: 'pageItemHtml' %},
    'pageItemSelectedHtml': {% render 'boost-pfs-filter-html', layout: 'pageItemSelectedHtml' %},
    'pageItemRemainHtml': {% render 'boost-pfs-filter-html', layout: 'pageItemRemainHtml' %},
    'paginateHtml': {% render 'boost-pfs-filter-html', layout: 'paginateHtml' %},
    // Sorting Template
    'sortingHtml': {% render 'boost-pfs-filter-html', layout: 'sortingHtml' %},
    // Show Limit Template
    'showLimitHtml': {% render 'boost-pfs-filter-html', layout: 'showLimitHtml' %},
    // Breadcrumb Template
    'breadcrumbHtml': {% render 'boost-pfs-filter-html', layout: 'breadcrumbHtml' %},
    'breadcrumbDivider': {% render 'boost-pfs-filter-html', layout: 'breadcrumbDivider' %},
    'breadcrumbItemLink': {% render 'boost-pfs-filter-html', layout: 'breadcrumbItemLink' %},
    'breadcrumbItemSelected': {% render 'boost-pfs-filter-html', layout: 'breadcrumbItemSelected'
 %},
};
</script>

<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>

<div class="boost-pfs-filter-tree boost-pfs-filter-tree-h"></div>

<div class="boost-pfs-filter-tree-mobile-button" ></div>

For example:

• If your product list looks like this:

<div>       {% for product in collection.products %}            {% include 'product-item' %}      {% endfor %}</div>	

• You could change it into:

<div class="boost-pfs-filter-products">  {% for product in collection.products %}    {% include 'product-item' %}  {% endfor %}</div>	

Note: After filtering, our app will render the products list by the Javascript code. This means you need to analyze the structure of the theme's product item in the file  assets/boost-pfs-filter.js  and update the new data to boost-pfs-filter-products.

Replace the Pagination block of the theme by our block:

<div class="boost-pfs-filter-bottom-pagination"></div><div class="boost-pfs-filter-load-more"></div>

Note: The default pagination and sorting of your theme do not work with our app. We need to replace the theme's pagination and sorting block by our blocks.

Replace the Sorting block of the theme by our block:

<div class="boost-pfs-filter-top-sorting"></div>

Step 4: Rebuild the products list after filtering

Step 5: Build pagination

• previousActiveHtml : the previous button when it is active (current page is greater than 1)
• previousDisabledHtml : the previous button when it is disabled (current page is greater than 1)
• nextActiveHtml : the next button when it is active (current page is not the last page)
• previousDisabledHtml : the next button when it is disabled (current page is the last page)
• pageItemHtml : the page numbers when it is not selected.
• pageItemSelectedHtml : the page numbers when it is selected.
• pageItemRemainHtml : three dots to show that there are a lot of pages.
• paginateHtml : the container of Pagination.

Step 6: Build Sorting option

• sortingHtml : the html of Sorting.

Step 7: Customise the styling

Go to assets/boost-pfs-custom.scss.liquid file and add your custom css.

Step 8: Customize JS with callback functions

Callback function after the filter API is called, and the filter tree is rendered on the DOM:

FilterResult.prototype.afterRender = function() { 	// The filter data returned from API	var data = this.data;		// Your code here}

Callback function after product list is rendered (this won't be called on page's first load, when product list is rendered from liquid)

ProductList.prototype.afterRender = function() { 	// The product list data returned from API	var data = this.data; 	// Your code here }