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.
• Connect Suggestions to the 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 behaviour, 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;
      }
    }
  });
  
});

Connect Suggestions to the Search Results Page.

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.

Add Merchandising in the mix

The Search & Merchandising Plugin can also take over the category pages (or product lister pages) in your platform and show a Tweakwise product lister page instead.

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 with the navigation section:

window["twn-starter-config"] = {
  cid: 'your-root-category-id',
  navigation: {
    cid: 'your-category-id',
    output: "#tweakwise-output",
 	}
}

Note: your-root-category-id needs to be replaced by the of the category you want to search in, your-category-id need to be replaced with the ID of the category you want to show. These 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 page is loaded.

Additional configuration

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

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