Pokażemy Ci tutaj, jak zintegrować sklep internetowy na istniejącej stronie internetowej. Jest do tego potrzebna podstawowa wiedza z zakresu HTML, CSS i JavaScript oraz dostęp do kodu źródłowego strony.
Gdzie ma się pojawić Twój sklep?
Określ, gdzie Twój sklep ma być wyświetlany na stronie internetowej. W tym celu umieść kontener div
w odpowiednim miejscu w pliku HTML. Twój sklep Spreadshop będzie wyświetlany w tym kontenerze. Możesz wybrać dowolne id
.
Wszystko, co napiszesz w ramach elementu div
, będzie wyświetlane do momentu załadowania sklepu. Dlatego miejsce między tagami div nadaje się świetnie na komunikat typu „Trwa ładowanie Spreadshop...”.
<div id="shop">Trwa ładowanie Spreadshop...</div>
Konfiguracja
Aby ładować sklep, za pomocą spread_shop_config
skonfiguruj odpowiednią zmienną w JavaScript. Spread_shop_config
musi być ustawione w „window scope”.
W wersji minimalnej wygląda to tak:
var spread_shop_config = {
shopName: 'goats',
prefix: 'https://SHOPNAME.myspreadshop.de',
baseId: 'shop',
};
Aby konfiguracja mogła zostać załadowana, musisz jeszcze zdefiniować odpowiednie parametry:
- shopName
string
Nazwa lub identyfikator Twojego sklepu. Znajdziesz je w zakładce administratora swojego sklepu. - prefix
string/url
Cała domena Twojego sklepu, czyli wszystko przed ukośnikiem, np.https://SHOPNAME.myspreadshop.de
lubhttps://SHOPNAME.myspreadshop.co.uk
. - baseId
string
Określone przez Ciebie wcześniejid
elementudiv
(patrz wyżej)
Ostatni element układanki: skrypt
Na koniec musisz jeszcze dodać link do skryptu, który wykonuje całą pracę i ładuje sklep. Najlepiej umieść go pod swoją konfiguracją. W zależności od platformy, na której znajduje się Twój sklep, dodaj następujące wiersze:
Dla sklepów europejskich:
<script type="text/javascript" src="https://SHOPNAME.myspreadshop.net/js/shopclient.nocache.js"></script>
Dla sklepów północnoamerykańskich:
<script type="text/javascript" src="https://SHOPNAME.myspreadshop.com/js/shopclient.nocache.js"></script>
A tak działa wszystko razem
Cały przykład wygląda tak:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Integrated Shop Test</title>
</head>
<body>
<div id="shop">Trwa ładowanie Spreadshop...</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>
Czcionki
Aby umożliwić Ci dopasowanie sklepu do Twojej strony internetowej, nie definiujemy własnych czcionek dla zintegrowanych sklepów. Oznacza to, że musisz samodzielnie zdefiniować czcionki w tagu body
, elemencie div
, w którym znajduje się Twój sklep, albo w samym kontenerze SpreadShop.
Ustawienia dla zaawansowanych
Jest jeszcze kilka dodatkowych parametrów, które możesz ustawić.
- locale
string
Jeśli Twój sklep jest międzynarodowy, za pomocą tego parametru możesz zmienić język i walutę zintegrowanego sklepu.
Dostępne są następujące wartości:
platform locale language currency UE da_DK Duński Korona duńska (kr) UE en_EU Angielski Euro (€) UE en_GB Angielski Funt szterling (£) UE en_IE Angielski Euro (€) UE de_DE Niemiecki Euro (€) UE de_AT Niemiecki Euro (€) UE de_CH Niemiecki Frank szwajcarski (CHF) UE es_ES Hiszpański Euro (€) UE fi_FI Fiński Euro (€) UE fr_BE Francuski Euro (€) UE fr_CH Francuski Frank szwajcarski (CHF) UE fr_FR Francuski Euro (€) UE it_CH Włoski Frank szwajcarski (CHF) UE it_IT Włoski Euro (€) UE nl_BE Holenderski Euro (€) UE nl_NL Holenderski Euro (€) UE no_NO Norweski Korona norweska (kr) UE pl_PL Polski Euro (€) UE sv_SE Szwedzki Korona szwedzka (kr) Ameryka Północna en_US Angielski Dolar ($) Ameryka Północna en_CA Angielski Dolar ($) Ameryka Północna en_AU Angielski Dolar australijski (AUD$) Ameryka Północna fr_CA Francuski Dolar kanadyjski (CAD$) - updateMetadata
boolean
(default:true
)
Jeśli nie zostanie to zdefiniowane inaczej, zintegrowany sklep zmienia metadane SEO whead
Twojej strony (title
,description
,seoIndex
, OpenGraph i tagi Twitter Card). Aby wyłączyć tę funkcjonalność, zmień ten parametr nafalse
. - usePushState
boolean
(domyślnie:false
)
Standardowo podczas nawigacji w zintegrowanych sklepach powstają adresy hash-bang URL(.../shop/#!/männer+t-shirts?q=P24
). Możesz tego uniknąć, ustawiając ten parametr natrue
. W tym celu konieczne są również zmiany w pliku.htaccess
na Twoim serwerze internetowym, dlatego z tej funkcji powinni korzystać tylko eksperci. - pushStateBaseUrl
Ma znaczenie tylko, jeśli używasz już „usePushState” (=true
), chcesz zablokować „redirect” do swojego sklepu Spreadshop lub chcesz zintegrować sklep w różnych miejscach. Zdefiniuj w tym celu punkt wejścia zintegrowanej strony internetowej, od którego ma być dołączony Twój sklep. - startToken
string
Za pomocą tej ścieżki określasz, która strona sklepu ma być wyświetlana jako strona główna. - swipeMenu
boolean
(domyślnie:false
)
Jeśli na stronie, na której integrujesz sklep, znajduje się już menu hamburgerowe, najlepiej wyłącz menu hamburgerowe w swoim sklepie. Zmień ten parametr i użyj zamiast niego menu swipe. W tym celu ustaw parametr natrue
.
Przykład ustawień dla zaawansowanych
Oto przykład użycia wszystkich dostępnych parametrów:
var spread_shop_config = {
shopName: 'goats',
prefix: 'https://SHOPNAME.myspreadshop.de',
baseId: 'shop',
locale: 'de_DE',
startToken: 'men+t-shirts?q=P24',
usePushState: false,
updateMetadata: true,
};
Częste błędy i ich przyczyny
Brak DOCTYPE
Twój plik HTML musi się zaczynać tagiem <!DOCTYPE html>
, ponieważ SpreadShop został utworzony dla HTML5. Bez tego tagu będą się pojawiały problemy z układem graficznym i stylami. O jego braku poinformuje Cię dobrze widoczny baner w zintegrowanym sklepie.
Przyciski i linki nie działają
Jeśli w sklepie nie można niczego kliknąć, może to być spowodowane trybem kompatybilności MooTools. Spreadshop używa React.js
, który jest niekompatybilny z MooTools w trybie kompatybilności.
Sklep jest zintegrowany kilkakrotnie
Zdecydowanie odradzamy kilkukrotne integrowanie sklepu na tej samej stronie.
Nietypowe znaki specjalne (np. „”)
Zwróć uwagę, aby było ustawione kodowanie UTF-8. Większość systemów CMS ma do tego celu specjalne ustawienie. Jeżeli masz dostęp do swoich plików HTML, zakoduj je w UTF-8 i upewnij się, że w head
znajduje się tag <meta charset=“UTF-8“>
.
Komunikat „DOCTYPE missing” podczas integrowania na stronie Weebly
Ten komunikat o błędzie jest zazwyczaj widoczny tylko w edytorze Weebly i można go zignorować. Integracja Twojego sklepu Spreadshop będzie nadal działać, jeśli opublikujesz zmiany.
Nie działa integracja z GoDaddy Website Builder
Obecnie nie można wykonać działającej integracji z GoDaddy.
Samouczek
Obejrzyj nasz samouczek na temat integrowania: