Dodawanie zgód do płatności online w szablonach

W tym artykule dowiesz się, jak dodać zgody do swoich płatności online.

1. Bursztyn lub Opal

W pliku order/thank-you.html wyszukaj frazę Fields. Będzie to fragment takiej pętli:


{% for f in cart.PlacedOrder.ExternalPayment.Fields -%}
    <input name="{{f.Name}}" type="hidden" value="{{f.Value}}" />
{% endfor -%}

{% for f in cart.PlacedOrder.ExternalPayment.Fields -%}

{% endfor -%}

Pod nią wklej poniższy kod:


<div class="switch">

{% for c in cart.PlacedOrder.ExternalPayment.Consents -%}
<div class="single-tos">

{% if c.Statement -%} <input name="{{c.FieldName}}" type="hidden" value="{{c.FieldValue}}" /> <label class="statement tos-name">{{c.Text}}</label> {% else -%}
<div class="tos-switch">

<input id="tos_{{forloop.index0}}" name="{{c.FieldName}}" required="" type="checkbox" value="{{c.FieldValue}}" />
<div class="input-switch tos-switch">
<div class="switch-button"></div>
</div>
<label for="tos_{{forloop.index0}}">{% if c.Required -%}*{% endif -%} {{c.Text}}</label>

</div>
{% endif -%}

</div>
{% endfor %}

</div>

{% for c in cart.PlacedOrder.ExternalPayment.Consents -%}

{% if c.Statement -%} <input name="{{c.FieldName}}" type="hidden" value="{{c.FieldValue}}" /> <label class="statement tos-name">{{c.Text}}</label> {% else -%}

</div>

<label for="tos_{{forloop.index0}}">{% if c.Required -%}*{% endif -%} {{c.Text}}</label>

</div>

{% endif -%}

</div>

{% endfor %}

</div>

2. Szafir

W pliku order/thx.html wyszukaj frazę Fields. Będzie to fragment takiej pętli:


{% for field in order.PlacedOrder.ExternalPayment.Fields -%}
    <input name="{{ field.Name }}" type="hidden" value="{{ field.Value }}" />
{% endfor -%}

{% for field in order.PlacedOrder.ExternalPayment.Fields -%}

{% endfor -%}

Pod nią wklej poniższy kod:


{% for consent in order.PlacedOrder.ExternalPayment.Consents -%}
<div class="tos-container-lq {% if consent.Statement -%} statement-ui statement-lq {% endif -%}">

{% if consent.Statement -%} <input name="{{ consent.FieldName }}" type="hidden" value="{{ consent.FieldValue }}" />
<div class="in-external-payment-ui">{{ consent.Text }}</div>
{% else -%} <label class="checkbox-ui in-external-payment-ui tos-lq"> <input name="{{ consent.FieldName }}" required="" type="checkbox" value="{{ consent.FieldValue }}" /> <span class="label-ui">{% if consent.Required -%}<span class="required-ui">*</span> {% endif -%}{{ consent.Text }}</span> {% if consent.Required -%} <span class="error-ui validation-info-lq validation-required-lq hidden-lq">{{ translations.RequiredField }}</span> {% endif -%} </label> {% endif -%}

</div>
{% endfor -%}

{% for consent in order.PlacedOrder.ExternalPayment.Consents -%}

{% if consent.Statement -%} <input name="{{ consent.FieldName }}" type="hidden" value="{{ consent.FieldValue }}" />

<div class="in-external-payment-ui">{{ consent.Text }}</div>

{% else -%} <label class="checkbox-ui in-external-payment-ui tos-lq"> <input name="{{ consent.FieldName }}" required="" type="checkbox" value="{{ consent.FieldValue }}" /> <span class="label-ui">{% if consent.Required -%}<span class="required-ui">*</span> {% endif -%}{{ consent.Text }}</span> {% if consent.Required -%} <span class="error-ui validation-info-lq validation-required-lq hidden-lq">{{ translations.RequiredField }}</span> {% endif -%} </label> {% endif -%}

</div>

{% endfor -%}

W pliku scss/globals/_globals2.scss na samym końcu wklej poniższy fragment kodu:


.order-ui .in-external-payment-ui{
    padding-bottom: 0;
    margin: 20px 0;
}

.order-ui .in-external-payment-ui{

padding-bottom: 0;

margin: 20px 0;

}

