This documentation explains how the ShoeAI Landing Page (LP), Product Listing Page (PLP) and Product Detail Page (PDP) scripts must uniquely be implemented.
The PDP, PLP and Landing Page experiences have specific requirements which are outlined here. The specific requirements for these pages should be implemented after the ShoeAI Loader Script has been completed.
ShoeAI Landing Page
IMPORTANT: Please end the URL for the landing page as: …./shoeai
HTML div tag
This is the tag for the button the shopper will click on the Landing Page. Add this tag at the position in your HTML where the Size Advisor button should be displayed.
The "custom_name" can be any name to label the touchpoint on the landing page.
It must be unique from any touchpoint across the website.
<div class="ShoeSizeMe" data-touchpoint="custom_name"></div>
| Attributes | Scope |
| class ShoeSizeMe | Class used to identify the ShoeSize DOM element |
| data-touchpoint | Custom name used to track the touchpoint usage |
Required Loader callbacks
The landing page requires 1 callback in the loader settings.
| Callback | Use |
| touchpoint | Apply filter or redirect user to a category page |
ShoeAI PLP (Product Listing / Category Page )
This part should be implemented on every page where product tiles/cards are visible, including the homepage, search page, or any other landing page.
HTML div tag
This is the tag for the labels the shopper will see on the PLP.
Place it on all the product tiles.
<div class="ShoeSizeMe ssm_plp" data-shoeid="XXXX" data-availability="34,35,36" data-sizerun="34,35,36,37,38"></div>
| Attributes | Scope |
| class ShoeSizeMe | Class used to identify the ShoeSize DOM element |
| class ssm_pdp | Class used to differentiate the PDP from PLP experience |
| data-shoeid | Article id of the product |
| data-availability | List of available sizes for the product |
| data-sizerun | List of all possible sizes for the product |
Shoe AI PDP (Product Detail Page)
HTML div tag
This is the tag for the button the shopper will click on the PDP. Add this tag at the position in your HTML where the Size Advisor button should be displayed:
<div class="ShoeSizeMe ssm_pdp" data-shoeid="XXXX" data-availability="34,35,36" data-sizerun="34,35,36,37,38"></div>
| Attributes | Scope |
| class ShoeSizeMe | Class used to identify the ShoeSize DOM element |
| class ssm_pdp | Class used to differentiate the PDP from PLP experience |
| data-shoeid | Article id of the product |
| data-availability | List of available sizes for the product |
| data-sizerun | List of all possible sizes for the product |
Required Loader callbacks
The PDP will require 2 callbacks in the loader settings.
| Callback | Use |
| inCart | Get the Add to cart event from within ShoeAI |
| alternatives | Provide alternatives for sold-out sizes |