Skip to content

Search Preview Extension

The search preview extension leverages Miva Merchant search field built in functions to aid in the search appearance and functionality. Use this class to style and extend the search preview functionality.

Installation

Note: This class is pre-installed and loaded asynchronously with Genesis out of the box.

The search preview extension uses the waitForExpression helper function - which evaluates an expression (every 200 milliseconds) until true or until the maximum wait time is reached (5000 milliseconds); then runs a callback function on success or error. See wait for expression.

Asynchronously import the searchPreview theme extension file in your Global.js file.

// Global.js
// Register the init function within the constructor

this.initSearchPreview();

Example Usage

.js

Preferred asynchronous initialization:

async initSearchPreview () {
    await import('extensions/search-preview');
}

The search preview class works the following way:

  • onMenuAppendItem: Creates a HTML span tag for every search result that is returned with the class of g-search-preview__entry.
  • onMenuAppendStoreSearch: Appends a search term hyperlink to the end of the search preview list, which takes you to the search page with the corresponding search results.
  • onFocus: Toggles the visibility of the search preview dropdown when the user focuses on the search field input.
  • onBlur: Toggles the visibility of the search preview dropdown when the user blurs on the search field input.
  • Event_ESC: closes/hides the search preview dropdown when the ESC keyboard event is triggered.