Theme Customization

Once the basic functionality of search and autocomplete starts working, if you want more customization please go through the below sub-sections.

Purpose of css, events.js and template

By default, Wizzy comes with default UI/UX for Search, Filters, and Autocomplete UI. But to override the default UI and functionality events.js, CSS, and templates are used.

Modifying/Overriding Template

We use Mustache templates to render the search view on the frontend which can be viewed from here. The following templates are used to modify the view according to the requirement.

• Autocomplete
• Common
• Core
• Filters
• Search

Follow the below-mentioned steps to override templates

• Go to your Magento root directory and create a new directory named ‘Wizzy_Search’ inside the app/design/’your_theme’/ directory.

  For Example: app/design/Magento/Luma/Wizzy_Search

• Inside Wizzy_Search create a new directory ‘templates’.
• Further, inside the ‘templates’ create two directories ‘autocomplete’ and ‘search’, and place the template files in the respective directories.
  For Example: If you want to override autocomplete template then place it inside the ‘autocomplete’ directory.

  app/design/Magento/Luma/Wizzy_Search/templates/autocomplete/products.phtml

Modifying/Overriding JS

Follow the below-mentioned steps to override events.js

• Go to your Magento root directory and create a new directory named ‘Wizzy_Search’ inside the app/design/’your_theme’/ directory.

  For Example: app/design/Magento/Luma/Wizzy_Search

• Inside Wizzy_Search create a new directory named web/events. Place events.js inside the above-created directory.
• Finally, the events.js will look like this.

  app/design/Magento/Luma/Wizzy_Search/web/events/events.js

• Also, you can refer to the below code for further information.

     requirejs(['jquery'], function ($) {
          // Example of registering the events...
              wizzy.registerEvent(wizzy.allowedEvents.PRODUCTS_RESULTS_RENDERED, function (products) {
                  // Your logic goes from here...
                  return products;
              });
          });