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.