The Tweakwise Search & Merchandising Plugin can take over entire pages in your platform and show a Tweakwise product lister page instead.

💡

Important

The Attribute Landing Page module is part of Tweakwise Commerce Pages

Installation

Make sure you have followed the Installation guide.

Implementation

Enabling the product lister page is as similar to initializing the search results:

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

    const listerPage = tweakwiseListerPage({
      cid: "CID",
      output: "#tweakwise-output"
    });

  });
</script>

Notes:

• Replace CID 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.
• Replace output with the container you want to target
• Make sure auto-initializaton is off. Go to Plugin Studio > Search & Merchandising settings. In the Advanced tab, check the Auto-initialization section. The toggle should be set to off

Category tree support

To use the category tree in Tweakwise JS, when providing the cid, make sure you provide the full path so we know what tree we need to display:

window['twn-starter-config'].navigation.cid = "1000-1001-1004"//

// or

tweakwiseListerPage({
  cid: "1000-1001-1004"
});

This would result in selection of category 1004, while displaying the entire tree:

Good to know

• Merchandising is part of Tweakwise Commerce Pages.
• We recommend adding this snippet above the snippet that imports Tweakwise JS. This makes sure that the config is taken into consideration when initializing the plugin.
• By default the product lister page will use the same output as the search results. If you want to use a different output container for the product lister page, this can be configured in the settings of the Search & Merchandising module.

Classic implementation

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.

<script>
  window['twn-starter-config'] = window['twn-starter-config'] || {};
  window['twn-starter-config'].navigation = window['twn-starter-config'].navigation || {};
  window['twn-starter-config'].navigation.cid = "CID"
</script>

Notes:

• Replace the CID 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.
• 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 HTML page is loaded.