Using this out-of-the-box template, you can call a sorting optimizer campaign from the client side to re-sort products on your category page, instead of implementing an API call on your server.
Prerequisites:
- Your site structure must have the products within a unique CSS selector and a unique CSS selector container on the page.
- Your products' SKUs must be available either within your data layer (<div class="product" data-dy-sku="3542455713870">) or, at the end of the product URL (https://yoursite/product_page/SKU)
Notes:
- You can also modify the template to fit your specific site structure, as long as the product SKU is available on the page.
- Sorting products on your client's side might affect website performance. So test the template to ensure you can provide the expected user experience.
Using the template
- Create a sorting optimizer campaign with the relevant sorting logic.
- Get the API client-side keys. Learn more about API keys
- Go to Web Personalization, and create a new custom code campaign.
- Create a variation and select the Sorting Optimizer template.
- Fill in the variables according to the instructions.
- Click Preview on Site to see the sorting in action on one of your category pages.
- After you save the variation and you're setting the targeting, the “Where” should be all the pages on which the Sorting Optimizer campaign is running.
- Save your campaign with a draft experience, then test the campaign and make sure it's working as expected on your site.
- Publish the campaign. It's now available to your site visitors.