1. Help Center
  2. ShoeAI Documentation
  3. 1) ShoeAI Scripts (all 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 with fast-add-to cart)

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

 

Add to bag from inside ShoeAI ( recommended functionality )

When ShoeAi successfully recommends a size that is available for that user, the ShoeAI button inside the UI interface and on the page will change to an Add to cart functionality. 

When the ShoeAI button is clicked, our service will call the callback function inCart if it has been added to the loader.js script.

<script async="" src="https://shoesize.me/assets/plugin/loader.js">
{
...
inCart: function(data){ add_your_logic_here }
}
</script>


The inCart callback will return  the recommendation payload provided to the user. 
An example of the payload can be found here.

The logic of the function must be handled by the shop owner by:
  • reading the size returned in the recommendation data
  • trigger the shop add to cart functionality

Limit the inCart functionality only from inside the ShoeAI

If you want to have the inCart functionality exclusively inside the ShoeAI UI please notify us and we'll change our on-page button accordingly. 
On your side the implementation will be exactly the same as the full inCart feature. 

Size Preselection 

To implement the preselection callback. 

<script async="" src="https://shoesize.me/assets/plugin/loader.js">
{
...
newRecommendation: function(data){ add_your_logic_here }
}
</script>

The newRecommendation callback will return  the recommendation payload provided to the user. 
An example of the payload can be found here.

The logic of the function must be handled by the shop owner by:
  • reading the size returned by the recommendation data
  • preselect the scale and size on the size picker
 
Here is an example of a shop, as to how they pass the recommendation object as a parameter to a new function they have created. That function selects from the object the size of the desired scale and loops over the size chart to choose/preselect the size that matches. Then you will call this function and add it to the PDP script: