Menú

Integración con JavaScript

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://shop.spreadshirt.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://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

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://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 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://shop.spreadshirt.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://shop.spreadshirt.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://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.

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

¿Ha sido útil este artículo?