Obsługa kanałów do zgody na newsletter w darmowych szablonach graficznych Comarch e-Sklep

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.

Listę zgód wyświetlanych w newsletterze możemy znaleźć w tablicy przechowywanej w obiekcie config.TOS.Consents.Newsletter. Poniższa pętla pozwoli nam wyświetlić wszystkie zgody znajdujące się w obiekcie Newsletter:

{% for tos in config.TOS.Consents.Newsletter -%}

{{tos.Text}}

{% endif -%}

Jeżeli interesuje nas pokazanie wszystkich kanałów znajdujących się w danej zgodzie to warto najpierw przypisać ich ilość do konkretnej zmiennej liquidowej. W każdej pojedynczej zgodzie kanały możemy znaleźć w obiekcie Channels.

{% assign channelsSize = tos.Channels | Size -%}
Teraz wystarczy tylko napisać prostą pętle „for” Poniżej przykład wykorzystujący listę.

{% if channelsSize > 0 -%}
<ul class="channels disabled">
    {% for chn in tos.Channels -%}
    <li class="channel">
        <input id="channel{{ chn.Key }}" type="checkbox" name="channelKey" value="{{ chn.Key }}" disabled/>
        <div class="channel-switch input-switch "><div class="switch-button"></div></div>
        <label for="channel{{ chn.Key }}">{{chn.Name}}</label>
    </li>
    {% endfor -%}
</ul>
{% endif -%}

Spis treści

Szablon Agat

Szablon Opal

Szablon Bursztyn

Szablon Agat

