Comment intégrer les différents formats Shoppable Content ?

Il existe différentes façons d'intégrer le widget pour afficher du Shoppable Content. Dans cet article, vous trouverez les différentes possibilités et leur intégration.

Carrousel / Slider

Affichez tous les médias sur un slider et naviguez de gauche à droite pour parcourir les Shoppable Content.
La taille, le style de bordure et la navigation sont personnalisables. Voir les variables CSS.

Exemple : Slider 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 : Slider rond

<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> 

Vignette / Vidéo unique

Lors de l'intégration du Player Shoppable Content, une galerie est affichée par défaut. Si vous souhaitez afficher seulement la première vidéo, changez le mode en "vignette".

Exemple:
La taille et le style de bordure sont personnalisables. Voir les variables CSS.

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

Ajouter au panier

Pour que le bouton "Ajouter au panier" fonctionne, vous devez écouter un événement émis par notre Player lorsqu'un produit est ajouté.

Vous pouvez utiliser cet événement pour ajouter votre propre suivi à chaque ajout au panier effectué à partir du lecteur. Ainsi, vous pouvez suivre les ajouts au panier effectués avec Shoppable Content, jusqu'au processus de paiement.

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
})

Variables CSS

Certaines propriétés CSS peuvent être modifiées ou laissées par défaut.

Mode d'affichage

Plusieurs options sont disponibles pour modifier le comportement du Player :

Désactiver le mode "Picture in Picture"

Le Player peut être réduit pour permettre à vos visiteurs de naviguer sur la page produit tout en regardant le Shoppable Content sans interruption. Ils peuvent cliquer sur maximiser à tout moment pour rouvrir le Player principal.

Activé par défaut, vous pouvez le désactiver :

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

Désactiver le bouton "Ajouter au panier"

Si vous ne souhaitez pas utiliser la fonctionnalité "Ajouter au panier", vous pouvez la désactiver. Le bouton d'achat sera remplacé par un lien vers la page 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>

Problème commun

Si vous rencontrez un problème avec l'implémentation de la balise sur GTM. En attendant, la balise peut être intégrée 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: Voulez-vous apporter des améliorations ?
widget.setAttribute('mode', 'slider');
widget.setAttribute('pip-mode', 'disabled');

// :point_down: Sans attribut de produit,
// la balise prendra l'url comme référence
// widget.setAttribute('product', 'ID_PRODUCT');

// OU vous pouvez afficher la collection. 
// widget.setAttribute('collection', 'ID_COLLECTION')

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

Pour un produit

Vous devez commenter/décommenter la ligne : widget.setAttribute('product', 'ID_PRODUCT');

 Vous devrez changer le 'ID_PRODUCT' avec la valeur trouvée dans le backoffice :

Pour une collection

Vous devez commenter/décommenter la ligne : widget.setAttribute('collection', ‘ID_COLLECTION'); 

Vous devrez changer le 'ID_COLLECTION' avec la valeur trouvée sur une page de collection, comme ici :