Search + Suggestions

To successfully implement Tweakwise Search & Merchandising with Suggestions, there are a couple of steps to be followed:

• Installation
• Implement Suggestions.
• Implement Search

Installation

Make sure you have followed the Installation guide.

Implement suggestions

To start, suggestions can be implemented by following the Suggestions guide, for example:

<script>
  window.addEventListener("twn.suggestions.ready", function () {
    window.tweakwiseSuggestions({
      input: "#tweakwise-input",
      cid: "10001"
    });
  });
</script>

Implement search

Then, make sure there is a page that can display the search results. For example, create an empty page on /search. On that page, the search results can be initialized by calling the tweakwiseListerPage method:

<script>
  window.addEventListener('twn.starter.ready', function () {

    const listerPage = tweakwiseListerPage({
      query: location.search["tn_q"],
      output: "#tweakwise-output"
    });

  });
</script>

Notes:

• Replace tn_q with the queryparameter that represents your search term in the querystring.
• Replace output with the container you want to target

Classic implementation

Enabling the product lister page is as easy as adding a couple of lines of JavaScript code. To do this, we need to extend the twn-starter-config configuration object.

<script>
  window['twn-starter-config'] = window['twn-starter-config'] || {};
  window['twn-starter-config'].navigation = window['twn-starter-config'].navigation || {};
  window['twn-starter-config'].navigation.cid = "CID"
	// or in case of category tree:
  window['twn-starter-config'].navigation.cid = "1000-1001-1004"
</script>

Notes:

• Replace the CID with the ID of the category you want to show.
  This ID should be known in Tweakwise, as provided through the feed or Backend API.
• In case you don't want to show a product lister page, the "CID" can be set to null or undefined. This is useful on for example the home page.
• When configured correctly, Tweakwise JS will replace the output container with a product lister page for the specified category. This will happen immediately after the HTML page is loaded.