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
taihttps://SHOPNAME.myspreadshop.co.uk
) - baseId
string
Etukäteen määrittämäsidiv
-elementinid
(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 sivusihead
-osassa (title
,description
jaseoIndex
sekä OpenGraph ja Twitter Card tags). Jos haluat poistaa tämän toiminnon käytöstä, aseta parametrin arvoksifalse
. - 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 arvoksitrue
. 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 arvoksitrue
.
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: