Prezentacja własnych punktów odbioru osobistego w formie mapy

Spis treści

Ustawienia ogólne

Szablon Szafir

Szablon Agat

Szablon Opal

Szablon Bursztyn

Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce.

Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Ustawienia ogólne

Niezbędne ustawienia do włączenia widoku własnych punktów odbioru na mapie:
1. Dodanie w panelu sklepu klucza aplikacji do Google Maps API (Wygląd Sklepu > Ustawienia)

google maps api input

2. Zaznaczenie opcji wyświetlania punktów odbioru osobistego na mapie (Wygląd Sklepu > Ustawienia)

change to map view

3. Dodanie własnych punktów odbioru (Ustawienia > Płatności i dostawy > Odbiór osobisty)

add delivery points

add point

Wskazówka
Wypełniając formularz nowego punktu, trzeba pamiętać o polach „Szerokość/długość geograficzna”

add point form

4. Włączyć opcję odbioru osobistego w panelu (Ustawienia > Płatności i dostawy > Odbiór osobisty)

enable delivery points

5. Dodać dostawę za pomocą własnych punktów odbioru do sposobów dostawy

deliveries

add delivery method

6. Dodać dostawę do macierzy dostaw oraz określić metody płatności za ten rodzaj dostawy

add delivery method

payments methods

7. Dokonać niezbędnych modyfikacji w kodzie szablonu wg poniższych instrukcji.

 

Szablon Szafir

Wskazówka
Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki
  1. Umieść pliki „collection-points-scripts.html” i „collection-points-styles.html” w głównym folderze szablonu.
  2. Umieść plik „collection-points.js” w folderze „js”.
  3. Umieść plik “collection-points.css” w folderze “css”.
  4. Podmień plik “collection-points.html”, który znajduje się w folderze „order/delivery-partials”.
  5. W pliku „__layout.html”, na końcu sekcji „<head>” dodaj poniższą linijkę: 
    {% include 'collection-points-styles.html' %}
  6. W pliku „__layout.html”, na końcu sekcji „<body>” dodaj poniższą linijkę: 
    {% include 'collection-points-scripts.html' %}

 

Szablon Agat

Wskazówka
Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki
  1. Umieść plik “collection-points.css” w folderze “css”.
  2. Umieść plik “collection-points.js” w folderze “js”.
  3. Podmień plik “order.js”, który znajduje się w folderze “js”.
  4. Podmień plik “delivery-adress.html”, który znajduje się w folderze “partials/cart”.
  5. Podmień plik “init.js”, który znajduje się w folderze “js”.
  6. W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod: 
    {% if page.PageId == config.DefinedPages.Order.Id -%} 
   <link rel="stylesheet" type="text/css" href="css/collection-points.css"> 
{% endif -%}

     

Szablon Opal

Wskazówka
Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki
  1. Umieść plik “collection-points.js” w folderze “js”.
  2. Umieść plik “collection-points.css” w folderze “css”.
  3. Podmień plik “order.js”, który znajduje się w folderze “js”.
  4. Podmień plik “data-form.html”, który znajduje się w folderze “order/cst-data”.
  5. Podmień plik “cart.html”, który znajduje się w folderze “order”.
  6. W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod: 
    {% if page.PageId == config.DefinedPages.Order.Id -%} 
   <link rel="stylesheet" type="text/css" href="css/collection-points.css"> 
{% endif -%}
  7. Do pliku “order-cart.html”, wklej poniższy kod: 
    {% extends '_layout.html' -%}

{% block PageContent -%}
    <script src="{{ cart.CollectionPointMapUrl }}"></script>
    <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script>
    <script src="js/collection-points.js?v={{ lqTS }}"></script>
    {% include 'order-cart-container.html'%}
{% endblock -%}

{% block PageBodyEnd -%}
    <script>__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script>
    <script src="js/order.js?v={{ lqTS }}" charset="utf-8" type="text/javascript"></script>
{% endblock -%}

Szablon Bursztyn

Wskazówka
Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki
  1. Umieść plik “collectionpoints.js” w folderze “js”.
  2. Umieść plik “collectionpoints.css” w folderze “css”.
  3. Podmień plik “order.js”, który znajduje się w folderze “js”.
  4. Podmień plik “cart.html”, który znajduje się w folderze “order”.
  5. Podmień plik “order-short-info.html”, który znajduje się w folderze “order”.
  6. Podmień plik “cart-products-partial.html”, który znajduje się w folderze “order”.
  7. W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod: 
    {% if page.PageId == config.DefinedPages.Order.Id -%}
    <link rel="stylesheet" type="text/css" href="css/collectionpoints.css">
{% endif -%}
  8. Do pliku “order-cart.html”, wklej poniższy kod: 
    {% extends '_layout.html' -%}

{% block PageContent -%}
    <script src="{{ cart.CollectionPointMapUrl }}"></script>
    <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script>
    <script src="js/collectionpoints.js?v={{ lqTS }}"></script>
    {% include 'order-cart-container.html'%}
{% endblock -%}

{% block PageBodyEnd %}
    <script type="text/javascript">__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script>
    <script src="js/order.js?v={{ lqTS }}"></script>
{% endblock %}

     

Czy ten artykuł był pomocny?

Wyślij opinie

Artykuły powiązane