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

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 -%} {% endfor -%}

{% endif %} {% endfor %} {% 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: $middleColor;
display: flex;
flex-wrap: wrap;
margin-top: 11px;
}

.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 -%} {% 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);
}
}

.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ę 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 -%} {% 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ą).

Czy ten artykuł był pomocny?

( 0 )
( 1 )
Wyślij opnie