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.
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:
0 1 2 |
{% 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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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] -%} <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 -%} |
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:
0 1 2 |
.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:
0 1 2 |
@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:
0 1 2 |
@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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
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'); } } }; |
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:
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: 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:
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:
Również w tym samym pliku wyszukujemy linię „temporaryPopup.fadeIn(300);”. Tuż nad nią dodajemy poniższy kod:
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.
Id – Tekst