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:

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:

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:

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

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

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:

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:

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:

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.

Czy ten artykuł był pomocny?