❗️

Note

This content is from an earlier version of our software. It remains available for reference but may not reflect the most recent updates or features.
For the latest documentation, please go to Tweakwise JS + Plugin Studio.

To get started with the implementation of search and/or merchandising we will provide you with a personalized JavaScript file that is linked to your Tweakwise instance. This file contains instance specific configuration and customizations along with the base functionality of the plugin.

The only thing you have to do is import the file into your HTML and it will result in a fully working JS Implementation out-of-the-box.

💡

Important

Do you want to get started with the JS Implementation but you haven't yet received your personalized JavaScript file? Please contact Tweakwise Support.

Quick start

Follow the recipe to get a quick start or follow our installation guide.

Configuration

After the JS Implementation has been added to the page; 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 the JS Implementation 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 simply want to match on a different attribute please use the input option.

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 contents will be replaced with our Tweakwise JS HTML.

In case of Search, 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.

Important: Tweakwise JS will search for the HTML Element with an id tweakwise-output, for example:

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

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

📘

If your output already has another id or you simply want to match on a different attribute please use the output option.