Out of the box, the Search & Merchandising plugin will automatically start looking for an input, output and start the initialization.
If you need more control, for example if you want to initialize on your own terms, you can achieve this with some additional configuration.
🦉
Tweakwise JS + Search & Merchandising (manual)
Open Recipe
Disable auto-initialization
<script>
window["twn-starter-config"] = window["twn-starter-config"] || {};
window["twn-starter-config"].auto = false;
</script>
Manually initialize
The tweakwiseListerPage
method will use the configuration from Plugin Studio. It exposes some basic methods to interact with the plugin. See methods section.
<script>
window.addEventListener('twn.starter.ready', function () {
let listerPage = tweakwiseListerPage({
output: '#tweakwise-output',
cid: '1000',
query: 'hoody',
prettyUrl: true
});
listerPage.setOpen(true);
});
</script>
Note: In the snippet above the CID needs to be replaced with the ID of the category you want to show. This ID should be known in Tweakwise, as provided through the feed or Backend API.
Options
Property | Type | Description |
---|---|---|
output | text | A valid CSS Selector leading to a output element that should be used for the product lister page. |
cid | text | The category ID that should be used to display the product lister page. |
query | text | The search term to use in case of a search results page |
prettyUrl | text | If true and a SEO-friendly URL is provided in the feed or backend api , that value will be used in category links instead of the tweakwise-generated links. |
Methods
Description | |
---|---|
setOpen | open/close the search results |
setQuery | provide or reset a searchterm |
destroy | destroy instance, for example to recreate a new one |