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

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

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

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

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

{% if channelsSize > 0 -%}

{% for chn in tos.Channels -%}

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

<span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</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 -%}

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

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

<span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</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>

{% 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);

}


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

100

101

102

103

104

105

106

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

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

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

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

{% if tos.Statement -%}

{% else -%}

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

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

{% assign channelsSize = tos.Channels | Size -%}

<div class="single-tos {% if channelsSize > 0 -%} channels {% endif %}">

{% if tos.Statement -%}

{% else -%}

<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>

</div>

{% endif -%}

{% if channelsSize > 0 -%}

{% for chn in tos.Channels -%}

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

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

{% if tos.Statement -%}

{% else -%}

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

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

{% assign channelsSize = tos.Channels | Size -%}

{% if tos.Statement -%}

{% else -%}

<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>

</div>

{% endif -%}

{% if channelsSize > 0 -%}

{% for chn in tos.Channels -%}

</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 -%}
    <span class="error-ui validation-info-lq validation-channel-lq hidden-lq">{{ translations.ChooseOption }}</span>
{% endif -%}
{% for channel in tos.Channels -%}
    <label class="checkbox-ui channel-ui channel-lq {% if tos.Statement == false -%} disabled-channel-lq {% endif -%}">
        <input disabled="disabled" name="channelKey" type="checkbox" value="{{ channel.Key }}" />
        <span class="label-ui">{{ channel.Name }}</span>
    </label>
{% endfor -%}

{% if channelsSize > 0 -%}

<span class="error-ui validation-info-lq validation-channel-lq hidden-lq">{{ translations.ChooseOption }}</span>

{% endif -%}

{% for channel in tos.Channels -%}

<span class="label-ui">{{ channel.Name }}</span>

</label>

{% 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 -%}
        <span class="error-ui validation-info-lq validation-channel-lq hidden-lq">{{ translations.ChooseOption }}</span>
    {% endif -%}
{% endif -%}
{% for channel in tos.Channels -%}
    <label class="checkbox-ui channel-ui {% if onlyEmail == false -%} channel-lq {% endif -%} {% if tos.Statement == false -%} disabled-channel-lq {% endif -%}">
        {% if onlyEmail == false -%}
            <input disabled="disabled" name="channelKey" type="checkbox" value="{{ channel.Key }}" />
        {% else -%}
            <input checked="checked" name="channelKey" type="hidden" value="{{ channel.Key }}" />
            <input checked="checked" disabled="disabled" type="checkbox" />
        {% endif -%}
        <span class="label-ui">{{ channel.Name }}</span>
    </label>
{% endfor -%}

{% if channelsSize > 0 -%}

{% assign onlyEmail = false -%}

{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}

{% assign onlyEmail = true -%}

{% endif -%}

{% if onlyEmail == false -%}

<span class="error-ui validation-info-lq validation-channel-lq hidden-lq">{{ translations.ChooseOption }}</span>

{% endif -%}

{% for channel in tos.Channels -%}

{% if onlyEmail == false -%}

{% else -%}

{% endif -%}

<span class="label-ui">{{ channel.Name }}</span>

</label>

{% 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 -%}
    <span class="channel-warning tos-warning">{{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" disabled="disabled" name="channelKey" required="" type="checkbox" value="{{ chn.Key }}" data-required="req" />
            
            
        </label>
    {% endfor -%}
{% endif -%}

{% if channelsSize > 0 -%}

<span class="channel-warning tos-warning">{{translations.ChannelWarning}}</span>

{% for chn in tos.Channels -%}

</label>

{% 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 -%}
        <span class="channel-warning tos-warning">{{translations.ChannelWarning}}</span>
    {% endif -%}
    {% for chn in tos.Channels -%}
        <label class="switch channel-switch {% if tos.Statement == false or onlyEmail %} unactive-switch {% endif -%}">
            <span class="switch-name">{{chn.Name}}</span>
            {% if onlyEmail == false -%}
                <input class="switch-input channel-checkbox" disabled="disabled" name="channelKey" required="" type="checkbox" value="{{ chn.Key }}" data-required="req" />
            {% else -%}
                <input checked="checked" name="channelKey" type="hidden" value="{{ chn.Key }}" />
                <input class="switch-input" checked="checked" disabled="disabled" type="checkbox" />
            {% endif -%}
            
            
        </label>
    {% endfor -%}
{% endif -%}

{% if channelsSize > 0 -%}

{% assign onlyEmail = false -%}

{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}

{% assign onlyEmail = true -%}

{% endif -%}

{% if onlyEmail == false -%}

<span class="channel-warning tos-warning">{{translations.ChannelWarning}}</span>

{% endif -%}

{% for chn in tos.Channels -%}

{% if onlyEmail == false -%}

{% else -%}

{% endif -%}

</label>

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

{% if channelsSize > 0 -%}

- {{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 channelsSize > 0 -%}

{% assign onlyEmail = false -%}

{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}

{% assign onlyEmail = true -%}

{% endif -%}

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

{% if channelsSize > 0 -%}

- {{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 channelsSize > 0 -%}

{% assign onlyEmail = false -%}

{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}

{% assign onlyEmail = true -%}

{% endif -%}

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

{% endfor -%}

{% endif -%}

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

Szablon Agat

Szablon Opal

Szablon Bursztyn

Szablon Agat

Szablon Bursztyn

Szablon Opal

Kanał e-mail

Szafir

Agat

Bursztyn

Opal

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt