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

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;
    }
  }
}

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

$('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 = $('

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 = $('

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 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);
  }
}

.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;
    }
  }
}

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

$('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;
}

if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){

application.createMessage($('.payment-channels').data('validation'), 3000);

return;

}

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 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;
		}
	}
}

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

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

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('

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ą).

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