Smart Search gives e-commerce teams full control over a powerful, AI-driven search experience. Combine keyword and vector search, smart suggestions and intelligent filters to help visitors find the right products faster, reduce zero-result searches and turn search traffic into conversions.

To successfully implement Tweakwise Search 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 search

Then, make sure there is a page that can display the search results. For example, create a placeholder 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.

Next steps

In addition to search we recommend to add suggestions to guide the user to the right page. Follow the Suggestions guide.