Menu

Integracja strony internetowej za pomocą kodu JavaScript

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://shop.spreadshirt.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://shop.spreadshirt.de lub https://shop.spreadshirt.co.uk.
  • baseId string
    Określone przez Ciebie wcześniej id elementu div (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://shop.spreadshirt.net/js/shopclient.nocache.js"></script>

Dla sklepów północnoamerykańskich:

<script type="text/javascript" src="https://shop.spreadshirt.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://shop.spreadshirt.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://shop.spreadshirt.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 w head Twojej strony (title, description, seoIndex, OpenGraph i tagi Twitter Card). Aby wyłączyć tę funkcjonalność, zmień ten parametr na false.
  • 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 na true. 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 na true.

Przykład ustawień dla zaawansowanych

Oto przykład użycia wszystkich dostępnych parametrów:

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,
};

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:

Czy ten artykuł był przydatny?