⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance. Please note below Manual Setup steps are only for Advanced Developer who is experienced in HTML, CSS, Liquid, Javascript.
Upload asset files
1. Download and extract the Asset files from this Zip package: https://bit.ly/BoostManualSetupAssets
For setting up only filter feature, use the folder
boost-pfs-filterFor setting set up both filter and search feature, use the folder
boost-pfs-filter-search
2. Upload the following files:
All files in snippets folder into Snippets folder.
All files in assets folder into Assets folder.
Update theme.liquid file
1. Go to Layouts folder and open theme.liquid file.
2. Before the </head> tag, add the following script:
{% include 'boost-pfs-style' %}3. Before the </body> tag, add the following script:
{% include 'boost-pfs' %}Update your collection template file (section/collection-template.liquid)
⚠️ If your theme does not have this file, please use templates/collection.liquid instead)
1. Copy all content below and paste it to the bottom of the file.
The usage of this script is to get Settings of your current theme and the translation texts from Liquid files, then use them in the Javascript file to rebuild the elements in the Collection page.
<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 %},
// More sorting options follow a similar pattern...
},
custom: {
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' %},
// More template rendering follows a similar pattern...
};
</script>
2. Add the Filter Tree block into the area you would like to display the Filter Tree:
Vertical filter tree in desktop display <div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>
Horizontal filter tree in desktop display <div class="boost-pfs-filter-tree boost-pfs-filter-tree-h"></div>
Refine by button in mobile display <div class="boost-pfs-filter-tree-mobile-button" ></div>
3. Rebuild the Product list after filtering (See more at Step 4):
Put the class boost-pfs-filter-products to the container of the product loop.
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>
⚠️ 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.
4. Build the Pagination block (See more in Step 5)
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>
⚠️ 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.
5. Build the Sorting block
Replace the Sorting block of the theme by our block:
<div class="boost-pfs-filter-top-sorting"></div>
Rebuild the products list after filtering
1. Go to snippets/boost-pfs-filter-html.liquid file, find productGridItemHtml and you will see our sample of a product item's HTML template.
2. Rebuild the template based on the theme's product item in the liquid file (usually in Snippets folder)
3. Go to ProductGridItem.prototype.compileTemplate function and apply our API data.
Build pagination
1. Go to snippets/boost-pfs-filter-html.liquid file, find the Pagination Template as below:
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.
2. Rebuild the template to match with the theme's Pagination in the function ProductPaginationDefault.prototype.compileTemplate, and bind pagination events in ProductPaginationDefault.prototype.bindEvents.
Build Sorting option
1. Go to snippets/boost-pfs-filter-html.liquid file, find the Sorting Template as below:
sortingHtml: the html of Sorting.
2. Rebuild the template to match with the theme's Sorting in the function ProductSorting.prototype.compileTemplate, and bind sorting events in ProductSorting.prototype.bindEvents.
Customize the styling
Go to assets/boost-pfs-custom.scss.liquid file and add your custom css.
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
};
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].