StatusSupport
Developers
Tweakwise.comTweakwise AppContact

Suggestions

❗️

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.

Quick start

To get started with the Suggestions JS add the following snippet to the page. We recommend adding this snippet to the <head> of the HTML.

<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/suggestions.js" />
<script>
  window.tweakwiseFailover = function (src) {
    var script = document.createElement("script");
    script.async = true;
    script.src = src;
    document.head.appendChild(script);
  };
</script>
<script
  src="https://gateway.tweakwisenavigator.net/js/suggestions.js"
  data-failover="https://gateway.tweakwisenavigator.com/js/suggestions.js"
  onerror="window.tweakwiseFailover(this.dataset.failover)"
></script>

After the script has been added to the page you can initialize the Suggestions JS. To do this; copy the following snippet to the page.

<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.tweakwiseSuggestions({
      input: "INPUT",
      instancekey: "INSTANCEKEY",
      cid: "CID"
    });
  });
</script>

The only thing that is left is to replace INPUT, INSTANCEKEY and CID with the correct values.

The INPUT should be replaced with a valid CSS selector leading to an existing search input on the page. This input will be used as the source for the suggestions.

The INSTANCEKEY should be replaced with your own instance key. You can find it in the Tweakwise App under Connectivity > Endpoints.

The CID should be replaced with the root category ID of the search results.

📘

Multiple search bars

If you have multiple search bars where you want to use the suggestions plugin (i.e. one for desktop and one for mobile), you can initialize the script twice. One for each input element.


Search phrase suggestions

The Suggestions JS supports search phrase suggestions out-of-the-box. However, when using search phrases grouped by category additional configuration may be required. When the user selects a search phrase with a category, the category id will be added to the query string of the target URL:

/search?q=searchphrase&tn_cid=100012

By default tn_cid is used to add the category id to the URL. However, it is possible to override this value:

<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.tweakwiseSuggestions({
      input: "INPUT",
      instancekey: "INSTANCEKEY",
      cid: "CID",
      
      searchPhrases: {
        categoryKey: "tn_cid" // <-- Configure the URL key here
      }
    });
  });
</script>

Category & facet suggestions

The Suggestions JS does not support category and facet suggestions out-of-the-box. Instead, additional configuration is required. For both types a JavaScript function should be implemented containing the logic that should occur when the user clicks on one of these suggestions.

<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.tweakwiseSuggestions({
      input: "INPUT",
      instancekey: "INSTANCEKEY",
      cid: "CID",
      
      categories: {
        handle: function (event) {
          var suggestion = event.data;
          
          // Handle category suggestion here...
        }
      },
      
      facetFilters: {
        handle: function (event) {
          var suggestion = event.data;
          
          // Handle facet suggestion here...
        }
      }
    });
  });
</script>

Please note that if the handle option is not defined, the corresponding type of suggestions will not be shown.

Product suggestions

The Suggestions JS supports product suggestions out-of-the-box. For this type of suggestions no additional configuration is needed.

Redirects

The Suggestions JS supports redirects out-of-the-box. Whenever the user selects a search phrase that is associated with a redirect, the user will be redirected to the configured page.

Need more control?

Consider integrating Suggestions using API.