1. Help Center
  2. ShoeAI Documentation
  3. Implementing the ShoeAI Scripts (mandatory)

ShoeAI PDP, PLP & Landing Page Scripts

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