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 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

• 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;
              });
          });

Modifying/Overriding Template

• 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