Shopin liittäminen verkkosivustoon JavaScriptillä

Seuraavassa näytämme, kuinka upotat Spreadshoppisi olemassa olevaan verkkosivustoon. Tarvitset siihen perustietoja HTML:stä, CSS:stä ja JavaScriptistä sekä pääsyn verkkosivuston lähdekoodiin.

Missä shoppisi pitäisi näkyä?

Määritä, missä kohtaa verkkosivustoa Spreadshoppisi on tarkoitus näkyä. Tee se sijoittamalla div-säilö HTML-tiedoston vastaavaan kohtaan. Spreadshoppisi renderöidään tässä säilössä. Voit valita id:n vapaasti.

Kaikki, mitä kirjoitat div-elementin sisään, näkyy niin kauan, kunnes kauppa on latautunut. Siksi div-tagien väliin sopii erityisen hyvin esim. ”Spreadshop latautuu...” -ilmoitus.

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

Konfigurointi

Jotta shoppisi latautuu, määrität asianmukaisen muuttujan JavaScriptissä spread_shop_config-tiedoston avulla. Sitä varten spread_shop_config pitää asettaa ”window scopeen”.

Minimiversiossaan se näyttää tältä:

var spread_shop_config= {
	shopName: 'goats',
	prefix: 'https://SHOPNAME.myspreadshop.fi',
	baseId: 'shop',
};

Konfiguraation latautumisen mahdollistamiseksi sinun tulee vielä määrittää asianmukaiset parametrit:

  • shopName string
    Verkkokauppasi nimi tai id-tunniste. Ne löytyvät Spreadshoppisi admin-osiosta.
  • prefix string/url
    Shoppisi koko verkkotunnus. Siihen kuuluu kaikki ennen vinoviivaa, esim. https://SHOPNAME.myspreadshop.fi tai https://SHOPNAME.myspreadshop.co.uk)
  • baseId string
    Etukäteen määrittämäsi div-elementin id (katso ylhäältä)

Viimeinen pala: Skripti

Lopuksi on lisättävä vielä linkki skriptiin, joka tekee varsinaisen työn ja lataa shoppisi. Ihannetapauksessa sijoitat sen jonnekin konfiguraatiosi alapuolelle. Lisää seuraavat rivit sen mukaan, millä alustalla shoppiasi ylläpidetään:

Eurooppalaisille verkkokaupoille:

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

Pohjoisamerikkalaisille verkkokaupoille:

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

Siten kaikki toimii yhdessä

Täydellinen esimerkki näyttää tältä:

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

Kirjasintyypit

Jotta Spreadshoppisi sopii yhteen verkkosivustosi kanssa, upotetulle verkkokaupalle ei määritellä omia kirjasintyyppejä. Tästä seuraa, että sinun on määritettävä kirjasintyypit itse joko body-tagissa, verkkokauppaa ympäröivässä div-elementissä tai itse Spreadshop-säilössä.

Lisäasetukset

