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 params = new URLSearchParams(location.search);
    const listerPage = tweakwiseListerPage({
      query: params.get("tn_q"),
      output: "#tweakwise-output",
      cid: "10001"
    });

  });
</script>

<script>
  window['twn-starter-config'] = window['twn-starter-config'] || {};
  window['twn-starter-config'].navigation = window['twn-starter-config'].navigation || {};
  window['twn-starter-config'].navigation.output = "#tweakwise-output";
  window['twn-starter-config'].navigation.cid = "CID";
  // or in case of category tree:
  window['twn-starter-config'].navigation.cid = "1-10001-10001156"
</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
• 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.
• Classic only: 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.
• Classic only: 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.