Menu

Integrazione del sito web mediante JavaScript

Se lo desideri, puoi integrare il tuo Negozio Spreadshirt all’interno del tuo sito Internet.

Per farlo, occorre applicare alcune brevi misure per le quali sono necessari elementi di HTML, CSS e JavaScript, nonché l’accesso al codice sorgente della tua pagina.

Dove far visualizzare il tuo Negozio?

Per stabilire la posizione in cui sarà visualizzato il tuo Negozio sul sito, colloca un elemento div con un ID (a libera scelta) nella posizione corrispondente del tuo file HTML. Tutto ciò che scriverai dentro a questo elemento div, comparirà solo fino a che non verrà caricato il Negozio, e successivamente sarà rimosso. Per questo, lo spazio tra i tag div è perfetto per posizionarvi un messaggio come “Caricamento del Negozio in corso...”

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

Configura

Per caricare proprio il tuo Negozio, dovrai aggiungere un oggetto di configurazione spread_shop_config in JavaScript, che deve essere disponibile in window Scope.

Quello più piccolo ha il seguente aspetto:

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

I parametri necessari:

  • shopName string
    Il nome o l’ID del tuo Negozio. Potrai visualizzarli nel tuo Riepilogo mediante i canali di vendita
  • prefix string/url
    Il dominio completo del tuo Negozio (tutta la parte che figura prima dello slash, come ad es.https://shop.spreadshirt.de o https://shop.spreadshirt.co.uk)
  • baseId string
    L’id da te precedentemente stabilito dell’elementodiv (vedi sopra)

L’ultimo pezzo del puzzle: lo script

Ultima cosa da fare, e non meno importante, è aggiungere un link allo script che fa il grosso del lavoro caricando il Negozio. La soluzione migliore è quello di posizionarlo da qualche parte al di sotto della tua configurazione.

Per i Negozi europei:

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

Per i negozi nordamericani:

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

In tal modo, tutto va a funzionare insieme

Di seguito ti riportiamo un esempio semplice, ma completo:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Integrated Shop Test</title> </head> <body> <div id="shop">Spreadshop loading...</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>

Font

Preferiamo non definire un font per i Negozi che saranno integrati, in modo che ciascun utente possa decidere lo stile più adatto all’inserimento nel proprio sito web. Ciò vuol dire che dovrai stabilire autonomamente quale font utilizzare, che sia nel tag Body, in uno dei div che contiene il Negozio o nello stesso contenitore dello Spreadshop.

Personalizzazione del Negozio per utenti avanzati

Esistono altri parametri che, se vuoi, potrai impostare a tuo piacimento.

  • locale string
    Puoi usare questi parametri, ad esempio, per cambiare la valuta e la lingua impostate per il tuo Negozio integrato, nel caso si tratti di un Negozio internazionale.
    Ecco i valori disponibili:
    platform locale language currency
    EU da_DK Danish Danish Krone (kr)
    EU en_EU English Euro (€)
    EU en_GB English Pound Sterling (£)
    EU en_IE English Euro (€)
    EU de_DE German Euro (€)
    EU de_AT German Euro (€)
    EU de_CH German Swiss Franc (CHF)
    EU es_ES Spanish Euro (€)
    EU fi_FI Finnish Euro (€)
    EU fr_BE French Euro (€)
    EU fr_CH French Swiss Franc (CHF)
    EU fr_FR French Euro (€)
    EU it_CH Italian Swiss Franc (CHF)
    EU it_IT Italian Euro (€)
    EU nl_BE Dutch Euro (€)
    EU nl_NL Dutch Euro (€)
    EU no_NO Norwegian Norwegian Krone (kr)
    EU pl_PL Polish Euro (€)
    EU sv_SE Swedish Swedish Krone (kr)
    NA en_US English Dollar ($)
    NA en_CA English Dollar ($)
    NA en_AU English Australian Dollar (AUD$)
    NA fr_CA French Canadian Dollar (CAD$)
  • updateMetadata boolean (default: true)
    Se non personalizzato, il Negozio integrato modifica i metadati utili all’ottimizzazione per i motori di ricerca (SEO) nell’head del tuo sito (title, description e seoIndex, nonché OpenGraph e Twitter Card tags). Se desideri disattivare questa funzione, imposta il parametro su false.
  • usePushState booelan (default: false)
    Durante la navigazione in un Negozio integrato, si originano di norma URL Hashbang (.../shop/#!/männer+t-shirts?q=P24). Puoi evitarlo impostando questo parametro sutrue. Si tratta di una impostazione classificata tra le avanzate, poiché implica anche modifiche al file .htaccess-sul tuo web server.
  • startToken string
    Percorso per arrivare a una pagina nel tuo Negozio da mostrare come Home.

Esempio

Un esempio che prevede l’uso di tutti i parametri è il seguente:

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

Errori frequenti e loro cause

Manca il DOCTYPE

Il tuo file HTML deve cominciare con il tag <!DOCTYPE html> poiché lo Spreadshop è stato creato per HTML5. In assenza di questo tag, si verificano problemi di layout e di stile. Nel caso di un Negozio integrato, vedrai comparire un banner evidente che sottolinea il problema legato alla mancanza di questo tag.

Pulsanti e link non funzionano

Lo Spreadshop usa React.js, che origina errori se usato in modalità di compatibilità insieme a MooTools. Se non ci sono elementi cliccabili nel tuo Negozio, ciò può derivare da un utilizzo di MooTools in modalità di compatibilità.

Negozio integrato più volte

Ti sconsigliamo di integrare lo stesso Negozio più di una volta su un sito Internet. Potrebbero verificarsi dei malfunzionamenti.

Caratteri speciali (per es. È)

Ricordati di consultare la codifica UTF-8. La maggior parte dei CMS prevede un’impostazione mirata. Se puoi accedere ai tuoi stessi file HTML, usa la codifica UTF-8 e accertati che il tag <meta charset=“UTF-8“> sia disponibile nel tuo head.

Tutorial

Sul tema dell’integrazione dei Negozi è disponibile un nostro video tutorial (in inglese):

Questo articolo è stato utile?