Search + Suggestions

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

• Installation
• Reset the Tweakwise Config.
• Implement Suggestions.
• Set-up a Search Results page.
• Add Merchandising in the mix.

Installation

Make sure you have followed the Installation guide.

Reset the Tweakwise Config

Out of the box, the Search & Merchandising Plugin will start looking for an input and an output.

To prevent this unwanted behavior, we need to let the plugin know that it does not have to do this. This can be done by resetting the twn-starter-config configuration object:

<script>
 	// reset instant search
	window["twn-starter-config"] = window["twn-starter-config"] || {};
	window["twn-starter-config"].input = null;
</script>

Implement Suggestions

Next, Tweakwise Suggestions can be implemented by following the Suggestions guide.

Set-up a Search Results page

In your platform, make sure there is a page that can act as the search results page. In the searchPhrases.handle hook, redirect to the designated search page. For example /search:

window.addEventListener("twn.suggestions.ready", function () {

  window.tweakwiseSuggestions({
    //..
    searchPhrases: {
      handle: ({ data }) => {
        location.href = '/search/#twn|?tn_q=' + data.match;
      }
    }
  });
  
});

Next, on the designated search page, make sure the tw-starter config is initialized with the correct category id, so search results can be displayed:

window["twn-starter-config"].cid =  'your-root-category-id';

Note: the your-root-category-id needs to be replaced by the of the category you want to search in. This ID should be known in Tweakwise, as provided through the feed or Backend API.

Additional configuration

Check the Search & Merchandising Options section to configure additional options.

Note: these settings will override all configuration done in Plugin Studio.

Auto vs Manual initialization

Out of the box, Tweakwise JS will start looking for an input, output and start initializing the plugin.

💡

If you need more control, see Manual initialization