Nowe Inpost API – aktualizacja paczkomatów i punktów odbioru osobistego w szablonach

Szablon Szafir

Wskazówka
Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki
  1. Wrzuć pliki „collection-points-scripts.html” i „collection-points-styles.html” do głównego folderu z szablonem (tam gdzie „__layout.html”).
  2. Wrzuć plik „collection-points.js” do folderu „js”.
  3. Wrzuć plik “collection-points.css” do folderu “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ę:
  6. W pliku „__layout.html”, na końcu sekcji „<body>” dodaj poniższą linijkę:
  7. Dodaj tłumaczenie:
    SearchInpostInfo: „Szukaj po mieście, adresie i nazwie paczkomatu”
  8. (punkt opcjonalny – poprawienie styli – bez niego paczkomaty i POO będą działać ale będzie brzydko wyglądać i każdy to zauważy) W pliku “order/delivery-partials/delivery-section.html”, pod formularzem „<form class=”no-message-lq delivery-form-lq”>” należy utworzyć nowy kontener “<div class=”clear-after-ui”></div>”, a następnie wkleić do niego dwa ostatnie kontenery z klasą “f-left-ui” wraz z ich zawartością.

Szablon Agat

Wskazówka
Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki
  1. Podmień plik ‘order.js’, który znajduje się w folderze ‘js’.
  2. Wrzuć plik ‘collection-points.css’ do folderu ‘css’.
  3. a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘delivery-adress.html’, który znajduje się w folderze ‘partials/cart’.
    b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami następującym:
  4. W pliku ‘_layout.html’, na końcu sekcji ‘<head>’ dodaj poniży kod:
  5. W pliku ‘_layout.html’, na końcu sekcji ‘<body>’ dodaj poniży kod:
  6. Dodaj tłumaczenia:
      TypeAdress: „Wpisz adres”
      AddCodeOrAdress: „Wpisz kod paczkomatu lub adres”
  7. Aby paczkomaty działały poprawnie również przy przechodzeniu na poprzedni i następny krok koszyka:
    a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘init.js’, który znajduje się w folderze ‘js’.
    b) Jeśli kod szablonu był modyfikowany, wywołaj funkcje:
    orderCollectionPoints.easyPackAsyncInit();
    orderCollectionPoints.getCollectionPoints();
    w tych funkcjach, które są wywoływane przy zmianie sekcji na ‘CustomerData’ w koszyku:
    Zmienione fragmenty pliku ‘init.js’ to:
     

Szablon Opal

Wskazówka
Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki
  1. Wrzuć plik ‘collection-points.js’ do folderu ‘js’.
  2. Wrzuć plik ‘collection-points.css’ do folderu ‘css’.
  3. Podmień plik ’delivery-points-partial.html’, który znajduje się w folderze ‘order’.
  4. a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘data-form.html’, który znajduje się w folderze ‘order/cst-data’.
    b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami linijką:
  5. W pliku ‘_layout.html’, na końcu sekcji ‘<head>’ dodaj poniży kod:
  6. W pliku ‘order-cart.html’, do bloku ‘{% block PageBodyEnd -%}’ dodaj poniży kod:
  7. Dodaj tłumaczenie:
      TypeAdress: „Wpisz adres”
  8. Aby paczkomaty działały poprawnie również przy przechodzeniu na poprzedni i następny krok koszyka:
    a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘order.js’, który znajduje się w folderze ‘js’.
    b) Jeśli kod szablonu był modyfikowany, wywołaj funkcje:
    orderCollectionPoints.easyPackAsyncInit();
    orderCollectionPoints.getCollectionPoints();
    w tych funkcjach, które są wywoływane przy zmianie sekcji na ‘customerData’ w koszyku:
    Zmienione fragmenty pliku ‘order.js’, to:
     

Szablon Bursztyn

Wskazówka
Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki
    1. Wrzuć plik „collectionpoints.js” do folderu „js”.
    2. Wrzuć plik “collectionpoints.css” do folderu “css” .
    3. W pliku html w sekcji <head> pod koniec znaczników <link> dodaj poniższy kod:
    4. W pliku ‘order-cart.html’, do bloku ‘{% block PageBodyEnd -%}’ dodaj poniży kod:
    5. Plik cart.html:
      a)
       Jeśli kod szablonu nie był modyfikowany, wystarczy podmienić plik, który znajduje się w katalogu ‘order’.
      b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami następującym kodem:
    6. Plik order-short-info.html :
      a) Jeśli kod szablonu nie był modyfikowany, podmień plik znajdujący się w folderze ‘order’
      b) Jeśli kod szablonu był modyfikowany, podmień linijkę {% assign displayOptions = include %} (znajdującą się na początku dokumentu), poniższym kodem:
    7. Plik cart-products-partial.html:
      a) Jeśli kod szablonu nie był modyfikowany, podmień plik znajdujący się w folderze ‘order’
      b) Jeśli kod szablonu był modyfikowany, proszę usunąć poniższy kod znajdujący się pod koniec znacznika <div class=”custom-collection”> :
    8. Aby paczkomaty działały poprawnie podczas przechodzenia na poprzedni oraz następny krok koszyka należy:
      a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘order.js’ znajdujący się w folderze ‘js’
      b) Jeśli kod szablonu był modyfikowany, należy wywołać orderCollectionPoints.cpCheck() oraz orderCollectionPoints .checkPackage() na końcu funkcji, która przenosi użytkownika do poprzedniego kroku koszyka.Funkcja orderCollectionPoints.cpCheck() jest odpowiedzialna za inicjalizację mapy bądź listy paczkomatów na danej stronie. Z kolei orderCollectionPoints.checkPackage() sprawdza czy paczkomat do którego ma być zrealizowane zamówienie został już wybrany.

      Funkcja orderCollectionPoints.cpCheck() należałoby również dodać do zdarzenia obsługującego zmianę sposobu dostawy.

      Ostatnią rzeczą jaką trzeba zrobić na koniec zamówienia, kiedy klient zrealizuje już transakcję, to dodanie linijki sessionStorage.removeItem(‘paczka’). Ma ona na celu usunięcia informacji o wybranym paczkomacie.

Wskazówka
Przeczytaj więcej o nowym API serwisu InPost.

Czy ten artykuł był pomocny?