Menu

Integrazione del sito con JavaScript

Ti mostriamo di seguito come integrare il tuo Negozio all’interno di un sito web esistente. Ti occorrono solo poche conoscenze di base del linguaggio HTML, qualche nozione di CSS e JavaScript, e l’accesso al codice sorgente del sito web.

Dove deve apparire il tuo Negozio?

Decidi in quale porzione del sito web in questione desideri che compaia il tuo Negozio. Nella posizione corrispondente del file HTML inserisci quindi un elemento contenitore div. All’interno di questo contenitore è definito il rendering del tuo Negozio. Potrai definirne liberamente l’id.

Tutto ciò che scriverai dentro a questo elemento div comparirà solo fino a che non sarà caricato il Negozio. Per questo, lo spazio tra i tag div è ideale specie per posizionarvi un messaggio come “Caricamento Spreadshop in corso...”

<div id="shop">Caricamento Spreadshop in corso...</div>

Configura

Per far funzionare il caricamento del tuo Negozio, dovrai configurare la variabile corrispondente in JavaScript usando spread_shop_config. In tal caso spread_shop_config deve essere immessa nel window scope.

Nella variante più semplice, ecco come appare:

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

Per consentire il caricamento di quanto configurato, occorrerà anche definire i parametri corrispondenti:

  • shopName string
    Il nome o l’ID del tuo Negozio. Troverai queste informazioni nell’area gestionale del tuo Spreadshop.
  • prefix string/url
    Il dominio completo del tuo Negozio. Si tratta della parte che figura prima dello slash, come ad es.https://shop.spreadshirt.it 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

Per concludere, dovrai ancora aggiungere un link allo script in grado di svolgere il lavoro vero e proprio e di caricare quindi il tuo Negozio. La soluzione migliore è quello di posizionarlo al di sotto della tua configurazione. A seconda di quale sia la piattaforma che ospita il tuo Negozio, potrai aggiungere le seguenti righe:

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 andrà a funzionare in maniera sinergica

Ecco un esempio completo per farti un’idea:

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

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.

Opzioni 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) nello head del tuo sito (title, description e seoIndex, così come 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 evitare che accada impostando questo parametro sutrue. Tuttavia, ciò comporta anche modifiche al file .htaccesssul tuo server web, ragion per cui solo gli utenti esperti dovrebbero parametrare questi aspetti.
  • pushStateBaseUrl
    Ha senso solo nel caso tu stia già usando “usePushState” (= true), se volessi cancellare un ‚redirect‘ verso il tuo Spreadshop o se hai intenzione di integrare il tuo Negozio in diverse posizioni. Ti preghiamo in tal caso di definire il punto d’ingresso del sito web da integrare, a partire dal quale dovremo procedere a collegare il tuo Negozio.
  • startToken string
    Questo percorso ti aiuta a definire quale pagina del tuo Negozio deve essere visualizzata come Home.
  • swipeMenu boolean (default: false)
    Se la pagina da integrare possiede già un burger menu, ti consigliamo di disattivare quello del tuo Spreadshop. Modifica questo parametro e passa piuttosto ad un menu Swipe. Per farlo, imposta il parametro su true.

Esempio di opzioni per utenti avanzati

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

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

Se non fosse possibile cliccare nulla all’interno del tuo Negozio, il problema potrebbe essere legato a una questione di compatibilità di MooTools. Lo Spreadshop funziona grazie a React.js, che a sua volta invece non funziona con MooTools in modalità di compatibilità.

Negozio integrato più volte

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

Caratteri speciali non comuni (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.

Messaggio “DOCTYPE missing” nel caso di integrazione su sito Weebly.

Si tratta di un errore che di norma è visualizzato solo nell’editor di Weebly, e che può essere ignorato. Se pubblichi le modifiche, l’integrazione del tuo Negozio funzionerà comunque.

Non funziona l’integrazione mediante GoDaddy Website Builder.

Al momento non è possibile realizzare alcuna integrazione mediante GoDaddy.

Tutorial

Sul tema dell’integrazione dei Negozi è disponibile anche un nostro video tutorial:

Questo articolo è stato utile?