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éfaut un carrousel sera affiché. Si vous voulez n'afficher qu'une seule 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 galerie, 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 émis par notre lecteur vidéo quand un produit est ajouté au panier.
En fonction de votre plateforme e-commerce, 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.
| Nom | Description | Valeur par défaut | Scope |
| --skp-primary-color | Couleur primaire de l'interface | #5F3595 | géneral |
| --skp-font-family | Police principale utilisée | 'Nunito', sans-serif | géneral |
| --skp-thumbnail-width | Largeur des aperçus vidéo | 200px | géneral |
| --skp-thumbnail-height | Hauteur des aperçus vidéo | 400px | géneral |
| --skp-slider-nav-icon-size | Taille des icônes de contrôle de navigation | 20px | slider |
| --skp-slider-nav-color | Couleur des contrôles de navigation | #000000 | slider |
| --skp-slider-nav-width | Taille du rond des contrôles de navigation | 40px | slider |
| --skp-slider-nav-position | Position CSS des contrôles de navigation | relative | slider |
| --skp-radius | Radius des boutons CTA | 5px | géneral |
| --skp-thumbnail-border-radius | Radius des médias | 5px | géneral |
--skp-slider-nav-icon-color |
Coulour de l'icône de contrôle de navigation | slider |
Mode d'affichage
Plusieurs options sont disponibles 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>Vous devrez :
- commenter / décommenter la ligne 13 :
widget.setAttribute('product', 'ID_PRODUCT');, selon que vous souhaitez déclarer le productId dans la balise.
Vous devrez remplacer le champ'ID_PRODUCT'par la valeur indiquée ici :
OU
commenter / décommenter la ligne 16 :
widget.setAttribute('collection', 'ID_COLLECTION');, selon que vous souhaitez afficher une collection.
Vous devrez remplacer'ID_COLLECTION'par la valeur trouvée sur la page d’une collection, comme ici :