1.Zmień pętlę for wyświetlającą checkboxy ze zgodami w pliku ’footer.html’, który znajduje się w folderze ’partials/common’
`{% for tos in config.TOS.Consents.Newsletter -%}

{% endfor -%}{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}

{% endfor -%}
2.W pliku ’init.js’ uzupełnij funkcję uiValidateForm o walidację pól kanałów. Plik znajduje się w folderze 'js’.
uiValidateForm: function (form) { var formRequiredInputs = form.find('input[required], textarea[required]'); var tosInputs = form.find('input[type="checkbox"]'); var formInvalidInfo = form.data('invalid'); var emailInvalidInfo = form.data('email-invalid'); var postCodeInvalidInfo = form.data('pcode-invalid'); var tinInvalidInfo = form.data('tin-invalid'); var tosRequiredInfo = form.data('tos-invalid'); var warningTosInfos = form.find('.tos-warning'); var tosRequiredValid = true; var tinInputValid = true; var emailInputValid = true; var postCodeInputValid = true; var isEmpty = false; var checkedChannels = []; var channelsInputs;

$.each(formRequiredInputs, function (key, value) {
$(value).addClass(’validationStyles’);
if ($(value).val() == ”) {
isEmpty = true;
}
if ($(value).attr(’name’) === ’email’) {
emailInputValid = application.uiValidateEmail($(value).val());
}
if ($(value).attr(’name’) === 'zipCode’) {
postCodeInputValid = application.uiValidatePostCode($(value).val(), $(value).attr(’pattern’));
}
if ($(value).attr(’name’) === 'tin’) {
tinInputValid = application.uiValidateTinCode($(value).val(), $(value).attr(’pattern’));
}
});

$.each(tosInputs, function (key, value) {
if ($(value).data(’required’) === 'req’) {
if (!$(value).prop(’checked’)) {
$(value).closest(’label’).addClass(’required-checkbox-warning’);
}

if ($(value).hasClass(’channel-checkbox’)) {
channelsInputs = $(value).closest(’.input-group’).find(’.channel-checkbox’);
$.each(channelsInputs, function (key, value) {
if ($(value).prop(’checked’)) {
checkedChannels.push($(value));
}
});

if (checkedChannels.length > 0) {
tosRequiredValid = true
} else {
tosRequiredValid = false
}

if (warningTosInfos.length > 0) {
$.each(warningTosInfos, function (key, value) {
if ($(value).is(„:visible”)) {
tosRequiredValid = false;
}
});
}

} else if (!$(value).prop(’checked’)) {
tosRequiredValid = false;
}
}
});

if (tosRequiredValid && tinInputValid && postCodeInputValid && emailInputValid && !isEmpty) {
return true;
} else if (!emailInputValid) {
application.createMessage(emailInvalidInfo);
} else if (!postCodeInputValid) {
application.createMessage(postCodeInvalidInfo);
} else if (!tinInputValid) {
application.createMessage(tinInvalidInfo);
} else if (!tosRequiredValid) {
application.createMessage(tosRequiredInfo);
} else {
application.createMessage(formInvalidInfo);
}
},
uiValidateForm: function (form) { var formRequiredInputs = form.find('input[required], textarea[required]'); var tosInputs = form.find('input[type="checkbox"]'); var formInvalidInfo = form.data('invalid'); var emailInvalidInfo = form.data('email-invalid'); var postCodeInvalidInfo = form.data('pcode-invalid'); var tinInvalidInfo = form.data('tin-invalid'); var tosRequiredInfo = form.data('tos-invalid'); var warningTosInfos = form.find('.tos-warning'); var tosRequiredValid = true; var tinInputValid = true; var emailInputValid = true; var postCodeInputValid = true; var isEmpty = false; var checkedChannels = []; var channelsInputs;

$.each(formRequiredInputs, function (key, value) {
$(value).addClass(’validationStyles’);
if ($(value).val() == ”) {
isEmpty = true;
}
if ($(value).attr(’name’) === ’email’) {
emailInputValid = application.uiValidateEmail($(value).val());
}
if ($(value).attr(’name’) === 'zipCode’) {
postCodeInputValid = application.uiValidatePostCode($(value).val(), $(value).attr(’pattern’));
}
if ($(value).attr(’name’) === 'tin’) {
tinInputValid = application.uiValidateTinCode($(value).val(), $(value).attr(’pattern’));
}
});

$.each(tosInputs, function (key, value) {
if ($(value).data(’required’) === 'req’) {
if (!$(value).prop(’checked’)) {
$(value).closest(’label’).addClass(’required-checkbox-warning’);
}

if ($(value).hasClass(’channel-checkbox’)) {
channelsInputs = $(value).closest(’.input-group’).find(’.channel-checkbox’);
$.each(channelsInputs, function (key, value) {
if ($(value).prop(’checked’)) {
checkedChannels.push($(value));
}
});

if (checkedChannels.length > 0) {
tosRequiredValid = true
} else {
tosRequiredValid = false
}

if (warningTosInfos.length > 0) {
$.each(warningTosInfos, function (key, value) {
if ($(value).is(„:visible”)) {
tosRequiredValid = false;
}
});
}

} else if (!$(value).prop(’checked’)) {
tosRequiredValid = false;
}
}
});

if (tosRequiredValid && tinInputValid && postCodeInputValid && emailInputValid && !isEmpty) {
return true;
} else if (!emailInputValid) {
application.createMessage(emailInvalidInfo);
} else if (!postCodeInputValid) {
application.createMessage(postCodeInvalidInfo);
} else if (!tinInputValid) {
application.createMessage(tinInvalidInfo);
} else if (!tosRequiredValid) {
application.createMessage(tosRequiredInfo);
} else {
application.createMessage(formInvalidInfo);
}
},
3.Aby walidacja działała poprawnie, dodaj dodatkowe funkcje w pliku ’init.js’, w obiekcie application (uicheckIfParentChecked, uicheckIfTosChannelChecked)
uicheckIfParentChecked: function(e) { var parentBox = $(e.currentTarget).closest('.multiple-choice'); var elementParentTos = parentBox.find('input[name=tos]'); var consentWarning = parentBox.find('.main-consent-warning'); var channelWarning = parentBox.find('.channel-warning'); var tosChannels = parentBox.find('.channel-checkbox'); var checkedChannels = []; var elementParentTosChecked, parentTosName;

if (elementParentTos.length > 0) {
elementParentTosChecked = $(elementParentTos[0]).prop(’checked’);
parentTosName = parentBox.find(’.input-group > label .switch-name’);
consentWarning = $(elementParentTos[0]).closest(’.input-group’).find(’.main-consent-warning’);

if (!elementParentTosChecked) {
$(parentTosName[0]).css({
'color’: '#ff3a3a’,
'transition’: '200ms’
});
$(consentWarning[0]).show();
}

if (!$(e.currentTarget).prop(’checked’) || elementParentTosChecked) {
$(parentTosName[0]).css({
'color’: ”,
'transition’: '200ms’
});
$(consentWarning[0]).hide();
}

if (!$(e.currentTarget).prop(’checked’) && !elementParentTosChecked) {
$(parentTosName[0]).css({
'color’: ”,
'transition’: '200ms’
});
$(consentWarning[0]).hide();
$(e.currentTarget).prop(’disabled’, true);
$(e.currentTarget).closest(’.channel-switch’).addClass(’unactive-switch’);
}

if ($(e.currentTarget).prop(’checked’)) {
$(channelWarning[0]).hide();
} else {
$.each(tosChannels, function (key, value) {
if ($(value).prop(’checked’)) {
checkedChannels.push($(value));
}
});

if (checkedChannels.length === 0 && elementParentTosChecked) {
$(channelWarning[0]).show();
}
}
}
},
uicheckIfTosChannelChecked: function (e) {
var parentBox = $(e.currentTarget).closest(’.multiple-choice’);
var tosChannels = parentBox.find(’.channel-checkbox’);
var checkedChannels = [];
var channelWarning = parentBox.find(’.channel-warning’);
var consentWarning = parentBox.find(’.main-consent-warning’);
var isChecked = $(e.currentTarget).prop(’checked’);
var tosName = $(e.currentTarget).closest(’label’).find(’.switch-name’);

$.each(tosChannels, function (key, value) {
if ($(value).prop(’checked’)) {
checkedChannels.push($(value));
}
});

if (checkedChannels.length > 0 && !isChecked) {
$(channelWarning[0]).hide();
$.each(tosChannels, function (key, value) {
$(value).closest(’.channel-switch’).addClass(’unactive-switch’);
$(value).prop(’disabled’, true);
$(value).prop(„checked”, false);
});
}

if (checkedChannels.length > 0 && isChecked) {
$(channelWarning[0]).hide();
$(tosName[0]).css({
'color’: ”,
'transition’: '200ms’
});
$(consentWarning[0]).hide();
}

if (checkedChannels.length === 0 && isChecked) {
$(channelWarning[0]).show();
$.each(tosChannels, function (key, value) {
$(value).closest(’.channel-switch’).removeClass(’unactive-switch’);
$(value).removeAttr(’disabled’);
});
}

if (checkedChannels.length === 0 && !isChecked) {
$(channelWarning[0]).hide();
$.each(tosChannels, function (key, value) {
$(value).closest(’.channel-switch’).addClass(’unactive-switch’);
$(value).prop(’disabled’, true);
});
}
},
4.Wywołaj nowe funkcje w pliku ’init.js’, w obiekcie application.events
$('body').on('click', '.channel-checkbox', function (e) { self.uicheckIfParentChecked(e); });

$(’body’).on(’click’, ’.multiple-choice .input-group > label .switch-input[name=tos]’, function (e) {
self.uicheckIfTosChannelChecked(e);
});
5.Dodaj tłumaczenia:
– MainConsentWarning: „Wyraź zgodę”
– ChannelWarning: „Wybierz przynajmniej jeden kanał”

6.Uzupełnij plik ’480plus.css’, który znajduje się w folderze 'css’, o style:
.multiple-switch { margin: 0 0 20px; }

.multiple-choice .main-consent-warning,
.multiple-choice .channel-warning,
.input-group.switches .main-consent-warning,
.input-group.switches .channel-warning {
display: none;
position: relative;
font-size: 11px;
color: #ff3a3a;
top: -20px;
left: -51px;
}

.multiple-choice .main-consent-warning .fa,
.multiple-choice .channel-warning .fa,
.input-group.switches .main-consent-warning .fa,
.input-group.switches .channel-warning .fa {
margin: 0 5px 0 0;
}

.input-group label.required-checkbox-warning .switch-name {
color: #ff3a3a !important;
}

.input-group label.required-checkbox-warning .switch-name a.cp_link {
color: #ff3a3a;
}

form .input-group .switch.unactive-switch {
opacity: .5;
cursor: not-allowed;
}

Szablon Bursztyn

W pliku homepage.html proszę zastąpić poniższy kod:
`{% for tos in config.TOS.Consents.Newsletter -%}
{% if tos.Statement -%}
{{tos.Text}}
{% else -%}

