Integración con JavaScript – Spreadshop

A continuación te mostramos cómo incrustar tu Spreadshop en un sitio web ya existente. Necesitas conocimientos básicos de HTML, CSS y JavaScript así como acceso al código fuente del sitio web.

¿Dónde quieres que se vea tu tienda?

Decide dónde quieres que se muestre tu Spreadshop en tu sitio web. Será ahí donde coloques, en el código HTML, un elemento en bloque div. En ese contenedor se cargará tu Spreadshop. Puedes escoger la id a tu antojo.

Todo lo que escribas dentro del elemento div se mostrará hasta que la tienda se haya cargado. 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 tu tienda, configura con spread_shop_config las variables correspondientes en JavaScript. Para ello, se tendrá que fijar spread_shop_config en «window scope».

En su variación mínima se ve así:

var spread_shop_config= {
	shopName: 'goats',
	prefix: 'https://SHOPNAME.myspreadshop.de',
	baseId: 'shop',
};

Para que se pueda cargar la configuración deberás definir los parámetros correspondientes:

shopName string
El nombre o la ID de tu tienda. Los encontrarás en el área de administrador de tu Spreadshop.
prefix string/url
El dominio completo de tu tienda. Todo antes de la barra, por ejemplo https://SHOPNAME.myspreadshop.de o https://SHOPNAME.myspreadshop.co.uk)
baseId string
El id del elemento div que has definido previamente (ver arriba)

La última pieza del rompecabezas: el script

Antes de acabar tendrás que añadir un enlace al script que finaliza el trabajo y carga tu tienda. Lo ideal es que lo coloques debajo de tu configuración. Dependiendo de la plataforma en la que tengas alojada tu tienda, pegas una de las siguientes líneas:

Para tiendas europeas:

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

Para tiendas norteamericanas:

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

Cómo funciona todo en conjunto

Un ejemplo completo tiene esta pinta:

<!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://SHOPNAME.myspreadshop.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://SHOPNAME.myspreadshop.net/js/shopclient.nocache.js"></script>
    </body>
</html>

Fuentes

Para que tu Spreadshop 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 body, en un div que abarque la tienda o en el propio contenedor de SpreadShop.

Personalización avanzada de tiendas

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 head de tu página (title, description y seoIndex así como OpenGraph y Twitter Card tags). Si quieres desactivar esta función, configura como false este parámetro.
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. Para ello son necesarias también modificaciones en el archivo .htaccess de tu servidor web por lo que únicamente personas expertas se deben encargar de esta característica.
pushStateBaseUrl
Es importante solamente si ya usas «usePushState» (=true), si suprimes una redirección a tu Spreadshop o si deseas incrustar tu tienda en distintos lugares. Define el punto de entrada en el sitio web en el que incrustes tu tienda.
startToken string
Con esta ruta estableces qué página de tu tienda se muestra como página de inicio.
swipeMenu boolean (default: false)
Si tu la página en la que incrustas tu tienda también dispone de un menú de hamburguesa, es mejor que desactives el menú de hamburguesa de tu Spreadshop. Modifica este parámetro y emplea, en su lugar, un menú desplegable. Para ello ajusta el parámetro a true.

Ejemplos de personalización avanzados

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

var spread_shop_config= {
    shopName: 'goats',
    prefix: 'https://SHOPNAME.myspreadshop.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.

No funcionan ni los botones ni los enlaces

Si no se puede hacer clic en ningún elemento de tu tienda, el problema puede estar en la compatibilidad con MooTools. Spreadshop utiliza React.js, lo cual es incompatible con MooTools.

Tienda incrustada varias veces

Te desaconsejamos incrustar la tienda varias veces en la misma página.

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.

Aviso «DOCTYPE missing» en tienda incrustada en Weebly-Site.

Este aviso aparece, por lo general, solamente en el editor de Weebly, por lo que se puede ignorar. La Spreadshop incrustada, una vez hagas públicos los cambios, funcionará de todos modos.

No funciona la integración con GoDaddy Website Builder

Desgraciadamente, por el momento, no es posible integrar una tienda, de manera funcional, con GoDaddy.

Tutorial

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