PLP (Product Listing Page) Experience

Here you will find the documentation for how to implement the product listing or category page experiences. This experience indicates to shoppers which products are available for purchase in their best fit at that moment!

The PLP experience is implemented the same way as the PDP experience. Click here for the PDP (Product Detail Page) Experience Documentation.

The difference in this experience's implementation is that you'll need to differentiate the PLP experience from PDP. 


Here are the different methods available:

Preferred Methods: SSM Classes

Add the class "ssm_plp" to the Tiles Buttons
Add the class "ssm_pdp" to the PDP

<div class="ShoeSizeMe ssm_plp" >
<div class="ShoeSizeMe ssm_pdp" >.

 

PLP Size Run Availability Parsing

Below are the different methods available to get the size run and availability. This data is used to inform the service and the shopper which sizes are available, which sizes are not available and which sizes are out of stock. This then informs the service which experiences and messaging should be displayed to guide the shopper. 

Preferred method: data attributes

Add the size run and availability as data parameters in the ShoeSizeMe button.
data-sizerun
data-availability

<div class="ShoeSizeMe ssm_plp" data-shoeid="xyz" data-sizerun="6,7,8,9,10,11" data-availability="8,9,11"

Alternative method: application/JSON

Add the size run and availability as application/JSON script

<script type="application/json" id="ssm_parsing">
{
"xyz":{
"sizerun":[6,7,8,9,10,11],
"avab:[8,9,10]
}
}
</script>
Where xyz is the shoe ID

If the size run is the same for all the shoes on the page it can be added only once using the second method.

<script type="application/json" id="ssm_parsing">
{
"sizerun":[6,7,8,9,10,11]
}
</script>

 

Availability Label Actions

Once the PLP experience has been implemented correctly, a label will appear next to each product tile indicating that this product is available to purchase in the shopper's size. This is known as the Availability Label. By default, the Availability Label opens the experience.

However, this behavior can be customized to do anything.

The parameter used to customize the behavior is action

To have no action use false as a value. This false value will keep the Availability Label as purely an image label to prompt the shopper and will not open the experience.

action:false

To trigger a custom action use a function as a value.

action:yourfunction

Example:

<script type="text/javascript" async src="https://shoesize.me/assets/plugin/loader.js">
{
shopID:"SHOP_ID",
locale:"en",
zeroHash:"xxxxxxxxxx",
scale:"eu",
action: false
}
</script>

 

Does your PLP page use of AJAX Pagination?

If the PLP makes use of Ajax pagination or filtering, every time the products on the page change, this function must be called.

ShoeSizeMe_loader.loadMultipleButtons().

This function accepts an optional array of Shoe IDS. If the array is passed the script will loads only the ids provided, otherwise the script will scrape the page, looking for the data attribute data-shoeid, and load the new IDs

If the size run and availability are provided using the application/json method, the contained JSON will need to be updated with the new shoes.