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:
{% 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] -%}
{% 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');
}
}
};
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.