On olemassa muitakin parametrejä, joita voit muokata.

  • locale string
    Jos sinulla on kansainvälinen verkkokauppa, tällä parametrillä voit muuttaa omaan sivustoosi upotetun shopin kielen ja valuutan.
    Käytettävissä ovat seuraavat arvot:
    platform locale language currency
    EU da_DK tanska Tanskan kruunu (kr)
    EU en_EU englanti euro (€)
    EU en_GB englanti Englannin punta (£)
    EU en_IE englanti euro (€)
    EU de_DE saksa euro (€)
    EU de_AT saksa euro (€)
    EU de_CH saksa Sveitsin frangi (Sfr)
    EU es_ES espanja euro (€)
    EU fi_FI suomi euro (€)
    EU fr_BE ranska euro (€)
    EU fr_CH ranska Sveitsin frangi (Sfr)
    EU fr_FR ranska euro (€)
    EU it_CH italia Sveitsin frangi (Sfr)
    EU it_IT italia euro (€)
    EU nl_BE hollanti euro (€)
    EU nl_NL hollanti euro (€)
    EU no_NO norja Norjan kruunu (kr)
    EU pl_PL puola euro (€)
    EU sv_SE ruotsi Ruotsin kruunu (kr)
    Pohjois-Amerikka en_us englanti dollari (US$)
    Pohjois-Amerikka en_CA englanti dollari (US$)
    Pohjois-Amerikka en_AU englanti Australian dollari (AUD$)
    Pohjois-Amerikka fr_CA ranska Kanadan dollari (CAD$)
  • updateMetadata boolean (default: true)
    Jollei muuta ole määritetty, integroitu verkkokauppa muuttaa hakukoneoptimointiin vaikuttavia metatietoja sivusi head-osassa (title, description ja seoIndex sekä OpenGraph ja Twitter Card tags). Jos haluat poistaa tämän toiminnon käytöstä, aseta parametrin arvoksi false.
  • usePushState booelan (default: false)
    Upotetuissa verkkokaupoissa navigoitaessa syntyy oletusarvoisesti hashbang-URL-osoitteita (.../shop/#!/miesten+t-paidat?q=P24). Voit välttää sen asettamalla tämän parametrin arvoksi true. Sitä varten on kuitenkin tehtävä muutoksia myös verkkopalvelimen .htaccess-tiedostoon, ja siksi vain asiantuntijoiden tulisi käyttää tätä ominaisuutta.
  • pushStateBaseUrl
    Tällä on merkitystä vain, jos käytät jo ”usePushState”-toimintoa (= true ) tai jos haluat välttää uudelleenohjauksen (”redirect”) Spreadshoppiisi tai haluat upottaa shoppisi eri paikkoihin. Määritä sitä varten upotussivuston sisääntulokohta, josta alkaen shoppisi on tarkoitus sisällyttää sivuun.
  • startToken string
    Tällä polulla määrität, mikä shoppisi sivu näytetään aloitussivuna.
  • swipeMenu boolean (default: false)
    Jos upotussivulla on jo hampurilaisvalikko, kannattaa poistaa käytöstä Spreadshopin hampurilaisvalikko. Vaihda tämä parametri ja käytä sen sijaan pyyhkäisyvalikkoa. Tee se asettamalla parametrin arvoksi true.

Esimerkki lisäasetuksista

Esimerkki, jossa hyödynnetään kaikkia mahdollisia parametrejä, voisi näyttää tältä:

var spread_shop_config= {
    shopName: 'goats',
    prefix: 'https://SHOPNAME.myspreadshop.fi',
    baseId: 'shop',
    kieli: 'fi_FI',
    startToken: 'miesten+t-paidat?q=P24',
    usePushState: false,
    updateMetadata: true,
};

Yleisiä virheitä ja niiden syitä

DOCTYPE puuttuu

HTML-tiedostosi täytyy alkaa <!DOCTYPE html>-tagilla, koska Spreadshop on luotu HTML5:lle. Ilman tätä tagia on odotettavissa layout- ja muotoiluongelmia. Valmiiseen sivustoon upotetussa shopissa tämän tagin puuttumisesta huomauttaa silmiinpistävä banneri.

Painikkeet ja linkit eivät toimi

Jos shopissasi ei voi napsauttaa mitään, syy voi olla MooTools-sovelluksen yhteensopivuustilassa. Spreadshop käyttää nimittäin React.js-tiedostoa, joka ei ole yhteensopiva MooToolsin kanssa compat-tilassa.

Shop on upotettu useampaan kertaan

Emme missään nimessä suosittele shopin upottamista useampaan kertaan samaan sivuun.

Epätavallisia erikoismerkkejä (esim. ””)

Käytä UFT-8-koodausta. Useimmissa sisällönhallintajärjestelmissä on asetus sitä varten. Jos sinulla on pääsy omiin HTML-tiedostoihisi, koodaa ne UTF-8:lla ja varmista, että head-otsikossasi on <meta charset=“UTF-8“>-tag.

Viesti ”DOCTYPE missing” upotettaessa Weebly-sivustoon

Tämä virheviesti näkyy yleensä vain Weebly-editorissa ja voidaan jättää huomiotta. Spreadshoppisi upottaminen onnistuu siitä huolimatta, jos julkaiset muutokset.

Integrointi GoDaddy Website Builder -sovelluksen kanssa ei toimi

GoDaddyllä ei tällä hetkellä valitettavasti voida toteuttaa toimivia integrointeja.

Tutoriaali

Katso myös videotutoriaali aiheesta verkkosivustoon upottaminen:

Etkö löytänyt vastausta kysymykseesi?

Ota yhteys meihin