W tym artykule dowiesz się jak zmodyfikować szablon Agat, aby przekształcić obsługę kanałów w zgodach marketingowych na bardziej czytelną. Wyrażanie zgody w przypadku istnienia wielu kanałów będzie wyglądało następująco:
W pierwszej kolejności dodaj odpowiednie tłumaczenia.
- Id: Consents_InTheFormOf, Tekst: w postaci
Wskazówka
Tłumaczenia możesz dodać w panelu administracyjnym, wchodząc na zakładkę Tłumaczenia a następnie klikając w przycisk Dodaj. Po uzupełnieniu pól kliknij w przycisk Dodaj.
W katalogu js znajdź plik init.js. Narzędziem wyszukiwania wyszukaj frazę self.uicheckIfParentChecked. Znaleziona linia znajduje się w obszarze 6 linii kodu (widoczne poniżej), które należy usunąć.
$('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);
});
W głównym katalogu szablonu znajdź plik __loginconsents.liquid. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę clickableTOSExists. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć a następnie w tym miejscu wkleić poniższy.
{% assign channelsSize = tos.Channels | Size -%}
{% if channelsSize == 0 -%}
<div class="input-group switches">
{% if tos.Statement %}
<p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
{% else %}
{% assign clickableTOSExsits = true -%}
<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 -%}
</div>
{% elsif channelsSize > 0 -%}
<div class="input-group switches">
{% 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"><span
class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
{% endif -%}
{% for chn in tos.Channels -%}
<label class="switch channel-switch">
<span class="switch-name">{{tos.Text | Remove: '.'}} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span>
<input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%}
data-required="req" {% endif -%} />
{% if onlyEmail == false -%}
<input class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if
tos.Required -%} data-required="req" {% endif -%} />
{% else -%}
<input type="hidden" name="channelKey" value="{{ chn.Key }}" checked />
<input class="switch-input" type="checkbox" checked />
{% endif -%}
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
{% endfor -%}
{% endif -%}
</div>
{% endfor -%}
</div>
{% if clickableTOSExists -%}
Kolejne zmiany będą wprowadzone w katalogu partials. Wewnątrz tego katalogu, w katalogu cart znajdź plik delivery-and-payment.html. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę required-fields-info. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć i w tym miejscu wkleić poniższy.
{% assign channelsSize = tos.Channels | Size -%}
{% if channelsSize == 0 -%}
<li class="{% 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 aria-label="tos" 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 -%}
</div>
</li>
{% elsif channelsSize > 0 -%}
<li class="multiple-choice {% if tos.Required -%} required-consent{% endif -%}">
<div class="input-group switches">
{% 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"><span
class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
{% endif -%}
{% for chn in tos.Channels -%}
<label class="switch channel-switch ">
<span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}}
{{chn.Name}}</span>
<input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if
tos.Required -%} data-required="req" {% endif -%} disabled />
{% if onlyEmail == false -%}
<input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey"
value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} />
{% else -%}
<input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}" />
<input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" />
{% endif -%}
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
{% endfor -%}
</div>
</li>
{% endif -%}
{% endfor -%}
</ul>
<div class="input-group required-fields-info">
W katalogu partials/common znajdź plik footer.html. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę required-fields-info. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć i w tym miejscu wkleić poniższy.
{% assign channelsSize = tos.Channels | Size -%}
{% if channelsSize == 0 -%}
<li class="{% 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 aria-label="tos" 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 -%}
</div>
</li>
{% elsif channelsSize > 0 -%}
<li class="multiple-choice {% 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>
{% endif -%}
{% 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"><span
class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
{% endif -%}
{% for chn in tos.Channels -%}
<label class="switch channel-switch ">
<span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}}
{{chn.Name}}</span>
<input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if
tos.Required -%} data-required="req" {% endif -%} disabled />
{% if onlyEmail == false -%}
<input aria-label="cnannelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey"
value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} />
{% else -%}
<input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}" />
<input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" />
{% endif -%}
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
{% endfor -%}
</div>
</li>
{% endif -%}
{% endfor -%}
</ul>
<div class="input-group required-fields-info">
W tym samym katalogu znajdź plik registration-consents.html. Kod w pliku należy usunąć i wkleić poniższy.
<ul>
{% for tos in config.TOS.Consents.Registration -%}
{% assign channelsSize = tos.Channels | Size -%}
{% if channelsSize == 0 -%}
<li class="{% 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 aria-label="tos" 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 -%}
</div>
</li>
{% elsif channelsSize > 0 -%}
<li class="multiple-choice {% if tos.Required -%} required-consent{% endif -%}">
<div class="input-group switches">
{% 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"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
{% endif -%}
{% for chn in tos.Channels -%}
<label class="switch channel-switch">
<span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span>
<input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} disabled/>
{% if onlyEmail == false -%}
<input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} />
{% else -%}
<input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}"/>
<input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox"/>
{% endif -%}
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
{% endfor -%}
</div>
</li>
{% endif -%}
{% endfor -%}
</ul>
<div class="input-group required-fields-info">
* {{ translations.Com_RequiredFields }}
</div>
Ostatnim modyfikowanym plikiem będzie plik customer-consents.html w katalogu customer. Kod w pliku należy usunąć i wkleić poniższy.
{% assign anythingToAccept = false -%}
{% for tos in customerProfile.Consents -%}
{% if tos.Checked == false or tos.Updated.Text %}
{% assign anythingToAccept = true -%}
{% endif -%}
{% endfor %}
{% include 'partials/common/date-format.html' -%}
<div class="all-users-consents">
<h2 class="main-title">{{ translations.UserConsents }}</h2>
{% if anythingToAccept == true %}
<div class="consents-box">
<span class="box-heading">{{ translations.Com_ToAcceptation }}</span>
<ul>
{% for tos in customerProfile.Consents %}
{% assign channelsSize = tos.Channels | Size -%}
{% assign updatedChannelsSize = tos.Updated.Channels | Size -%}
{% assign updatedContentsSize = tos.Updated.Contents | Size -%}
{% if tos.Checked == false or tos.Updated.Text %}
{% if channelsSize == 0 -%}
<li class="{% if tos.Updated.Text %} updated-consent {% endif -%}">
{% if tos.Statement -%}
<button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
<p class="statement-consent">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
{% else -%}
{% if tos.Checked == false -%}
<button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
{% elsif tos.Updated.Text and updatedChannelsSize == 0 -%}
<button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
<span class="consent-small-heading">{{ translations.NewConsentContent }}:</span>
<span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text }}</span>
<span class="consent-small-heading old-consent">{{translations.OldConsentContent}}:</span>
<span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
{% endif -%}
{% endif -%}
</li>
{% elsif channelsSize > 0 -%}
{% for chn in tos.Channels -%}
<li class="{% if tos.Updated.Text %} updated-consent {% endif -%}">
{% if tos.Updated.Text and updatedChannelsSize == 0 -%}
<button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
<span class="consent-small-heading">{{ translations.NewConsentContent }}:</span>
<span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text }}</span>
<span class="consent-small-heading old-consent">{{translations.OldConsentContent}}:</span>
{% endif -%}
<span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span>
{% if chn.Checked %}
<button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button>
{% else %}
<button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button>
{% endif -%}
</li>
{% endfor -%}
{% endif -%}
{% endif %}
{% endfor %}
</ul>
</div>
{% endif -%}
<div class="consents-box">
<span class="box-heading">{{ translations.Com_Accepted }}</span>
<ul>
{% for tos in customerProfile.Consents -%}
{% assign channelsSize = tos.Channels | Size -%}
{% if tos.Checked %}
{% if channelsSize == 0 -%}
<li>
{% if tos.Required -%}
<span class="withdraw-warning">
<span class="fa fa-exclamation-triangle"></span>
<span>{{ translations.WithdrawWarning }}</span>
</span>
{% endif -%}
{% if tos.Statement-%}
<span class="accept-date">{{translations.AcceptationDate}}: {{tos.Date | Date:dateFormat}}</span>
<button aria-label="consentWithdraw" class="consent-withdraw" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Withdraw }}</button>
<p class="statement-consent">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
{% else %}
{% if tos.Checked %}
<span class="accept-date">{{translations.AcceptationDate}}: {{tos.Date | Date:dateFormat}}</span>
<button aria-label="consentWithdraw" class="consent-withdraw" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Withdraw }}</button>
{% elsif tos.Checked == false %}
<button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
{% endif -%}
<span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
{% endif -%}
</li>
{% elsif channelsSize > 0 -%}
<li>
{% for chn in tos.Channels -%}
{% if tos.Required -%}
<span class="withdraw-warning">
<span class="fa fa-exclamation-triangle"></span>
<span>{{ translations.WithdrawWarning }}</span>
</span>
{% endif -%}
<span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span>
{% if chn.Checked %}
<span class="accept-date">{{translations.AcceptationDate}}: {{chn.Date | Date:dateFormat}}</span>
<button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button>
{% else %}
<button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button>
{% endif -%}
{% endfor -%}
</li>
{% endif -%}
{% if updatedChannelsSize > 0 -%}
<ul>
{% for chn in tos.Updated.Channels -%}
<li>
{% if tos.Updated.Text -%}
<span class="consent-small-heading">{{translations.NewConsentContent}}:</span>
<span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}} }}</span>
<span class="consent-small-heading old-consent">{{ translations.OldConsentContent }}:</span>
{% endif -%}
{% if chn.Checked %}
<button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button>
{% else %}
<button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button>
{% endif -%}
</li>
{% endfor -%}
</ul>
{% endif -%}
{% if updatedContentsSize > 0 -%}
<ul>
{% for contents in tos.Updated.Contents -%}
<li>
<span>{{ contents.Name }}</span>
{{ contents.ContentHtml }}
</li>
{% endfor -%}
</ul>
{% endif -%}
{% endif -%}
{% endfor %}
</ul>
</div>
</div>