• Home
  • Docs
    • User Manual
    • Magento 2 Manual
  • APIs
  • Back to Wizzy
  • Support
  • Home
  • Docs
    • User Manual
    • Magento 2 Manual
  • APIs
  • Back to Wizzy
  • Support
home/Knowledge Base/Magento 2 Manual/Setup

Theme Customization

18 views 0 March 17, 2023 naiteek

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

Was this helpful?

Yes  No
Related Articles
  • Skipped Entities
  • Queue Processors Status
  • Catalog Indexing & Queue
  • General Setup
  • Credentials Configuration
  • Installation
Leave A Comment Cancel reply

Setup
  • Theme Customization
  • Skipped Entities
  • Queue Processors Status
  • Catalog Indexing & Queue
  • General Setup
  • Credentials Configuration
  • Installation
Categories
  • Magento 2 Manual
    • Advanced Setup
    • Autocomplete Menu
    • Catalog Index Configuration
    • Search UI Customisation
    • Setup
  • Shopify Manual
    • Advance Setup
    • Attribute Configuration
    • Autocomplete Configuration
    • Catalog Index Configuration
    • Search Result Page Configuration
    • Setup
    • Troubleshooting
  • User Manual
    • Account
    • Analytics
    • Billing
    • Currencies
    • Developers
    • Stores
    • Synonyms
  • team@wizzy.ai
  • +91-9106141411
  • © 2023 Wizzy Softech Pvt. Ltd. All Rights Reserved