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.
Nom |
Description |
Valeur par défaut |
Scope |
| --skp-primary-color | Couleur primaire de l'interface | #5F3595 | General |
| --skp-font-family | Police principale | 'Nunito', sans-serif | General |
| --skp-thumbnail-width | Largeur des aperçus vidéo | 200px | General |
| --skp-thumbnail-height | Hauteur des aperçus vidéo | 400px | General |
| --skp-slider-nav-icon-size | Taille des icônes de contrôle de navigation | 20px | Slider |
| --skp-slider-nav-color | Couleur de fond des icônes de contrôle de navigation | #000000 | Slider |
| --skp-slider-nav-width | Taille du bouton de contrôle de navigation | 40px | Slider |
| --skp-slider-nav-position | Position CSS du bouton de contrôle de navigation | relative | Slider |
| --skp-radius | Radius des bordures des CTA | 5px | General |
| --skp-thumbnail-border-radius | Radius des médias | 5px | General |
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 :