Dodawanie kanałów do płatności online w szablonach

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.

Dodawanie kanałów do płatności online

Kanały w płatnościach online to inaczej sposób zapłaty. W tym artykule dowiesz się, jak je dodać w swoim szablonie.

1. Bursztyn i Opal

W pliku order/cart.html dodaj poniższy kod:
{% for delivery in cart.DeliveryMethods %} {% for payment in delivery.Payments %} {% if payment.Channels[0] and payment.Id == cart.SelectedDeliveryPaymentId %}

{% for channel in payment.Channels -%} {{ channel.Name }} {% endfor -%}

{% endif %} {% endfor %} {% endfor %}

.payment-channel{
display: inline-block;
width: calc(100%/6 – 30px);
min-width: 100px;
height: 50px;
margin: 15px;
position: relative;
[type=radio]{
position: absolute;
opacity: 0;
width: 0;
height: 0;
& + img{
cursor: pointer;
max-width: 100px;
max-height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:checked + img{
outline: 1px solid $primaryColor;
}
}
}

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/order.js należy wkleić poniższy kod:
$('body').on('change', '.payment-channels [name=channel]', function (e) { e.preventDefault(); var id = $('.payment-channels').data('id'); var channel = $(e.currentTarget).val(); $.post(null, { __csrf: __CSRF, __action: 'Order/DeliveryChange', id: id, channel: channel }); });

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/order.js odnajdź funkcję oznaczoną komentarzem //next i dodaj w niej (w pierwszym warunku if ($(this).hasClass(’start’))) w zależności od szablonu:
Bursztyn:
if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){ var tt = $('

’); tt.append(’

’+$(’.payment-channels’).data(’validation’)+’

’); $(’body’).append(tt); setTimeout(function(){tt.fadeOut(function(){tt.remove();});},3000); return tt; }

Opal:
if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){ var tt; if (sessionStorage.getItem('tooltip') != null){ tt = $(".tt.err"); } else { tt = $('

’); tt.append(’’+$(’.payment-channels’).data(’validation’)+’’); $(’body’).append(tt); sessionStorage.setItem(’tooltip’, 'err’); } showTooltip(); return; }

Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentChannel i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).

2. Agat:

W pliku partials/cart/cart-content.html dodaj poniższy kod:
{% for deliveryMethodLvl in cart.DeliveryMethods -%} {% if deliveryMethodLvl.Name == cart.SelectedDelivery.Name %} {% for payment in deliveryMethodLvl.Payments -%} {% if payment.Channels[0] and payment.Id == cart.SelectedDeliveryPaymentId %}

{% for channel in payment.Channels -%} {{ channel.Name }} {% endfor -%}

{% endif %} {% endfor -%} {% endif %} {% endfor -%}

Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/main2.scss dodaj poniższe style:
.payment-channels{ background-color: $bgColor; border: 1px solid $lighterColor; box-shadow: 2px 2px 1px 0 $bgColorFont; margin: 0 auto 20px; display: inline-flex; flex-wrap: wrap; width: calc(100% - 2px); @media only screen and (min-width: 481px) { width: calc(50% - 22px); min-width: 298px; margin: 0 10px 20px } @media only screen and (min-width: 769px) { width: calc(100% - 22px); } @media only screen and (min-width: 1441px) { width: calc(75% - 22px); } }

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/order.js należy wkleić poniższy kod:
$('body').on('change', '.payment-channels [name=channel]', function (e) { e.preventDefault(); var id = $('.payment-channels ').data('id'); var channel = $(e.currentTarget).val(); $.post(null, { __csrf: __CSRF, __action: 'Order/DeliveryChange', id: id, channel: channel }); });

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/order.js odnajdź funkcję orderNextStep i dodaj w niej (na początku else’a warunku if ($(’#delivery-address-data’).index() >= 0)) kolejny warunek do sprawdzenia:
if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){ application.createMessage($('.payment-channels').data('validation'), 3000); return; }
Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentChannel i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).

3. Szafir

W pliku order/delivery-partials/delivery-section.html dodaj poniższy kod:
{% for indexString in matchedDeliveriesIndexesArray -%} {% assign index = indexString | ToInt -%} {% if order.SelectedDelivery.Name == order.DeliveryMethods[index].Name -%} {% for payment in order.DeliveryMethods[index].Payments -%} {% if payment.Id == order.SelectedDelivery.Payment.Id and payment.Channels[0] -%}

{% for channel in payment.Channels -%} {{ channel.Name }} {% endfor -%}

{% endif -%} {% endfor -%} {% endif -%} {% endfor -%}

Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/globals/_globals2.scss dodaj poniższe style:
.order-ui .payment-channels-ui{ padding: 0; margin: 0 30px 15px 0; width: calc(100% - 30px); display: flex; flex-wrap: wrap; .message-bar-ui{ width: 100%; margin: 0; } }

.payment-channel-ui:not(.checkbox-ui):not(.radio-ui){
width: calc(100%/6 – 30px);
min-width: 100px;
height: 50px;
margin: 15px;
position: relative;
[type=radio]{
position: absolute;
opacity: 0;
width: 0;
height: 0;
& + img{
cursor: pointer;
max-width: 100px;
max-height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:checked + img{
outline: 1px solid $primaryColor;
}
}
}

oraz w pliku scss/globals/_globals-m.scss:
.order-ui .payment-channels-ui { margin-right: 0; width: 100%; }

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/init-ui2.js należy wkleić poniższy kod:
function choosePaymentChannel(e) { var form = $('.delivery-form-lq'); var data = form.serializeArray(); data.push({ name: '__csrf', value: __CSRF }); data.push({ name: 'channel', value: $(e.currentTarget).val() }); $.post('', data); $('.payment-channels-lq .form-error-lq').remove(); };

$(’body’).on(’change’, ’.payment-channel-lq [name=channel]’, function (e) {
choosePaymentChannel(e);
});

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/init-ui1.js odnajdź funkcję addOrder i dodaj w niej (zaraz pod pierwszym warunkiem if (ajaxModalSelector && this.hiddingClass)) kolejny warunek do sprawdzenia:
if ($('.payment-channels-lq').index() != -1 && $('.payment-channel-lq [name=channel]:checked').index() == -1) { $('.payment-channels-lq').append('

’ + __translations.ChoosePaymentMethod + ’

’); guardian = false; }

Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w pliku _layout.html odnajdź skrypt ze zmienną __translations i dopisz w nim kolejną linijkę: ChoosePaymentMethod: '{{ translations.ChoosePaymentMethod | H }}’. Następnie w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentMethod i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).