Existen diferentes formas de integrar el widget para mostrar contenido comprensible.

En este documento, encontrará las distintas posibilidades.

Para conocer las distintas posibilidades, Para saber más sobre el contenido comprable, lea este artículo.🔔 ¿Qué es el contenido comprable y cómo funciona?

Añada este artículo a su sitio web.1em;"Añada este script en cualquier lugar de la página del producto para mostrar un contenido shoppable, el enlace con el producto se hará automáticamente con la URL del producto que nos envíe en su feed de productos.

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

Por defecto, se muestra una galería. Si desea mostrar sólo el primer vídeo, cambie el modo a "miniatura"

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

Carrousel / Slider

Muestre todos los medios en un deslizador y navegue a izquierda y derecha para examinar todos los medios en el contenido shoppable.

El tamaño, el estilo del borde y los controles de navegación son personalizables. Vea las variables CSS a continuación

Ejemplo: 9:16 slider

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

Ejemplo: Deslizador redondo

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

Vídeo único

Muestre una vista previa del primer vídeo del contenido shoppable en cualquier lugar de la página utilizando el modo "miniatura"

El tamaño y el estilo del borde son personalizables. Ver variables CSS abajo

Añadir al carrito

Para que funcione el botón Añadir al carrito necesita escuchar un evento emitido por nuestro reproductor cuando se añade un producto.

Dependiendo de su plataforma de comercio electrónico la integración podría ser diferente.

Puede utilizar este evento para añadir su propio seguimiento en cada add-to-cart procedente del reproductor. De esta forma, puede realizar un seguimiento de los add-to-cart realizados durante un contenido shoppable hasta su caja.

window.addEventListener('skp:addToCart', (event) => { 
 const { origen, producto } = evento.detalle 
consola.log('origen',); 
 console.log('producto', producto); 

addProductToCustomerCart(producto); 
// Dispare su funcionalidad de añadir al carrito con su propia implementación 

sendTrackingToYourPlatform(origen,producto); 
// Envíe la información de seguimiento a su plataforma 
})

La información del producto procede de su feed de productos. Compruebe el ID del producto en el feed del producto, debe ser el mismo que utiliza su plataforma de comercio electrónico.

Propiedades de las Variables CSS

Algunas propiedades CSS pueden cambiarse o dejarse por defecto.

Modo de visualización

Dispone de varias opciones para cambiar el comportamiento del reproductor

Desactivar imagen en imagen

El reproductor puede reducirse para permitir a sus espectadores navegar por la página del producto mientras ven el contenido Shoppable sin interrupciones. Los espectadores pueden hacer clic en maximizar para volver a abrir el reproductor principal en cualquier momento.

Activado por defecto, puede desactivarlo

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

Desactivar Añadir al carrito

Si no desea utilizar la función de añadir al carrito puede desactivarla. El botón de compra será sustituido por un enlace a la página del producto.

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

Problemas comunes

Si se encuentra con un problema al implementar la etiqueta en GTM. Como solución, la etiqueta puede integrarse de esta forma:

<div id="mi-contenedor"></div>
<script src="https://sc-ls.spockee.io/shoppable.umd.js"></script>
<script type="text/javascript">
const widget = document.createElement('skp-widget'); 
// :art: ¿Quiere añadir algunas mejoras?
widget.setAttribute('mode', 'slider');
widget.setAttribute('pip-mode', 'disabled');

// :point_down: Sin el atributo product,
<etiqueta="etiqueta" tomará="tomará" la="la" url="url" como="como" referencia="referencia">
<widget.setattribute(="widget.setattribute(" product="product" ,="," id_product="ID_PRODUCT" );=");">

// O puede mostrar la colección. 
// widget.setAttribute('collection', 'ID_COLLECTION')

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

Para un producto - comente/descomente la línea: widget.setAttribute('product', 'ID_PRODUCT');

Tendrá que cambiar el campo 'ID_PRODUCT' con el valor encontrado en el backoffice:

O

Para una colección - comente/descomente la línea : widget.setAttribute('collection', 'ID_COLLECTION');

Tendrá que cambiar el 'ID_COLLECTION' con el valor que se encuentra en la página de una colección, como aquí: