Baza wiedzy LINKSPOT › Wygląd sklepu

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

Wygląd sklepu · Opublikowano 2025-06-23

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.

Spis treści

Szablon Szafir

Szablon Agat

Szablon Opal

Szablon Bursztyn

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 „” dodaj poniższą linijkę:
    {% include 'collection-points-styles.html' %}
  6. W pliku „__layout.html”, na końcu sekcji „” dodaj poniższą linijkę:
    {% include 'collection-points-scripts.html' %}
  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 „
    ” należy utworzyć nowy kontener “
    ”    , a następnie wkleić do niego dwa ostatnie kontenery z klasą “f-left-ui” wraz z ich zawartością.
    `


    {% if order.SelectedDelivery.CollectionPointTypeId == 0 -%} {{translations.ShippingAddress}} {% else -%} {{translations.MyData}} {% endif -%}

    {% assign lackOfPhone = false -%} {% assign countryMismatch = false -%}`{% if order.SelectedDelivery.PhoneRequired and deliveryAddress.PhoneNo == ” -%} {% assign lackOfPhone = true -%} {% endif -%} {% comment -%} {% if page.Cookies.deliveryAddressId == null or page.Cookies.deliveryAddressId == ” -%} {% for profileAddress in customer.DeliveryAddresses -%} {% if profileAddress.Default and profileAddress.Country != config.DefaultCountry -%} {% assign countryMismatch = true -%} {% break -%} {% endif -%} {% endfor -%} {% if countryMismatch == false and deliveryAddress.Country != config.DefaultCountry -%} {% assign countryMismatch = true -%} {% endif -%} {% elseif page.Cookies.deliveryAddressId == -1 -%} {% assign countryMismatch = true -%} {% else -%} {% for profileAddress in customer.DeliveryAddresses -%} {% if profileAddress.Id == page.Cookies.deliveryAddressId -%} {% if profileAddress.Country != deliveryAddress.Country %} {% assign countryMismatch = true -%} {% endif -%} {% break -%} {% endif -%} {% endfor -%} {% endif -%} {% endcomment -%} {% if page.Cookies.delivCountryChanged == 'true’ -%} {% assign countryMismatch = true -%} {% endif -%} {% if deliveryAddress.Name == ” or lackOfPhone or countryMismatch -%} {% include 'order/delivery-partials/address-form.html’ with 'orderDa’ -%} {% else -%} {% include 'order/delivery-partials/address-presentation.html’ with 'orderDa’ -%} {% endif -%}

{{translations.InvoiceData}}

{% if invoiceAddress.Name == ” and order.Customer.CustomerDetailsEditable -%} {% include 'order/delivery-partials/address-form.html’ with 'inv-add’ -%} {% else -%} {% include 'order/delivery-partials/address-presentation.html’ with 'inv-add’-%} {% endif -%}

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:
    `{% if cart.SelectedDelivery.CollectionPointTypeId == 2 or cart.SelectedDelivery.CollectionPointTypeId == 1 -%}

    {% if settings.googleMapsKey == '' or cart.SelectedDelivery.CollectionPointTypeId == 1 -%}
    {% elsif settings.googleMapsKey != '' and cart.SelectedDelivery.CollectionPointTypeId == 2 -%}
    {% endif -%}

{% endif -%}4. W pliku **‘\_layout.html’**, na końcu sekcji **‘<head>’** dodaj poniży kod:{% if page.PageId == config.DefinedPages.Order.Id -%}


{% endif -%}5. W pliku **‘\_layout.html’**, na końcu sekcji **‘<body>’** dodaj poniży kod:{% if page.PageId == config.DefinedPages.Order.Id -%}

{% endif -%}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:orderPrevStep: function (e) {
var container = $('.shopping-cart');
var data = {
__template: 'partials/cart/cart-template.html',
__csrf: __CSRF,
__action: 'Order/StepPrev'
};
$.post(null, data, function (result) {
if (result.action.Result) {
$('.shopping-cart').html(result.template);
if ($('body').find('#invoice-address-data').index() >= 0) {
application.uiSetSwitchNameWidthInInvoice();
}
if ($('#easypack-map').length > 0) {
orderCollectionPoints.easyPackAsyncInit();
}
if($('#collection-points-searcher').length > 0) {
orderCollectionPoints.getCollectionPoints();
}
if ($('.geowidget-container').length > 0) {
$('#main-section .save-delivery-address-data').addClass('order-next-step').removeClass('choose-collection-point');
}
application.loadImages();
application.uiScrollToTop(container);
application.uiCheckLabels();
} else {
if (result.action.Code != 100) {
if (result.action.Validation != null) {
errorMessage = '

' + result.action.Message + '
' + '

' + result.action.Validation[0].Error + '

';
} else {
errorMessage = '
' + result.action.Message + '
';
}
application.createMessage(errorMessage);
}
}
});
},orderNextStep: function (e) {
if ($('#delivery-address-data').index() >= 0) {
var allEdited = true;
$('#delivery-address-data input[required]').each(function () {
if (allEdited === false) {
return;
} else {
if ($(this).val() == '') {
allEdited = false;
}
}
});
if (allEdited === false) {
var errorMessage = $(e.currentTarget).next().next().val();
application.createMessage(errorMessage, 3000);
return;
} else if ($('input[name="invoice"]').hasClass('company') && $('input[name="tin"]').val() == '' && $('input[name="tin"]').prop('required')) {
var message = $('input[name="company"]').attr('data-info');
application.createMessage(message, 2000);
} else {
var data = $('#delivery-address-data').serializeArray();
var validate = application.uiValidateForm($('#delivery-address-data'));`if (validate) {
$.post(null, data, function (result) {
if (result.action.Result) {
var container = $(’body’);
var data = {
__template: 'partials/cart/cart-template.html’,
__csrf: __CSRF,
__action: 'Order/StepNext’
};
$.post(null, data, function (result) {
if (result.action.Result) {
$(’.shopping-cart’).replaceWith(result.template);
if ($(’body’).find(’#invoice-address-data’).index() >= 0) {
application.uiSetSwitchNameWidthInInvoice();
}
application.loadImages();
application.uiSetSwitchNameWidthInSummaryCheckboxes();
application.uiScrollToTop(container);
application.uiCheckLabels();
if ($(’#easypack-map’).length > 0) {
orderCollectionPoints.easyPackAsyncInit();
}
if($(’#collection-points-searcher’).length > 0) {
orderCollectionPoints.getCollectionPoints();
}
} else {
if (result.action.Code != 100) {
if (result.action.Validation != null) {
errorMessage = '
’ + result.action.Message + '
’ + '

’ + result.action.Validation[0].Error + '

’;
} else {
errorMessage = '
’ + result.action.Message + '
’;
}
application.createMessage(errorMessage, 3000);
}
}
});
} else {
if (result.action.Code != 100) {
if (result.action.Validation != null) {
errorMessage = '
’ + result.action.Message + '
’ + '

’ + result.action.Validation[0].Error + '

’;
} else {
errorMessage = '
’ + result.action.Message + '
’;
}
application.createMessage(errorMessage, 3000);
return;
}
}
});
}
}
} else {
var container = $(’body’);
var data = {
__template: 'partials/cart/cart-template.html’,
__csrf: __CSRF,
__action: 'Order/StepNext’
};
$.post(null, data, function (result) {
if (result.action.Result) {
if ((result.template).indexOf(’name=”sel-del-met” value=”’ + 1 + '”’) !== -1 || (result.template).indexOf(’name=”sel-del-met” value=”’ + 2 + '”’) !== -1) {
application.orderPrevStep();
} else {
$(’.shopping-cart’).replaceWith(result.template);
if ($(’body’).find(’#invoice-address-data’).index() >= 0) {
application.uiSetSwitchNameWidthInInvoice();
}
if ($(’#easypack-map’).length > 0) {
orderCollectionPoints.easyPackAsyncInit();
}
if($(’#collection-points-searcher’).length > 0) {
orderCollectionPoints.getCollectionPoints();
}
application.loadImages();
application.uiSetSwitchNameWidthInSummaryCheckboxes();
application.uiScrollToTop(container);
application.uiCheckLabels();
}
} else {
if (result.action.Code != 100) {
if (result.action.Validation != null) {
errorMessage = '
’ + result.action.Message + '
’ + '

’ + result.action.Validation[0].Error + '

’;
} else {
errorMessage = '
’ + result.action.Message + '
’;
}
application.createMessage(errorMessage);
}
}
});
}
},

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ą:
    {% include 'order/delivery-points-partial.html' -%}
  5. W pliku ‘_layout.html’, na końcu sekcji ‘’ dodaj poniży kod:
    {% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="https://geowidget.easypack24.net/css/easypack.css"> <link rel="stylesheet" type="text/css" href="css/collection-points.css"> {% endif -%}
  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:orderForm.on('click', '#customer-data-form', function (e) {
e.preventDefault();
$.get('', {__template: 'order/cst-data/data-form.html'}, function (res) {
orderForm.find('.content').html(res.template);
if ($('#easypack-map').length > 0) {
orderCollectionPoints.easyPackAsyncInit();
}
if($('#collection-points-searcher').length > 0) {
orderCollectionPoints.getCollectionPoints();
}
window.sessionStorage.setItem('continueWithoutRegistration', true);
});
});var initStep = (function f(e, step) {
if (!$('.order').hasClass('cart-empty')) {
stepsLinks();
}`if (step && step == 'ThankYou’) {
$(„#order-form”).find(„script”).each(function () {
eval($(this).text());
});

if (window.sessionStorage.getItem(’continueWithoutRegistration’)) {
window.sessionStorage.removeItem(’continueWithoutRegistration’);
}
}

if (step && step == 'CustomerData’) {
window.sessionStorage.setItem(’toSkip’, true);

if (window.sessionStorage.getItem(’continueWithoutRegistration’)) {
$.get(”, {__template: 'order/cst-data/data-form.html’}, function (res) {
orderForm.find(’.content’).html(res.template);
if ($(’#easypack-map’).length > 0) {
orderCollectionPoints.easyPackAsyncInit();
}
if($(’#collection-points-searcher’).length > 0) {
orderCollectionPoints.getCollectionPoints();
}
});
}
}
return f;
})();

orderForm.on('click', '.recalculate, #remove-points', function (e) { e.preventDefault(); $.post(null, { __collection: 'customer.Cart.Value', __template: 'order/cart.html', __csrf: __CSRF, __action: 'cart/Recalculate' }, function (d) { CreateTooltip(d.action); showTooltip(); $('.order-content').replaceWith(d.template); lazyCheck(); UpdateSmallCrt(d.collection); orderCollectionPoints.checkPointsAvailability(); }); });

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 pod koniec znaczników dodaj poniższy kod:
    {% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="https://geowidget.easypack24.net/css/easypack.css"> <link rel="stylesheet" type="text/css" href="css/collectionpoints.css"> {% endif -%}
  4. W pliku ‘order-cart.html’, do bloku ‘{% block PageBodyEnd -%}’ dodaj poniży kod:
    <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script> <script src="js/collection-points.js"></script>
  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:
    {% if cart.SelectedDelivery.CollectionPointTypeId == 2 or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div class="col-sm-12 geowidget-container" id="map"> <h2> {% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} {{translations.Crt_ChooseCollectionPoint}} {% else -%} {{translations.Crt_ChooseInpostMachine}} {% endif -%} </h2>{% if settings.googleMapsKey == ” or cart.SelectedDelivery.CollectionPointTypeId == 1 -%}

    {% elsif settings.googleMapsKey != ” and cart.SelectedDelivery.CollectionPointTypeId == 2 -%}

    {% endif -%}

    {% endif -%}
  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:
    {% if page.POST.__include %} {% assign displayOptions = page.POST.__include %} {% else %} {% assign displayOptions = include %} {% endif %}
  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
    :
    {% if settings.googleMapsKey != '' and deliveryData.CollectionPoints[deliveryData.CollectionPointId].Latitude <> "" and deliveryData.CollectionPoints[deliveryData.CollectionPointId].Longitude <> "" and step == 'summary' -%} <p class="collection-localization"> <span class="glyphicon glyphicon-map-marker"></span> {{translations.Crt_LocateOnMap}} </p> <div id="map-canvas" data-step="{{step}}" data-type="{{deliveryData.CollectionPointTypeId}}" data-lat="{{deliveryData.CollectionPoints[deliveryData.CollectionPointId].Latitude}}" data-lng="{{deliveryData.CollectionPoints[deliveryData.CollectionPointId].Longitude}}"></div> {% endif -%}
  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?

( 0 )

( 1 )

Wyślij opinie

Inne w kategorii

Społeczność Comarch

Dzięki społeczności Comarch ERP rozwiązujemy problemy, dzielimy się pomysłami oraz informujemy o nowościach.

Dołącz do Społeczności Comarch

Oferta e-Commerce

Demo Comarch e-Sklep
Zamów Comarch e-Sklep
Cennik Comarch e-Sklep
Comarch e-Sale
Comarch B2B
Czym się różni Comarch
e-Sklep B2B od Comarch B2B?

Przydatne linki

Spis treści
Stwórz darmowy szablon
Konfigurator produktu
Więcej o Comarch ERP
Pomoc Comarch Betterfly
Pomoc Comarch ERP Optima
Pomoc Comarch ERP XL
Pomoc Comarch ERP Altum
Oprogramowanie e-commerce
Sztuczna Inteligencja (AI)

Kontakt

Skontaktuj się z nami
Partnerzy Comarch wdrażający e-Sklep

＋ Mam problem z tym tematem Otwórz w portalu bazy wiedzy »