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>

Required Loader callbacks #

The landing page requires 1 callback in the loader settings. 

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>

  #

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>

Required Loader callbacks #

The PDP will require 2 callbacks in the loader settings. 

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: