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 CSS
Follow the below-mentioned steps to override CSS
- 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 new a directory ‘web/core’.
- Place CSS related autocomplete in ‘wizzyAutocomplete.css’ and ‘wizzySearch.css’.
For Example: a. app/design/Magento/Luma/Wizzy_Search/web/core/wizzyAutocomplete.css b. app/design/Magento/Luma/Wizzy_Search/web/core/wizzySearch.cs
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