Menú

Integración en páginas web con JavaScript

Puedes incrustar tu Spreadshop en el sitio web que tienes.

Para ello necesitarás conocimientos de HTML, CSS y JavaScript, así como acceso al código fuente de tu página web.

¿Dónde debería aparecer tu tienda?

Para establecer la ubicación de la tienda en tu página, coloca un elemento div con una id (de tu libre elección) en la ubicación correspondiente de tu archivo HTML. Todo lo que escribas dentro de este elemento div solo se mostrará hasta que la tienda se haya cargado. Luego se elimina por completo. Por lo tanto, la ubicación entre las etiquetas div es muy adecuada para un mensaje como «Cargando Spreadshop...».

<div id="shop">Cargando Spreadshop...</div>

Configurar

Para que se cargue realmente la tienda, se añade un objeto de configuración spread_shop_config en JavaScript, que debe estar disponible en la ventana Alcance.

El mínimo se ve así:

 var spread_shop_config = { &Tab;shopName: 'goats', &Tab;prefix: 'https://shop.spreadshirt.de', &Tab;baseId: 'shop' }; 

Los parámetros requeridos:

  • shopName string
    El nombre o la ID de tu tienda. Puedes verlos en tu resumen de los canales de ventas
  • prefix string/url
    El dominio completo de tu tienda (todo antes de la barra, por ejemplo https://shop.spreadshirt.de o https://shop.spreadshirt.co.uk)
  • baseId string
    El id del elemento div que has definido previamente (ver arriba)

La última pieza del rompecabezas: el script

Finalmente, todo lo que tienes que hacer es añadir un enlace al script que hace el trabajo duro y carga la tienda. Lo ideal es que lo coloques en algún lugar debajo de tu configuración.

Para tiendas europeas:

<script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>

Para tiendas norteamericanas:

<script type="text/javascript" src="https://shop.spreadshirt.com/js/shopclient.nocache.js"></script>

Cómo funciona todo en conjunto

Un ejemplo completo y mínimo se vería así:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Integrated Shop Test</title> </head> <body> <div id="shop">Cargando Spreadshop...</div> <script> var spread_shop_config = { prefix: 'https://shop.spreadshirt.de', shopName: 'goats', baseId: 'shop' }; </script> <script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script> </body> </html> </code>

Fuentes

Para que tu tienda también encaje bien en tu sitio web, no definimos fuentes propias en tiendas incrustadas. Esto significa que debes definir tus fuentes tú mismo, ya sea en la etiqueta de cuerpo, en un div que abarque la tienda o en el propio contenedor de Spreadshop.

Personalizar tienda para avanzados

Hay algunos parámetros más que puedes configurar.

  • locale string
    Si tienes una tienda internacional, puedes cambiar el idioma y la moneda de tu tienda incrustada con este parámetro.
    Estos valores están disponibles:
    plataforma locale idioma moneda
    UE da_DK danés Corona danesa (kr)
    UE en_EU inglés Euro (€)
    UE en_GB inglés Libra esterlina (£)
    UE en_IE inglés Euro (€)
    UE de_DE alemán Euro (€)
    UE de_AT alemán Euro (€)
    UE de_CH alemán Franco suizo (CHF)
    UE es_ES español Euro (€)
    UE fi_FI finlandés Euro (€)
    UE fr_BE francés Euro (€)
    UE fr_CH francés Franco suizo (CHF)
    UE fr_FR francés Euro (€)
    UE it_CH italiano Franco suizo (CHF)
    UE it_IT italiano Euro (€)
    UE nl_BE neerlandés Euro (€)
    UE nl_NL neerlandés Euro (€)
    UE no_NO noruego Corona noruega (kr)
    UE pl_PL polaco Euro (€)
    UE sv_SE sueco Corona sueca (kr)
    NA en_US inglés Dólar ($)
    NA en_CA inglés Dólar ($)
    NA en_AU inglés Dólar australiano (AUD$)
    NA fr_CA francés Dólar canadiense (CAD$)
  • updateMetadata boolean (default: true)
    Si no se define con más detalle, la tienda integrada cambia los metadatos relevantes para SEO en el encabezado de tu página (title, description y seoIndex así como OpenGraph y Twitter Card tags). Si no se define con más detalle, la tienda integrada cambia los metadatos relevantes para SEO en el encabezado de tu página.
  • usePushState booelan (default: false)
    Por defecto se crean URLs hashbang cuando se navega en tiendas incrustadas (.../shop/#!/männer+t-shirts?q=P24). Puedes solucionar este problema configurando este parámetro como true. Esta es una función para expertos porque también es necesario realizar cambios en el archivo .htaccess de tu servidor web.
  • startToken string
    Ruta a una página de tu tienda que se mostrará como página de inicio.

Ejemplo

Un ejemplo que utiliza todos los parámetros disponibles podría tener este aspecto:

 var spread_shop_config = { shopName: 'goats', prefix: 'https://shop.spreadshirt.de', baseId: 'shop', locale: 'de_DE', startToken: 'men+t-shirts?q=P24', usePushState: false, updateMetadata: true }; 

Errores frecuentes y sus causas

Falta DOCTYPE

Tu archivo HTML debe comenzar con la etiqueta <!DOCTYPE html> porque Spreadshop fue creado para HTML5. Sin esta etiqueta, se producen problemas de diseño y estilo. En la tienda incrustada un banner muy prominente llamará tu atención sobre la ausencia de esta etiqueta.

Los botones y enlaces no funcionan

La Spreadshop usa React.js, que causa errores junto con MooTools en el modo de compatibilidad. Si no se puede hacer clic en nada en tu tienda, puede ser porque estás usando MooTools en modo de compatibilidad.

Tienda incrustada varias veces

Te desaconsejamos incrustar la tienda varias veces en la misma página. Esto causará un comportamiento no deseado.

Caracteres especiales inusuales (p. ej. «Â»)

Por favor, presta atención a la codificación UTF-8. La mayoría de los CMS tienen una configuración para esto. Si tienes acceso a tus propios archivos HTML, codifícalos con UTF-8 y asegúrate de que la etiqueta <meta charset=“UTF-8“> aparezca en tu encabezado.

Tutorial

También puedes ver nuestro video tutorial sobre incrustación (en inglés):

¿Ha sido útil este artículo?