Menu

Integracja strony za pomocą JavaScript

Możesz zintegrować swój Spreadshop na swojej istniejącej stronie internetowej.

Trzeba w tym celu wykonać kilka czynności, do których będzie Ci potrzebna pewna znajomość HTML, CSS i JavaScript, a także dostęp do kodu źródłowego Twojej strony.

Gdzie ma się pojawiać Twój sklep?

Aby określić lokalizację sklepu na Twojej stronie, umieść element div z dowolnie wybranym id w odpowiednim miejscu Twojego pliku HTML. Wszystko, co napiszesz w ramach tego elementu div, będzie wyświetlane tylko do momentu załadowania sklepu. Następnie całkowicie zniknie. Dlatego miejsce między tagami div nadaje się dobrze na komunikat taki jak „Trwa ładowanie Spreadshop...”

<div id="shop">Trwa ładowanie Spreadshop...</div>

Konfiguracja

Aby Twój sklep był faktycznie ładowany, wstaw w JavaScript obiekt konfiguracji spread_shop_config, który powinien być dostępny w oknie Scope.

Wersja minimalna wygląda tak:

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

Niezbędne parametry:

  • shopName string
    Nazwa lub identyfikator Twojego sklepu. Możesz je sprawdzić w kanałach sprzedaży na Twojej stronie głównej
  • prefix string/url
    Kompletna domena Twojego sklepu (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 tylko wstawić link do skryptu, który wykona całą robotę i załaduje sklep. Najlepiej umieścić go gdzieś pod Twoją konfiguracją.

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

Minimalny przykład tego, jak może wyglądać całość:

<!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>
</code>

Czcionki

Aby umożliwić Ci dopasowanie sklepu do Twojej strony internetowej, nie definiujemy własnych czcionek w zintegrowanych sklepach. Oznacza to, że musisz samodzielnie zdefiniować swoje czcionki w tagu body, elemencie div, w którym znajduje się Twój sklep, albo w samym kontenerze Spreadshop.

Ustawienia sklepu 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ą tych parametrów możesz zmienić język i walutę zintegrowanego sklepu.
    Dostępne są następujące wartości:
    platform locale language currency
    EU da_DK Duński Korona duńska (kr)
    EU en_EU Angielski Euro (€)
    EU en_GB Angielski Funt szterling (£)
    EU en_IE Angielski Euro (€)
    EU de_DE Niemiecki Euro (€)
    EU de_AT Niemiecki Euro (€)
    EU de_CH Niemiecki Frank szwajcarski (CHF)
    EU es_ES Hiszpański Euro (€)
    EU fi_FI Fiński Euro (€)
    EU fr_BE Francuski Euro (€)
    EU fr_CH Francuski Frank szwajcarski (CHF)
    EU fr_FR Francuski Euro (€)
    EU it_CH Włoski Frank szwajcarski (CHF)
    EU it_IT Włoski Euro (€)
    EU nl_BE Holenderski Euro (€)
    EU nl_NL Holenderski Euro (€)
    EU no_NO Norweski Korona norweska (kr)
    EU pl_PL Polski Euro (€)
    EU sv_SE Szwedzki Korona szwedzka (kr)
    NA en_US Angielski Dolar ($)
    NA en_CA Angielski Dolar ($)
    NA en_AU Angielski Dolar australijski (AUD$)
    NA 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 oraz Twitter Card tags). Aby wyłączyć tę funkcjonalność, przestaw 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. Jest to funkcjonalność dla zaawansowanych, ponieważ dodatkowo konieczne są zmiany w pliku .htaccess na Twoim serwerze.
  • startToken string
    Ścieżka strony Twojego sklepu, która ma się wyświetlać jako strona główna.
  • swipeMenu boolean (default: false)
    Jeśli do nawigacji w swoim zintegrowanym sklepie używasz już menu hamburgerowego, za pomocą tego parametru możesz wyłączyć menu hamburgerowe SpreadShop i używać menu swipe. W tym celu ustaw parametr na true.

Przykład

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 braku tego tagu poinformuje Cię dobrze widoczny baner w zintegrowanym sklepie.

Nie działają przyciski i linki

Spreadshop wykorzystuje React.js, który powoduje błędy w połączeniu z MooTools w trybie kompatybilności. Jeśli w Twoim sklepie nie można w nic kliknąć, przyczyną może być to, że korzystasz z MooTools w trybie kompatybilności.

Sklep jest zintegrowany kilkakrotnie

Zdecydowanie odradzamy integrowanie sklepu kilkakrotnie w tej samej stronie. Będzie to powodowało niepożądane zachowanie.

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“>.

Samouczek

Obejrzyj nasz samouczek na temat integrowania (w języku angielskim):

Czy ten artykuł był przydatny?