{% if tos.Required -%}*{% endif -%} {{tos.Text}}
{% endif -%}
{% endfor -%}następującym:{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}

{% endfor -%}`

Szablon Opal

W pliku homepage.html proszę zastąpić poniższy kod:
`{% for tos in config.TOS.Consents.Newsletter -%}
{% if tos.Statement -%}
{{tos.Text}}
{% else -%}

{% if tos.Required -%}*{% endif -%} {{tos.Text}}
{% endif -%}
{% endfor -%}następującym:{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}

{% endfor -%}`

Kanał e-mail

Jeśli wprowadziłeś powyższe zmiany, a w swoich zgodach posiadasz tylko kanał e-mail i chcesz zaoszczędzić zbędnego klikania swoim klientom to poniżej znajduje się instrukcja co należy zmienić w kodzie. Te zmiany sprawią, że kanał e-mail będzie zawsze zaznaczony i nie będzie się go dało odznaczyć.

Szafir

Plik init-ui2.js

Znajdź funkcję toggleChannels. W niej jest zdeklarowana zmienna var inputs = container.find('[name=channelKey]’);. Zmień ją na var inputs = container.find('[name=channelKey]:not([type=hidden])’);

Pliki home.html, sign-up-no-address.html, common/address-form-register-full.html, customer-profile/your-account/employee-update.html, order/cart.html, __loginconsents.liquid

Znajdź w tych plikach taki fragment kodu:
`{% if channelsSize > 0 -%}
{{ translations.ChooseOption }}
{% endif -%}
{% for channel in tos.Channels -%}

