Integrazione del sito con JavaScript – Spreadshop

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://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.it o https://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.net/js/shopclient.nocache.js"></script>

Per i negozi nordamericani:

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