Il existe différentes façons d'intégrer le widget (slider) dans lequel le contenu shoppable sera affiché.
Dans ce document, vous trouverez les différentes possibilités.

Pour en savoir plus sur le contenu Shoppable, veuillez lire cet article. 🔔 Qu'est-ce que le Shoppable Content et comment cela fonctionne-t-il ?

Ajouter ce script sur vos fiches produits à l'endroit où vous voulez l'afficher. Le lien entre le produit et le contenu sera fait automatiquement via l'URL que vous nous communiquez dans votre flux produit.

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget></skp-widget>

Par défault un carrousel sera affiché. Si vous voulez n'afficher qu'une seul vidéo, changer le mode d'affichage pour thumbnail

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget mode="slider"></skp-widget>

Gallerie / Carrousel / Slider /

Afficher tous vos médias sous forme de gallerie, et naviguer de gauche à droite dans vos Shoppable Content

La taille, bordure et les contrôles de navigation sont modifiables. Voir les règles CSS

Exemple: Gallerie 9:16

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<style> 
:root { 
--skp-thumbnail-width: 180px; 
--skp-thumbnail-height: 320px; 
} </style> 
<skp-widget> </skp-widget> 

Exemple: Gallerie ronds

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<style> 
:root { 
--skp-thumbnail-width: 200px; 
--skp-thumbnail-height: 200px;
--skp-thumbnail-border-radius: 50%;
} </style> 
<skp-widget> </skp-widget> 

Vidéo unique

Afficher uniquement la première vidéo du Shoppable Content avec le mode "Thumbnail"

La taille, bordure et les contrôles de navigation sont modifiables. Voir les règles CSS

Ajout au panier

Afin de faire fonctionner le bouton "Acheter" vous devez écouter un évènement emis par notre lecteur vidéo quand un produit est ajouté au panier.

En fonction de votre platforme ecommerce, l'intégration est différente.

Vous pouvez également ajouter votre propre tracking sur ce même évènement afin de suivre les produits ajoutés au panier depuis le Shoppable Content jusqu'à votre Checkout

window.addEventListener('skp:addToCart', (event) => { 
 const { origin, product } = event.detail 
console.log('origin', origin); 
console.log('product', product); 

addProductToCustomerCart(product); 
// Entrez votre fonction d'ajout au panier

sendTrackingToYourPlatform(origin, product); 
// Ajoutez votre fonction de tracking 
})

Les informations des produits viennent du flux produits que vous nous partagez. Vérifiez bien vos ID produits, ils doivent être identiques à ceux utilisés par votre plateforme e-commerce.

Propriétés CSS

Certaines propriétés CSS peuvent être modifiées.

Mode d'affichage

Plusieurs options sont disponible pour changer le comportement du player

Désactiver le Picture in Picture 

Le player peut être minimisé afin de permettre aux viewers de parcourir la page produit sans couper la lecture du Shoppable Content.

Activé par défaut, vous pouvez désactiver cette option

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget pip-mode="disable"></skp-widget>

Désactiver l'ajout au panier 

Désactiver l'ajout au panier remplacera le bouton "Acheter" par un lien vers la page du produit

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget add-to-cart="false" link-to-product-page="true"></skp-widget>

Quelques problèmes d'intégration

Si vous avez rencontré un problème pour implémenter le tag sur GTM. Le tag peut être intégré de cette manière :

<div id="my-container"></div>
<script src="https://sc-ls.spockee.io/shoppable.umd.js"></script>
<script type="text/javascript">
const widget = document.createElement('skp-widget');  
// :art: Do you want to add some improvements?
widget.setAttribute('mode', 'slider');
widget.setAttribute('pip-mode', 'disabled');

// :point_down: Without product attribute,
// the tag will take the url as reference
// widget.setAttribute('product', 'ID_PRODUCT');

// OR you can display the collection. 
// widget.setAttribute('collection', 'ID_COLLECTION')

document.querySelector('#my-container').appendChild(widget);
</script>

You will have to :

• comment / uncomment the line 13 : widget.setAttribute('product', 'ID_PRODUCT'); , depending on if you want to declare the productId in the tag. You will have to change the 'ID_PRODUCT' field with the value found here :

OR

• comment / uncomment the line 16 : widget.setAttribute('collection', ‘ID_COLLECTION');, depending on if you want to display a collection. You will have to change the 'ID_COLLECTION' with the value found on a collection’s page, like here :