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 %}
{% 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{ ’); tt.append(’ ’); $(’body’).append(tt); setTimeout(function(){tt.fadeOut(function(){tt.remove();});},3000); return tt; } Opal: ’); 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ą). W pliku partials/cart/cart-content.html dodaj poniższy kod: {% 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-channel{ W pliku order/delivery-partials/delivery-section.html dodaj poniższy kod: {% 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: .payment-channel-ui:not(.checkbox-ui):not(.radio-ui){ $('body').on('change', '.payment-channel-lq [name=channel]', function (e) { ’); 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ą).
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;
}
}
}
$('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
});
});
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;
if (sessionStorage.getItem('tooltip') != null){
tt = $(".tt.err");
} else {
tt = $('2. Agat:
{% 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 %}
.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);
}
}
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;
}
}
}
$('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
});
});
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
{% 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] -%}
.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;
}
}
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%;
}
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();
};
choosePaymentChannel(e);
});
if ($('.payment-channels-lq').index() != -1 && $('.payment-channel-lq [name=channel]:checked').index() == -1) {
$('.payment-channels-lq').append('Czy ten artykuł był pomocny?