{{ channel.Name }}

{% endfor -%}Usuń go, a w jego miejsce wklej ten fragment kodu:{% if channelsSize > 0 -%}
{% assign onlyEmail = false -%}
{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
{% assign onlyEmail = true -%}
{% endif -%}
{% if onlyEmail == false -%}
{{ translations.ChooseOption }}
{% endif -%}
{% endif -%}
{% for channel in tos.Channels -%}

{% if onlyEmail == false -%}

{% else -%}

{% endif -%}
{{ channel.Name }}

{% endfor -%}`

Agat

Pliki partials/cart/delivery-and-payment.html, partials/common/footer.html, partials/common/registration-consents.html, __loginconsents.liquid

Znajdź w tych plikach taki fragment kodu:
`{% if channelsSize > 0 -%}
{{translations.ChannelWarning}}
{% for chn in tos.Channels -%}

{{chn.Name}}`

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

Usuń go, a w jego miejsce wklej ten fragment kodu:
`{% if channelsSize > 0 -%}
{% assign onlyEmail = false -%}
{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
{% assign onlyEmail = true -%}
{% endif -%}
{% if onlyEmail == false -%}
{{translations.ChannelWarning}}
{% endif -%}
{% for chn in tos.Channels -%}

{{chn.Name}}
{% if onlyEmail == false -%}

{% else -%}

{% endif -%}`

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

Bursztyn

Plik init.js

Wyszukaj frazę channels i zamień wszystkie jej wystąpienia w tym pliku na channels:not(.only-email)

Pliki homepage.html, customer/registration.html, order/stepsummary.html, __loginconsents.liquid

Znajdź w tych plikach taki fragment kodu:
{% if channelsSize > 0 -%}

• {% for chn in tos.Channels -%}- {{chn.Name}}

{% endfor -%}

{% endif -%}

Usuń go, a w jego miejsce wklej ten fragment kodu:
{% if channelsSize > 0 -%} {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%}

• {% for chn in tos.Channels -%}- {% if onlyEmail == false -%} {% else -%} {% endif -%}

  {{chn.Name}}

{% endfor -%}

{% endif -%}

Opal

Plik init.js

Wyszukaj frazę channels-list i zamień wszystkie jej wystąpienia w tym pliku na channels-list:not(.only-email)

Pliki homepage.html, customer/registration.html, order/stepsummary.html, __loginconsents.liquid

Znajdź w tych plikach taki fragment kodu:
{% if channelsSize > 0 -%}

• {% for chn in tos.Channels -%}- {{chn.Name}}

{% endfor -%}

{% endif -%}

Usuń go, a w jego miejsce wklej ten fragment kodu:
{% if channelsSize > 0 -%} {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%}

• {% for chn in tos.Channels -%}- {% if onlyEmail == false -%} {% else -%} {% endif -%}

  {{chn.Name}}

{% endfor -%}

{% endif -%}

Czy ten artykuł był pomocny?

( 1 )

( 0 )

Wyślij opinie