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.
| Nom | Description | Valeur par défaut | Scope |
| --skp-primary-color | Couleur primaire de l'interface | #5F3595 | géneral |
| --skp-font-family | Police principale utilisé | '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 |
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 :