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 -%}
<label class="statement tos-name">{{tos.Text}}</label>
{% 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 -%}
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 -%}
<div class="input-group switches">
<label class="switch">
<span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
<input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%}/>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</div>
{% endfor -%}
{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}
<li class="{% if channelsSize > 0 -%}multiple-choice {% endif -%} {% if tos.Required -%} required-consent{% endif -%}">
<div class="input-group switches">
{% if tos.Statement %}
<p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
{% else %}
<span class="main-consent-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span>
<label class="switch">
<span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
<input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%}/>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
{% endif -%}
{% if channelsSize > 0 -%}
<span class="channel-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
{% for chn in tos.Channels -%}
<label class="switch channel-switch {% if tos.Statement == false %} unactive-switch{% endif -%}">
<span class="switch-name">{{chn.Name}}</span>
<input class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} {% if tos.Statement == false %} disabled{% endif -%}/>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
{% endfor -%}
{% endif -%}
</div>
</li>
{% 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 -%}
<label>{{tos.Text}}</label>
{% else -%}
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<div class="input-switch "><div class="switch-button"></div></div>
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
{% endif -%}
{% endfor -%}
następującym:
{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}
<div class="single-tos {% if channelsSize > 0 -%} channels {% endif %}">
{% if tos.Statement -%}
<label class="statement tos-name">{{tos.Text}}</label>
{% else -%}
<div class="tos-switch">
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<div class="input-switch "><div class="switch-button"></div></div>
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
</div>
{% endif -%}
{% 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 -%}
</div>
{% endfor -%}
Szablon Opal
W pliku homepage.html proszę zastąpić poniższy kod:
{% for tos in config.TOS.Consents.Newsletter -%}
{% if tos.Statement -%}
<label>{{tos.Text}}</label>
{% else -%}
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<div class="input-switch "><div class="switch-button"></div></div>
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
{% endif -%}
{% endfor -%}
następującym:
{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}
<div class="single-tos">
{% if tos.Statement -%}
<label class="statement-reg tos-name">{{tos.Text}}</label>
{% else -%}
<div class="tos-switch single-switch">
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<div class="input-switch "><div class="switch-button"></div></div>
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
</div>
{% endif -%}
{% if channelsSize > 0 -%}
<ul class="channels-list">
{% for chn in tos.Channels -%}
<li class="channel single-switch">
<input id="channel{{ chn.Key }}" type="checkbox" name="channelKey" value="{{ chn.Key }}"/>
<div class="input-switch "><div class="switch-button"></div></div>
<label for="channel{{ chn.Key }}">{{chn.Name}}</label>
</li>
{% endfor -%}
</ul>
{% endif -%}
</div>
{% 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 -%}
{% endif -%}
{% for channel in tos.Channels -%}
{% 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 -%}
{% endif -%}
{% endif -%}
{% for channel in tos.Channels -%}
{% 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 -%}
{% 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 -%}
{% 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 -%}
-
-
{% 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 -%}
- {% if onlyEmail == false -%} {% else -%} {% endif -%}
{% endfor -%}
{% endif -%}
Opal
Wyszukaj frazę channels-list i zamień wszystkie jej wystąpienia w tym pliku na channels-list:not(.only-email)
Znajdź w tych plikach taki fragment kodu:
{% if channelsSize > 0 -%}
-
- {% for chn in tos.Channels -%}
-
-
{% 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 -%}
- {% if onlyEmail == false -%} {% else -%} {% endif -%}
{% endfor -%}
{% endif -%}