Newsletter w popupie w szablonie Topaz

W niniejszym artykule dowiesz się, w jaki sposób dodać newsletter w popupie w swoim szablonie Topaz.

Newsletter w popupie dla szablonu Topaz może funkcjonować nawet, gdy inny wariant newslettera został dodany w Kreatorze szablonu.

Newsletter wyświetla się w formie wyskakującego popupu. Domyślnie wyświetla się co 30 dni, jednak w prosty sposób można zmodyfikować ten czas.

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

1. Utworzenie nowego bannera

Newsletter w popupie wykorzystuje nowy banner, skąd pobiera np. obrazek oraz kilka innych treści. Aby dodać nowy banner, należy w Panelu Administracyjnym otworzyć sekcję „Wygląd sklepu”, następnie „Ustawienia”. Po wyborze odpowiedniego szablonu z rozwijanej listy, przechodzimy do zakładki „Bannery”. Następnie należy kliknąć przycisk z ikonką „+”, która otworzy menu tworzenia bannera. Nadajemy mu nazwę NewsletterBanner. Nazwa jest ważna, podając złą, nasz newsletter nie będzie działał w sposób poprawny. Nazwa musi się zgadzać z tą podaną w kodzie szablonu (w późniejszym etapie).

Należy dodać obrazek, który będzie wyświetlany w newsletterze. Co ważne, jego rozmiar powinien wynosić 275×475. Zdjęcia w innym rozmiarze mogą się skalować w nieodpowiedni sposób.

Następnie uzupełniamy poszczególne pola. Możemy wstawić dowolne treści. Poniżej wypisane są domyślne treści dla poszczególnych pól:
Tooltip: „Dołącz” – Teskt w tooltipie to tekst na przycisku dołączenia do newslettera;
Nagłówek: „Zapisz się do newslettera” – nagłówek to pogrubiony tekst na samej górze popupu;
Tekst: „Dołącz do newslettera i skorzystaj z XX% promocji na najnowszą kolekcję!” – ten tekst jest dodatkową informacją w popupie;
Alt: „275×475” – alt to alternatywny tekst w przypadku problemów z otwarciem zdjęcia;
W polu Link podajemy link do jakiego przekierowuje nas kliknięcie w obrazek w newsletterze.

