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.

Step 1: disable auto-initialization

<script>
  window["twn-starter-config"] = window["twn-starter-config"] || {};
  window["twn-starter-config"].auto = false;
</script>

Step 2: use tweakwiseListerPage

The tweakwiseListerPage method can be used to create a product lister page or search results page. It exposes some basic methods to interact with the plugin. See the methods section.

Example: open a search results page, searching from the root category (1 in this case)

<script>
  window.addEventListener('twn.starter.ready', function () {
    let listerPage = tweakwiseListerPage({
      query: 'hoody'
    });
  });
</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.

Example: open a product lister page (10015)

<script>
  window.addEventListener('twn.starter.ready', function () {
    let listerPage = tweakwiseListerPage({
      cid: '10015'
    });
  });
</script>

Options

By default, the tweakwiseListerPage method uses the configuration set in Plugin Studio. Any additional configuration described in Options can be applied to the method.

Example: configure filter display:

window.addEventListener('twn.starter.ready', function () {
	let listerPage = tweakwiseListerPage({
		output: '#tweakwise-output',
		cid: '10001',
		filters: {
			position: 'top',
			leftCategory: true
		}
	});
});

Pre-selecting facets

In manual mode, it is possible to preselect certain facets using the selection option.

Example: select Tweakwise as brand

window.addEventListener('twn.starter.ready', function () {
	let listerPage = tweakwiseListerPage({
		cid: '10001',
		selection: {
      'tn_fk_brand': 'Tweakwise'
    }
	});
});

Notes:

• use the attribute urlkey and prefix that would normally be displayed in the querystring.
• any filters in the hash/querystring will have precedence over the selection option.

Methods

The tweakwiseListerPage returns an object with methods that allow you to influence the created instance: