Valikko

Verkkosivuun liittäminen JavaScriptillä

Voit sisällyttää Spreadshoppisi olemassa olevaan verkkosivustoosi.

Se vaatii muutaman toimenpiteen, joita varten tarvitset jonkin verran HTML-, CSS- ja JavaScript-taitoja sekä pääsyn sivustosi lähdekoodiin.

Missä shoppisi on tarkoitus näkyä?

Määritä shopin paikka sivustollasi asettamalla div-elementti (vapaasti valitsemasi) id:n kanssa HTML-tiedostosi vastaavaan kohtaan. Kaikki, mitä kirjoitat tämän div-elementin sisään, näkyy vain niin kauan, kunnes shop on ladattu. Sitten se poistetaan kokonaan. Siksi div-tagien välinen paikka sopii hyvin esim. ”Spreadshopia ladataan...” -ilmoitukseen.

<div id="shop">Spreadshopia ladataan...</div>

Konfigurointi

Jotta shoppisi todellakin ladataan, lisää määritysobjekti spread_shop_config JavaScriptissä. Objektin täytyy olla käytettävissä window Scopessa.

Minimissään se näyttää tältä:

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

Tarvittavat parametrit:

  • shopName string
    Shoppisi nimi tai tunnus. Nämä voit nähdä myyntikanaviesi yleiskatsauksessa
  • prefix string/url
    Shoppisi koko verkkotunnus (kaikki ennen vinoviivaa, esim. https://shop.spreadshirt.fi tai https://shop.spreadshirt.co.uk)
  • baseId string
    Etukäteen määrittämäsi div-elementin id (katso ylhäältä)

Viimeinen pala: Skript

Lopuksi sinun ei tarvitse enää kuin lisätä linkki skriptiin, joka hoitaa työn ja lataa shopin. Ideaalitapauksessa sijoitat sen jonnekin konfiguraatiosi alapuolelle.

Eurooppalaisille verkkokaupoille:

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

Pohjoisamerikkalaisille verkkokaupoille:

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

Siten kaikki toimii yhdessä

Minimiesimerkki näyttäisi sitten kokonaisuudessaan 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://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>

Kirjasintyypit

Jotta shoppisi sopii hyvin yhteen verkkosivustosi kanssa, emme määrittele sivustoihin sisällytetyille verkkokaupoille omia kirjasintyyppejä. Tämä tarkoittaa, että sinun on määritettävä kirjasintyypit itse joko body-tagissa, verkkokauppaa ympäröivässä div-elementissä tai itse Spreadshop-säiliössä (container).

Shopin muokkausta edistyneille

On olemassa muitakin parametrejä, joita voit muokata.

  • locale string
    Jos sinulla on kansainvälinen verkkokauppa, tällä parametrillä voit muuttaa omaan sivustoosi sisällytetyn shoppisi kielen ja valuutan.
    Käytettävissä ovat nämä 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 muuten 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)
    Navigoitaessa muihin sivuihin sisällytetyissä verkkokaupoissa syntyy oletusarvoisesti hashbang-URLeja (.../shop/#!/miesten+t-paidat?q=P24). Sen voit välttää asettamalla tämän parametrin arvoksi true. Tämä luokitellaan ”asiantuntijatoiminnoksi”, koska se vaatii lisäksi muutoksia verkkopalvelimesi .htaccess-tiedostossa.
  • startToken string
    Polku verkkokauppasi sivulle, jonka on tarkoitus näkyä aloitussivuna.

Esimerkki

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

var spread_shop_config = {
    shopName: 'goats',
    prefix: 'https://shop.spreadshirt.de',
    baseId: 'shop',
    locale: 'de_DE',
    startToken: 'men+t-shirts?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 esiintyy layout- ja styling-ongelmia. Toiseen sivustoon sisällytetyssä verkkokaupassa sinulle huomautetaan tämän tagin puuttumisesta erittäin huomiota herättävällä bannerilla.

Painikkeet ja linkit eivät toimi

Spreadshop käyttää React.js-kirjastoa, joka aiheuttaa yhteensopivuustilassa yhdessä MooToolsin kanssa virheitä. Jollei verkkokaupassasi ole mahdollista klikata mitään, se saattaa johtua siitä, että käytät MooToolsia yhteensopivuustilassa.

Shop on sisällytetty useampaan kertaan

Emme missään tapauksessa suosittele shopin sisällyttämistä useampaan kertaan samaan sivuun. Seurauksena on varmasti ei-toivottua käyttäytymistä.

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-osassasi on <meta charset=”UTF-8”>-tag.

Tutoriaali

Katso aiheesta verkkosivuun sisällyttäminen myös (englanninkielinen) videotutoriaalimme:

Oliko tästä artikkelista apua?