StatusSupport
Developers
Tweakwise.comTweakwise AppContact

Instant Search

The Search & Merchandising Plugin can be used to implement a standardized version of Tweakwise Search in your platform.

🔗 View live demo of Search & Merchandising

Implementation

The first step in implementing the Search & Merchandising Plugin is getting the search pages to work. When the Plugin is loaded, it will start looking for an input and an output.

Input

The input is the existing text field on the page that users use to search for products. By default Tweakwise JS will look for an HTML Input Element with an id of tweakwise-input. Such an element could look like this:

<input type="text" name="search" id="tweakwise-input" />

Please make sure that your search input has the tweakwise-input id.

💡

If your search input already has another id or you want to match on a different attribute you can change this in the settings of the Search & Merchandising Plugin.

Output

The output is an existing element on the page that contains all content that should be replaced with the search results when the user enters a search term. This can be any element, also containing existing content.

The search results container acts as a temporary overlay on top of the content of the page. After searching the user will be able to close the overlay and view the original page content.

By default Tweakwise JS will look for an HTML Element with an id tweakwise-output. Such an element could look like this:

<div id="tweakwise-output">
  <!-- ... -->
</div>

Please make sure that the container you want to use has the tweakwise-output id.

📘

If your output already has another id or you want to match on a different attribute you can change this in the settings of the Search & Merchandising Plugin.

Good to know

  • We recommend adding this snippet above the snippet that imports Tweakwise JS. This makes sure that the config is taken into consideration when initializing the plugin.
  • By default the product lister page will use the same output as the search results. If you want to use a different output container for the product lister page, this can be configured in the settings of the Search & Merchandising module.