In this section we will discuss how we can customize the UI/UX of the Autocomplete, Collection Pages, Search Result Page and Filters.
How Wizzy Renders on the Frontend?
Wizzy uses small components written in Mustache templates to render data on the frontend, such as:
- wizzy-search-results-product: This displays the Product component.
- wizzy-autocomplete-topproducts: This displays the Autocomplete top products component.
You can see the list of all available templates by clicking HERE.
All the parts of Autocomplete Menu, Search Results Page, Filters, Sort Options, Category Pages are rendered using Mustache templates.
You can override individual templates to extend the functionality or modify the UI/UX as per your needs., follow these steps to understand more.
Overriding Mustache Templates
Follow these steps to find the template and override it. Here we’ve taken an example to override Product’s Card on Search Results Page and Collection Pages.
Step 1: Find the Mustache Template
Visit our templates directory and find the template you want to override. Each template is divided by categories. Click on ‘Copy’ to Copy the code.
Step 2: Create a New File inside the “Snippets” Section (Avoid if already created)
Create a new file inside the snippets section with the name wizzy-templates. Paste the copied code.
Modify the template as per your need. You can add / remove particular HTML from the code, add your desired classes etc…
Once you’re done with your required modification, move to the next steps.
Step 3: Render the ‘wizzy-templates’
Render the above file into theme.liquid or any other relevant file like this. Put this after </body> or at the end of the file.
{% render 'wizzy-templates' %}
Data Modifications Before Render
Mustache templates are dynamic in nature, which renders dynamic data using variables.
For example, in the wizzy-search-results-product template you must have seen variables like [[name]], [[sellingPrice]], [[discount]] etc…
All these variables are coming in Wizzy JS. If you want to modify this data / add additional data for rendering you can use Wizzy Events.
Wizzy events are basically trigger points which are fired before data is sent for rendering, Allowing developers to modify / add / remove data as per their need.
Click Here to understand more on Wizzy events implementation.