Przechodzimy do edycji kodu. Najpierw należy otworzyć plik home-page.html, gdzie dopiszemy (pomiędzy {% block pageContent -%} a {% endblock -%} linijkę o następującej treści:


{% include 'elements/newsletter/newsletter-3.html' -%}

{% include 'elements/newsletter/newsletter-3.html' -%}

Następnie należy utworzyć plik HTML z kodem nowego newslettera. W tym celu przechodzimy do katalogu elements/newsletter, gdzie tworzymy plik o nazwie newsletter-3.html. Jeśli w Twoich plikach szablonu nie ma katalogu o nazwie newsletter, stwórz go.

W nowo utworzonym pliku wklejamy następujący kod:


{% if page.PageId == 1 and customer.NewsletterSubscriber == false -%}

    {% assign name = 'NewsletterBanner' -%} 
    {% assign newsletterBanner = config.Banners[name] -%}

    <div class="newsletter3__wrapper">
        <input type="hidden" class="newsletterTextInput" name="newsletterText" value="{{newsletterBanner.Images[0].Text}}">
        <input type="hidden" class="newsletterHeadingInput" name="newsletterHeading" value="{{newsletterBanner.Images[0].Heading}}">
        <div class="newsletter3">
            <a aria-label="check" href="{{newsletterBanner.Images[0].Link}}" if true target="_blank" endif rel="noopener">
                <div class="newsletter3__banner">
                    <img {% if newsletterBanner.Images[0].File == "placeholder.jpg" -%} class="placeholder" {% endif -%} alt="{{newsletterBanner.Images[0].Alt | H}}" src="{{newsletterBanner.Images[0].Url}}">
                    {% if newsletterBanner.Images[0].File == "placeholder.jpg" -%}
                        <span class="imageSize">275x475</span>
                    {% endif -%}
                </div>
            </a>

            <div class="newsletter3__info form__input-wrapper inputs-container-js">
                <div class="newsletter3__info__title">{% if newsletterBanner.Images[0].Heading != '' -%} {{newsletterBanner.Images[0].Heading}} {% endif -%}</div>
                <svg class="closeNewsletterPopup">
                    <use xlink:href="css/img/icons-sprite.svg#times-light"></use>
                </svg>
                
                <div class="newsletter3__info__details">{% if newsletterBanner.Images[0].Text != '' -%} {{newsletterBanner.Images[0].Text}} {% endif -%}</div>
                <input aria-label="subscribeNewsletter" type="hidden" name="__action" value="Newsletter/Subscribe" />
                <input class="showConsents-js form__input-value-js newsletter3__info__enterEmail" autocomplete="off" aria-label="showConsents" type="email" name="email" value="{{ customer.Email }}" placeholder="{{ translations.Newsletter3AddEmail }}" required/>
                <p class="form__invalid-input form__invalid-input form__validation-info-js form__validation-required-js invalidInput" style="display: none">{{translations.InvalidEmail}}</p>          

                <button class="newsletter3__info__confirmButton primary-action-button newsletterSubscribe-js">{{newsletterBanner.Images[0].Title}}</button>

                <div class="newsletter3__info__consent">
                    {% assign configConsents = config.TOS.Consents.Newsletter -%}
                    <ul class="consentsList">
                        {% for tos in configConsents -%}
                            {% assign channelsSize = tos.Channels | Size -%}
                            <li  class="consentsList__li {% if channelsSize > 0 -%} js-multipleChoice {% endif -%}">
                                <div>
                                    {% if tos.Statement %}
                                        <p class="consentStatement {% if tos.Type == 3 -%} hidden {% endif -%}">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
                                    {% else %}
                                        <div class="checkBoxes__container consentsContent {% if tos.Type == 3 -%} hidden {% endif -%}">
                                            <input aria-label="tos" id="n3tos-{{ tos.Id }}{{index}}" {% if tos.Type == 3 -%} checked {% endif -%}
                                                class="checkbox-input form__input-value-js {% if channelsSize > 0 -%} enableChannels-js {% endif -%}"
                                                type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%}  />
                                            <label class="tosLabel" for="n3tos-{{ tos.Id }}{{index}}">
                                                <span class="checkBoxes__checkIcon">
                                                    <svg>
                                                        <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                                    </svg>
                                                </span>
                                                <span>{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
                                            </label>
                                            {% if tos.Required -%}
                                                <p class="form__invalid-input form__invalid-input form__validation-required-js invalidInput" style="display: none">{{ translations.Com_FieldIsMandatory }}</p>
                                            {% endif -%}
                                        </div>
                                    {% endif -%}
                    
                                    {% if channelsSize > 0 -%}
                                        <ul class="consentsList__channels channelsList">                    
                                            {% for chn in tos.Channels -%}
                                                {% if tos.Statement == false -%}
                                                    <li class="consentsList__li checkBoxes__container">
                                                        <input aria-label="channel" id="n3channel-{{ chn.Key }}{{index}}" class="checkbox-input channel channel-js form__input-value-js" type="checkbox" name="channelKey" value="{{ chn.Key }}" />
                                                        <label for="n3channel-{{ chn.Key }}{{index}}" class="channelLabel">
                                                            <span class="checkBoxes__checkIcon">
                                                                <svg>
                                                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                                                </svg>
                                                            </span>
                                                            <span class="checkbox-name consentsContent">{% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}</span>
                                                        </label>
                                                    </li>
                                                {% else -%}
                                                    <li class="consentsList__li checkBoxes__container"> 
                                                        <input aria-label="channel" id="n3channel-{{ chn.Key }}{{index}}" class="checkbox-input channel channel-js form__input-value-js" type="hidden" checked name="channelKey" value="{{ chn.Key }}" />
                                                        <span class="checkbox-name consentsContent statementContentChannel">{% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}</span>
                                                    </li>
                                                {% endif -%}
                                            {% endfor -%}
                                            <p class="form__invalid-input form__invalid-input form__validation-channel-js invalidInput" style="display: none">
                                                {{ translations.ChannelWarning }}
                                            </p>
                                        </ul>
                                    {% endif -%}
                                </div>
                            </li>
                        {% endfor -%}
                    </ul>
                </div>
                {% assign requiredFields = false -%}
                {% for tos in configConsents -%}
                    {% if tos.Required == true  -%}
                        {% assign requiredFields = true -%}
                    {% endif -%}
                {% endfor -%}
                {% if requiredFields == true and configConsents | Size > 1 -%}
                <ul class="consentsList requiredFields">
                    <li class="consentsList__li">
                        <p class="consentStatement">* {{translations.Com_RequiredFields}}</p>
                    </li>
                </ul>
                {% endif -%}
            </div>
        </div>
    </div>
{% endif -%}

100

101

102

103

104

105

106

107

108

109

{% if page.PageId == 1 and customer.NewsletterSubscriber == false -%}

{% assign name = 'NewsletterBanner' -%}

{% assign newsletterBanner = config.Banners[name] -%}

{% if newsletterBanner.Images[0].File == "placeholder.jpg" -%}

{% endif -%}

</div>

</a>

<div class="newsletter3__info__title">{% if newsletterBanner.Images[0].Heading != '' -%} {{newsletterBanner.Images[0].Heading}} {% endif -%}</div>

</svg>

<div class="newsletter3__info__details">{% if newsletterBanner.Images[0].Text != '' -%} {{newsletterBanner.Images[0].Text}} {% endif -%}</div>

<p class="form__invalid-input form__invalid-input form__validation-info-js form__validation-required-js invalidInput" style="display: none">{{translations.InvalidEmail}}</p>

<button class="newsletter3__info__confirmButton primary-action-button newsletterSubscribe-js">{{newsletterBanner.Images[0].Title}}</button>

{% assign configConsents = config.TOS.Consents.Newsletter -%}

{% for tos in configConsents -%}

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

<li class="consentsList__li {% if channelsSize > 0 -%} js-multipleChoice {% endif -%}">

<div>

{% if tos.Statement %}

<p class="consentStatement {% if tos.Type == 3 -%} hidden {% endif -%}">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>

{% else %}

<input aria-label="tos" id="n3tos-{{ tos.Id }}{{index}}" {% if tos.Type == 3 -%} checked {% endif -%}

class="checkbox-input form__input-value-js {% if channelsSize > 0 -%} enableChannels-js {% endif -%}"

type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />

<svg>

</svg>

</span>

<span>{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>

</label>

{% if tos.Required -%}

<p class="form__invalid-input form__invalid-input form__validation-required-js invalidInput" style="display: none">{{ translations.Com_FieldIsMandatory }}</p>

{% endif -%}

</div>

{% endif -%}

{% if channelsSize > 0 -%}

{% for chn in tos.Channels -%}

{% if tos.Statement == false -%}

<svg>

</svg>

</span>

<span class="checkbox-name consentsContent">{% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}</span>

</label>

</li>

{% else -%}

<span class="checkbox-name consentsContent statementContentChannel">{% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}</span>

</li>

{% endif -%}

{% endfor -%}

</p>

</ul>

{% endif -%}

</div>

</li>

{% endfor -%}

</ul>

</div>

{% assign requiredFields = false -%}

{% for tos in configConsents -%}

{% if tos.Required == true -%}

{% assign requiredFields = true -%}

{% endif -%}

{% endfor -%}

{% if requiredFields == true and configConsents | Size > 1 -%}

<p class="consentStatement">* {{translations.Com_RequiredFields}}</p>

</li>

</ul>

{% endif -%}

</div>

{% endif -%}

Kolejnym krokiem jest dodanie odpowiednich styli w plikach css. W tym celu należy otworzyć plik css/layout1.css i na jego końcu wkleić następujący kod:


.newsletter3__wrapper{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background-color:black;background-color:rgba(0,0,0,0.75);margin:0;display:none;user-select:none}.newsletter3__wrapper .longTextNewsletter{max-height:70px;margin-top:30px !important;overflow-y:scroll;padding-right:5px}.newsletter3__wrapper .newsletter3{display:none;position:fixed;top:20%;left:0;right:0;margin:0 auto;width:800px;height:475px;background-color:{{settings.newsletterBgColor}};box-shadow:0 3px 8px #000000}.newsletter3__wrapper .newsletter3 .newsletter3__banner{width:275px;height:100%;display:block;background-color:#f2f2f2;position:relative}.newsletter3__wrapper .newsletter3 .newsletter3__banner img{max-width:275px;max-height:100%}.newsletter3__wrapper .newsletter3 .newsletter3__banner .placeholder{height:50%;margin-top:40%}.newsletter3__wrapper .newsletter3 .newsletter3__banner .imageSize{position:absolute;top:45%;text-align:center;display:block;color:{{settings.secondaryFontColor}};font-size:30px;margin-left:auto;margin-right:auto;left:0;right:0}.newsletter3__wrapper .newsletter3 .newsletter3__info{flex:auto;padding:30px 30px 50px 50px;text-align:left}.newsletter3__wrapper .newsletter3 .newsletter3__info__title{font-size:16px;font-weight:600;color:{{settings.newsletterFontColor}};width:95%}.newsletter3__wrapper .newsletter3 .newsletter3__info__details{font-size:15px;margin-top:50px;color:{{settings.newsletterFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info__enterEmail{width:100%;font-size:13px;font-weight:600;padding-top:20px;padding-bottom:7px;color:{{settings.newsletterFontColor}};border-bottom:1px solid {{settings.inputNewsletterBorderColor}};background-color:{{settings.newsletterBgColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info__confirmButton{text-transform:uppercase;transition:200ms;text-align:center;width:100%;padding:10px 0;color:{{settings.primaryBtnFontColor}};background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};margin-top:30px;margin-bottom:30px}.newsletter3__wrapper .newsletter3 .newsletter3__info__confirmButton:hover{cursor:pointer;color:{{settings.primaryBtnHoverFontColor}};background-color:{{settings.primaryBtnHoverBgColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .confirmButtonLongText{margin-top:10px !important;margin-bottom:20px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .closeNewsletterPopup{position:absolute;top:30px;right:30px;width:18px;height:18px;fill:{{settings.newsletterFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .closeNewsletterPopup:hover{fill:{{settings.linkFontColor}};cursor:pointer}.newsletter3__wrapper .newsletter3 .newsletter3__info .consentsContent{font-size:10px;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelsList{padding:0 !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel{padding-bottom:0 !important;padding-top:0 !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel:before{top:6px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel svg{margin-bottom:14px !important;margin-top:-7px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .form__validation-info{font-size:10px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .invalidInput{font-size:10px !important;margin:0 0 0 8px;padding:0}.newsletter3__wrapper .newsletter3 .newsletter3__info .consentsList__li{margin-left:-4px;margin-bottom:5px;margin-right:10px}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel{left:-4px;padding-bottom:0 !important;padding-top:0 !important;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel:before{top:6px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel svg{margin-bottom:14px !important;margin-top:-7px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .checkBoxes__container input+label:not(.tosLabel):before{top:13px}.newsletter3__wrapper .newsletter3 .newsletter3__info .checkBoxes__container input+label:not(.tosLabel) .checkBoxes__checkIcon svg{margin-bottom:5px}.newsletter3__wrapper .newsletter3 .cp_link{color:{{settings.linkFontColor}} !important}.newsletter3__wrapper .newsletter3 .consentsList li{font-size:10px !important}.newsletter3__wrapper .newsletter3 .longConsents{max-height:120px !important;overflow-y:scroll;overflow-x:hidden;padding-right:5px}.newsletter3__wrapper .newsletter3 .longConsentsSecond{max-height:170px !important;overflow-y:scroll;overflow-x:hidden;padding-right:5px}.newsletter3__wrapper .newsletter3 .consentStatement{padding-left:30px;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .statementContentChannel{margin-left:34px;display:block;margin-bottom:10px}

.newsletter3__wrapper{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background-color:black;background-color:rgba(0,0,0,0.75);margin:0;display:none;user-select:none}.newsletter3__wrapper .longTextNewsletter{max-height:70px;margin-top:30px !important;overflow-y:scroll;padding-right:5px}.newsletter3__wrapper .newsletter3{display:none;position:fixed;top:20%;left:0;right:0;margin:0 auto;width:800px;height:475px;background-color:{{settings.newsletterBgColor}};box-shadow:0 3px 8px #000000}.newsletter3__wrapper .newsletter3 .newsletter3__banner{width:275px;height:100%;display:block;background-color:#f2f2f2;position:relative}.newsletter3__wrapper .newsletter3 .newsletter3__banner img{max-width:275px;max-height:100%}.newsletter3__wrapper .newsletter3 .newsletter3__banner .placeholder{height:50%;margin-top:40%}.newsletter3__wrapper .newsletter3 .newsletter3__banner .imageSize{position:absolute;top:45%;text-align:center;display:block;color:{{settings.secondaryFontColor}};font-size:30px;margin-left:auto;margin-right:auto;left:0;right:0}.newsletter3__wrapper .newsletter3 .newsletter3__info{flex:auto;padding:30px 30px 50px 50px;text-align:left}.newsletter3__wrapper .newsletter3 .newsletter3__info__title{font-size:16px;font-weight:600;color:{{settings.newsletterFontColor}};width:95%}.newsletter3__wrapper .newsletter3 .newsletter3__info__details{font-size:15px;margin-top:50px;color:{{settings.newsletterFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info__enterEmail{width:100%;font-size:13px;font-weight:600;padding-top:20px;padding-bottom:7px;color:{{settings.newsletterFontColor}};border-bottom:1px solid {{settings.inputNewsletterBorderColor}};background-color:{{settings.newsletterBgColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info__confirmButton{text-transform:uppercase;transition:200ms;text-align:center;width:100%;padding:10px 0;color:{{settings.primaryBtnFontColor}};background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};margin-top:30px;margin-bottom:30px}.newsletter3__wrapper .newsletter3 .newsletter3__info__confirmButton:hover{cursor:pointer;color:{{settings.primaryBtnHoverFontColor}};background-color:{{settings.primaryBtnHoverBgColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .confirmButtonLongText{margin-top:10px !important;margin-bottom:20px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .closeNewsletterPopup{position:absolute;top:30px;right:30px;width:18px;height:18px;fill:{{settings.newsletterFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .closeNewsletterPopup:hover{fill:{{settings.linkFontColor}};cursor:pointer}.newsletter3__wrapper .newsletter3 .newsletter3__info .consentsContent{font-size:10px;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelsList{padding:0 !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel{padding-bottom:0 !important;padding-top:0 !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel:before{top:6px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel svg{margin-bottom:14px !important;margin-top:-7px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .form__validation-info{font-size:10px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .invalidInput{font-size:10px !important;margin:0 0 0 8px;padding:0}.newsletter3__wrapper .newsletter3 .newsletter3__info .consentsList__li{margin-left:-4px;margin-bottom:5px;margin-right:10px}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel{left:-4px;padding-bottom:0 !important;padding-top:0 !important;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel:before{top:6px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel svg{margin-bottom:14px !important;margin-top:-7px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .checkBoxes__container input+label:not(.tosLabel):before{top:13px}.newsletter3__wrapper .newsletter3 .newsletter3__info .checkBoxes__container input+label:not(.tosLabel) .checkBoxes__checkIcon svg{margin-bottom:5px}.newsletter3__wrapper .newsletter3 .cp_link{color:{{settings.linkFontColor}} !important}.newsletter3__wrapper .newsletter3 .consentsList li{font-size:10px !important}.newsletter3__wrapper .newsletter3 .longConsents{max-height:120px !important;overflow-y:scroll;overflow-x:hidden;padding-right:5px}.newsletter3__wrapper .newsletter3 .longConsentsSecond{max-height:170px !important;overflow-y:scroll;overflow-x:hidden;padding-right:5px}.newsletter3__wrapper .newsletter3 .consentStatement{padding-left:30px;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .statementContentChannel{margin-left:34px;display:block;margin-bottom:10px}

W tym samym katalogu, w pliku layout-d0.css wklejamy poniższy kod:


@media screen and (max-width: 1200px){.newsletter3__wrapper .newsletter3{left:0 !important;right:0;margin:0 auto}}

@media screen and (max-width: 1200px){.newsletter3__wrapper .newsletter3{left:0 !important;right:0;margin:0 auto}}

a w pliku layout-m0.css poniższy kod:


@media screen and (max-width: 768px){.newsletter3__wrapper .newsletter3{left:0;right:0;top:10%;margin:0 auto;width:100%}.newsletter3__wrapper .newsletter3 .newsletter3__banner{display:none}.newsletter3__wrapper .newsletter3 .newsletter3__info{padding:50px !important}}@media screen and (max-width: 420px){.newsletter3__wrapper .newsletter3{top:10px !important;height:550px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info{padding:30px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .newsletter3__info__details{padding-top:25px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .newsletter3__info__enterEmail{padding-top:20px !important}}@media screen and (max-width: 520px){.longHeadingNewsletter{overflow-y:scroll;max-height:50px}}

@media screen and (max-width: 768px){.newsletter3__wrapper .newsletter3{left:0;right:0;top:10%;margin:0 auto;width:100%}.newsletter3__wrapper .newsletter3 .newsletter3__banner{display:none}.newsletter3__wrapper .newsletter3 .newsletter3__info{padding:50px !important}}@media screen and (max-width: 420px){.newsletter3__wrapper .newsletter3{top:10px !important;height:550px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info{padding:30px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .newsletter3__info__details{padding-top:25px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .newsletter3__info__enterEmail{padding-top:20px !important}}@media screen and (max-width: 520px){.longHeadingNewsletter{overflow-y:scroll;max-height:50px}}

Kolejny krok to dodanie kodu w plikach js. W tym celu otwieramy plik js/layout1.js i na jego końcu doklejamy poniższy kod:


var newsletter3Functions = {
    init: function () {
        newsletter3Functions.events();
    },
    events: function () {
        var newsletterWrapper = $('.newsletter3__wrapper');
        var newsletterPopup = $('.newsletter3');

        $(window).on('load', function() {
            var currentDate = new Date(Date.now());
            var newsletterDaysDifference = 30;
            var daysDiff;
            var isSetDate = false;

            $.each(document.cookie.split(/; */), function()  {
                var cookies = this.split('=');
                if(cookies[0] == 'NewsletterShowDate') {
                    isSetDate = true;
                    var newsletterDate = new Date(cookies[1]);
                    daysDiff = (currentDate.getTime() - newsletterDate.getTime())  / (1000 * 3600 * 24); 
                }
            });

            if(isSetDate == false || daysDiff >= newsletterDaysDifference) {
                document.cookie = "NewsletterShowDate=" + currentDate; 
                newsletterWrapper.fadeIn(2000);
                newsletterPopup.show(200);
                newsletterPopup.css('display', 'flex');
            }      

            newsletter3Functions.setNewsletterLength();
        }),

        newsletterWrapper.on('click', '.closeNewsletterPopup', function() {
            newsletterWrapper.fadeOut(1000);
        }),

        newsletterPopup.on('click', '.newsletter3__info__consent > *', function(e) {
            newsletter3Functions.setNewsletterLength();
        })
    
    },

    showTemporaryPopupWithNewsletter: function(temporaryPopup) {
        if ($('.newsletter3__wrapper').css('display') != 'none') {
            temporaryPopup.css('z-index', '1000');
        }
    },

    hideNewsletterPopup: function() {
       $('.newsletter3__wrapper').fadeOut(3000);
    },

    setNewsletterLength: function() {
        var newsletterText = $('.newsletterTextInput').attr('value');
        var newsletterHeading = $('.newsletterHeadingInput').attr('value');
        var newsletterConsents = parseInt($('.newsletter3__info__consent').css('height'));

        if(newsletterText.length > 80) {
            $('.newsletter3__info__details').addClass('longTextNewsletter');
            $('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');
        }
        if(newsletterHeading.length > 50) {
            $('.newsletter3__info__title').addClass('longHeadingNewsletter');
            $('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');
        }
        if(newsletterHeading.length > 50 && newsletterText.length > 80 && newsletterConsents > 120) {
            $('.newsletter3__info__consent').addClass('longConsents');
            $('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');
        } else if (newsletterConsents > 170) {
            $('.newsletter3__info__consent').addClass('longConsentsSecond');
            $('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');
        }
    }
};

var newsletter3Functions = {

init: function () {

newsletter3Functions.events();

events: function () {

var newsletterWrapper = $('.newsletter3__wrapper');

var newsletterPopup = $('.newsletter3');

$(window).on('load', function() {

var currentDate = new Date(Date.now());

var newsletterDaysDifference = 30;

var daysDiff;

var isSetDate = false;

$.each(document.cookie.split(/; */), function() {

var cookies = this.split('=');

if(cookies[0] == 'NewsletterShowDate') {

isSetDate = true;

var newsletterDate = new Date(cookies[1]);

daysDiff = (currentDate.getTime() - newsletterDate.getTime()) / (1000 * 3600 * 24);

}

});

if(isSetDate == false || daysDiff >= newsletterDaysDifference) {

document.cookie = "NewsletterShowDate=" + currentDate;

newsletterWrapper.fadeIn(2000);

newsletterPopup.show(200);

newsletterPopup.css('display', 'flex');

}

newsletter3Functions.setNewsletterLength();

}),

newsletterWrapper.on('click', '.closeNewsletterPopup', function() {

newsletterWrapper.fadeOut(1000);

}),

newsletterPopup.on('click', '.newsletter3__info__consent > *', function(e) {

newsletter3Functions.setNewsletterLength();

})

showTemporaryPopupWithNewsletter: function(temporaryPopup) {

if ($('.newsletter3__wrapper').css('display') != 'none') {

temporaryPopup.css('z-index', '1000');

}

hideNewsletterPopup: function() {

$('.newsletter3__wrapper').fadeOut(3000);

setNewsletterLength: function() {

var newsletterText = $('.newsletterTextInput').attr('value');

var newsletterHeading = $('.newsletterHeadingInput').attr('value');

var newsletterConsents = parseInt($('.newsletter3__info__consent').css('height'));

if(newsletterText.length > 80) {

$('.newsletter3__info__details').addClass('longTextNewsletter');

$('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');

}

if(newsletterHeading.length > 50) {

$('.newsletter3__info__title').addClass('longHeadingNewsletter');

$('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');

}

if(newsletterHeading.length > 50 && newsletterText.length > 80 && newsletterConsents > 120) {

$('.newsletter3__info__consent').addClass('longConsents');

$('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');

} else if (newsletterConsents > 170) {

$('.newsletter3__info__consent').addClass('longConsentsSecond');

$('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');

}

};

Wskazówka

Jeśli chcesz, by newsletter w popupie wyskakiwał Klientom Twojego sklepu częściej, niż co 30 dni, to w powyższym kodzie zmień wartość przy zmiennej newsletterDaysDifference (linia var newsletterDaysDifference = 30;). Ona odpowiada za częstotliwość pokazywania się popupu z newsletterem. Wartości podawane są w ilości dni. Domyślnie jest to 30.

Natomiast w pliku js/layout0.js wyszukujemy linię o treści „document.addEventListener(„DOMContentLoaded”, function () {” (początek pliku). Kilkanaście linijek poniżej, znajduje się linia o treści „setTimeout(ui.formLabelAnimationOnLoadPage, 0);”. Tuż nad nią należy wkleić poniższy kod:


if($('body').find('.newsletter3__wrapper').index() >= 0) {
    newsletter3Functions.init();
}

if($('body').find('.newsletter3__wrapper').index() >= 0) {

newsletter3Functions.init();

}

Kolejny krok to utworzenie tłumaczeń. W tym celu, w Panelu Administracyjnym wchodzimy na zakładkę Wygląd Sklepu -> Ustawienia -> Tłumaczenia. Należy dodać następujące tłumaczenia:
Id – Tekst

Newsletter3AddEmail – tu można wpisać dowolny tekst, jaki pojawi się w polu do wpisania adresu e-mail. Np. „Podaj adres e-mail”
Through – poprzez

Pozostałe tłumaczenia występujące w nowym newsletterze, są już dodane do szablonu.

Pozostaje dodać drobne modyfikacje w innych plikach. W pliku js/layout0.js wyszukujemy linię „if (result.action.Action === 'Customer/Login’) {„. Nad linią powyżej (o treści „// dataLayer Push” dodajemy poniższy kod:


if (result.action.Action === 'Newsletter/Subscribe' && newsletter3Functions) {
    if($('.newsletter3__wrapper').css('display') != 'none') {
        newsletter3Functions.hideNewsletterPopup();
    }
}

if (result.action.Action === 'Newsletter/Subscribe' && newsletter3Functions) {

if($('.newsletter3__wrapper').css('display') != 'none') {

newsletter3Functions.hideNewsletterPopup();

}

Linia ta sprawia, że po zatwierdzeniu subskrypcji newslettera, popup znika.

W tym samym pliku wyszukujemy linię „return validation;”. Linię powyżej (zaczynającą się od „if (validation == 'error'” należy zmodyfikować tak, by wyglądała następująco:


if (validation == 'error' && $('.popupDialog-js:visible').length === 0 && (!$('.newsletter3').length)) {

if (validation == 'error' && $('.popupDialog-js:visible').length === 0 && (!$('.newsletter3').length)) {

Również w tym samym pliku wyszukujemy linię „temporaryPopup.fadeIn(300);”. Tuż nad nią dodajemy poniższy kod:


if($('.newsletter3').length) {
    newsletter3Functions.showTemporaryPopupWithNewsletter(temporaryPopup);
}

if($('.newsletter3').length) {

newsletter3Functions.showTemporaryPopupWithNewsletter(temporaryPopup);

}

Gotowe! Twój szablon posiada od teraz newsletter w popupie.

Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę „Więcej” (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt