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

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

    

        
        
        

            
                

                    {{newsletterBanner.Images[0].Alt | H}}
                    {% if newsletterBanner.Images[0].File == "placeholder.jpg" -%}
                        275x475
                    {% endif -%}
                

            

            

                
{% if newsletterBanner.Images[0].Heading != '' -%} {{newsletterBanner.Images[0].Heading}} {% endif -%}

                
                    
                
                
                
{% if newsletterBanner.Images[0].Text != '' -%} {{newsletterBanner.Images[0].Text}} {% endif -%}

                
                
                          

                

                

                    {% assign configConsents = config.TOS.Consents.Newsletter -%}
                    
    
                        {% for tos in configConsents -%}
                            {% assign channelsSize = tos.Channels | Size -%}
                            
  • 
                                
    
                                    {% if tos.Statement %}
                                        
                                    {% else %}
                                        
                                    {% endif -%}
                    
                                    {% if channelsSize > 0 -%}
                                        
                          
                                            {% for chn in tos.Channels -%}
                                                {% if tos.Statement == false -%}
                                                    
    • 
                                                        
                                                        
                                                    
      • 
                                                {% else -%}
                                                    
    •  
                                                        
                                                        {% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}
                                                    
      • 
                                                {% endif -%}
                                            {% endfor -%}
                                            
                                        
    
                                    {% endif -%}
                                
    
                            
    • 
                        {% endfor -%}
                    

                

                {% assign requiredFields = false -%}
                {% for tos in configConsents -%}
                    {% if tos.Required == true  -%}
                        {% assign requiredFields = true -%}
                    {% endif -%}
                {% endfor -%}
                {% if requiredFields == true and configConsents | Size > 1 -%}
                
    
                    
  • 
                        
    * {{translations.Com_RequiredFields}}
    
                    
    • 
                

                {% endif -%}
            

        

    

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

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

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

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

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

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

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

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?

Wyślij opnie