Następnie taki plik należy zapisać zminifikować.

Wskazówka

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

Agat

W pliku partials/cart/summary.html wyszukaj frazę online-payment-step. Jest to klasa elementu form, do którego należy dodać atrybut data-tos-invalid=”{{translations.TosRequired}}” tak, aby ostatecznie wyglądał jak kod poniżej:

Pozostając dalej w tym samym pliku (partials/cart/summary.html) wyszukaj frazę Fields. Będzie to fragment takiej pętli:


{% for f in cart.PlacedOrder.ExternalPayment.Fields -%}
    <input name="{{f.Name}}" type="hidden" value="{{f.Value}}" />
{% endfor -%}

Pod nią wklej poniższy kod:
<ul class="online-payment-consents">
 	<li style="list-style-type: none;">
<ul class="online-payment-consents">{% for consent in cart.PlacedOrder.ExternalPayment.Consents -%}
 	<li class="required-consent">
<div class="input-group switches">

{% if consent.Statement %} <input name="{{ consent.FieldName }}" type="hidden" value="{{ consent.FieldValue }}" />
<p class="multiple-switch">{{ consent.Text }}</p>
{% else %} <span class="main-consent-warning tos-warning">{{translations.MainConsentWarning}}</span> <label class="switch"> <span class="switch-name summary-tos-switch-name">{% if consent.Required -%}* {% endif -%}{{ consent.Text }}</span> <input class="switch-input" name="{{ consent.FieldName }}" required="" type="checkbox" value="{{ consent.FieldValue }}" data-required="req" /> </label> {% endif -%}

</div>
 </li>
</ul>
</li>
</ul>
{% endfor %}

{% for f in cart.PlacedOrder.ExternalPayment.Fields -%}

{% endfor -%}

Pod nią wklej poniższy kod:

<ul class="online-payment-consents">{% for consent in cart.PlacedOrder.ExternalPayment.Consents -%}

{% if consent.Statement %} <input name="{{ consent.FieldName }}" type="hidden" value="{{ consent.FieldValue }}" />

<p class="multiple-switch">{{ consent.Text }}</p>

{% else %} <span class="main-consent-warning tos-warning">{{translations.MainConsentWarning}}</span> <label class="switch"> <span class="switch-name summary-tos-switch-name">{% if consent.Required -%}* {% endif -%}{{ consent.Text }}</span> <input class="switch-input" name="{{ consent.FieldName }}" required="" type="checkbox" value="{{ consent.FieldValue }}" data-required="req" /> </label> {% endif -%}

</div>

</li>

</ul>

</li>

</ul>

{% endfor %}

Na końcu pliku js/order.js wklej ten kod:


$('body').on('click', '.external-payment-lq', function (e) {
    e.preventDefault();
    var validate = application.uiValidateForm($('.online-payment-step'));
    if (validate) {
        $('.online-payment-step').submit();
    }
});

$('body').on('click', '.external-payment-lq', function (e) {

e.preventDefault();

var validate = application.uiValidateForm($('.online-payment-step'));

if (validate) {

$('.online-payment-step').submit();

}

});

W pliku js/init.js wyszukaj funkcję uiSetSwitchNameWidthInNewsletter i na jej końcu dodaj poniższy kod:


$('#main-section').find('.online-payment-step .switch-name').each(function () {
    var width = $('.online-payment-info').width();
    $('.online-payment-consents').css('width', width);
    $(this).css('width', width - 65);
});

$('#main-section').find('.online-payment-step .switch-name').each(function () {

var width = $('.online-payment-info').width();

$('.online-payment-consents').css('width', width);

$(this).css('width', width - 65);

});

Na końcu pliku scss/main2.scss wklej ten kod:


.online-payment-consents{
    display: inline-block;
    list-style-type: none;
    padding: 0;
    text-align: left;
    .switches:after{
        content: '';
        display: block;
        clear: both;
    }
}

.online-payment-consents{

display: inline-block;

list-style-type: none;

padding: 0;

text-align: left;

.switches:after{

content: '';

display: block;

clear: both;

}

Wskazówka

Pamiętaj, że pliki js i scss należy zminifikować. O tym jak skompilować i zminifikować pliki js i scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Dodawanie zgód do płatności online w szablonach