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 ejemplohttps://SHOPNAME.myspreadshop.de
ohttps://SHOPNAME.myspreadshop.co.uk
) - baseId
string
Elid
del elementodiv
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 elhead
de tu página (title
,description
yseoIndex
así como OpenGraph y Twitter Card tags). Si quieres desactivar esta función, configura comofalse
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 comotrue
. 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 atrue
.
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):