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.

Go to Plugin Studio > Search & Merchandising settings. In the Advanced tab, check the Auto-initialization section. Make sure the toggle is set to off.

Set-up a searchresults page

In your platform, make sure there is a page that can display the search results. For example, create an empty page on /search.

On this page, make sure the search results are displayed using tweakwiseListerPage method:

<script>
  window.addEventListener('twn.starter.ready', function () {

    var hasQuery = location.search.indexOf('tn_q=') !== -1;
    var categoryId = `{{id}}`;

    const listerPage = tweakwiseListerPage({
      history: 'query',
      query: hasQuery ? location.search['tn_q'] : null
    });

  });
</script>

Implement Suggestions

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

Example: a very simplified way to display suggestions connected to an input.

<script>
  window.addEventListener('twn.suggestions.ready', function () {
    const suggestions = tweakwiseSuggestions({
      input: '#tweakwise-input',
    });
  });
</script>

Notes:

• If your theme already has a search input, make sure there's a form around it. The suggestions plugin will use the form action to redirect to the search results page.
• Make sure the form action is equal to the page path you created before (e.g. _/search)
• Make sure the search query parameter is tn_q
• If you already had a search input, update the input id to tweakwise-input so the suggestions get mapped correctly

Additional configuration

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