Wygląd sklepu

Pobierz Drukuj kategorię

Standardowe szablony Comarch

Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Spis treści

Jak wyeksportować swój szablon z Comarch e-Sklep?

Jak wgrać własny szablon do Comarch e-Sklep?

Comarch e-Sklep daje możliwość dostosowania wyglądu do preferencji sprzedawcy oraz potrzeb Klientów. Jeśli utworzyłeś już swój autorski projekt, to masz możliwość jego zapisania. Plik będzie potrzebny przy chęci modyfikacji wyglądu. Zapisana wersja szablonu może również stanowić kopię bezpieczeństwa. Warto jest więc wyeksportować szablon do pliku.

Jak wyeksportować swój szablon z Comarch e-Sklep?

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Eksport szablonu.

Krok 2. W tym miejscu możesz opcjonalnie (przed eksportem) określić autora szablonu, podać adres e-mail, telefon oraz adres WWW swojego e-Sklepu.

Krok 3. Jeżeli chcesz wyeksportować szablon do pliku użyj przycisku Eksportuj szablon.

Gotowe! Szablon został wyeksportowany do pliku na Twoim urządzeniu.

Wskazówka

Z tego miejsca możesz także wyeksportować posiadane w e-Sklepie bannery, korzystając z przycisku Eksportuj bannery.

Jak wgrać własny szablon do Comarch e-Sklep?

Własny szablon. Jak go wgrać?

Po skomponowaniu swojego własnego szablonu możesz wgrać go do e-Sklepu. Postępuj zgodnie z poniższymi krokami.

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Import szablonu.

Krok 2. Określ, czy wgrywany szablon ma podmienić istniejące bannery. Gdy parametr zostanie zaznaczony, wówczas wszystkie bannery zapisane na danym slocie zostaną usunięte i zastąpione bannerami z importowanego szablonu.

Krok 3. Wybierz plik XML swojego szablonu i naciśnij Importuj szablon.

Uwaga

Import szablonu jest operacją nieodwracalną i spowoduje nadpisanie dotychczasowego szablonu. W przypadku, gdy szablon był modyfikowany (dokonywano zmian w kodzie HTML) jego aktualizacja spowoduje, iż zmiany nie zostaną przeniesione. Warto wykonać eksport posiadanego szablonu do pliku w celu zapisania oraz posiadania wglądu to wprowadzanych modyfikacji. Jeżeli istnieje taka konieczność należy ponownie dokonać samodzielnej edycji szablonu

Wskazówka

W zakładce Szablony możesz określić, czy wgrywany szablon ma być domyślny i aktywny w e-Sklepie.

Krok 4. Teraz możesz podejrzeć zmiany, jakie zaszły w wyglądzie Twojego e-Sklepu. W tym celu możesz podejrzeć zmiany w czasie rzeczywistym lub przejść w tryb incognito. Pamiętaj, że wszelkie zmiany zostaną opublikowane po pełnej synchronizacji, która wciągu 10 minut zgodnie z wyświetlanym komunikatem.

Gotowe! Twój szablon został zaimportowany do e-Sklepu.

Polityka bezpieczeństwa haseł

Z powodów bezpieczeństwa we wszystkich standardowych szablonach została wprowadzona zmiana odnośnie wymagań dotyczących hasła dla Klientów w Comarch e-Sklep. Nowe hasło powinno:

składać się z minimum 8 znaków
zawierać dużą literę
zawierać małą literę
cyfry 0-9
znaki specjalne: ‘ ! @ # $ ^ & * ( ) + = , – : [ ] ; { } . _

Wskazówka

System weryfikuje wpisywanie hasła na bieżąco(w momencie pisania) w formie graficznej, zgodnie z powyższymi wymogami bezpieczeństwa. Opcja widoczna jest w szablonach Topaz od wersji 2022 oraz Szafir od wersji 2021.

Nowe hasło spełnić łącznie wszystkie powyższe 5 warunków. Zmiana dotyczy wszystkich klientów: zarejestrowanych wcześniej przed zmianą oraz nowych, którzy będą się rejestrować po raz pierwszy.

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Jak wykonać kopię bezpieczeństwa?

W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu.

W pustych polach znajdujących się w zakładce Eksport szablonu, opcjonalnie przed eksportem możesz uzupełnić powyższe dane, tj. Autora szablonu, e-mail, telefon i stronę WWW sklepu. Aby wyeksportować szablon, kliknij Eksportuj szablon. Wyeksportowany plik jest w formacie XML, a jego nazwa zawiera szablon oraz wersję, co znacznie ułatwia zarządzanie kopiami bezpieczeństwa w przypadku wykonywania ich regularnie.

Jak wyeksportować bannery?

Bannery, które znajdują się w Twoim sklepie możesz również wyeksportować tworząc kopię bezpieczeństwa. W tym celu także musisz przejść do Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie do zakładki Eksport szablonu. Obok przycisku Eksportuj szablon, znajduje się przycisk Eksportuj bannery, który musisz kliknąć aby bannery, które posiadasz w e-Sklepie zostały weksportowane. Kopia bezpieczeństwa jest również zapisywana w formacie XML, a nazwa pliku wskazuje na szablon, wersję i zawartość bannerów.

Jak zabezpieczyć hasłem swój szablon?

Jeśli chcesz, aby Twój szablon został zabezpieczony hasłem, a znajomość hasła była niezbędna podczas zaimportowania tego szablonu do e-Sklepu, musisz w tym celu przejść w Panelu Administracyjnym do sekcji Wygląd sklepu/ Ustawienia/ Ustawienia zaawansowane, następnie do zakładki Szablon.

W tym miejscu nadasz hasło dla swojego szablonu.

Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno:

Składać się z minimum 8 znaków,
Zawierać dużą literę,
Zawierać małą literę,
Zawierać cyfrę 0-9,
Zawierać znak specjalny – ‘!.+?;^]=-(&_)#=

Gotowe! Teraz Twój szablon został zabezpieczony hasłem.

Jeśli wyeksportujesz szablon, który zabezpieczyłeś hasłem – podczas importu tego szablonu, będziesz musiał podać nadane wcześniej hasło. Jego brak uniemożliwi import szablonu, a podanie błędnego hasła spowoduje nieprawidłowe działanie szablonu po imporcie. Więcej informacji znajdziesz:

Obsługa Tłumacza Google w szablonach

Wskazówka

Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Obsługa Tłumacza Google w szablonach

W Comarch e-Sklep możesz ułatwić zakupy swoim Klientom udostępniając możliwość tłumaczenia stron z pomocą Tłumacza Google. Opcja dotyczy wszystkich szablonów Comarch.

Jak włączyć Tłumacz Google w szablonie?

Szablon Szafir, Bursztyn, Agat, Opal

W panelu administracyjnym przejdź do Wygląd sklepu/ Ustawienia, a następnie w sekcji Ustawienia Dodatkowe oznacz parametr „Zezwól na tłumaczenie strony przez Tłumacz Google”:

Wprowadzone zmiany zapisz i opublikuj.

Szablon Topaz, Szafir, One Page Shop

W panelu administracyjnym przejdź do Wygląd sklepu/ Ustawienia/ Dodatkowe i oznacz parametr Zezwól na tłumaczenie strony przez Tłumacz Google:

Wprowadzone zmiany zapisz i opublikuj. Po zapisaniu i publikacji wprowadzonych zmian, na stronie Twojego sklepu u góry wyświetli się Tłumacz Google pozwalający na wybór języka.

Polecane produkty, kategorie oraz bannery w wyszukiwarce

Wstęp

Parametry wyszukiwania stanowią istotny element w funkcjonowaniu sklepu internetowego. Wygodne oraz efektywne przeszukiwanie asortymentu zachęca klientów do kontynuacji zakupów. Aktualnie, po kliknięciu w pole wyszukiwania, klienci natychmiast uzyskują dostęp do polecanych produktów, kategorii i wybranych marek. Nowa funkcja nie tylko ułatwia skuteczne przeglądanie oferty, ale również pełni rolę skutecznego narzędzia do promowania asortymentu. Dzięki łatwemu dostępowi do rekomendacji, zwiększasz atrakcyjność swojego e-Sklepu, umożliwiając klientom bardziej intuicyjne odkrywanie interesujących produktów. Wyżej opisaną funkcjonalność możesz włączyć w dwóch miejscach:

Na ustawieniach nagłówka w Kreatorze wyglądu:

W panelu administracyjnym w zakładce Wygląd sklepu/ Ustawienia/ Ustawienia sklepu/ Dodatkowe. W tym miejscu wybierz w Widoku wyszukiwania towarów w nagłówku opcję ’Z rekomendacjami”.

Pojawiający się popup z rekomendacjami składa się z trzech osobnych elementów, jakimi są:

Polecane produkty
Polecane kategorie
Polecane marki

Produkty polecane skonfiguruj przechodząc do panelu administracyjnego do zakładki Wygląd sklepu/ Ustawienia/ Więcej(trzy kropki)/ Edytuj ustawienia zaawansowane/ Obiekty. Odnajdź obiekt header-recomm-products, po czym wybierz jeden typ z listy. Do wyboru masz:

Ostatnio oglądane,
Ręczny,
Grupa towarowa,
Producent,
Marka.

Wskazówka

W popupie z rekomendacjami wyświetlonych zostanie maksymalnie 6 polecanych towarów

Kategorie polecane skonfiguruj przechodząc do panelu administracyjnego do zakładki Wygląd sklepu/ Ustawienia/ Więcej(trzy kropki)/ Edytuj ustawienia zaawansowane/ Obiekty. Odnajdź na obiekt header-recomm-categories, po czym wybierz jeden typ z listy:

Grupy najwyższego poziomu,
Podgrupy począwszy od,
Wybrane,
Zawężaj menu do wybranej grupy.

Przyklad

Jeśli kategoria ma więcej niż trzy podkategorie, to widoczna będzie jedynie ta, która jest ostatnia

Polecane marki skonfiguruj przechodząc do panelu administracyjnego do zakładki Wygląd sklepu/ Ustawienia/ Bannery w obiekcie headerRecommLogos. Dodaj odpowiednie zdjęcia. Możesz także dodać link. Dzięki temu po kliknięciu w banner ostaną przekierowany na podany adres URL.

Wskazówka

Jeśli obiekt header-recomm-categories, header-recomm-products lub banner headerRecommLogos zostanie usunięty, to popup z rekomendacjami nie będzie widoczny na stronie

Jak zaktualizować szablon do najnowszej wersji?

Wskazówka

Wstęp

W e-Sklepie możesz dowolnie zmieniać szablony. Możesz je także modyfikować oraz aktualizować. Wiąże się to z wgraniem zupełnie nowego szablonu na miejsce starego. Aktualizacja wyglądu powoduje zmianę dotychczasowych ustawień. Przed każdą aktualizacją polecamy utworzyć odpowiednią dla siebie instrukcję, która będzie zawierała Twoje ustawienia kolorów czy modyfikacje w kodzie szablonu. Możesz także wyeksportować dotychczasowy szablon, aby stanowił on kopię bezpieczeństwa.

Jak zaktualizować szablon?

Instrukcja aktualizacji szablonów: Rubin, Szafir, Topaz i One Page Shop (dostępnych w Kreatorze Wyglądu)

Aby zaktualizować szablon Rubin, Szafir, Topaz lub One Page Shop należy skorzystać z aktualnej wersji Kreatora Wyglądu, do którego odnośnik znajduje się w panelu administracyjnym e-Sklepu w sekcji Wygląd sklepu/ Kreator wyglądu. Istnieją dwie możliwości aktualizacji tych szablonów:

wygenerowanie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Wyeksportowany z Kreatora Wyglądu szablon należy wgrać do e-Sklepu. W panelu administracyjnym e-Sklepu, w sekcji Wygląd sklepu znajduje się bezpośredni odnośnik do importu szablonu z Kreatora wyglądu. Szczegółowa instrukcja dostępna jest w artykule Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Podczas dokonywania modyfikacji w szablonach zachęcamy do skorzystania z naszego Centrum Pomocy.

Wskazówka

Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Instrukcja aktualizacji szablonów: Bursztyn, Agat i Opal.

Aby zaktualizować szablon Bursztyn, Agat lub Opal należy w panelu administracyjnym e-Sklepu przejść do sekcji Wygląd Sklepu/ Gotowe szablony Comarch, w której znajdują się najnowsze wersje szablonów dostępne do zainstalowania. Z wyświetlonej listy należy wybrać szablon, który ma zostać wgrany do e-Sklepu. W tym celu wybierz przycisk Chcę pobrać i zainstalować szablon:

Następnie wyświetli się nowe okno, w którym należy:

wybrać tzw. slot, który zostanie nadpisany nowym (aktualnym) szablonem. W każdym e-Sklepie dostępne są 4 miejsca na wgranie szablonu, spośród których jeden szablon oznacza się jako aktywny i domyślny,
określić, czy wgrywany szablon ma podmienić istniejące bannery. Gdy parametr zostanie zaznaczony, wówczas wszystkie bannery zapisane na danym slocie zostaną usunięte i zastąpione bannerami z importowanego szablonu. Jeżeli w nadpisywanym szablonie znajdują się bannery oraz lookbooki, które mają nadal wyświetlać się w e-Sklepie, należy wskazany parametr zostawić odznaczony. Gdy parametr nie zostanie zaznaczony, wówczas dotychczasowe bannery i lookbooki nie zostaną usunięte.
Zaimportować szablon do e-Sklepu.
Wskazówka
Import szablonu jest operacją nieodwracalną i spowoduje nadpisanie dotychczasowego szablonu. W przypadku, gdy szablon był modyfikowany (dokonywano zmian w kodzie HTML) jego aktualizacja spowoduje, iż zmiany nie zostaną przeniesione. Warto wykonać eksport posiadanego szablonu do pliku w celu zapisania oraz posiadania wglądu to wprowadzanych modyfikacji. Jeżeli istnieje taka konieczność należy ponownie dokonać samodzielnej edycji szablonu.

Aby nowy szablon pojawił się w e-Sklepie należy upewnić się, czy jest on aktywny oraz ustawiony jako domyślny. W sekcji Wygląd sklepu/Ustawienia/Edytuj ustawienia zaawansowane w zakładce Szablon znajdują się odpowiedzialne za to parametry, które powinny być zaznaczone.

Wszelkie zmiany należy zapisać, a następnie opublikować.

Uwaga

Jeżeli szablon nie zostanie opublikowany, wówczas nie pojawi się on w e-Sklepie.

Instrukcja aktualizacji innych szablonów (niż szablonów Comarch) oraz aktualizacji szablonów z własnymi modyfikacjami

Jeżeli w swoim Comarch e-Sklepie korzystasz z własnego szablonu, czyli innego niż gotowe szablony Comarch, to powinieneś jego aktualizację przeprowadzić we własnym zakresie lub zlecić ją firmie/ osobie, która dla Ciebie przygotowała ten szablon. W przypadku, gdy korzystasz z gotowego szablonu Comarch, ale wprowadziłeś do niego indywidualne zmiany (poza Kreatorem Wyglądu), to również we własnym zakresie (lub ze wsparciem autora zmian) musisz zadbać o aktualizację swojej wersji szablonu.

Wybór szablonu startowego

Spis treści

Wstęp

First run

Kreator wyglądu

Gotowe szablony Comarch

Wstęp

W przypadku pierwszej konfiguracji, na stronie sklepu nie ma zaimportowanego żadnego z szablonów. Rozpoczynając pracę z Comarch e-Sklep, przy pierwszym wejściu na adres Twojego sklepu, otworzy się strona z wyborem szablonu graficznego.

First run

Po wejściu na sklep pokaże się widok „First Run”. Umożliwia on pierwsze dostosowanie wyglądu strony.

W widoku "First run" będziesz mógł stworzyć swój własny szablon w Kreatorze wyglądu lub wybrać spośród darmowych wzorów przygotowanych przez Comarch:

Szablon Topaz w wersjach kolorystycznych Grafit, Zielony, Bordowy
Szablon One Page Shop
Szablon Szafir

Dla każdego z nich zostały przygotowane dokładne opisy w czterech wersjach językowych: polskim, angielskim, niemieckim i francuskim oraz specjalne sklepy demonstracyjne. Dzięki temu można zapoznać się z różnymi projektami wyglądu dla różnych branż w tym branży kosmetycznej, odzieżowej czy spożywczej. Dokładne przedstawienie każdego z szablonów może służyć, jako inspiracja przy wyborze właściwego wyglądu dla nowego sklepu. First Run oferuje prostą instalację szablonu. Wystarczy przejść do szczegółów wybranego widoku, a następnie wybrać „Zainstaluj”. Dany szablon zostanie zaimportowany na pierwszy z czterech dostępnych slotów udostępnionych w ramach ustawień wyglądu sklepu.

Kreator wyglądu

Aby stworzyć nowy szablon w panelu administracyjnym e-Sklep w zakładkę Wygląd sklepu/ Kreator wyglądu, zostaniesz przekierowany na stronę kreatora, następnie wybierz, czy chcesz stworzyć szablon dla sklepu B2B czy B2C.

W kolejnym korku będziesz mógł wybrać, czy opcję Dokończ poprzedni szablon bądź Stwórz nowy projekt

Następnie w przypadku tworzenia nowego projektu w oknie wyboru będziesz mógł wskazać właściwy szablon, który będziesz mógł dostosować do własnych preferencji względem dostępnych opcji.

Wskazówka

Więcej informacji na temat edycji szablonów znajdziesz w centrum pomocy dotyczącej kreatora wyglądu.

Zapisanie i pobranie na dysk utworzonego wzorca możesz wykonać klikając przycisk Generuj. Natomiast pobrany szablon możesz ponownie edytować po wgraniu go do kreatora za pomocą opcji Importuj szablon. Gotowy szablon zaimportujesz w panelu Comarch e-Sklep w zakładce Wygląd sklepu/ Zaimportuj szablon z Kreatora wyglądu. Następnie należy wgrać pobrany szablon klikając w Wybierz plik XML. Po wgraniu szablonu kliknij Importuj Szablon.

Gotowe szablony Comarch

Gotowe szablony Comarch przy pierwszym uruchomieniu sklepu można wgrać na dwa sposoby:

1. Przy pierwszym wejściu na adres Twojego sklepu

Pojawi się strona z gotowymi szablonami:

Wskazówka

Szablon Szafir, dostępny jest dla sklepów w wersji B2B oraz Enterprise

Po kliknięciu w jeden z gotowych szablonów Comarch możesz potwierdzić jego wybór lub podejrzeć jak prezentuje się na naszym sklepie demo.

2. Wybór szablonu z panelu administracyjnego Comarch e-Sklep

Standardowe szablony dostępne są w panelu Comarch e-Sklep w zakładce Wygląd sklepu/ Gotowe szablony Comarch.

Po kliknięciu w Chcę pobrać i zainstalować szablon, szablon zostanie zapisany. Pojawi się komunikat o pomyślnym przeprowadzeniu zmian.

Wybrany szablon można w każdej chwili zmienić w panelu administracyjnym e-Sklepu. Podstawowe informacje o naszych darmowych szablonach znajdziesz w artykule Gotowe szablony Comarch. Instalacja szablonów z poziomu panelu administracyjnego opisana w artykule Szablony w sklepie.

3. Wgranie własnego szablonu do Comarch e-Sklep

W e-Sklepie możesz także wgrać własny szablon. Jeśli został on już przez Ciebie utworzony i wygenerowany w Kreatorze Wyglądu, to wystarczy wgrać go do Twojego e-Sklepu, aby móc cieszyć się jego unikalnym wyglądem. Można to zrobić za pomocą opcji Wygląd sklepu/ Zaimportuj szablon z Kreatora wyglądu.

Gotowe szablony Comarch

Comarch e-Sklep umożliwia tworzenie oraz edycję szablonów graficznych opartych na silniku DotLiquid wykonanych w technice Responsive Web Design (RWD). Dzięki tej technologii strona sklepu dostosowuje się automatycznie do rozdzielczości urządzenia, na którym jest wyświetlana i nie ma potrzeby tworzenia osobnych szablonów dla wersji mobilnej. Dodatkowo wszystkie standardowe szablony są dostosowane do wyświetlania w rozdzielczości 4K.

Domyślnie użytkownicy Comarch e-Sklep mają dostęp do pięciu darmowych szablonów: Topaz, Dla gastronomii i One Page Shop (generowane przez Kreator wyglądu) oraz Szafir i Rubin(dostępny dla wersji B2B w Kreatorze B2B).

Więcej o darmowych szablonach przeczytasz w artykułach Szablon Rubin, Szablon Dla gastronomii, Szablon Szafir, Szablon Topaz i Szablon One Page Shop. Szablony te można poddać edycji w celu spersonalizowania wyglądu swojego sklepu dzięki prostym ustawieniom w panelu administracyjnym, gdzie można zmienić takie parametry jak:

Motyw kolorystyczny – możliwość skorzystania z kliku predefiniowanych motywów i ich edycji,
Ustawienia wstążek – zmiana kolorystyki flag promocyjnych na towarach,
Kolory komunikatów – możliwość zmiany kolorystyki komunikatów pojawiających się w e-Sklepie,
Bannery – możliwość tworzenia własnych bannerów (zdjęcia, opis, linki), zmiana animacji bannera,
Logo i Favicon – możliwość wgrania własnego logo i Favicon (ikony widocznej na zakładce przeglądarki),
Obiekty – konfigurowalne obiekty pozwalające np. na zmianę rodzaju towarów wyświetlanych na stronie głównej,

Dla bardziej zaawansowanych użytkowników znających technologie takie jak HTML, CSS, JS, DotLiquid udostępniony jest obszar z plikami szablonu, gdzie można dokonywać zmian na poziomie kodu szablonu, co daje praktycznie nieograniczone możliwości edycji i personalizacji wyglądu sklepu.

Wymagania:

Wspierane przeglądarki (minimalna wersja)

Mozilla Firefox – aktualna wersja przeglądarki, nie starsza niż trzy miesiące,
Google Chrome – aktualna wersja przeglądarki, nie starsza niż trzy miesiące,
Microsoft Edge – aktualna wersja przeglądarki, nie starsza niż trzy miesiące.

W obszarze Wygląd sklepu/ Gotowe szablony Comarch znajdziesz listę wszystkich darmowych szablonów Comarch. Poprzez link Zobacz demo Możesz obejrzeć sklepy demonstracyjne przygotowane dla każdego z szablonów oraz pobrać i zainstalować wybrany przez siebie szablon. Szczegóły dotyczące edycji szablonów znajdziesz w kategorii Dostosowanie wyglądu.

Kreator wyglądu szablonu Rubin

Spis treści

Wstęp

Zastosowanie

Kto może używać tej opcji?

Style

Funkcja cofania zmian

Generowanie i wgrywanie szablonu

Aktualizacja szablonu

Więcej informacji

Wstęp

Jednym z kluczowych elementów wpływających na sukces w branży e-commerce jest odpowiednia oprawa wizualna sklepu internetowego. To ona w dużej mierze kształtuje wrażenia użytkowników oraz wpływa na przebieg ich procesu zakupowego. Dzięki narzędziu Kreator Szablonu Rubin (B2B) właściciele sklepów mają możliwość stworzenia unikalnego, dopasowanego szablonu, który będzie obsługiwał zarówno klientów detalicznych, jak i firmy, łącząc modele B2B oraz B2C.

Zastosowanie

Kreator Szablonu Rubin to intuicyjne narzędzie do projektowania wyglądu sklepu. Wszystko odbywa się na poziomie strony internetowej, gdzie przy pomocy metody "przeciągnij i upuść" możesz stworzyć szablon idealnie pasujący do Twojego sklepu.

Kreator pozwala na zaprojektowanie wszystkich kluczowych obszarów sklepu, w tym:

Strony głównej.
Listy towarów.
Koszyka.

Kto może używać tej opcji?

Aby móc używać tego narzędzia należy posiadać:

Comarch e-Sklep w wersji Enterprise lub B2B,
szerokość ekranu powyżej 1280 px, a zalecana to 1920 px,
oraz jedną z przeglądarek internetowych w aktualnej wersji.

Wskazówka

Kreator szablonu Rubin dostępny jedynie w wersji przeglądarkowej.

Zaczynamy!

Jak zaprojektować układ szablonu?

Aby rozpocząć projektowanie szablonu, należy udać się na stronę Kreatora Wyglądu, gdzie pojawi się powitalny komunikat. Na początku trzeba wybrać, dla jakiego typu sprzedaży ma być stworzony szablon – detalicznej lub hurtowej. Sprzedaż hurtowa jest dedykowana tym, którzy chcą oferować swoje produkty także klientom biznesowym w większych ilościach. Po dokonaniu wyboru modelu sprzedaży, wystarczy kliknąć przycisk „Rozpocznij pracę”. Następnie, użytkownik będzie miał możliwość stworzenia nowego szablonu lub edytowania jednego z dostępnych, gotowych szablonów.

W sytuacji gdy wcześniej tworzony był już projekt, widoczny będzie przycisk umożliwiający dokończenie szablonu lub rozpoczęcie nowego projektu.

Opcja Nowy szablon umożliwia zbudowanie od początku nowego szablonu Rubin według Twojego indywidualnego pomysłu.

W ramach szablonów B2B do wyboru zostały udostępnione szablon Rubin oraz szablon Szafir w trzech wersjach kolorystycznych. Są to gotowe wersje szablonów z możliwością ich edycji. Dzięki temu nie musisz zaczynać pracy od zera – wystarczy, że wybierzesz jeden z dostępnych szablonów, a następnie łatwo dopasujesz go do swoich wymagań. Podwójne kliknięcie na wybrany kafelek pozwala przejść do kolejnego etapu. W trzech prostych krokach zapoznasz się z podstawowymi funkcjami kreatora. Po ich przejściu, możesz rozpocząć dalsze dostosowywanie szablonu lub od razu wygenerować przygotowaną wersję szablonu Rubin.

Od czego zacząć?

Wybierz preferowaną wersję językową Kreatora i rozpocznij tworzenie swojego szablonu. Dostępne opcje to: język polski, angielski, niemiecki oraz francuski. Aby zmienić język, kliknij strzałkę obok flagi i nazwy języka w lewym dolnym rogu. Po wybraniu języka, przy podglądzie na pełnym ekranie, szablon będzie wyświetlany w wybranej wersji językowej.

Po ustawieniu wersji językowej dla Kreatora, warto nadać nazwę swojemu szablonowi. Można to zrobić klikając „Zmień” w lewym górnym rogu, a następnie wpisując nową nazwę, która zastąpi domyślną nazwę „Rubin”. Ta nazwa będzie widoczna po zaimportowaniu szablonu do panelu administracyjnego oraz po wyeksportowaniu go do pliku XML, wraz z datą i godziną wygenerowania szablonu.

Krok 1 - Strona główna

W tej sekcji należy zaprojektować wygląd strony głównej naszego Comarch e-Sklepu dla szablonu Rubin. Strona główna może składać się z następujących elementów:

Nagłówek,
Baner,
Widget,
Banner pop-up,
Proponowane,
Newsletter,
Slider producentów,
Slider marek,
Aktualności,
Banner infografika,
Element tekstowy,
Stopka.

Po kliknięciu w strzałkę, sekcje rozwiną się i pokażą dostępne elementy:

Metodą "Przeciągnij i upuść" przenosimy wybrane elementy na obszar po prawej stronie:

Postępuj analogicznie z pozostałymi elementami.

Nagłówek

Sekcja „Nagłówek” prezentuje jeden widok. Nagłówek dodatkowo można konfigurować w zakresie funkcji związanych ze składaniem Zapytań o wycenę.

Bannery

Sekcja "Bannery" pozwala dodać slider. Informacje dotyczące rekomendowanych rozmiarów obrazków w bannerach opisaliśmy w tym artykule.

Widget

Sekcja "Widget" pozwala dodać jeden element, który pozwoli zaprezentować następujące funkcj:

dodanie zdjęcia,
dodanie tekstu tekstu nagłówka (tekst pionowy),
dodanie linku do przycisku,
dodanie tekstu.

Banner pop-up

Sekcja „Banner pop-up” pozwala na dodanie bannera w formie popupu. Banner ten jest możliwy do wyświetlenia jedynie na stronie głównej e-Sklepu.

Proponowane

Sekcja „Proponowane” oferuje dodatkowe opcje do konfiguracji. Z menu rozwijanego, dostępnego po kliknięciu przycisku „Zmień typ”, możesz wybrać kategorię produktów, które mają być wyświetlane w tej sekcji (np. nowości, najczęściej oglądane, wyprzedaż, sugerowane). Po dokonaniu zmiany typu, sekcja zostanie odpowiednio nazwana po załadowaniu szablonu do sklepu.

Dodatkowo po najechaniu kursorem na tę sekcję, wybierając Opcje, możemy ustawić liczbę towarów, która będzie się wyświetlać (maksymalnie 50).

Podczas tworzenia szablonu w Kreatorze wyglądu Rubin po dodaniu sekcji towary polecane można określić typ wyświetlanych produktów. Nazwa sekcji jest zależna oraz adekwatna do określonego typu. Daną nazwę można modyfikować w tłumaczeniach szablonu. Dodatkowo każdy wybrany typ jest podlinkowany do wszystkich produktów wskazanego rodzaju. W zależności od wybranego typu, edycji parametrów wyświetlania dokonasz w panelu administracyjnym e-Sklepu. Z kolei informację o typie towaru ustawisz w systemie ERP. Typy towarów edytowane z poziomu panelu administracyjnego Comarch e-Sklep:

Promocja,
Nowość,
Wyprzedaż,
Super jakość,
Super cena,
Rekomendacja sprzedawcy,
Zapowiedź,
Sugerowane,
Towar polecany,
Najczęściej oglądane / najczęściej kupowane,
Cross-selling - oferowanie produktów uzupełniających wcześniejsze zakupy,

Aby zdecydować o parametrach wyświetlania tych informacji należy przejść w panelu administracyjnym Comarch e-Sklep do zakładki Ustawienia > Ustawienia sklepu > Towary:

Producent, marka, ręcznie wybrane produkty, kategoria oraz ostatnio oglądane są obsługiwane w ramach lokalnego obiektu "Siatka towarów". Aby wprowadzić zmiany w ustawieniach dla jednego z tych typów, należy przejść do panelu administracyjnego do opcji Wygląd sklepu > Ustawienia >Ustawienia zaawansowane, a następnie do zakładki Obiekty. W szczegółach wybranego obiektu (Siatka towarów) można określić, które produkty będą wyświetlane w sekcji "Proponowane". W przypadku wyboru "Producenta" lub "Marki" konieczne jest ręczne wskazanie odpowiedniego producenta lub marki.

Dodawanie informacji o typie produktu w systemie ERP dotyczy:

Nowości,
Produktu z gazetki,
Produktu polecanego,
Wyprzedaży,
Promocja,
Nowość,
Super jakości,
Super ceny,
Najlepszej oceny,
Rekomendacji sprzedawcy.

Informacja tego typu ustawiana jest bezpośrednio na karcie towaru w systemie ERP poprzez zaznaczenie odpowiedniej flagi w systemie ERP XL (zakładka aplikacje) lub atrybutu czasowego w ERP Optima (zakładka e-Sklep, sekcja atrybuty czasowe). Po wybraniu konkretnej opcji w systemie ERP na karcie danego produktu w Comarch e-Sklep zostanie dodana odpowiednia informacja.

Dla newslettera możliwe jest ustawienie stałej sekcji na stornie głównej lub newslettera w postaci popupu:

Slider marek

Sekcja "Slider marek" pozwala na dodanie do szablonu widoku slidera z logo marek. W sliderze wyświetlane są logotypy marek, które zostały zaimportowane z systemu ERP. Po kliknięciu na wybrane logo, użytkownik zobaczy listę produktów przypisanych do danej marki. Sekcje te mogą być umieszczone w dowolnym miejscu na stronie głównej szablonu.

Slider producentów

Sekcja "Slider producentów" pozwala na dodanie do szablonu widoku slidera z logo producentów. W sliderze wyświetlane są logotypy producentów zaimportowane z systemu ERP. Po kliknięciu na wybrane logo, użytkownik zobaczy listę produktów przypisanych do danego producenta. Sekcje te mogą być umieszczone w dowolnym miejscu na stronie głównej szablonu.

Aktualności

Sekcja umożliwia zamieszczenie aktualności na stronie głównej w formie listy artykułów z bloga. Tekst wprowadza się w panelu administracyjnym przechodząc do zakładki Marketing > Blog.

Banner infografika

Sekcja "Banner infografika" pozwala na zaprezentowanie korzyści z zakupów w Twoim sklepie. Dotyczą one obszarów: informacji o dostawie, płatnościach czy obowiązujących rabatach rabatach. Banner możesz dodać tylko do strony głównej. Obrazki są możliwe do edycji w ramach elementu homepage-small w panelu administracyjnym e-Sklepu w obszarze: Wygląd sklepu > Ustawienia > Bannery.

Stopka

Sekcja "Stopka" zawiera jeden widok do wyboru.

W widoku Stopki widnieją strony statyczne, którymi można zarządzać w sekcji Wygląd Sklepu/ Ustawienia/ Stopka. Dla każdej z sekcji wyświetla się jej utworzona w panelu nazwa. W stopce znajduje się komunikat @Comarch SA 2025. All rights reserved Powered by Comarch e-Sklep. Dodatkowo istnieje możliwość umieszczenia w stopce odnośników do mediów społecznościowych oraz ich ikony. Możemy dodać ikony naszych dostawców oraz form płatności wykorzystywanych w sklepie w ramach ustawień Wygląd Sklepu > Ustawienia > Bannery w sekcjach LogisticsPartners oraz PaymentOperators.

Po wybraniu wszystkich niezbędnych sekcji nasza strona główna powinna być gotowa. Efekt naszej pracy możemy podejrzeć klikając Podgląd w prawym górnym rogu.

Dzięki tej opcji możesz zobaczyć, jak będzie prezentował się Twój szablon zarówno w wersji dekstop, jak i mobile.

Strona główna wymaga dwóch podstawowych elementów: nagłówka oraz stopki. Pozostałe elementy nie są obowiązkowe.

Krok 2 - Lista towarów

Kolejnym krokiem jest utworzenie listy towarów. Aby to zrobić, należy rozwinąć listę zgodnie z poniższym rysunkiem, a następnie przejść do wskazanej zakładki:

Banner

Sekcja "Banner" daje możliwość dodania do listy slideru, dzięki czemu masz możliwość wzbogacenia kategorii towarowych o obrazki.

Panel filtra

Sekcja "Panel filtra" umożliwia wybór liczby wyświetlanych wartości filtrów a także o tym czy filtrowanie powinno odbywać się po klinićiu przycisku "Zastosuj".

Z tego poziomu możemy także wybrać elementy prezentowane w panelu filtrów.

Opis kategorii

W sekcji możesz zdecydować, czy opis ma być domyślnie zwinięty lub rozwinięty.

Lista towarów

Podobnie, jak w przypadku strony głównej konfigurujemy wygląd listy towarów. Dodatkowo możemy wskazać liczbę wyświetlanych towarów, domyślny widok listy towarów, prezentację atrybutów, a także zdecydować czy pozwolisz na zakup towarów wielowariantowych z listy towarów.

W Kreatorze Szablonu Rubin dostępny jest jeden widok listy towarów:

Krok 3 - Koszyk

Po utworzeniu szczegółów towaru przechodzimy do ustawień koszyka dostępnego w e-Sklepie.

Dodatkowo na stronie koszyka możesz wskazać sposób prezentacji przeliczników jednostek miary:

Następnie możemy przejść do modyfikacji wyglądu naszego szablonu. W tym celu należy przejść do zakładki Style.

Style

Jak zmienić kolory, czcionki oraz ikony?

Po dodaniu elementów strony możemy dodatkowo podejrzeć, jak będzie wyglądał nasz przyszły szablon. W tym celu należy przejść do zakładki Style.

Motyw kolorystyczny

W tym momencie dla szablonu Rubin został przygotowany jeden motyw kolorystyczny:

Motyw możemy zmieniać według indywidualnych preferencji. Możemy zmodyfikować kolor poszczególnych elementów (m.in.: tło strony, tło nagłówka, nazwę towaru). Zmiany należy zapisać klikając Zapisz. Jeśli wykonane zmiany nie są zadowalające, możemy przywrócić ustawienia domyśle dla danego motywu kolorystycznego, klikając przycisk Przywróć.

Możliwe jest również wprowadzenie szesnastkowego zapisu kolorów. Heksadecymalny zapis kolorów dla poszczególnych sekcji w szablonie dostępny jest podczas edycji wybranego motywu kolorystycznego.

Czcionki

W tym momencie w ramach szablu Rubin została udostępniona jedna czcionka:

Ikony

Ostatnim elementem, który możemy modyfikować z poziomu zakładki Style jest wygląd ikon. Mamy do wyboru 3 różne warianty wyglądu ikon. Dodatkowo istnieje możliwość wyboru w jakiej postaci wyświetla się ikona koszyka (torba, wózek lub koszyk) oraz loader.

Funkcja cofania zmian

Funkcja odpowiadająca za cofanie oraz powtórzenie wprowadzonych zmian oznaczona jest symbolem strzałek, zapamiętuje ona do 30 ostatnich modyfikacji szablonu. Nieaktywna strzałka oznacza, że aktualnie nie ma dostępnych kroków.

Mamy możliwość przywracania zmian: dodawania/ usuwania elementów oraz edycji ich położenia, a także stylu w szablonie.

Wskazówka

Funkcję cofania obejmuje zmiany motywu kolorystycznego, natomiast edycja poszczególnych kolorów w motywie nie jest zapisywana.

Generowanie i wgrywanie szablonu

Po zaprojektowaniu wyglądu szablonu możemy go wygenerować i pobrać na dysk korzystając z przycisku Generuj widocznego w prawym górnym rogu:

Obok przycisku Generuj dostępna jest również opcja Importuj szablon, umożliwiająca wgranie wcześniej zapisanego szablonu z dysku i ponowną jego edycję.

W przypadku prawidłowego wygenerowania szablonu wyświetlony zostanie komunikat informujący o tym fakcie i pobrany plik.

Pobrany szablon należy zaimportować w Comarch e-Sklep w zakładce Wygląd sklepu/ Zaimportuj szablon z Kreatora Wyglądu.

W przypadku braku obowiązkowych elementów szablonu nie będzie możliwe jego wygenerowanie. przycisk Generuj będzie wyszarzały, a w prawym dolnym rogu pojawi się komunikat „Uzupełnij elementy wymagane w szablonie”. Sekcje, gdzie element nie został wybrany, będą się wyświetlać z odpowiednią ikoną.

Aktualizacja szablonu

W Kreatorze szablonu Rubin znajduje się opcja aktualizacji poprzednich wersji szablonu. W celu zaktualizowania całego szablonu należy wgrać plik z poprzednim szablonem do Kreatora szablonu Rubin według tej instrukcji:

po uruchomieniu strony kreatora wybierz opcję: Stwórz nowy projekt,
wybierz Nowy szablon,
w prawym górnym rogu wybierz opcję Importuj szablon,

następnie zaimportuj plik z szablonem, który ma być zaktualizowany. Po poprawnym zaimportowaniu szablonu otrzymasz informację zwrotną:

po wgraniu szablonu do aktualizacji użyj opcji Generuj.

Dzięki temu w prosty sposób można starsze szablony Rubin podnieść do wersji aktualnej.

Więcej informacji

Więcej informacji można znaleźć w artykułach o wyglądzie sklepu oraz o dostosowaniu wyglądu.

Szablon Rubin ( dedykowany dla B2B)

Kreator wyglądu szablonu Rubin

Spis treści

Wstęp

Zastosowanie

Kto może używać tej opcji?

Zaczynamy

Krok 1 – strona główna
Krok 2 – Lista towarów
Krok 3 – Koszyk

Style

Funkcja cofania zmian

Generowanie i wgrywanie szablonu

Aktualizacja szablonu

Więcej informacji

Wstęp

Zastosowanie

Kreator pozwala na zaprojektowanie wszystkich kluczowych obszarów sklepu, w tym:

Strony głównej.
Listy towarów.
Koszyka.

Kto może używać tej opcji?

Aby móc używać tego narzędzia należy posiadać:

Comarch e-Sklep w wersji Enterprise lub B2B,
szerokość ekranu powyżej 1280 px, a zalecana to 1920 px,
oraz jedną z przeglądarek internetowych w aktualnej wersji.

Wskazówka

Kreator szablonu Rubin dostępny jedynie w wersji przeglądarkowej.

Zaczynamy!

Jak zaprojektować układ szablonu?

W sytuacji gdy wcześniej tworzony był już projekt, widoczny będzie przycisk umożliwiający dokończenie szablonu lub rozpoczęcie nowego projektu.

Opcja Nowy szablon umożliwia zbudowanie od początku nowego szablonu Rubin według Twojego indywidualnego pomysłu.

Od czego zacząć?

Krok 1 - Strona główna

W tej sekcji należy zaprojektować wygląd strony głównej naszego Comarch e-Sklepu dla szablonu Rubin. Strona główna może składać się z następujących elementów:

Nagłówek,
Baner,
Widget,
Banner pop-up,
Proponowane,
Newsletter,
Slider producentów,
Slider marek,
Aktualności,
Banner infografika,
Element tekstowy,
Stopka.

Po kliknięciu w strzałkę, sekcje rozwiną się i pokażą dostępne elementy:

Metodą "Przeciągnij i upuść" przenosimy wybrane elementy na obszar po prawej stronie:

Postępuj analogicznie z pozostałymi elementami.

Nagłówek

Sekcja „Nagłówek” prezentuje jeden widok. Nagłówek dodatkowo można konfigurować w zakresie funkcji związanych ze składaniem Zapytań o wycenę.

Bannery

Sekcja "Bannery" pozwala dodać slider. Informacje dotyczące rekomendowanych rozmiarów obrazków w bannerach opisaliśmy w tym artykule.

Widget

Sekcja "Widget" pozwala dodać jeden element, który pozwoli zaprezentować następujące funkcj:

dodanie zdjęcia,
dodanie tekstu tekstu nagłówka (tekst pionowy),
dodanie linku do przycisku,
dodanie tekstu.

Banner pop-up

Sekcja „Banner pop-up” pozwala na dodanie bannera w formie popupu. Banner ten jest możliwy do wyświetlenia jedynie na stronie głównej e-Sklepu.

Proponowane

Dodatkowo po najechaniu kursorem na tę sekcję, wybierając Opcje, możemy ustawić liczbę towarów, która będzie się wyświetlać (maksymalnie 50).

Promocja,
Nowość,
Wyprzedaż,
Super jakość,
Super cena,
Rekomendacja sprzedawcy,
Zapowiedź,
Sugerowane,
Towar polecany,
Najczęściej oglądane / najczęściej kupowane,
Cross-selling - oferowanie produktów uzupełniających wcześniejsze zakupy,

Aby zdecydować o parametrach wyświetlania tych informacji należy przejść w panelu administracyjnym Comarch e-Sklep do zakładki Ustawienia > Ustawienia sklepu > Towary:

Dodawanie informacji o typie produktu w systemie ERP dotyczy:

Nowości,
Produktu z gazetki,
Produktu polecanego,
Wyprzedaży,
Promocja,
Nowość,
Super jakości,
Super ceny,
Najlepszej oceny,
Rekomendacji sprzedawcy.

Dla newslettera możliwe jest ustawienie stałej sekcji na stornie głównej lub newslettera w postaci popupu:

Slider marek

Slider producentów

Aktualności

Sekcja umożliwia zamieszczenie aktualności na stronie głównej w formie listy artykułów z bloga. Tekst wprowadza się w panelu administracyjnym przechodząc do zakładki Marketing > Blog.

Banner infografika

Stopka

Sekcja "Stopka" zawiera jeden widok do wyboru.

Po wybraniu wszystkich niezbędnych sekcji nasza strona główna powinna być gotowa. Efekt naszej pracy możemy podejrzeć klikając Podgląd w prawym górnym rogu.

Dzięki tej opcji możesz zobaczyć, jak będzie prezentował się Twój szablon zarówno w wersji dekstop, jak i mobile.

Strona główna wymaga dwóch podstawowych elementów: nagłówka oraz stopki. Pozostałe elementy nie są obowiązkowe.

Krok 2 - Lista towarów

Kolejnym krokiem jest utworzenie listy towarów. Aby to zrobić, należy rozwinąć listę zgodnie z poniższym rysunkiem, a następnie przejść do wskazanej zakładki:

Banner

Sekcja "Banner" daje możliwość dodania do listy slideru, dzięki czemu masz możliwość wzbogacenia kategorii towarowych o obrazki.

Panel filtra

Sekcja "Panel filtra" umożliwia wybór liczby wyświetlanych wartości filtrów a także o tym czy filtrowanie powinno odbywać się po klinićiu przycisku "Zastosuj".

Z tego poziomu możemy także wybrać elementy prezentowane w panelu filtrów.

Opis kategorii

W sekcji możesz zdecydować, czy opis ma być domyślnie zwinięty lub rozwinięty.

Lista towarów

W Kreatorze Szablonu Rubin dostępny jest jeden widok listy towarów:

Krok 3 - Koszyk

Po utworzeniu szczegółów towaru przechodzimy do ustawień koszyka dostępnego w e-Sklepie.

Dodatkowo na stronie koszyka możesz wskazać sposób prezentacji przeliczników jednostek miary:

Następnie możemy przejść do modyfikacji wyglądu naszego szablonu. W tym celu należy przejść do zakładki Style.

Style

Jak zmienić kolory, czcionki oraz ikony?

Po dodaniu elementów strony możemy dodatkowo podejrzeć, jak będzie wyglądał nasz przyszły szablon. W tym celu należy przejść do zakładki Style.

Motyw kolorystyczny

W tym momencie dla szablonu Rubin został przygotowany jeden motyw kolorystyczny:

Czcionki

W tym momencie w ramach szablu Rubin została udostępniona jedna czcionka:

Ikony

Funkcja cofania zmian

Mamy możliwość przywracania zmian: dodawania/ usuwania elementów oraz edycji ich położenia, a także stylu w szablonie.

Wskazówka

Funkcję cofania obejmuje zmiany motywu kolorystycznego, natomiast edycja poszczególnych kolorów w motywie nie jest zapisywana.

Generowanie i wgrywanie szablonu

Po zaprojektowaniu wyglądu szablonu możemy go wygenerować i pobrać na dysk korzystając z przycisku Generuj widocznego w prawym górnym rogu:

Obok przycisku Generuj dostępna jest również opcja Importuj szablon, umożliwiająca wgranie wcześniej zapisanego szablonu z dysku i ponowną jego edycję.

W przypadku prawidłowego wygenerowania szablonu wyświetlony zostanie komunikat informujący o tym fakcie i pobrany plik.

Pobrany szablon należy zaimportować w Comarch e-Sklep w zakładce Wygląd sklepu/ Zaimportuj szablon z Kreatora Wyglądu.

Aktualizacja szablonu

po uruchomieniu strony kreatora wybierz opcję: Stwórz nowy projekt,
wybierz Nowy szablon,
w prawym górnym rogu wybierz opcję Importuj szablon,

następnie zaimportuj plik z szablonem, który ma być zaktualizowany. Po poprawnym zaimportowaniu szablonu otrzymasz informację zwrotną:

po wgraniu szablonu do aktualizacji użyj opcji Generuj.

Dzięki temu w prosty sposób można starsze szablony Rubin podnieść do wersji aktualnej.

Więcej informacji

Więcej informacji można znaleźć w artykułach o wyglądzie sklepu oraz o dostosowaniu wyglądu.

Szablon Rubin - podstawowe informacje

Wstęp

Szablon Rubin jest dedykowany dla sklepów w wersji B2B. Wyróżnia się nowoczesnym wyglądem zgodnym z najnowszymi trendami oraz intuicyjną nawigacją, co pozwala na szybkie i komfortowe zakupy. Oferuje funkcje dedykowane dla modelu B2B, w tym umożliwia wykorzystanie Comarch e-Sklep Sync do wyświetlania zamówień, faktur i wydań zewnętrznych z systemu ERP. Przy pomocy Kreatora wyglądu, można dostosować układ elementów szablonu względem indywidualnych oczekiwań. Elastyczność konfiguracji szablonu sprawia, że jest on idealnym rozwiązaniem dla zróżnicowanych potrzeb biznesowych. Główne wyróżniki szablonu:

obsługa sprzedaży dla klientów biznesowych oraz indywidualnych,
intuicyjna nawigacja boczna pozwalająca na szybki przegląd towarów dodanych do koszyka bądź zapytania o wycenę,
trzy widoki listy towarów, w tym lista pozwalająca na jednoczesne dodawanie wielu towarów zarówno do koszyka, jak i do list zakupów,
szczegóły towaru z paskiem nawigacji przyklejonym do nagłówka, który podczas przeglądania szczegółów oferty umożliwia natychmiastowy dostęp do najważniejszych sekcji i funkcji – w tym możliwość szybkiego dodania towaru do koszyka,
koszyk z rekomendacjami produktów oraz jednostronną finalizacją, ułatwiającą zakup,
profil klienta pozwalający na łatwą identyfikację statusów zamówień oraz dostęp do faktur i wydań zewnętrznych z systemu ERP,
obsługa wielu list zakupów,
możliwość składania zapytań o wycenę produków.

Przejdź do naszego sklepu demonstracyjnego i zobacz, jak wygląda Szablon Rubin w Comarch e-Sklep! W tym artykule zawarliśmy podstawowe informacje na temat funkcji dostępnych w szablonie. Dzięki możliwości konfiguracji elementów szablonu możesz łatwo spersonalizować swój e-Sklep.

Obsługa sprzedaży dla klientów biznesowych

Jako że szablon Rubin został zaprojektowany, aby umożliwić sprzedaż dla klientów biznesowych, obsługuje on funkcje dostosowane do modelu B2B. W ramach przykładowych udogodnień oferowanych przez szablon należy wymienić możliwości, takie jak:

obsługa klientów detalicznych oraz typu firma – połączenie modeli B2B oraz B2C,
możliwość włączenia tylko cen netto,
obsługa wielu koszyków (z możliwością edycji nazwy koszyka i usuwania całego koszyka jednym przyciskiem),
obsługa wielu list zakupowych, ułatwiająca powtórne zakupy tych samych towarów.
wyświetlanie zamówień, faktur i wydań zewnętrznych z systemu ERP w profilu klienta dzięki wykorzystaniu Comarch e-sklep Sync,
możliwość włączenia limitów kredytowych,
opcja dostępu do sklepu tylko dla zalogowanych użytkowników,
możliwość dodawania pracowników w profilu klienta,
opiekun handlowy dla kontrahenta.

Konfiguracja szablonu Rubin w panelu administracyjnym

Z poziomu panelu administracyjnego możesz dokonywać konfiguracji opcji wyglądu szablonu. Po przejściu do sekcji Wygląd sklepu > Ustawienia dostępne są ustawienia dla czterech zakładek:

W zakładce Ogólne możesz dokonać zmian w motywie kolorystycznym Twojego e-Sklepu. Z tego poziomu również możliwe do konfiguracji są takie opcje jak: ustawienia ceny netto, prezentacja promocji, rabatów progowych czy jednostek pomocniczych.
W zakładce Strona główna znajdują się ustawienia, dzięki którym możesz ustalić kolejność poszczególnych elementów na stronie głównej. Dodatkowo możesz zarządzać animacjami na poszczególnych bannerach i sliderach.
W zakładce Lista towarów znajdują się ustawienia dotyczące filtrów czy wyświetlania opisu danej kategorii towarowej. Z tego miejsca można zarządzać prezentacją informacji na kaflach w ramach listy.
W zakładce Zarzadzanie strefą klienta znajdziesz ustawienia elementów, które mają być widoczne po zalogowaniu do strefy klienta.

Strona główna

Strona główna w sklepie internetowym pełni rolę wprowadzenia do oferty sklepu. Jej głównym celem jest przyciągnięcie uwagi odwiedzających, zaprezentowanie najważniejszych produktów czy aktualnych promocji. Z tego względu na stronie głównej do skonfigurowania możliwe są takie elementy jak:

Banner w formie slidera – ustawienia dla banneru można znaleźć w sekcji Wygląd sklepu > Ustawienia > Bannery po przejściu do sekcji mainBanner. Domyślny rozmiar dla obrazka we wskazanym bannerze wynosi: 1574px x 425px. Więcej o ustawieniach można przeczytać w artykule dotyczącym konfiguracji bannerów.

Banner z infografikami – pozwala na zaprezentowanie korzyści z zakupów w Twoim sklepie. Domyślny rozmiar obrazków wynosi: 48px x 48px. Edycja banneru jest możliwa z poziomu opcji Wygląd sklepu > Ustawienia > Bannery po przejściu do sekcji homepage-small.

Banner popup – pozwala na poinformowanie klientów o bieżącej ofercie czy rabatach. Domyślny rozmiar grafiki w bannerze wynosi: 330px x 418px. Edycja banneru jest możliwa z poziomu opcji Wygląd sklepu > Ustawienia > Bannery po przejściu do sekcji banner_popup1.

Zapis do newslettera – newsletter to jeden z kluczowych elementów każdej strony internetowej, który pozwala na utrzymywanie kontaktu z użytkownikami i budowanie bazy subskrybentów. W przypadku szablonu Rubin, sekcja z zapisem do newslettera jest możliwa do ustawienia w formie stałej sekcji na stronie głównej.

Możliwe jest także zaprezentowania zapisu do newslettera w formie banneru.

Towary polecane – slider z wybranymi towarami. Mogą to być na przykład towary z wybraną flagą, najczęściej kupowane na sklepie lub ustawione ręcznie z poziomu Panelu Administracyjnego. Elementy te możliwe są do edycji w zakładce Wygląd Sklepu > Ustawienia > Edytuj ustawienia zaawansowane > Obiekty po przejściu do obiektu new-product-mp-x. Więcej informacji można znaleźć w ramach artykułu dotyczącego wyświetlania towarów polecanych w szablonach.

Tekst SEO – wskazany element charakteryzuje się możliwością wprowadzenia statycznego opisu na stronie głównej w e-Sklepie. Aby ustawić treść, przejdź do zakładki Wygląd Sklepu > Ustawienia > Edytuj ustawienia zaawansowane > Obiekty. W tym miejscu należy odszukać obiekt text-element-1-mp-1 i edytować element tekstowy.

Aktualności – w tej sekcji znajdziesz najnowsze artykuły z bloga w formie slidera. Każdy wpis zawiera obrazek, tytuł, krótki fragment treści, a także tagi tematyczne oraz datę ostatniej aktualizacji.

Slider marek oraz slider producentów – w ramach wskazanych sliderów będą pokazywały się loga marek i producentów, uzupełnionych po stronie systemów Comarch ERP.

Lista towarów

1. Widoki list towarów

Lista towarów zawiera trzy różne widoki. W zakładce Wygląd sklepu > Ustawienia > Lista towarów jest możliwość wybrania domyślnego widoku:

Każdy z nich ma inne zastosowanie i cechy charakterystyczne:

W ramach widoku kafli użytkownicy mają możliwość szybkiego dodania pojedynczej sztuki towaru:

W przypadku listy z rozbudowanym kaflem, możesz zaprezentować opis towaru lub jego atrybutów zgodnie z ustawieniem:

Z poziomu kafli dostępne są również dodatkowe akcje, takie jak dodanie do zapytania o wycenę, list zakupów czy do porównania. Co więcej, dla wskazanej listy, została dodana możliwość kopiowania kodu towaru.

Szybka lista charakteryzuje się możliwością dodania wielu towarów jednocześnie. Na wskazanej liście jest możliwość dodawania równocześnie kilku towarów zarówno do listy zakupów, jak i do koszyka:

W przypadku ustawień dla widoków szybkiej listy i rozbudowanych kafli, istnieje możliwość ustalenia ilości wyświetlanych atrybutów:

2. Graficzna prezentacja wariantów

W ramach kafli możesz ustawić graficzną prezentację wariantów – po najechaniu na kafel zostaną zaprezentowane atrybuty w postaci:

miniatur zdjęć,
wariantów kolorystycznych,
wartości tekstowej.

Wskazaną prezentację można włączyć po przejściu do opcji Wygląd sklepu > Ustawienia > Lista towarów. W tym miejscu można wybrać sposób prezentacji wariantów:

3. Opis kategorii

Na liście towarów możesz wyświetlić także opis danej kategorii dodany po stronie systemu Comarch ERP. Jest on zaprezentowany w szablonie w następującej formie:

Jeżeli został on wypełniony, możesz zdecydować czy ma być on domyślnie zwinięty czy rozwinięty:

4. Panel filtra

W ramach ustawień listy towarów do dostosowania możliwe są też filtry. Z tego poziomu dostępne do skonfigurowania są następujące opcje:

Liczba wyświetlanych wartości, która wskazuje ile domyślnie będzie pokazanych elementów danego filtra przed przyciskiem „Pokaż więcej”:

W przypadku takiego ustawienia przed wskazanym przyciskiem będzie prezentowane pięć wartości filtra – reszta zostanie zaprezentowana po rozwinięciu:

Filtruj po użyciu przycisku „Zastosuj”:

Zgodnie z ustawieniem filtry będą działać dopiero po kliknięciu wskazanego przycisku. Jeżeli parametr jest ustawiony na „Nie”, lista będzie filtrować się dynamicznie po wybraniu filtra.

Domyślne ustawienie filtrów jako zwiniętych bądź rozwiniętych:

Wskazane ustawienie wpływa na to, czy po wejściu na listę towarów będą wskazane wartości filtrów czy zostaną one zaprezentowane dopiero po rozwinięciu:

Wskazanie elementów, które mają być prezentowane w panelu filtrów:

Graficzna prezentacja filtra typu kolor, którą należy skonfigurować zarówno w Panelu administracyjnym, jak i systemie Comarch ERP według instrukcji. Po wykonaniu odpowiednich kroków, kolory będą prezentować się następująco:

Szczegóły towaru

1. Sekcja z towarem

W ramach szczegółów towaru możemy wyróżnić sekcje z towarem.

W jej ramach prezentowane są zdjęcia towarów oraz informacje towarze, takie jak:

Ceny, w tym prezentację:
- ceny netto,
- najniższej ceny towaru,
- sugerowanej ceny detalicznej po włączeniu ustawienia w menu Wygląd sklepu > Ustawienia dla parametru Prezentuj cenę poprzednią jako sugerowaną cenę detaliczną.
- cen w ramach progów rabatowych po odpowiednim ustawieniu rabatów progowych.
Jednostki miary oraz przeliczniki do jednostki podstawowej lub domyślnej.
Stan magazynowy.
Dostępność produktu.
Cechy towaru.
Informacja o wartości dostawy danego towaru.
Możliwość udostępnienia towaru w social mediach lub za pomocą linku.
Opcję „Zapytaj o towar” bądź „Zapytaj opiekuna” w zależności od konfiguracji.

W tym miejscu klienci mają także dostęp do dodatkowych opcji takich jak:

Tabela rozmiarów – możliwa do ustawienia z poziomu ustawień Wygląd sklepu > Ustawienia > Ogólne. Tabela rozmiarów jest możliwa do skonfigurowania w formie strony, pliku pdf lub popupu.
Sprawdź dostępność w salonie – dzięki wskazanemu elementowi, potencjalni klienci będą mieli okazję sprawdzić, czy dany towar znajduje się w sklepie stacjonarnym (salonie). Funkcja jest dostępna po spełnieniu odpowiednich wymagań konfiguracyjnych opisanych w artykule: Sprawdź dostępność towaru w salonie.
Historia zakupów – dla sklepów w wersji B2B, powiązanych z systemem Comarch ERP XL oraz aktywną usługą e-Sklep Sync, możliwe jest włączenie wskazanego ustawienia w opcjach Wygląd sklepu > Ustawienia > Ogólne:

Dzięki temu możliwe będzie wskazanie historii zakupów z ostatnich 6 miesięcy

Harmonogram dostaw – funkcja służy do sprawdzania, czy towar został zamówiony u dostawcy, jak również udostępnia informacje o zamówionej ilości oraz planowanej dostawie. Więcej informacji na jej temat można przeczytać w artykule udostępnionym w Centrum Pomocy.

Poniżej wskazanych informacji o towarze znajdują się dodatkowe sekcje. Podczas przewijania strony widoczna jest nawigacja przyklejona do nagłówka, która ułatwia szybkie dodanie towaru do koszyka.

2. Opis i specyfikacja

W pierwszej kolejności wskazane są opis i specyfikacja danego towaru. Wskazane elementy takie jak opis czy atrybuty towaru są możliwe do dodania po stronie systemów Comarch ERP.

3. Podmiot odpowiedzialny

Zgodnie z rozporządzeniem GPSR w szablonie możliwe jest zaprezentowanie podmiotów odpowiedzialnych. Konfiguracja w ramach wyświetlenia wskazanych informacji w szablonie została opisana w artykule: Jak dostosować e-Sklep do wymogów Rozporządzenia GPSR?

4. Opinie o towarze

Na szczegółach towaru możliwe do wyświetlenia są opinie o towarze. Sekcja jest wzbogacona o paski informujące o ilości poszczególnych ocen. Obsłużone zostało również zgłaszanie opinii zgodnie z Aktem o usługach cyfrowych DSA.

5. Pliki do pobrania

Sekcja z plikami do pobrania zwiera pliki załączone na karcie towaru po stronie systemu Comarch ERP:

6. Zestawy

W przypadku korzystania z systemu Comarch ERP Optima, do zaprezentowania na stronie szczegółów towaru możliwe są zestawy:

Dzięki wskazanej prezentacji, klient może dowiedzieć się o promocyjnej ofercie zakupu kilku towarów jednocześnie w tańszej cenie.

7. Towary podobne i akcesoria

Dla towarów skonfigurowanych w systemie Comarch ERP XL istnieje możliwość zdefiniowania Towarów podobnych lub Akcesoriów. Aby wskazana sekcja była dostępna w e-Sklepie, należy ją skonfigurować po stronie Comarch ERP XL zgodnie z fragmentem instrukcji, w którym opisano obsługę towarów podobnych lub akcesoriów dla towaru. W przypadku zamienników, możliwe jest także ich skonfigurowanie w Comarch ERP Optima.

Koszyk

Po przejściu na stronę koszyka wyświetla się podsumowanie dodanych do niego towarów. Wskazana sekcja ma na celu prezentację towarów w ramach rekomendacji zakupowych, aby zachęcić klienta do dalszych zakupów. W szablonie Rubin składanie zamówienia zostało zaprojektowane tak, aby użytkownik mógł w jednym kroku wypełnić niezbędne dane:

Formularz z danymi zamawiającego oraz danymi do faktury.
Sposób dostawy.
Sposób płatności.

Po uzupełnieniu powyższych informacji i zakupie towaru można przejść do podsumowania, w którym prezentowane są m.in. wcześniej wprowadzone dane klienta. W ramach koszyka istnieje możliwość włączenia prezentacji wartości rabatów dla danego zamówienia, zgodnie z ustawieniem:

Dzięki temu promocja zostanie zaprezentowana w koszyku w następujący sposób:

Dodatkowo, w przypadku dostaw, możliwe jest także włączenie edycji daty dostawy:

Wskazane ustawienie prezentuje się następująco:

Zapytanie o wycenę

W modelu sprzedaży B2B często spotyka się spersonalizowane wyceny dla różnych kontrahentów. Na wysokość cen wpływają takie czynniki jak zmieniające się ceny towarów, ilość zamówionych produktów, sytuacja rynkowa oraz szczególne warunki ustalone w umowach między sprzedawcą a klientem. Z tego względu w szablonie Rubin istnieje możliwość dodawania towarów do zapytania o wycenę zgodnie z ustawieniem:

Do zapytania o wycenę możesz przejść z poziomu nagłówka, klikając ikonę "Zapytanie o wycenę". Po kliknięciu w szablonie prezentowany jest panel boczny z towarami dodanymi do zapytania:

Po przejściu do szczegółów, dostępny jest formularz:

Obsługa zapytań jest w dalszej kolejności procesowana po stronie panelu administracyjnego. W dalszej kolejności zarówno zapytanie o wycenę, jak i utworzona z niego oferta sprzedaży jest dostępna dla klienta z poziomu Profilu klienta.

Profil klienta

1. Ustawienia profilu klienta

W przypadku ustawień profilu klienta w ramach: Wygląd sklepu > Ustawienia > Zarządzanie strefą klienta widoczna jest lista elementów zamieszczonych w e-Sklepie. Lista składa się z następujących ustawień:

Dostępne – ustawienie wyświetlania danego elementu na stronie. Jeżeli parametr jest zaznaczony (podświetla się na szaro) wówczas element będzie widoczny na stronie.
Kolejność – w tym polu za pomocą strzałek możemy zmienić kolejność przycisków.
Ikona – w tym miejscu należy wprowadzić nazwę ikony, która powinna się wyświetlać na dodanym elemencie.
Etykieta PL – nazwa elementu, która będzie się wyświetlała w polskiej wersji strony.
Id tłumaczenia – id z którego będą pobierane tłumaczenia elementu wyświetlane w obcojęzycznej wersji strony. Tłumaczenia dodawane są w panelu administracyjnym: Wygląd sklepu > Ustawienia > Tłumaczenia.

2. Dokumenty dostępne w profilu klienta

W ramach profilu klienta dostępne są dokumenty związane z procesem zamówienia w e-Sklepie. Z tego poziomu klient ma dostęp do zakładek prezentujących:

zamówienia,
faktury,
wydania zewnętrzne,
wydania magazynowe.

Aby móc obsługiwać dokumenty pochodzące z systemu Comarch ERP, należy skonfigurować usługę Comarch e-Sklep Sync. Dzięki temu dla klientów widoczne staną się dokumenty udostępniane przez to narzędzie. Dokumenty, dla których wymagana jest wskazana usługa zostały opisane w artykule Dokumenty udostępniane przez Comarch e-Sklep Sync. Dzięki odpowiednim oznaczeniom kolorystycznym klient ma możliwość w prosty sposób zapoznać się ze statusami wskazanych dokumentów:

3. Zapytania o wycenę i oferty sprzedaży

Z tego poziomu klient ma dostęp również do listy z wykonanymi zapytaniami o wycenę.

Po stworzeniu wyceny na dane zapytanie, w zakładce Oferta sprzedaży pojawi się oferta do zaakceptowania przez klienta:

Więcej informacji na temat zapytań i ofert sprzedaży można znaleźć w artykułach: Zapytaj o cenę oraz Jak stworzyć ofertę sprzedaży i zapytanie ofertowe?

4. Reklamacje/zwroty

Klient ma możliwość zareklamowania towaru po przejściu na szczegóły zamówienia. Z tego poziomu jest możliwość wybrania opcji reklamacji dla towaru:

Informacje o reklamacjach znajdą się w zakładce Reklamacje/ Zwroty:

5. Moje dane

W zakładce Moje dane klient ma możliwość weryfikacji wprowadzonych danych jako firma bądź osoba fizyczna. W tym miejscu wyświetlone są także uzupełnione adresy dostawy – wskazany jest także adres domyślny.

6. Pracownicy

We wskazanej zakładce istnieje możliwość dodania pracownika, jak również jego zablokowania.

Dodatkowo jeżeli pracownik jest przypisany do kilku firm istnieje możliwość zmiany firmy z poziomu nagłówka sklepu:

Więcej na temat pracowników w e-Sklepie możesz dowiedzieć się w artykule: Wielu pracowników kontrahenta.

7. Twoje konto

We wskazanej zakładce znajdują się dane kontaktowe klienta, jak i dane do logowania – e-mail i hasło. Z tego poziomu dostępna jest również historia konta

8. Zgody

W tym miejscu klientowi prezentowana jest lista zaakceptowanych zgód:

9. Do pobrania

Poprzez dodanie załączników do karty kontrahenta w systemie Comarch ERP XL w szablonie Rubin jest możliwe wyświetlanie listy plików do pobrania dla zalogowanych użytkowników. Są one widoczne i dostępne do pobrania w Profilu Klienta we wskazanej zakładce. Sposób konfiguracji wskazanych plików został opisany w artykule: Lista plików Klienta – Do pobrania

10. Promocje

Dzięki wskazanej zakładce klienci mogą sprawdzić, jakie rabaty aktualnie posiadają. Widoczne w tej zakładce rabaty są przesyłane z systemu ERP oraz ustalane w Panelu Administracyjnym Comarch e-Sklep. Obsługiwane rabaty:

rabaty dla nowego klienta
rabaty od wartości zamówienia
rabat dla stałego klienta
rabaty z Comarch ERP
stała cena z Comarch ERP

Aby wskazane promocje wyświetlały się w profilu klienta należy włączyć ustawienie w Wygląd sklepu > Ustawienia > Ogólne:

Informacje o konfiguracji rabatów można znaleźć w ramach artykułu: Rabaty – rodzaje i zasady wyliczania.

Listy zakupów

W szablonie Rubin dla wersji sklepu B2B możliwe jest posiadanie wielu list zakupów. Funkcja dostępna jest tylko dla zalogowanych klientów. Umożliwia ona zaplanowanie zakupów z wyprzedzeniem w uporządkowany sposób poprzez tworzenie list na różne okazje i ustawianie dla nich daty przypomnienia: Po przejściu do list istnieje możliwość utworzenia nowej listy:

W ramach listy jest możliwa do ustawienia data przypomnienia:

Dodatkowo z tego poziomu klient ma możliwość nadania liście nazwy, przeniesienia jej do zapytania o wycenę, jak również dodania towarów z listy do koszyka.

Lookbook

Lookbook oferuje możliwość przedstawienia towarów bezpośrednio na zdjęciu w formie zaznaczonych pinezek. W szablonie Rubin możliwe jest stworzenie wielu lookbooków. Będą one w takim wypadku prezentowane w formie listy:

Szczegóły lookbooka charakteryzują się precyzyjnym oznaczeniem towarów na zdjęciu. Dzięki znacznikom umieszczonym na grafice Twoi klienci będą mogli podejrzeć towar i dodać go bezpośrednio do koszyka lub listy zakupów. Po kliknięciu na przycisk z plusem wyświetli się popup ze szczegółami towaru oraz opcją zakupu.

Wskazówka

Rekomendowany rozmiar grafik do lookbooka to 578 x 578 px.

Aby poprawnie skonfigurować lookbook, skorzystaj z naszej instrukcji zawartej w artykule: Jak skonfigurować Lookbook w Comarch e-Sklep?

Blog

Blog jest ważnym elementem w strategii każdego sklepu internetowego. Umożliwia sprzedawcy dzielenie się wiedzą i doświadczeniami dotyczącymi oferowanych produktów. Poprzez bloga, sklep może podpowiedzieć klientom, jak najlepiej wykorzystać dostępne artykuły. Dodatkowo, regularne publikowanie wartościowych treści ma korzystny wpływ na pozycjonowanie strony, dzięki unikalnym materiałom. To sprawia, że Twój sklep może być częściej widoczny w wynikach wyszukiwania.

W sekcji z blogiem prezentowane są aktualnie dodane artykuły, które są możliwe do konfiguracji w Panelu administracyjnym. Dla każdego wpisu przedstawione są: zdjęcie, treść, tagi oraz przewidywany czas czytania.

Szczegółowe informacje na temat konfiguracji bloga w e-Sklepie znajdują się w artykule: Jak skonfigurować blog?

Szablon Szafir (dedykowany dla B2B)

Rozbudowana stopka w szablonach Topaz i Szafir - jak ją skonfigurować?

Spis treści

Wstęp

Jak przystąpić do edycji stopki?

Więcej możliwości edycji stopki

Jak skonfigurować rozbudowaną stopkę?

Wstęp

Stopka to jeden z podstawowych elementów każdego sklepu internetowego. Oprócz wymaganych informacji, które muszą się w niej znaleźć, może zawierać zbiór innych odniesień do konkretnych sekcji w Twoim e-Sklepie, do Twojego bloga lub profili w social mediach. Odnośniki mogą pozytywnie wpływać na wizerunek Twojego sklepu, przyczyniając się do wsparcia sprzedaży i generując większy ruch na stronie. W Kreatorze wyglądu obok standardowych widoków znajduje się dodatkowy, który jest bardziej rozbudowany. W przypadku szablonu Topaz jest to trzeci widok (footer-3), zaś w przypadku Szafira - drugi widok (footer-2). Dzięki modyfikacji obszaru możesz jeszcze bardziej spersonalizować swój sklep poprzez uzupełnienie stopki w więcej przydatnych informacji.

Konfiguracja rozbudowanej stopki

Jak przystąpić do edycji stopki?

Po zaimportowaniu z Kreatora wyglądu stopka będzie wyświetlać się w ograniczonym zakresie. Niezmiennie jej edycji dokonasz z perspektywy zakładek: Wygląd Sklepu/Ustawienia a następnie sekcji Nagłówek/Stopka. To tutaj zdecydujesz o ilości grup stron, konkretnych elementach w ich obrębie a następnie o kolejności w jakiej będą prezentować się w e-Sklepie. Również z tego poziomu dodasz odwołania do Twoich profili na portalach społecznościowych oraz ustawisz favicon dla swojego sklepu internetowego.

Więcej możliwości edycji stopki

Rozbudowana stopka w szablonie Topaz oraz Szafir umożliwia dodanie większej ilości grup stron niż dotychczas. Dzięki temu z łatwością zamieścisz w niej wszystko czego potrzebujesz. Dodatkowo sekcję uzupełniono o grafiki partnerów logistycznych oraz obsługiwanych operatorów płatności.

Przykładowy wygląd rozbudowanej stopki w szablonie Topaz

Przykładowy wygląd rozbudowanej stopki w szablonie Szafir

Jak skonfigurować poszczególne elementy?

- Elementy 1-5: dodawanie kolejnych grup stron oraz zmiana ich kolejności dokonywana jest poprzez sekcję Nagłówek/Stopka w Ustawieniach w obrębie zakładki Wygląd Sklepu. W obrębie danej grupy możesz dodawać konkretne strony poprzez kliknięcie przycisku Dodaj stronę ze sklepu.

Wskazówka

Zmiany kolejności poszczególnych grup odnośników lub zmiany danych odnośników w obrębie danej grupy dokonuje się metodą Przeciągnij i upuść.

- Element 6: odpowiada za wyświetlanie następujących informacji: e-mail, numer telefonu, telefon2 (jeśli nie istnieje, to zastępowany jest przez telefon komórkowy) fax lub skype. W celu edycji danych kontaktowych należy przejść w panelu e-Sklepu do zakładki Ustawienia/Ustawienia sklepu. Informacje o adresie e-mail pobierane są automatycznie z zakładki Ogólne z sekcji Konto e-mail sklepu. Aby dodać lub zmodyfikować numer telefonu konieczne jest wybranie zakładki Dane sprzedawcy, następnie Infolinia i zweryfikowanie pola Telefon.
  Wskazówka
  W elemencie wyświetlone zostaną maksymalnie 3 informacje (e-mail, telefon i jedno z wybranych pól np. telefon2, telefon komórkowy lub fax.
- Element 7: odwołania do portali społecznościowych dodajemy bez zmian. Więcej o tym znajdziesz tutaj.
- Elementy 8-9: aby dodać informację o operatorach płatności oraz partnerach logistycznych należy wybrać zakładkę Wygląd Sklepu/Ustawienia/Bannery. Edycji dokonasz z perspektywy kafelków: Logistics Partners oraz Payment Operators poprzez dodanie właściwych grafik operatorów i partnerów. Aby zmienić nazwę „Operator płatności” i/lub „Partnerzy logistyczni” wybierz zamiast zakładki Bannery, zakładkę Tłumaczenia. Wyszukaj po parametrze „ID” LogisticsPartnersBannerTitle oraz PaymentOperatorsBannerTitle i zmodyfikuj pole „Tekst” według własnych preferencji. Zmiany zapisz i opublikuj. W przypadku chęci usunięcia któregoś z elementów, zaznacz go i naciśnij przycisk „Usuń”.

Wskazówka

Zalecane parametry grafik dla operatorów płatności i partnerów logistycznych: szerokość maksymalna 64 px, rozszerzenie PNG.

- Element 10: dane dotyczące firmy pobierane są z zakładki Ustawienia/Ustawienia sklepu/Dane sprzedawcy/Dane identyfikacyjne, a także z obszaru: Ustawienia/ Ustawienia sklepu/ Informacja o działalności gospodarczej/ Numer KRS lub CEIDG, Organ rejestrujący oraz Ustawienia/ Ustawienia sklepu/ Adres pocztowy, gdzie uwzględnione zostaną wszystkie pola za wyjątkiem Szerokości i długości geograficznej.

Jak zaprezentować rabaty progowe w szablonie B2B (Szafir)?

Spis treści

Wstęp

Jak skonfigurować ceny per próg ilościowy w Comarch ERP XL?

Gdzie widać ceny dla progów ilościowych ?

Więcej informacji

Wstęp

W Comarch e-Sklepie połączonym z Comarch ERP XL możesz przygotować dla swoich Klientów rabaty, które będą obowiązywać w e-Sklepie dla określonych progów ilościowych. Opcja dotyczy rabatów procentowych i typu stała cena, które naliczają się w e-Sklepie.

Jak skonfigurować ceny per próg ilościowy w Comarch ERP XL?

Aby w swoim e-Sklepie skorzystać z możliwości prezentacji cen dla określonych progów ilościowych ustalonych w systemie Comarch ERP XL należy:

mieć Comarch ERP XL w wersji min. 2023.1,
mieć Comarch e-Sklep w wersji min. 2023.5,
mieć szablon Szafir w wersji 2023.5,
aktywować prezentację rabatów progowych w e-Sklepie przy pomocy Asysty technicznej Comarch e-Sklep.

Wskazówka

Jeżeli chcesz prezentować rabaty progowe w swoim szablonie skontaktuj się z Asystą techniczną Comarch e-Sklep poprzez formularz celem aktywowania nowej funkcji.

W celu utworzenia promocji należy w Comarch ERP XL przejść do zakładki Zestawienia/ Promocje i rabaty i dodać rabat pozycji. Następnie można określić szczegóły rabatu na poszczególnych zakładkach:

Nagłówek:

Wskazać nazwę rabatu.
Określić priorytet.
Pomiń następne promocje.
Określić sposób łączenie z poprzednią.
Rodzaj dokumentu (musi być wskazany rozchodowy lub wszystkie).
Wskazać okres działania.

Wskazówka

Priorytet ma znaczenie przy opcji "Pomiń następne promocje". Zaznaczenie tego parametru spowoduje, że żadna promocja o niższym priorytecie (wyższej liczbie) nie powinna się już naliczyć. Jeżeli priorytet będzie wyższy (niższa liczba) to rabat się naliczy.

Kontrahenci:

W Comarch e-Sklep na promocji można wskazać:

Pojedynczego kontrahenta – wtedy promocja dotyczy jednego kontrahenta.
Grupę kontrahentów (grupa musi być wysyłana do e-Sklepu) – wtedy promocja dotyczy kontrahentów przypisanych do tej grupy.
Grupę główną kontrahentów – wtedy promocja dotyczy wszystkich kontrahentów w e-Sklepie: zalogowanych (którzy posiadają konta w e-Sklepie), niezalogowanych i jednorazowych (niezarejestrowanych). Przykład promocji został opisany w sekcji Przykłady użycia rabatów w e-Sklepie

Towary:

Wybrać towar albo grupę towarów.
Wskazać rodzaj rabatu (rabat od ceny sprzedaży lub stała cena).
Wybrać typ rabatu (procentowy lub wartościowy).
Wskazać progi ilościowe.

Aby tak skonfigurowane rabaty mogły być widoczne w e-Sklepie należy:

przesłać ustalone promocje do e-Sklepu za pomocą ręcznej synchronizacji różnicowej lub automatu synchronizacji,
w panelu administracyjnym e-Sklepu włączyć naliczanie rabatów przesyłanych z systemu ERP w menu Ustawienia/ Ustawienia sklepu/ Ceny i rabaty/ sekcja Rabaty parametr Sposób liczenia rabatów z Comarch e-Sklep i systemu ERP.
w panelu administracyjnym e-Sklepu włączyć prezentację ceny dla ilościowych progów rabatowych w menu Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ sekcja Ogólne/ parametr Cena per próg ilościowy.

Wskazówka

Prezentacja ceny dla ilościowych progów rabatowy pochodzących z Comarch ERP XL jest możliwa tylko przy drugim widoku listy towarów w szablonie Szafir

Gdzie widać ceny dla progów ilościowych?

Prawidłowo udostępnione z systemu Comarch ERP XL rabaty z progiem ilościowym są widoczne w e-Sklepie w kilku miejscach:

w sekcji Polecane na stronie głównej e-Sklepu pod warunkiem, że:
- na towarach w Comarch ERP XL ustawisz odpowiednią etykietę, która będzie tożsama z typem wybranej sekcji w szablonie Szafir. Na towarze zostanie wyświetlony zakres cen, od najniższej do najwyższej. Po kliknięciu w „Zobacz szczegóły cen” zostanie wyświetlony pop-up ze szczegółami pozostałych cen dla progów ilościowych.

na szczegółach towaru zostaną wyświetlone trzy pierwsze ceny dla określonych progów. Po kliknięciu w „Zobacz szczegóły cen” zostanie wyświetlony pop-up ze szczegółami pozostałych cen dla progów ilościowych.

na liście zakupów w Twoim e-Sklepie. Po kliknięciu w „Zobacz szczegóły cen” zostanie wyświetlony pop-up ze szczegółami pozostałych cen dla progów ilościowych.

w panelu administracyjnym w menu Marketing/ Rabaty (widok dla administratora sklepu):
- na zakładce Z Comarch ERP XL dostępne są rabaty progowe
w profilu zalogowanego Klienta w Twoim e-Sklepie, pod warunkiem, że:
- włączyłeś naliczanie rabatów przesyłanych z systemu ERP (parametr w panelu w menu Ustawienia/ Ustawienia sklepu/ Ceny i rabaty/ sekcja Rabaty > parametr Sposób liczenia rabatów z Comarch e-Sklep i z systemu ERP),
- włączyłeś wyświetlanie informacji o rabatach w profilu klienta (parametr w panelu w menu Ustawienia/ Ustawienia sklepu/ Ceny i rabaty/ sekcja Rabaty),
- włączyłeś prezentację rabatów w profilu klienta na zakładce Promocje jest ustawiona na Tak (parametr w panelu w menu Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne > sekcja Prezentacja rabatów).
na składanym zamówieniu w Twoim e-Sklepie, pod warunkiem, że:
- włączyłeś prezentację rabatów na pozycjach zamówienia i w podsumowaniu (parametr w panelu w menu Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne/ sekcja Prezentacja rabatów).

Więcej informacji

Więcej informacji można znaleźć w artykułach:

Rabaty – rodzaje i zasady wyliczania oraz Rabaty.
Informacje odnośnie wyświetlania rabatów w systemie Comarch e-Sklep można znaleźć w artykule: Ceny i rabaty.
Informacje na temat rabatów dostępnych w systemie Comarch ERP XL, priorytetów oraz zasad ich naliczania przeczytasz w Centrum Pomocy systemu ERP w sekcji Rabaty.

Jak zarządzać strefą klienta w Comarch e-Sklep?

Wstęp

Od wersji 2023.5 w ustawieniach szablonów Szafir, Topaz i One Page Shop został dodany nowy obszar, który dotyczy edycji Strefy klienta. W tym artykule dowiesz się jak skonfigurować widok strefy klienta dla swoich klientów.

Konfiguracja

Ustawienia znajdują się w panelu administracyjnym: Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Zarządzanie strefą klienta. Na stronie widoczna jest lista elementów widocznych w e-Sklepie. Lista składa się z następujących elementów:

Dostępne – ustawienie wyświetlania danego elementu na stronie. Jeżeli parametr jest zaznaczony (podświetla się na szaro) wówczas element będzie widoczny na stronie.
Kolejność – w tym polu za pomocą strzałek możemy zmienić kolejność przycisków.
Ikona – w tym miejscu należy wprowadzić nazwę ikony, która powinna się wyświetlać na dodanym elemencie. Więcej informacji o ikonach znajdziesz w dalszej części artykułu.
Etykieta PL – nazwa elementu, która będzie się wyświetlała w polskiej wersji strony.
Id tłumaczenia – id z którego będą pobierane tłumaczenia elementu wyświetlane w obcojęzycznej wersji strony. Tłumaczenia dodawane są w panelu administracyjnym: Wygląd sklepu/ Ustawienia/ Tłumaczenia.
Wyróżnij – jeżeli parametr jest zaznaczony, to powoduje zmianę koloru przycisku na inny

[/su_list

Dodawanie ikony

Ikony które są dostępne w szablonie Szafir pochodzą ze strony Themify. Na stronie dostępna jest lista możliwych do wykorzystania ikon. Jeżeli chcesz w swoim elemencie w e-Sklepie dodać ikonę wystarczy, że w polu Ikona wpiszesz nazwę ikony, na przykład: ti-link. Jeżeli jednak chcesz skorzystać z własnych ikon wówczas należy je we własnym zakresie zaimplementować w kodzie szablonu w pliku _layout.html.

Dodawanie tłumaczeń

Nazwę etykiety można wprowadzić na dwa sposoby:

w polu Etykieta PL - jeśli w e-Sklepie jest włączony tylko język polski,
w polu Id tłumaczenia - dodając id do wybranego tłumaczenia jeśli w e-Sklepie są włączone języki obce.

Jeżeli jest uzupełnione tylko pole Etykieta PL wówczas etykieta będzie miała taką nazwę jaka została wprowadzona w tym polu. Jeżeli jest uzupełnione tylko pole Id tłumaczenia wówczas etykieta będzie miała taką nazwę jaka została przypisana do danego id w sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia. Jeżeli zostały uzupełnione jednocześnie pola Etykieta PL oraz Id tłumaczenia wówczas etykieta będzie miała taką nazwę jaka została przypisana do danego id w sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia.

Wskazówka

Pamiętaj, aby elementy były widoczne w e-Sklepie wprowadzone zmiany należy zapisać i opublikować.

Wyróżnienie elementu w Strefie klienta

W szablonie Szafir możliwe jest ustawienie wyróżnienia czcionki wyróżnionego elementu w Strefie klienta. Aby to zrobić zaloguj się do panelu administracyjnego, a następnie do obszaru Wygląd sklepu/Ustawienia. W zakładce Ogólne odnajdź sekcję „Kolor czcionki wyróżnionego elementu w menu profilu klienta”.

Wybierz kolory, którymi chcesz wyróżnić element w profilu klienta. Następnie zapisz zmiany. Teraz przejdź do zakładki Strefa klienta. Zaznacz te elementy, które mają zostać wyróżnione. Wystarczy, że wybierzesz odpowiedni checkbox pod Wyróżnij.

W efekcie klienci odwiedzający stronę Twojego sklepu po zalogowaniu zobaczą wyróżnione elementy.

Jak prezentować wiele kodów EAN na szczegółach towaru?

Spis treści

Wstęp

Jakie są korzyści z używania dodatkowych kodów EAN?

Jakie są sposoby prezentacji kodów EAN na towarach w e-Sklepie?

Jak korzystać z dodatkowych kodów EAN w wyszukiwarce?

Jak importować towary do koszyka za pomocą pliku CSV?

Więcej informacji

Wstęp

W Comarch e-Sklep połączonym z Comarch ERP XL możesz zaprezentować wiele kodów EAN (European Article Number) na szczegółach towaru. Znajdą one zastosowanie w wyszukiwarce, a także w przygotowaniu pliku csv za pomocą którego Twoi klienci dodadzą towary do koszyka. Wiele kodów EAN możesz dodać zarówno na podstawowej jak i dodatkowej jednostce miary towaru. W tym artykule dowiesz się jak dodać dodatkowe kody na towarze, jakie korzyści przynosi ich użycie oraz jak ich używać.

Aby w swoim e-Sklepie skorzystać z możliwości prezentacji wielu kodów EAN na towarze należy:

mieć Comarch ERP XL w wersji min. 2024.1,
mieć Comarch e-Sklep w wersji min. 2024.3,
mieć szablon Szafir, Topaz lub One Page Shop w wersji 2024.3,
aktywować prezentację dodatkowych kodów EAN w panelu administracyjnym e-Sklepu.

Jakie są korzyści z używania dodatkowych kodów EAN?

Łatwiejsze wyszukiwanie produktów: Dodatkowe kody EAN umożliwiają szybkie i precyzyjne wyszukiwanie towarów w Comarch e-Sklep. Wpisując jeden lub wiele kodów EAN (oddzielone przecinkami) w wyszukiwarkę Twoi klienci natychmiast otrzymają wyniki zawierające dokładnie ten produkt, którego szukają. Identyfikacja produktu odbywa się także zgodnie z przypisanym kodem EAN dla podstawowej (np. szt.) i dodatkowej (np. kartonu) jednostki miary.
Szybszy import produktów do koszyka: Funkcjonalność importu produktów za pomocą pliku CSV z wykorzystaniem różnych kodów EAN pozwoli na dywersyfikację towarów w koszyku w zależności od przypisanej jednostki miary do właściwego kodu EAN..

Jakie są sposoby prezentacji kodów EAN na towarach w e-Sklepie?

W Comarch e-Sklep istnieją 4 możliwości prezentacji kodów EAN na szczegółach towaru. Sposób 1. Standardowo prezentowany jest domyślny kod EAN, który został przyporządkowany dla głównej jednostki miary (np. szt) w systemie Comarch ERP XL na zakładce Ogólne.

Sposób 2. W e-Sklepie możesz także prezentować kod EAN wskazywany na dodatkowej jednostce miary. Aby go dodać przejdź na zakładkę Jednostki, kody, VAT i wprowadź dedykowany kod EAN na jednostce, w której chcesz także sprzedawać w e-Sklepie. Tak wprowadzony kod EAN pojawi się na szczegółach towaru po wybraniu dedykowanej jednostki przez klienta Twojego e-Sklepu.

Sposób 3. Wiele kodów EAN na podstawowej jednostce miary np. szt. Aby je dodać przejdź do zakładki Jednostki, kody, VAT > Kody kreskowe w systemie Comarch ERP XL. Krok 1. Za pomocą zielonego plusa dodaj nowy kod,

Krok 2. Wybierz jego typ, Krok 3. Wprowadź kod, Krok 4. Wybierz jednostkę np. szt. Tak wprowadzony kod EAN pojawi się na szczegółach towaru po wybraniu dedykowanej jednostki przez klienta Twojego e-Sklepu.

Sposób 4. Wiele kodów EAN na podstawowej i dodatkowej jednostce miary. Aby je dodać przejdź do zakładki Jednostki, kody, VAT > Kody kreskowe w systemie Comarch ERP XL. Krok 1. Za pomocą zielonego plusa dodaj nowy kod,

Krok 2. Wybierz jego typ, Krok 3. Wprowadź kod, Krok 4. Wybierz jednostkę np. karton. Tak wprowadzony kod EAN pojawi się na szczegółach towaru po wybraniu dedykowanej jednostki przez klienta Twojego e-Sklepu.

Aby tak skonfigurowane kody EAN mogły być widoczne w e-Sklepie należy w panelu administracyjnym e-Sklepu włączyć prezentację dodatkowych kodów EAN na szczegółach towaru w menu Wygląd sklepu > Ustawienia > Ustawienia szablonu > sekcja Ogólne.

Wskazówka

W sekcji Cechy towaru zostanie jako pierwszy zaprezentowany kod EAN dla domyślnej jednostki towaru. Pod warunkiem, że został dodana w systemie Comarch ERP.

Jak korzystać z dodatkowych kodów EAN w wyszukiwarce?

Aby skorzystać z dodatkowych kodów EAN w wyszukiwarce, wystarczy: Krok 1. W panelu administracyjnym e-Sklepu włączyć wyszukiwanie towarów po polu: Kod EAN w menu Ustawienia > Ustawienia sklepu > Wyszukiwanie. Krok 2. Wejść na stronę główną e-Sklepu. Krok 3. W polu wyszukiwania wpisać kod lub wiele kodów EAN oddzielonych przecinkami.

Efekt: Wyniki wyszukiwania będą zawierały produkty odpowiadające wprowadzonym kodom EAN.

Jak importować towary do koszyka za pomocą pliku CSV?(tylko dla wersji B2B)

Krok 1. Przygotowanie pliku CSV: Upewnij się, że plik CSV zawiera kolumnę z kodami EAN i przyporządkowanymi do nich jednostkami miary produktów. Krok 2. Import pliku CSV: Na stronie koszyka znajdziesz opcję importu pliku CSV. Kliknij przycisk "Importuj z pliku CSV", a następnie wybierz przygotowany plik ze swojego komputera. Efekt: Po zaimportowaniu pliku, system automatycznie doda do koszyka produkty odpowiadające kodom EAN i jednostkom miary z pliku CSV w podanej ilości.

Więcej informacji

Więcej informacji można znaleźć w artykułach: Jak skonfigurować jednostki pomocnicze oraz w Przeliczanie jednostki miary według wagi produktu.

Jak zaprezentować kupony rabatowe w szablonie Topaz i Szafir?

Spis treści

Wstęp

Jak pokazać klientom dostępne kupony rabatowe?

Wstęp

Kupon rabatowy jest wygenerowanym kodem, który umożliwia klientom otrzymanie obniżki procentowej lub wartościowej, a także opcji darmowej dostawy. Jeżeli klient zastosuje kupon rabatowy w koszyku, odpowiednia promocja zostanie naliczona w ramach zamówienia. Kupon rabatowy może być szansą na zwiększenie sprzedaży – klienci widząc możliwość obniżki chętniej skorzystają z zakupu towarów. W tym momencie możliwe jest zaprezentowanie kuponów w ramach szablonów Topaz i Szafir.

Wskazówka

Sposób konfiguracji kuponów rabatowych został opisany w artykule Kupony rabatowe.

Jak pokazać klientom dostępne kupony rabatowe?

W sklepie istnieje możliwość pokazania kuponów rabatowych ustawionych dla wszystkich bądź zalogowanych kontrahentów. Prezentacja kuponów odbywa się w ramach wskazanej dla kuponu grupy towarowej.

Wskazówka

W przypadku, gdy kupon rabatowy jest ustawiony na wszystkie kategorie, jest on wyłączony z prezentacji. Dzięki temu możliwe jest ustawienie takiego kuponu bez automatycznego prezentowania promocji na wszystkich towarach w sklepie. Z prezentacji są także wyłączone kupony rabatowe dla newslettera i wybranych subskrybentów, dzięki czemu są one unikalne w ramach mailingu.

Wskazane kody rabatowe można pokazać klientom zarówno na dedykowanej stronie, jak i w ramach towarów, na które obowiązują. Aby włączyć prezentację kuponów rabatowych, wykonaj następujące kroki: Krok 1. Przejdź do obszaru Ustawienia > Ustawienia sklepu > Towary > Etykiety towaru. Z tego poziomu włącz flagę Promocja dla towarów, dla których dodano kupony rabatowe:

Na wskazanych towarach pojawi się flaga „Promocja”. Umożliwi to zaprezentowanie kuponów rabatowych w szablonie.

Wskazówka

Tak ustawiona flaga promocja umożliwia prezentację kuponów rabatowych - nie jest uwzględniana w przypadku filtrów na liście towarów. W tym celu należy użyć oznaczenia flagi promocja pochodzącej z systemu ERP lub ceny poprzedniej.

Krok 2. W obszarze Wygląd sklepu > Ustawienia > Prezentacja rabatów włącz prezentację kuponów rabatowych na dedykowanej stronie w strefie klienta:

W wyniku wskazanych ustawień, dostępna dla klientów stanie się strona, na której będzie widoczna lista kodów, wraz ze szczegółami obniżki:

Strona w profilu klienta ze szczegółami kodów rabatowych w szablonie Szafir

Kupony rabatowe w profilu klienta w szablonie Topaz

Krok 3. Po włączeniu prezentacji kuponów rabatowych na liście, szczegółach towaru i w koszyku, na towarach będzie dostępny przycisk "Pokaż promocje":

Prezentacja kodów rabatowych na listach w szablonie Szafir

Kupony rabatowe na listach w szablonie Topaz

Kliknięcie na niego dostarczy klientom informację o kuponach obowiązujących na danym towarze:

Na szczegółach towaru pojawią się etykiety informujące o dostępnych kodach:

Etykiety informujące o kodach rabatowych w szablonie Szafir

Kody rabatowe na szczegółach towaru w szablonie Topaz

Dzięki wskazanej prezentacji kuponów, klient w prosty sposób będzie mógł skopiować kod rabatowy z poziomu popupu i zastosować go w ramach zamówienia. Tę funkcję można wykorzystać w celach marketingowych - poprzez zaprezentowaną obniżkę zwiększyć zainteresowanie ofertą sklepu.

Szablon Topaz

Modyfikacja informacji wyświetlanych na kaflu towaru

W Kreatorze Wyglądu Topaz powstała funkcja pozwalająca na modyfikację informacji wyświetlanych na kaflu towaru. Po wybraniu widoku listy towarów i stylu kafli, przechodząc do ustawień tej sekcji, masz możliwość edycji informacji o towarze, które będą widoczne na kaflu towaru. Dostępne są dwa widoki zdjęć kategorii: lista

oraz mozaika.

Domyślnie zaznaczona jest lista. Aby dokonać modyfikacji informacji na kaflu, musisz przejść do zakładki „Kafle”. Jeśli korzystasz z list towarów 3 lub 4, masz możliwość edycji następujących informacji:

Kupowanie z listy towarów
Dodawanie do ulubionych z listy towarów
Prezentowanie drugiego zdjęcia towaru
Graficzna prezentacja wariantów towaru
Dodatkowe informacje na kaflu
Dodatkowe funkcje na kaflu

W przypadku list towarów 1 i 2, modyfikacja informacji jest uproszczona, ogranicza się jedynie do:

Kupowanie z listy towarów
Dodawanie do ulubionych z listy towarów
Prezentowanie drugiego zdjęcia towaru

Jak dodać obrazek do nazwy kategorii i podkategorii w Comarch e-Sklep?

Spis treści

Wstęp

Jak dodać zdjęcie do nazwy kategorii w Comarch e-Sklep?

Comarch ERP Optima
Comarch ERP XL
Comarch ERP XT

Jak ustawić dodane zdjęcie kategorii jako ikonkę w nagłówku szablonu Topaz?

Jak mogę dodać obrazek do nazwy podkategorii?

Więcej informacji

Wstęp

W Comarch e-Sklep możesz dodawać obrazki zarówno dla kategorii jak i dla podkategorii towarów. Odpowiednio dobrane grafiki zwiększają atrakcyjność wizualną sklepu, przyciągają wzrok klientów i zachęcają do dalszego przeglądania ofert w Twoim sklepie. Dodatkowo ułatwiają one nawigację i skracają czas poszukiwań Twoich klientów. W tym artykule dowiesz się, w jaki sposób skonfigurować funkcję dodawania zdjęć do kategorii i podkategorii w Twoim sklepie.

Jak dodać zdjęcie do nazwy kategorii w Comarch e-Sklep?

Comarch ERP Optima

Krok 1. Aby dodać zdjęcia kategorii w Comarch ERP Optima przejdź do zakładki Ogólne > Grupy towarowe i wybierz grupę do której ma zostać dodane zdjęcie.

Krok 2. Następnie na zakładce Atrybuty za pomocą symbolu Plusa dodaj atrybut binarny.

Wskazówka

Jeśli nie posiadasz atrybutu binarnego to aby go utworzyć przejdź do zakładki Ogólne > Atrybuty i w pierwszej zakładce symbolem Plusa dodaj atrybut w formacie binaria.

Krok 3. Po dodaniu zdjęć kategorii zmiany zapisz ikoną dyskietki oraz wykonaj synchronizację.

Comarch ERP XL

Wyświetlanie zdjęć kategorii w Comarch ERP XL możesz uzyskać poprzez dodanie odpowiedniego Załącznika. Krok 1. Aby wprowadzić zdjęcie w formie załącznika przejdź w module Sprzedaż do zakładki Ogólne > Towary i wejdź w edycję wybranej grupy. Krok 2. W zakładce Załączniki dodaj nowy załącznik ikoną Plusa. W polu Typ wskaż typ załącznika Obraz oraz zaznacz przy parametrze "Dostępność w aplikacji" e-Sklep. Następnie zaimportuj obraz ikoną z czerwoną strzałką.

3. Zmiany zapisz ikoną dyskietki oraz wykonaj synchronizację.

Comarch ERP XT

Krok 1. Zdjęcia kategorii w Comarch ERP XT możesz dodać po wybraniu Więcej funkcji > Comarch e-Sklep > Grupy w Comarch e-Sklep. Krok 2. Aby wprowadzić obrazek dla kategorii wybierz grupę do której chcesz dodać zdjęcie. Następnie wczytaj je wybierając jedną z 2 opcji: Z dysku lub Z internetu.

Krok 3. Zapisz wprowadzone zmiany i wykonaj synchronizację.

Jak ustawić dodane zdjęcie jako ikonkę w nagłówku szablonu Topaz?

W szablonie Topaz istnieje możliwość ustawienia dodanych zdjęć kategorii jako ikonek przy nazwach kategorii w Twoim sklepie. Ta funkcja obsługuje nagłówki: header-1, header-2, header-3 oraz header-5, które są dostępne w Kreatorze Wyglądu. Zdjęcia w postaci ikon wyświetlają się w następujący sposób:

Widok nagłówka header-2 ze sklepu demonstracyjnego - https://demo.comarchesklep.pl/

Krok 1. Skonfiguruj funkcję wyświetlania się ikon nagłówka. Istnieją dwie możliwości konfiguracji tej funkcji:

Z poziomu Kreatora Wyglądu – Podczas tworzenia szablonu Topaz w Kreatorze Wyglądu dodaj nagłówek header-1,2,3 lub 5. Następnie przejdź do jego edycji i oznacz parametr „Ukryj ikony w nagłówku” na „tak”:

Zapisz zmiany, a następnie wygeneruj szablon.

Z poziomu panelu administracyjnego – W sytuacji gdy wgrałeś już wygenerowany szablon do Twojego sklepu i chcesz wprowadzić zmiany w zakresie wyświetlania się obrazków przy nazwach kategorii, przejdź do sekcji Wygląd sklepu > Ustawienia > Dodatkowe i wprowadź zmiany przy parametrze „Ukryj ikony w nagłówku”:

Wprowadzone zmiany zapisz i opublikuj.

Krok 2. Wgraj zdjęcia kategorii do Twojego systemu ERP. Informacje na temat jak wgrać zdjęcia kategorii do poszczególnych systemów ERP znajdziesz pod pierwszym punktem tego artykułu.

Wskazówka

Na stronie „Produkty” wyświetlają się zdjęcia kategorii. Należy pamiętać, iż jeśli w systemie ERP zostanie dodany obrazek kategorii w formie ikony, to taki sam obrazek wyświetli się na stronie „produkty”. Nie istnieje możliwość dodania dwóch osobnych zdjęć do nagłówka i do strony „Produkty”.

Jak mogę dodać zdjęcie do nazwy podkategorii?

W takich szablonach jak Topaz i dla Gastronomii istnieje możliwość dodania obrazków, które będą wyświetlały się przy nazwach podkategorii w Twoim sklepie. Ta funkcja obsługuje wszystkie układy list towarów: products-1, products-2, products-3, products-4, które są dostępne w Kreatorze Wyglądu. Obrazki do nazw podkategorii wyświetlają się w następujący sposób:

Widok zdjęć podkategorii na liście towarów ze sklepu demonstracyjnego - https://demo.comarchesklep.pl/

Aby dodać zdjęcia do podkategorii postępuj według poniższych kroków: Krok 1. Skonfiguruj funkcję wyświetlania podkategorii. Istnieją dwie możliwości konfiguracji tej funkcji:

Z poziomu Kreatora Wyglądu - Tworząc szablon Topaz lub dla Gastronomii przejdź do edycji Listy towarów w Kreatorze Wyglądu. Następnie dodaj układ listy towarów: products-1,2,3 lub 4 i edytując go oznacz parametr "Udostępnij zdjęcia podkategorii".

Zapisz zmiany, a następnie wygeneruj szablon.

Z poziomu panelu administracyjnego - W sytuacji gdy wgrałeś już wygenerowany szablon do Twojego sklepu i chcesz wprowadzić zmiany w zakresie wyświetlania się obrazków przy nazwach podkategorii, przejdź do sekcji Wygląd sklepu > Ustawienia > Ogólne i oznacz parametr "Udostępnij zdjęcia podkategorii":

Zapisz i opublikuj wprowadzone zmiany. Krok 2. Dodaj obrazki do podkategorii w systemie ERP. Skonfigurujesz je w podobny sposób jak obrazki dla kategorii, które zostały opisane w pierwszej części artykułu.

Więcej informacji

Więcej na temat dodawania obrazków w e-Sklepie można przeczytać w artykułach:

- - Obrazki w e-Sklepie
  - Obrazki (optymalizacje)

Banner promocyjny w szablonie Topaz i One Page Shop

Banner promocyjny - jak to działa?

Banner promocyjny wyświetli się na stronie głównej Twojego e-Sklepu i będzie prezentował typ towaru, który wskażesz. Taki rodzaj banneru pomoże Ci w zwróceniu uwagi Klientów na towary, które zostały objęte na przykład ofertą specjalną.

Dodanie banneru

Banner możesz dodać z poziomu Kreatora Wyglądu B2C (zamiennie: panel administracyjny e-Sklepu: Wygląd sklepu/ Kreator wyglądu). Aby dodać banner promocyjny do swojego szablonu, przejdź na stronę "Strona główna", po czym wybierz Banner promocyjny i przeciągnij go w wybrane przez Ciebie miejsce.

W podglądzie układu szablonu, po najechaniu kursorem na obszar z bannerem promocyjnym, zobaczysz możliwość jego edycji.

Wybierz ikonę "zębatki", aby móc edytować i określić liczbę wyświetlanych towarów oraz typ promowanych towarów.

Zapisz wprowadzone zmiany. Jeśli pozostałe strony szablonu są gotowe i skonfigurowane, to możesz wygenerować szablon. Więcej informacji na temat Kreatora Wyglądu oraz poszczególnych sekcji znajdziesz w artykule: Kreator wyglądu Topaz (B2C) Po zaimportowaniu szablonu do panelu administracyjnego możesz przejść do edycji banneru. Postępuj zgodnie z poniższą instrukcją.

Edycja banneru

Modyfikacja wszystkich bannerów dostępnych w szablonach Comarch możliwa jest w panelu administracyjnym w obszarze Wygląd sklepu> Ustawienia> Bannery. Informacje odnośnie domyślnej, tradycyjnej modyfikacji bannerów znajdują się w artykule: Bannery

Odnajdź banner na liście nazwany "promotionalBanner", a następnie wybierz go, aby edytować i dodać zdjęcie

Po dokonaniu modyfikacji należy zapisać i opublikować zmiany. Gotowe! Teraz Twój banner promocyjny wyświetli się na stronie głównej.

Jak dodać wiele linków do banneru top?

Spis treści

Wstęp

Jak zaprezentować wiele linków w bannerze top?

Wstęp

Banner top jest bannerem, który wyświetla się na samej górze witryny. Ma on na celu wyróżnić informacje, które chcesz przekazać swoim klientom. Z tego względu w ramach banneru top możesz dodać zarówno treść, jak również linki, które będą prowadzić do istotnych obszarów. Dzięki temu możesz zaprezentować klientom informacje o ofercie w Twoim sklepie. Wskazana prezentacja wielu linków możliwa jest w szablonach Topaz oraz Dla gastronomii.

Jak zaprezentować wiele linków w bannerze top?

Krok 1. Aby ustawić wskazany banner według własnych potrzeb przejdź do sekcji Wygląd sklepu > Ustawienia > Bannery. W tym miejscu powinien znajdować się banner o nazwie top:

Krok 2. W ramach edycji banneru przejdź do sekcji Widok zaawansowany:

Krok 3. Po otwarciu wskazanego widoku masz możliwość kilku opcji konfiguracji banneru top - w ramach domyślnych ustawień dla banneru wypełniona jest sama treść. Do banneru można dodać także link.

W takim wypadku całość banneru top będzie klikalna, a wypełniony tekst zostanie zaprezentowany na środku banneru:

Krok 4. Do banneru top można dodać dodatkowe linki. Należy to zrobić wchodząc do edycji banneru lub poprzez opcję Dodaj więcej linków:

Krok 5. Z poziomu wskazanej opcji w zakładce Linki za pomocą przycisku plusa masz możliwość dodania linku:

Następnie możesz wprowadzić nazwę, dodać link oraz zadecydować czy ma się on otwierać w nowym oknie:

Wskazówka

Aby prezentować wiele linków w szablonie należy uzupełnić link i nazwę dla linku domyślnego.

Dzięki dodaniu wielu linków masz możliwość ich prezentacji banneru top w następujący sposób:

- Jeżeli w bannerze top wskazany został tekst: zostanie on przesunięty do lewej strony, a po prawej stronie w ramach tej opcji będzie wyświetlane do 4 linków:

- W przypadku, gdy potrzebujesz więcej linków możesz zrezygnować z wypełnionego tekstu – dzięki temu na bannerze top będziesz mógł dodać do 6 linków:

Wskazówka

Opcja wielu linków w bannerze top jest możliwa do skonfigurowania wraz z odliczaniem czasu. W ramach takiej konfiguracji możliwe jest wyświetlenie do 4 linków. Informacje o konfiguracji banneru top z odliczaniem czasu można znaleźć w artykule Jak zaprezentować banner z odliczaniem czasu w szablonach B2C? W takim przypadku należy uzupełnić konfigurację linków, ustawić opcję odliczania czasu, jak również uzupełnić pole "Tekst". Dzięki temu banner top zyska następujący wygląd:

Jak zaprezentować banner w liście towarów dla szablonu Topaz?

Spis treści

Wstęp

Jak dodać banner do listy towarów?

Wstęp

Banner prezentowany na listach towarowych Twojego e-Sklepu przyciągnie uwagę klientów i pomoże zwiększyć sprzedaż. Dzięki wyrazistym grafikom i atrakcyjnym komunikatom można promować konkretne produkty, sezonowe promocje lub nowości, wyróżniając je spośród innych ofert. Sprawdź jak łatwo można dodać i skonfigurować banner, który będzie wyświetlany na listach towarowych w Twoim sklepie.

Jak dodać banner do listy towarów?

Krok 1. Banner możesz dodać z poziomu Kreatora Wyglądu B2C (zamiennie: panel administracyjny e-Sklepu: Wygląd sklepu > Kreator wyglądu).W Kreatorze banner znajduje się w sekcji Lista towarów > Banner w liście towarów. Aby dodać banner wystarczy w niego kliknąć:

Wskazówka

Aby zmienić banner wystarczy kliknąć inny banner, natomiast aby go usunąć należy ponownie kliknąć na dodany banner.

Krok 2. Ustawienia banneru możesz skonfigurować zarówno z poziomu Kreatora Wyglądu jak i panelu administracyjnego. W Kreatorze Wyglądu po dodaniu banneru do listy towarowej kliknij w symbol ustawień a następnie przejdź do zakładki Banner w liście towarów:

Krok 3. Szablon z tak przygotowanym bannerem należy wygenerować. Po zaimportowaniu szablonu do panelu administracyjnego możesz przejść do dalszej konfiguracji. Krok 4. Przejdź do ustawień Wygląd sklepu > Ustawienia > Bannery. W tej sekcji znajdź banner o nazwie banner-in-list-1 lub jeśli wybrałeś drugą opcję to banner-in-list-2, a następnie przejdź do jego edycji.

Krok 5. Za pomocą ikony plusa dodaj obrazek w rozmiarze 720x300 dla banner-in-list-1 lub 1400x300 dla banneru banner-in-list-2. Po przesłaniu właściwego obrazka kliknij na Widok zaawansowany, aby przejść do edycji pozostałych elementów.

Wskazówka

Pamiętaj o tym, aby zapisać i opublikować wprowadzone zmiany.

Krok 6. Gotowe! Twój banner będzie prezentował się w sklepie następująco:

Wskazówka

Ustawienia banneru osadzongo w liście towarów możesz zmienić także w panelu administracyjnym przechodząc do zakładki Wygląd sklepu > Ustawienia > Zarządzanie elementami na liście towarów.

Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Spis treści

Wstęp

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jak zacząć?

Aktualizacja szablonu

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Pozostałe zmiany

Gdzie należy uzupełnić teksty alternatywne (alt)?

Zalecenia dla udostępnianych treści – ogranicz migające elementy

Dostosuj komunikację mailową – aktualizacja lub zmiana treści e-mail

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Wstęp

Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.

Wskazówka

Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami

W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz jeden ze standardowych szablonów Comarch, czyli: Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii.

Sprawdź, jaki szablon posiadasz

Nie wiesz, który szablon posiadasz? Możesz to sprawdzić w panelu administracyjnym Comarch e-Sklep. Aby to zrobić, z poziomu panelu administracyjnego przejdź do zakładki Wygląd sklepu/ Ustawienia a następnie, pod przyciskiem "Więcej" wybierz Edytuj ustawienia zaawansowane. W obszarze, który został wyświetlony, pojawi się kilka zakładek, a wśród nich zakładka "Szablon". Wybierz ją, po czym sprawdź szablon:

Jeśli Twój szablon to Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, to możesz przejść do kolejnej części artykułu. Jeśli posiadasz własny szablon z indywidualnymi modyfikacjami, to przejdź do artykułu: Posiadam własny szablon, jak mogę go dostosować do kryteriów WCAG 2.1/2.2? Jeśli posiadasz szablon Bursztyn, Agat lub Opal, to przejdź do artykułu: Posiadam szablon Bursztyn, Opal lub Agat, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jako właściciel e-Sklepu lub Partner Comarch zadbaj, aby zadbać o dostosowanie swojej witryny do obowiązujących przepisów. Nowe wymogi to wspólna odpowiedzialność:

Comarch e-Sklep – zajmiemy się kwestiami technicznymi w przypadku Gotowych Szablonów Comarch, do których należą m.in. zmiany w kodzie,
Właściciel, administrator lub Partner sklepu – musisz zadbać o treści i elementy, które dodajesz samodzielnie. Chodzi tu głównie opis produktów, zdjęcia i grafiki czy identyfikację wizualną.

Jak zacząć?

Jeśli korzystasz z gotowych szablonów, takich jak Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, nie musisz przejmować się samodzielnym edytowaniem ich kodu. Wszystkie usprawnienia zostaną udostępnione wraz z aktualizacją, która pojawi się w czerwcu 2025 roku.

Aktualizacja szablonu

Wskazówka

Aktualizację szablonu wykonaj wtedy, kiedy będzie ona dostępna. Realizacja wersji 2025.4 przewidywana jest przed 28 czerwca 2025 roku, poinformujemy o niej w aktualnościach. Będzie ona zawierała zmiany związane z omawianymi tutaj przepisami.

Jak zaktualizować szablon?

Aby zaktualizować szablon i przejść na Topaz, One Page Shop, Dla Gastronomii, Rubin lub Szafir, należy skorzystać z aktualnej wersji Kreatora Wyglądu. Pamiętaj, że szablony Rubin i Szafir przeznaczone są tylko dla sklepów Enterprise i B2B. Odnośnik znajduje się również w panelu administracyjnym e-Sklepu w sekcji Wygląd sklepu > Kreator wyglądu. Istnieją trzy możliwości aktualizacji tych szablonów:

Wygenerowanie zupełnie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
Wybór i edycja jednego z gotowych układów i jego modyfikacja,
Import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Wygenerowany z Kreatora Wyglądu szablon należy wgrać do e-Sklepu. W panelu administracyjnym e-Sklepu, w sekcji Wygląd sklepu znajduje się bezpośredni odnośnik do importu szablonu z Kreatora wyglądu. Szczegółowa instrukcja dostępna jest w artykule Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Wskazówka

Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?

Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jednym z głównych wymogów WCAG jest stosowanie odpowiednich kontrastów na stronach internetowych. Jeśli w wybranym szablonie graficznym wykorzystujesz któryś ze standardowych motywów kolorystycznych dostępnych w kreatorach, to zostaną one dostosowane do wymagań wynikających z przepisów. Jeśli natomiast masz przygotowany własny motyw kolorystyczny lub chcesz zmienić część kolorów zastosowanych w szablonie, to pamiętaj, że muszą one posiadać odpowiednie kontrasty. Wszelkich zmian kolorystycznych możesz dokonać w Kreatorze Wyglądu. Odpowiedni kontrast między tekstem a tłem jest kluczowy dla osób z dysfunkcjami wzroku. WCAG 2.1 określa minimalny współczynnik kontrastu (4.5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego). Ważne jest również unikanie łączenia kolorów, które mogą być trudne do rozróżnienia, takich jak czerwony i zielony. Kontrasty po modyfikacji kolorów możesz sprawdzić np. narzędziem WAVE. WAVE to popularny, dostępny dla wszystkich zestaw narzędzi do oceny dostępności stron internetowych. Rozszerzenia WAVE dla Chrome, Firefox i Edge, umożliwiają testowanie bezpośrednio w tych przeglądarkach, bez przesyłania danych na serwer WAVE. WAVE znajdziesz pod linkiem: WAVE Web Accessibility Evaluation Tools.

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony:

Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".

Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu:

W panelu bocznym pojawi się dokładna informacja na temat koloru.

W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.

Gdzie dostosować kolory?

Kolory w szablonie możesz zmienić korzystając z Kreatora Wyglądu. Po imporcie szablonu, edycji lub stworzeniu nowego projektu, przejdź do zakładki "Style" i edytuj motyw kolorystyczny:

Następnie możesz zmieniać swobodnie kolor na wybranych elementach:

Zmian możesz dokonać także z poziomu panelu administracyjnego, przechodząc do zakładki Wygląd Sklepu > Ustawienia.

Pozostałe zmiany

Poza zmianami w szablonie graficznym sklepu należy uzupełnić szereg danych. Znaczącą część tych elementów możesz wykonać już teraz, nie czekając na aktualizację Comarch e-Sklep. Poniżej znajduje się lista zmian, które należy wdrożyć w swoim e-Sklepie.

Teksty alternatywne ("Alt", alty) w Comarch e-Sklep

Twój szablon musi obsługiwać parametr "alt" w obrazkach. Jeśli wykorzystasz aktualny szablon standardowy od Comarch to obsługę zapewnia Comarch e-Sklep, jeśli zdecydowałeś się na indywidualny szablon lub samodzielną aktualizację starszej wersji to upewnij się, że w szablonie są obsługiwane parametry "alt" we wskazanych elementach. Teksty alternatywne („alt”) to krótkie opisy obrazków, które pozwalają osobom korzystającym z czytników ekranu zrozumieć, co znajduje się na zdjęciu. Atrybut „alt” jest szczególnie ważny dla zdjęć produktów, ponieważ umożliwia przekazanie najważniejszych informacji o produktach. Dlaczego tekst alternatywny jest taki ważny?

Pomaga osobom korzystającym z czytników ekranu, które odczytują tekst alternatywny na głos,
Poprawia dostępność stron internetowych, czyniąc je bardziej przyjaznymi dla wszystkich użytkowników,
Wpływa na pozycjonowanie w wyszukiwarkach, ponieważ dobrze opisane obrazy są lepiej interpretowane przez algorytmy Google.

Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:

Przyklad

Poprawne :

Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.

Niepoprawne:

Sukienka.
Buty sportowe.
Fajna kanapa.
Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP

Korzystam z Comarch ERP Optima

Po uruchomieniu Comarch ERP Optima przejdź na pozycję cennika, a następnie edytuj wybrany towar. Następnie przejdź na zakładkę "Atrybuty", a następnie do sekcji "Zdjęcia i załączniki". W tym miejscu zobaczysz kolumnę "Atrybut Alt".

Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego:

Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:

Korzystam z Comarch ERP XT

Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".

W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

Pamiętaj, alby alty (opisy alternatywne) były uzupełnione także w przypadku bannerów. Aby to zrobić, przejdź z poziomu panelu administracyjnego do Wygląd sklepu > Ustawienia > Bannery do edycji swoich bannerów. Klikając na odpowiedni kafelek pojawią się opcje z uzupełnieniem Alt:

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

Obrazki możesz dodawać także do treści, które udostępniasz na specjalnych stronach, takich jak np. Regulamin sklepu, Polityka prywatności, Wysyłka itp. W obszarze do edycji, który jest dostępny z poziomu panelu administracyjnego w sekcji Ustawienia > Treści formalne edytuj interesującą Cię treść, a dodając obrazek uzupełnij alt:

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii

Dodając opisy produktów i kategorii, warto upewnić się, że linkowane zdjęcia zawierają poprawnie uzupełniony atrybut "alt". To kluczowe dla osób korzystających z czytników ekranu. Dbałość o ten detal poprawia dostępność strony i zwiększa jej widoczność w sieci. Opis towaru i kategorii możesz dodać w systemach Comarch ERP. Opis kategorii możesz ustawić również z poziomu panelu administracyjnego, bez konieczności korzystania z systemu ERP. Szczegółowe informacje znajdują się w artykule: Jak edytować kategorię w Comarch e-Sklep?

5. Dla zdjęć w Blogu

Obrazki, które dodawane są dla wpisów blogowych od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego Comarch e-Sklep do sekcji Marketing > Blog przy dodawaniu wpisu:

6. Dla zdjęć w plikach użytkownika w sekcji "Twoje pliki"

Pliki użytkownika w e-Sklepie to dedykowana przestrzeń do przechowywania własnych materiałów, które mogą zostać wykorzystane w sklepie internetowym. Pliki można przesyłać za pośrednictwem panelu administracyjnego, w sekcji Ustawienia > Twoje pliki. Maksymalny rozmiar pojedynczego pliku: 3 MB. Pliki, które dodawane są we wspomnianym obszarze, od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego do sekcji Ustawienia > Twoje pliki przy edycji pliku lub jego dodaniu.

Wskazówka

Jeśli posiadasz sklep wielojęzyczny, to we wszystkich tych wymienionych powyżej obszarach, znajdują się również obrazki dla danego języka. Pamiętaj, alby atrybut ALT zdefiniować dla każdego z nich!

Atrybut title - obowiązkowy czy nie?

Atrybut title jest przydatny do przekazywania dodatkowych informacji o elementach HTML, widocznych jako podpowiedź po najechaniu kursorem. Może być używany w ikonach bez podpisu, formularzach czy linkach, aby dostarczyć kontekst. Nie jest jednak obowiązkowy według WCAG, ponieważ czytniki ekranu często go ignorują, a osoby nawigujące klawiaturą mogą nie mieć do niego dostępu.

Zalecenia dla udostępnianych treści - ogranicz migające elementy

Jako właściciel sklepu musisz sam zadbać o to, jakie treści umieszczasz na swojej stronie. Migające elementy, takie jak animacje czy reklamy, mogą wywoływać problemy u osób z padaczką fotogenną. Według kryteriów WCAG 2.1 zalecane jest ograniczenie migających treści do maksymalnie trzech błysków na sekundę lub ich całkowite usunięcie. Jako właściciel sklepu musisz dbać o statyczne elementy lub spokojne animacje. Również treści zawarte w różnego typu prospektach, gazetkach czy folderach informacyjnych w formie dokumentów powinny być zgodne z wytycznymi WCAG.

1.Obrazki i bannery

W szablonach graficznych takie elementy mogą pojawić się na przykład w bannerach i elementach tekstowych ze zdjęciem. Upewnij się, że grafiki tam zamieszczone są odpowiednie, czyli bez intensywnych animacji i nieodpowiednich kolorów. Szczególną uwagę zwróć na pliki w formacie GIF. Sprawdź, w jaki sposób możesz skonfigurować bannery oraz elementy tekstowe ze zdjęciem.

2.Materiały audio i viedo

Aby sklep internetowy był w pełni dostępny zgodnie z WCAG, właściciele muszą zadbać o dodanie audiodeskrypcji i transkrypcji do materiałów multimedialnych (filmy, nagrania dźwiękowe). Choć oba rozwiązania służą poprawie dostępności, mają różne funkcje.

Audiodeskrypcja to dodatkowy opis dźwiękowy, który przedstawia istotne elementy wizualne nagrania osobom niewidzącym,
Transkrypcja to zapis tekstowy całej treści audio, umożliwiający odbiór treści osobom niesłyszącym, może to być w formie napisów dla audiodeskrypcji.

Dodanie tych elementów leży po stronie właścicieli sklepów. Do filmów, które udostępniasz, dodaj zatem widoczne napisy, a także dobrej jakości opis dźwiękowy. Ich brak może wykluczyć część użytkowników i wpłynąć na komfort korzystania ze strony. Dobre praktyki dostępności to nie tylko wymóg, ale też inwestycja w lepsze doświadczenie klientów.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

Dostosowanie treści e-mail zgodnie z wytycznymi WCAG to kluczowy krok w budowaniu dostępnej i klarownej komunikacji. W tej części artykułu przedstawiamy rozwiązania zarówno dla domyślnych wiadomości, jak i tych modyfikowanych, aby zapewnić ich lepszą czytelność i dostępność dla wszystkich odbiorców.

1.Treści mailowe są domyślne, nie zostały sformatowane

Jeśli treści nie zostały przez Ciebie zmienione i stanowią domyślne treści, które są dostępne w Comarch e-Sklep, to wystarczy, że zaktualizujesz je. Aby to zrobić, należy przejść w panelu administracyjnym do zakładki Ustawienia > Treści formalne, a następnie wybrać „Wysyłka e-mail i SMS”. Zakładka ta zawiera treści wiadomości wysyłane do klientów po wykonaniu określonych akcji, np. po zakupie czy rejestracji. W Comarch e-Sklep istnieje możliwość przywrócenia standardowej treści pojedynczej wiadomości e-mail lub wszystkich jednocześnie. Opcja ta stanowi również aktualizację treści e-mail. "Przywróć domyślną treść" dostępna jest w panelu administracyjnym e-Sklepu w menu Ustawienia/ Treści formalne/ Wysyłka e-mail i SMS na szczegółach każdej wiadomości, po kliknięciu w przycisk Więcej:

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Jeśli posiadasz własne, dostosowane do Twojej komunikacji marketingowej treści e-mail, to sprawdź, czy są one odpowiednio napisane i sformatowane. Zastosuj się do poniższych wskazówek. W jaki sposób poprawnie napisać i sformatować treści?

Struktura Stosuj nagłówki (<h1>, <h2> itd.) dla przejrzystości. Używaj krótkich akapitów i list punktowanych.
Tekst i formatowanie Zapewnij wysoki kontrast między tekstem a tłem. Wybieraj czytelne czcionki (sans-serif, min. 12-14 px). Nie używaj wyłącznie koloru do przekazywania informacji.
Obrazy i multimedia Dodawaj tekst alternatywny (alt text) do obrazów. Unikaj tekstu osadzonego w grafikach, jeśli można go przesłać jako tekst.
Linki i przyciski Stosuj opisowe teksty linków zamiast „Kliknij tutaj”. Upewnij się, że są łatwe do kliknięcia na ekranach dotykowych.
Język i czytelność Używaj prostego i zrozumiałego języka. Unikaj skrótów i branżowego żargonu, jeśli odbiorca może ich nie znać.
Testowanie Sprawdź wiadomość na różnych urządzeniach i czytnikach ekranu. Zweryfikuj zgodność ze standardami WCAG.

Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS

3.Załączniki (m.in. instrukcje, katalogi)

Należy zadbać o to, aby wszystkie udostępniane w sklepie załączniki, takie jak instrukcje czy katalogi, były zgodne z wytycznymi WCAG, zapewniając tym samym ich pełną dostępność dla wszystkich użytkowników.

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Przystosowanie e-Sklepu do wymogów nie musi wiązać się z dużymi wydatkami na zmiany w kodzie. Kluczowe aspekty dostępności można wdrożyć samodzielnie, wykorzystując opcje dostępne w systemach Comarch ERP, a także Kreatorze Wyglądu czy Panelu Administracyjnym. Warto pamiętać, że poprawa dostępności to nie tylko obowiązek wynikający z przepisów, ale także realna szansa na zwiększenie grona klientów oraz podniesienie komfortu ich zakupów. Istnieje kilka ogólnodostępnych narzędzi, które pomogą Ci dostosować sklep do wymogów. Obszerna lista narzędzi do oceny dostępności stron internetowych, zgodnych z WCAG znajduje się na stronie: Web Accessibility Evaluation Tools List .

Podsumowanie

Dostępność cyfrowa to nie jednorazowe przedsięwzięcie, lecz ciągły rozwój i udoskonalanie. Regularne sprawdzanie funkcjonalności, optymalizacja elementów wizualnych i dostosowywanie sposobów interakcji pozwalają na stałe podnoszenie jakości doświadczeń użytkowników. Dążenie do pełnej zgodności ze standardami WCAG 2.1/2.2 oraz wymogami Europejskiego Aktu o Dostępności (EAA) nie tylko ułatwia nawigację wszystkim odwiedzającym, ale także buduje pozytywny wizerunek i wzmacnia pozycję na rynku. Wdrażanie kolejnych usprawnień to inwestycja w przyszłość, która przynosi korzyści zarówno właścicielom, jak i ich klientom.

One Page Shop - cały sklep na jednej stronie

Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Spis treści

Jak wyeksportować swój szablon z Comarch e-Sklep?

Jak wgrać własny szablon do Comarch e-Sklep?

Jak wyeksportować swój szablon z Comarch e-Sklep?

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Eksport szablonu.

Krok 2. W tym miejscu możesz opcjonalnie (przed eksportem) określić autora szablonu, podać adres e-mail, telefon oraz adres WWW swojego e-Sklepu.

Krok 3. Jeżeli chcesz wyeksportować szablon do pliku użyj przycisku Eksportuj szablon.

Gotowe! Szablon został wyeksportowany do pliku na Twoim urządzeniu.

Wskazówka

Z tego miejsca możesz także wyeksportować posiadane w e-Sklepie bannery, korzystając z przycisku Eksportuj bannery.

Jak wgrać własny szablon do Comarch e-Sklep?

Własny szablon. Jak go wgrać?

Po skomponowaniu swojego własnego szablonu możesz wgrać go do e-Sklepu. Postępuj zgodnie z poniższymi krokami.

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Import szablonu.

Krok 3. Wybierz plik XML swojego szablonu i naciśnij Importuj szablon.

Uwaga

Wskazówka

W zakładce Szablony możesz określić, czy wgrywany szablon ma być domyślny i aktywny w e-Sklepie.

Gotowe! Twój szablon został zaimportowany do e-Sklepu.

Jak dodać wideo w sekcji z filmami?

Filmy produktowe na rynku e-commerce są dziś powszechną formą prezentowania towarów w sklepach internetowych. Producenci czy właściciele sklepów chcą wyróżniać swój asortyment. Niejednokrotnie pomaga to także w ukazaniu zastosowania produktu. Każdy film wyróżnia się sposobem prezentacji. W szablonie One Page Shop i Topaz dostępna jest sekcja, gdzie możesz publikować filmy, które pomogą Ci wypromować oferowany przez Ciebie towar.

Konfiguracja sekcji z filmami

Z poziomu panelu administracyjnego możesz w łatwy i szybki sposób dodać wideo. Postępuj zgodnie z poniższą instrukcją. Krok 1. Zaloguj się do panelu administracyjnego. Krok 2. Przejdź do zakładki Wygląd sklepu/ Ustawienia/ Strona główna. Na dole strony znajdź Ustawienia sekcji z filmami. Krok 3. Uzupełnij informacje o filmie: Etykietę PL oraz wstaw Link do filmu. W sekcji możesz zaprezentować filmy:

udostępnione w sekcji Ustawienia/ Pliki użytkownika – przykładowy link: usr/nazwafilmu.mp4
opublikowane w portalu YouTube – przykładowy link: https://www.youtube.com/embed/jq3B5jp8QwI
dodane na zewnętrznym hostingu – przykładowy link: https://twojhosting.pl/filmy/nazwafilmu.mp4

Krok 4. Uzupełnij tłumaczenia dla nazwy filmów prezentowanych w szablonie. Naciśnij link videoElement1, a zostaniesz przekierowany do edycji tłumaczenia.

W polu tekst wpisz odpowiednią nazwę filmu i zapisz zmiany.

Krok 5. Zapisz i opublikuj zmiany. Gotowe! Od teraz Klienci zobaczą w szablonie skonfigurowaną sekcję z opublikowanymi filmami. Przejdź do naszego sklepu demonstracyjnego i zobacz, jak wygląda skonfigurowana sekcja.

Jak zmienić kolejność wyświetlanych elementów na stronie głównej w One Page Shop?

W szablonie One Page Shop możesz zmieniać dowolnie kolejność wyświetlanych na głównej stronie elementów. Możesz dzięki temu spersonalizować swój e-Sklep tak, by był bardziej unikalny.

Konfiguracja strony głównej

Aby dokonać zmian w kolejności wyświetlanych elementów na stronie głównej wystarczy, że zalogujesz się do panelu administracyjnego, a następnie przejdziesz do sekcji Wygląd sklepu/ Ustawienia/ Strona Główna. Wyświetli się wówczas panel, który zawiera w sobie ustawienia nagłówka strony, treści strony oraz sekcji z filmami.

Ustawienia nagłówka strony

W nagłówku znajdują się następujące elementy:

Logotyp,
Produkty,
Blog,
Lookbook,
O firmie,
Kontakt,
Koszyk,
Informacje o języku i walucie, możliwość wyboru.

Lista elementów w nagłówku strony

W tym miejscu możesz nie tylko dodać link do nagłówka, ale także ustalić, czy odnośniki do stron mają być widoczne. Możliwa jest też zmiana kolejności wyświetlania poszczególnych elementów. Wystarczy, że przesuniesz wybrany element za pomocą strzałki w kolumnie Kolejność. Możesz także określić, który odnośnik powinien być wyróżniony, a dokładniej, który link w nagłówku będzie posiadała inny kolor. Zmiany koloru czcionki możesz dokonać w sekcji Wygląd sklepu/ Ustawienia/ Ogólne. Odpowiadają za to sekcje:

Kolor czcionki wyróżnionego elementu w pasku nawigacji,
Kolor czcionki wyróżnionego elementu w pasku nawigacji po najechaniu.

Jeśli odpowiedni kolor został już przez Ciebie wybrany, to pozostaje tylko zaznaczyć checkbox Wyróżnij, który jest umieszczony przy liście elementów w nagłówku:

Ustawienia treści strony

Pozostając w obszarze Wygląd sklepu/ Ustawienia/ Strona główna możesz zmienić ustawienia treści strony.

W tym miejscu również istnieje możliwość zmiany kolejności wyświetlania poszczególnych elementów na stronie głównej sklepu oraz ukrycia elementu. Wystarczy, że odznaczysz checkbox w kolumnie Dostępne.

Ustawienia sekcji z filmami

W szablonie One Page Shop dostępna jest sekcja, w której możesz publikować filmy, które pomogą Ci wypromować oferowany przez Ciebie towar. Film możesz dodać w prosty i szybki sposób z poziomu panelu administracyjnego. Szczegóły konfiguracji znajdują się w artykule: Jak dodać wideo w sekcji z filmami w szablonie One Page Shop?

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Jak wykonać kopię bezpieczeństwa?

W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu.

Jak wyeksportować bannery?

Jak zabezpieczyć hasłem swój szablon?

W tym miejscu nadasz hasło dla swojego szablonu.

Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno:

Składać się z minimum 8 znaków,
Zawierać dużą literę,
Zawierać małą literę,
Zawierać cyfrę 0-9,
Zawierać znak specjalny – ‘!.+?;^]=-(&_)#=

Gotowe! Teraz Twój szablon został zabezpieczony hasłem.

One Page Shop - podstawowe informacje

Spis treści

Wstęp

Konfiguracja One Page Shop w panelu administracyjnym

Elementy w szablonie

1. Sekcja z filmami

2. Banner

3. Lookbook

4. Lista towarów

5. Szczegóły towaru – jakie informacje widnieją na pop-upie?

6. Koszyk

7. Blog

8. Info-banner

9. Element tekstowy ze zdjęciem

10. Stopka

11. Strefa Klienta

Wstęp

One Page Shop to szablon zaprojektowany z myślą o użytkownikach, którzy w swojej ofercie posiadają jedynie kilka towarów. Dzięki niemu zaprezentujesz na głównej stronie wyjątkowe produkty, które posiadasz w swojej ofercie. Struktura szablonu skupiona jest na zaprezentowaniu asortymentu tak, aby decyzje zakupowe Twoich Klientów zapadały szybciej. Potencjalny klient może odnaleźć najważniejsze informacje na temat Twojej oferty przeglądając jedną stronę witryny. Szablon One Page Shop:

dostępny jest we wszystkich wariantach Comarch e-Sklep,
pozwala na prezentację 20 towarów prostych,
dostępny jest w dwóch motywach kolorystycznych,
jest prosty w konfiguracji bezpośrednio w panelu.

Przejdź do naszego sklepu demonstracyjnego i zobacz, jak wygląda One Page Shop w Comarch e-Sklep.

W tym artykule zawarliśmy podstawowe informacje na temat funkcji dostępnych w szablonie. Dzięki udogodnieniom i możliwości edycji niektórych elementów możesz łatwo spersonalizować swój e-Sklep.

Konfiguracja One Page Shop w panelu administracyjnym

Z poziomu panelu administracyjnego możesz dokonywać edycji każdego elementu znajdującego się na stronie. Możesz także ustalać sposoby dostaw oraz płatności. Po przejściu do sekcji Wygląd sklepu/ Ustawienia dostępne są ustawienia dla trzech zakładek: Ogólne, Strona główna, Dodatkowe.

W zakładce Ogólne możesz dokonać zmian w motywie kolorystycznym Twojego e-Sklepu. Z tego poziomu również możesz dokonać m.in takich zmian, jak: prezentacja punktów osobistego, edycji terminu dostaw czy umożliwienie prezentacji informacji o najniższej cenie towaru lub usługi jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki.
W zakładce Strona główna znajdują się ustawienia, które pomagają „układać” poszczególne elementy na stronie głównej. W tym miejscu możesz zdecydować, gdzie powinny wyświetlać się produkty, lookbook i bannery. Część wyświetlanych elementów możesz ukryć.
W zakładce Dodatkowe widnieją ustawienia, dzięki którym możesz decydować o możliwości udostępniania towarów w poszczególnych mediach społecznościowych, czy udostępniania przycisku obliczającego ratę lub leasing. Dodatkowo możesz włączyć prezentację tabeli rozmiarów na stronie towaru.

Ustawienia Strony Głównej

Ustawienia zawarte w tym miejscu odpowiadają za elementy, które wyświetlane są na stronie głównej. Możesz zmieniać ich kolejność, nazwę, ukryć lub wyróżnić. W tym miejscu wyróżnia się następujące sekcje:

Ustawienia nagłówka strony

W nagłówku znajdują się następujące elementy:

Logotyp,
Odnośnik do listy z produktami (nasze produkty),
Blog,
Lookbook,
Informacje o firmie,
Kontakt,
Koszyk,
Możliwość wyboru języka i waluty w e-Sklepie.

W tym miejscu możesz nie tylko dodać link do nagłówka, ale także ustalić, czy i jakie odnośniki do stron mają być widoczne. Możliwa jest też zmiana kolejności wyświetlania poszczególnych elementów.

Ustawienia treści strony

Pozostając w obszarze Wygląd sklepu/ Ustawienia/ Strona główna możesz zmienić ustawienia treści strony. W tym miejscu również istnieje możliwość zmiany kolejności wyświetlania poszczególnych elementów na stronie głównej sklepu oraz ukrycia elementu.

Szczegółowe informacje na temat konfiguracji znajdują się w artykule: Jak zmienić kolejność wyświetlanych elementów na stronie głównej w One Page Shop?

Elementy w szablonie

1. Sekcja z filmami

W One Page Shop masz możliwość dodania filmów promujących nie tylko produkty, ale także Twoją firmę, dostępne marki czy producentów. Film możesz dodać w prosty i szybki sposób z poziomu panelu administracyjnego. W sekcji możesz zaprezentować filmy:

udostępnione w sekcji Ustawienia/ Pliki użytkownika,
opublikowane w portalu YouTube,
dodane na zewnętrznym hostingu.

Szczegóły konfiguracji znajdują się w artykule: Jak dodać wideo w sekcji z filmami w szablonie One Page Shop?

2. Banner

Aby dodać zdjęcia do banneru przejdź do zakładki Wygląd sklepu/ Ustawienia/ Bannery, a następnie klikając na kafelek o nazwie mainBanner wybierz odpowiednie zdjęcie.

Wskazówka

Rekomendowany rozmiar grafik dla banneru to 1920 x 540 px.

Szczegóły na temat dodawania i edycji bannerów znajdują się w artykule: Bannery.

3. Lookbook

Widok charakteryzuje się prezentacją zdjęć w formie listy i precyzyjnym oznaczeniem towarów na zdjęciu. Dzięki znacznikom umieszczonym na grafice Twoi klienci będą mogli podejrzeć towar i dodać go bezpośrednio do koszyka. Po kliknięciu na przycisk z plusem wyświetli się popup ze szczegółami towaru oraz opcją zakupu.

Wskazówka

Rekomendowany rozmiar grafik do lookbooka to 560 x 500 px.

Aby poprawnie skonfigurować lookbook, skorzystaj z naszej instrukcji zawartej w artykule: Jak skonfigurować Lookbook w Comarch e-Sklep?

4. Lista towarów

Szablon One Page Shop został stworzony z myślą o użytkownikach, którzy w swojej ofercie nie posiadają wielu produktów. Z tego powodu, na stronie głównej wyświetlanych jest 20 towarów prostych, które zostały przypisane do pierwszej kategorii w systemie Comarch ERP. Z tego powodu zalecamy utworzenie jednej kategorii, która ma być przesyłana do One Page Shop'a.

Przyklad

W systemie ERP posiadasz kategorię A, B oraz C. W kategorii A i B znajduje się po 5 produktów, zaś w kategorii C, która liczy 10 produktów. Po wykonaniu synchronizacji zostanie wyświetlonych 5 produktów z kategorii A, ponieważ jest ona pierwsza w systemie Comarch ERP.

Lista produktów wyświetlana jest w formie kafli.

Sekcja z listą towarów w One Page Shop Comarch

5. Szczegóły towaru – jakie informacje widnieją na pop-upie?

W szablonie One Page Shop Klient będzie mógł zobaczyć szczegóły danego towaru nie musząc przechodzić na osobną stronę. Wystarczy, że kliknie na kafelek z interesującym go artykułem lub naciśnie Kup teraz. Wyświetli się wówczas pop up, który zawiera w sobie szereg informacji na temat towaru, między innymi:

Cenę wraz z formą dostawy, kalkulatorami ratalnymi oraz leasingowymi,
Dostępność produktu,
Cechy towaru,
Opis towaru,
Tabelę rozmiarów,
Liczbę opinii oraz zakładkę z wystawionymi już komentarzami,
Informację o ilości osób, która kupiła dany towar,
Możliwość udostępnienia towaru w social mediach lub za pomocą linku,
Opcję „Zapytaj o towar”,
Zestawy promocyjne.

Jeśli posiadasz produkt, który nie posiada wariantów istnieje możliwość zakupu tego towaru z pominięciem pop-up podczas kliknięcia w przycisk "Kup teraz". Klikając w inne miejsce na towarze, pop-up ze szczegółami wyświetli się. Jeśli chcesz wyłączyć pop-up, możesz to zrobić z poziomu Panelu Administracyjnego przechodząc do sekcji Wygląd sklepu/ Ustawienia:

6. Koszyk

W szablonie One Page Shop składanie zamówienia jest szybkie i wygodne dla użytkownika. Koszyk został zaprojektowany tak, aby użytkownik mógł w jednym kroku wypełnić niezbędne dane:

Formularz z danymi zamawiającego oraz danymi do faktury,
Sposób dostawy,
Sposób płatności,
Miejsce na wpisanie kodu rabatowego.

Po uzupełnieniu powyższych informacji można przejść do podsumowania, w którym prezentowane są wcześniej wprowadzone dane klienta. Oprócz tego w koszyku One Page Shop jest możliwość wyświetlania ceny za sztukę. Pojawi się ona po dodaniu do koszyka kilku sztuk produktu. Przy jednej sztuce towaru wyświetlana będzie tylko cena.

Od wersji 2024.1.1 w szablonie One Page Shop dodano możliwość wyświetlania w koszyku informacji jakiej kwoty brakuje do darmowej dostawy. Funkcja ta możliwa jest do uruchomienia z poziomu Panelu Administracyjnego w sekcji Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne:

Ustawienia te można zmienić według własnego uznania, a następnie należy użyć opcji Zapisz i Publikuj.

7. Blog

Prowadzenie bloga jest istotnym elementem sklepu internetowego. Dzięki niemu sprzedawca może dzielić się swoją wiedzą i spostrzeżeniami na temat reklamowanych produktów. W ten sposób sprzedawca może podpowiedzieć klientom w jaki sposób mogą oni wykorzystać oferowane przez niego artykuły. Prowadzenie bloga ma również dobry wpływ na pozycjonowanie, ze względu na unikalne treści. Dzięki temu Twój e-Sklep może częściej pojawiać się w wynikach wyszukiwania. W szablonie One Page Shop masz możliwość tworzenia dowolnej ilości wpisów. Na stronie głównej wyświetlone zostaną trzy najnowsze. Użytkownik ma możliwość podglądu całej listy artykułów. Wystarczy, że kliknie w etykietę Najnowsze wpisy.

Szczegółowe informacje na temat konfiguracji bloga w e-Sklepie znajdują się w artykule: Jak skonfigurować blog?

8. Info-banner

Banner informacyjny pozwala na zaprezentowanie w przejrzysty sposób korzyści z zakupach w Twoim e-Sklepie.

Modyfikacji tego obszaru dokonasz z poziomu panelu administracyjnego, przechodząc do sekcji Wygląd sklepu/ Ustawienia/ Bannery. Następnie przechodząc do szczegółów banneru o nazwie info-banner dostosujesz element do swoich preferencji. Możesz skorzystać z domyślnych grafik lub dodać własne.

9. Element tekstowy ze zdjęciem

Element tekstowy ze zdjęciem charakteryzuje się możliwością wprowadzenia statycznego opisu na stronie głównej w twoim e-Sklepie. Możesz zawrzeć w nim np. podstawowe informacje na temat Twojej firmy, asortymentu sklepu lub inne wartościowe dla Ciebie treści.

Element tekstowy możesz odpowiednio skonfigurować przechodząc do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie do zakładki Obiekty, gdzie skonfigurujesz zawartość elementu.

Wskazówka

Za wyświetlanie elementu tekstowego w szablonie One Page Shop odpowiada obiekt o nazwie text-el-photo-mp-1.

Więcej informacji na temat konfiguracji znajduje się w artykule: Element tekstowy w szablonie.

10. Stopka

Dzięki modyfikacji obszaru możesz jeszcze bardziej spersonalizować swój sklep poprzez uzupełnienie stopki w szereg przydatnych informacji. Elementem tym możesz zarządzać z poziomu sekcji Wygląd Sklepu/ Ustawienia/ Nagłówek i Stopka. Szczegółowe informacje na temat konfiguracji stopki znajdują się w artykule: Rozbudowana stopka w szablonach – jak ją skonfigurować?

11. Strefa Klienta

Do Strefy Klienta w szablonie One Page Shop masz możliwość zalogowania się poprzez Facebooka oraz przez Google.

Więcej na temat konfiguracji logowania przez Facebooka i Google znajdziesz tutaj. Masz także możliwość całkowitego ukrycia Strefy Klienta na stronie sklepu internetowego. Zdecydujesz o tym zaznaczając właściwą opcję w zakładce Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne:

Wprowadzone zmiany standardowo należy zapisać i opublikować.

Jak zaktualizować szablon do najnowszej wersji?

Wskazówka

Wstęp

Jak zaktualizować szablon?

Instrukcja aktualizacji szablonów: Rubin, Szafir, Topaz i One Page Shop (dostępnych w Kreatorze Wyglądu)

wygenerowanie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Podczas dokonywania modyfikacji w szablonach zachęcamy do skorzystania z naszego Centrum Pomocy.

Wskazówka

Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Instrukcja aktualizacji szablonów: Bursztyn, Agat i Opal.

Następnie wyświetli się nowe okno, w którym należy:

wybrać tzw. slot, który zostanie nadpisany nowym (aktualnym) szablonem. W każdym e-Sklepie dostępne są 4 miejsca na wgranie szablonu, spośród których jeden szablon oznacza się jako aktywny i domyślny,
określić, czy wgrywany szablon ma podmienić istniejące bannery. Gdy parametr zostanie zaznaczony, wówczas wszystkie bannery zapisane na danym slocie zostaną usunięte i zastąpione bannerami z importowanego szablonu. Jeżeli w nadpisywanym szablonie znajdują się bannery oraz lookbooki, które mają nadal wyświetlać się w e-Sklepie, należy wskazany parametr zostawić odznaczony. Gdy parametr nie zostanie zaznaczony, wówczas dotychczasowe bannery i lookbooki nie zostaną usunięte.
Zaimportować szablon do e-Sklepu.
Wskazówka
Import szablonu jest operacją nieodwracalną i spowoduje nadpisanie dotychczasowego szablonu. W przypadku, gdy szablon był modyfikowany (dokonywano zmian w kodzie HTML) jego aktualizacja spowoduje, iż zmiany nie zostaną przeniesione. Warto wykonać eksport posiadanego szablonu do pliku w celu zapisania oraz posiadania wglądu to wprowadzanych modyfikacji. Jeżeli istnieje taka konieczność należy ponownie dokonać samodzielnej edycji szablonu.

Wszelkie zmiany należy zapisać, a następnie opublikować.

Uwaga

Jeżeli szablon nie zostanie opublikowany, wówczas nie pojawi się on w e-Sklepie.

Instrukcja aktualizacji innych szablonów (niż szablonów Comarch) oraz aktualizacji szablonów z własnymi modyfikacjami

Banner promocyjny w szablonie Topaz i One Page Shop

Banner promocyjny - jak to działa?

Dodanie banneru

W podglądzie układu szablonu, po najechaniu kursorem na obszar z bannerem promocyjnym, zobaczysz możliwość jego edycji.

Wybierz ikonę "zębatki", aby móc edytować i określić liczbę wyświetlanych towarów oraz typ promowanych towarów.

Edycja banneru

Odnajdź banner na liście nazwany "promotionalBanner", a następnie wybierz go, aby edytować i dodać zdjęcie

Po dokonaniu modyfikacji należy zapisać i opublikować zmiany. Gotowe! Teraz Twój banner promocyjny wyświetli się na stronie głównej.

Kreator Wyglądu One Page Shop (B2C)

Spis treści

Wstęp

Zastosowanie

Kto może używać tej opcji?

Tworzymy

Sekcja Szablon
Sekcja Style

Generowanie i wgrywanie szablonu

Aktualizacja szablonu

Więcej informacji

Wstęp

Jednym z kluczowych elementów, który przyczynia się do sukcesu w branży e-commerce jest oprawa wizualna sklepu. W dużym stopniu to właśnie ona wpływa na całościowe wrażenia użytkowników i ich proces zakupowy. Dzięki narzędziu - Kreator Wyglądu Comarch e-Sklep, właściciele sklepów mają możliwość stworzyć swój własny, niepowtarzalny szablon, który będzie dostosowany do ich preferencji oraz do potrzeb użytkowników.

Kreator jest dostępny pod linkiem: Kreator szablonu Comarch e-Sklep. Odnośnik znajduje się w panelu administracyjnym e-Sklepu Wygląd sklepu > Kreator wyglądu.

Zastosowanie

Kreator jest intuicyjnym narzędziem służącym do tworzenia szablonów. Jego obsługa nie wymaga umiejętności technicznych ani programowania. Wszystko odbywa się na poziomie strony internetowej, gdzie z gotowych elementów za pomocą metody "przeciągnij i upuść" możesz zaprojektować wygląd swojego sklepu. Dodatkowo, stworzony szablon jest dostosowany do wyświetlania na różnych urządzeniach (RWD).

W ramach kreatora zaprojektujesz wszystkie niezbędne obszary sklepu. Po utworzeniu szkieletu e-Sklepu, przychodzi czas na modyfikację oprawy wizualnej szablonu. Możesz dowolnie zmieniać kolory elementów znajdujących się na stronie, ikony, a także czcionkę.

Kto może używać tej opcji?

Aby móc używać tego narzędzia należy posiadać:

Comarch e-Sklep obsługujący procesy B2C,
szerokość ekranu powyżej 1280 px, a zalecana to 1920 px,
oraz jedną z przeglądarek internetowych w aktualnej wersji.

Wskazówka

Kreator wyglądu Comarch e-Sklep dostępny jedynie w wersji przeglądarkowej.

Tworzymy!

Jak zaprojektować układ szablonu?

Aby rozpocząć tworzenie szablonu należy przejść na stronę Kreatora Wyglądu. Wyświetlony zostanie powitalny komunikat. Na początku należy określić, dla jakiego modelu sprzedaży projektujesz szablon dla swojego e-Sklepu. Do wyboru masz sprzedaż detaliczną lub hurtową. Sprzedaż detaliczna przeznaczona jest dla użytkowników, którzy chcą sprzedawać swoje produkty głównie klientom indywidualnym. Wybierz odpowiedni model, a następnie naciśnij przycisk Rozpocznij pracę. Po jego kliknięciu będzie można stworzyć nowy szablon lub edytować jeden z kilku gotowych.

W sytuacji gdy wcześniej tworzony był już projekt, widoczny będzie przycisk umożliwiający dokończenie szablonu lub rozpoczęcie nowego projektu.

Opcja Nowy szablon umożliwia zbudowanie od początku nowego szablonu Topazu według Twojego indywidualnego pomysłu.

Wskazówka

Szablon One Page Shop - Demo jest gotowym szablonem, który możesz zainstalować bezpośrednio z obszaru Wygląd sklepu > Gotowe szablony Comarch.

W trzech krótkich krokach zapoznasz się z podstawowymi funkcjami kreatora. Następnie możesz już przystąpić do dalszych modyfikacji szablonu lub od razu wygenerować przygotowaną wersję szablonu One Page Shop.

Od czego zacząć?

Wybierz wersję językową Kreatora i rozpocznij pracę nad swoim szablonem. Wersje do wyboru to: język polski, angielski, niemiecki oraz francuski. Język wybieramy klikając strzałkę obok flagi i nazwy języka w lewym dolnym rogu. Przy podglądzie prac na pełnym ekranie, wybrany język zostaje zachowany i szablon będzie wyświetlał się w wybranej wersji językowej.

Gdy już wybierzesz wersję językową dla swojego Kreatora warto zacząć od nazwania swojego przyszłego szablonu. Można to zrobić klikając Zmień i wpisując nazwę w lewym górnym rogu, zastępując nazwę "One Page Shop (2023.1)". Nazwa ta będzie widoczna po zaimportowaniu szablonu do panelu administracyjnego oraz po wyeksportowaniu szablonu do pliku XML wraz z datą i godziną jego wygenerowania.

Krok 1 - Sekcja Szablon

W tej sekcji należy zaprojektować wygląd strony głównej naszego Comarch e-Sklepu. Strona główna może składać się z następujących elementów:

Nagłówek,
Baner,
Widget,
Siatka towarów
Newsletter,
Sekcja z filmami
Blog,
Element tekstowy,
Banner informacyjny,
Lookbook
Stopka.

Po rozwinięciu każdej z sekcji ukażą się dostępne elementy:

Metodą "Przeciągnij i upuść" przenosimy wybrane elementy na obszar po prawej stronie:

Postępuj analogicznie z pozostałymi elementami.

Nagłówek

Sekcja „Nagłówek” prezentuje dwa widoki.

Banner

Sekcja "Banner" pozwala wybrać jedną z sześciu możliwości prezentacji banerów. Informacje dotyczące rekomendowanych rozmiarów obrazków w bannerach opisaliśmy w tym artykule. Jest on widoczna tylko dla strony głównej i listy towarowej.

Banner promocyjny

Sekcja "Banner promocyjny" dodać banner prezentujący promocje.

Widget

Sekcja "Widget" pozwala dodać jeden z dwóch dostępnych wariantów, które pozwolą zaprezentować następujące funkcje:

Widget-banner-1
- Dodanie zdjęcia,
- Dodanie tekstu nagłówka (tekst pionowy),
- Dodanie tekstu przycisku (tooltip).
- Dodanie linku do przycisku,
- Dodanie tekstu..

Widget-banner-1
- Dodanie zdjęcia,
- Dodanie tekstu nagłówka (tekst pod zdjęciem),
- Dodanie tekstu,
- Dodanie linku do tekstu.

Siatka towarów

Na szczegółach wybranego obiektu (Siatka towarów) określamy jakie dokładnie towary zostaną zaprezentowane w sekcji „Nasze produkty".

Dodatkowo po najechaniu kursorem na tę sekcję, wybierając Opcje, możemy ustawić następujące opcje:

wybierz sposób wyświetlania produktów na liście,
prezentowanie drugiego zdjęcia towaru na kiście,
dodatkowe informacje na liście towarów,
graficzna prezentacja wariantów towaru,
po dodaniu do koszyka,
pozwalaj na udostępnianie towarów,,
pomijaj popup ze szczegółami przy kupowaniu towarów prostych.

Sekcja "Newsletter" pozwala dodać jeden z czterech dostępnych wariantów zapisu klientów do subskrypcji. Dwie sekcje pokazują się w formie wyskakującego okienka (pop-up), które prezentowane są wyłącznie na stronie głównej e-Sklepu (newsletter-3, newsletter-4). Wszystkie teksty dostępne w nowym newsletterze są edytowalne w ustawieniach szablonu w menu Wygląd sklepu > Ustawienia > Bannery > Newsletter banner.

Sekcja z filmami

Sekcja z filmami prezentuje jeden widok. Film wprowadza się w ustawieniach szablonu w sekcji Strona główna > Ustawienia sekcji z filmami.

Blog

Sekcja "Blog" pozwala wybrać spośród dwóch dostępnych wariantów. Blog -1 prezentuje tylko zdjęcia, natomiast Blog-2 oraz Blog-3 zawiera również krótkie opisy wprowadzające do pozostałej treści wpisu.

Element tekstowy

Element tekstowy pozwala na zamieszczenie dłuższego opisu, który będzie wyświetlany na stronie głównej Comarch e-Sklep. W kreatorze wyglądu Comarch są do wyboru dwa warianty:

element tekstowy z samym tekstem,
element tekstowy z możliwością dodania zdjęcia.

Tekst wprowadza się edytując obiekt tekstowy w ustawieniach szablonu: Wygląd sklepu > Ustawienia > Edytuj ustawienia zaawansowane > Obiekty:

text-el-no-photo-mp-1 – element bez obrazka,
text-el-photo-mp-2 – element z obrazkiem.

Po wybraniu wszystkich niezbędnych sekcji nasza strona główna powinna być gotowa. Efekt naszej pracy możemy podejrzeć klikając Podgląd w prawym górnym rogu. Dostępny jest podgląd w wersji mobilnej i desktopowej.

Strona główna wymaga dwóch podstawowych elementów: nagłówka oraz stopki. Pozostałe elementy nie są obowiązkowe.

Banner informacyjny

Banner informacyjny pozwala na zaprezentowanie w przejrzysty sposób korzyści z zakupach w Twoim sklepie. Dotyczą one obszarów: dostawy, jakości i kontaktu z klientem. Banner możesz dodać tylko do strony głównej lub do wszystkich stron. Sekcja Odkryj Comarch e-Sklep różni się prezentacją oraz elementami między bannerami i zawiera:

info-banner-1 – element z ikonkami i podpisem
- Szybka dostawa,
- Gwarancja jakości,
- Odbiór osobisty,
- Reklamacje,
- Zwroty towarów,

info-banner-3 – element z ikonkami i krótką informacją
- Ekspresowa wysyłka,
- Darmowa dostawa,
- Obsługa klienta,

info-banner-3 – element z ikonkami i krótkim opisem
- Ekspresowa dostawa,
- Darmowa dostawa,
- Strefa kontaktu.

info-banner- 4 – Poznaj produkt
- Wyróżnij główny towar – zdjęcie główne,
- Pozostałe towary – zdjęcia na zewnątrz,

Lookbook

Sekcja "Lookbook" prezentuje jeden widok, który pozwoli na promowanie wielu towarów w bardzo atrakcyjnej formie.

Koszyk

Sekcja "Koszyk" pozwala dodać jeden z trzech dostępnych wariantów, gdzie każdy z nich posiada inną ilość kroków.

Stopka

Sekcja "Stopka" zawiera jeden widok do wyboru.

W każdym widoku widnieją strony statyczne, którymi można zarządzać w sekcji Wygląd Sklepu > Ustawienia > Nagłówek i Stopka. Dla każdej z sekcji wyświetla się jej utworzona w panelu nazwa. W stopce znajdują się także informacje na temat rodzaju prezentowanych cen w e-Sklepie (brutto czy netto) oraz komunikat @Comarch SA 2023. All rights reserved Powered by Comarch e-Sklep. Dodatkowo istnieje możliwość umieszczenia w stopce odnośników do mediów społecznościowych oraz ich ikony. W stopce trzeciej możemy dodać ikony naszych dostawców oraz form płatności wykorzystywanych w sklepie.

Następnie możemy przejść do modyfikacji wyglądu naszego szablonu. W tym celu należy przejść do zakładki Style.

Style

Jak zmienić kolory, czcionki oraz ikony?

Po dodaniu elementów strony możemy dodatkowo podejrzeć, jak będzie wyglądał nasz przyszły szablon. W tym celu należy przejść do zakładki Style.

Dodatkowo w zakładce Style możemy zmodyfikować wygląd naszego szablonu. Zmianie podlegają:

motyw kolorystyczny,
czcionka,
ikony,
styl okien i przycisków.

Motyw kolorystyczny

Aby zmienić kolor naszego szablonu należy przejść do sekcji Motyw kolorystyczny, gdzie do wyboru przygotowaliśmy 7 gotowych motywów.

Wskazówka

W aktualnej wersji Kreatora dodaliśmy nowy, ciemny motyw kolorystyczny.

Każdy z motywów możemy edytować według indywidualnych preferencji. Możemy zmodyfikować kolor poszczególnych elementów (m.in.: tło strony, tło nagłówka, nazwę towaru, czy nawet drugorzędny kolor tekstu w newsletterze). Zmiany należy zapisać klikając Zapisz. Jeśli wykonane zmiany nie są zadowalające, możemy przywrócić ustawienia domyśle dla danego motywu kolorystycznego, klikając przycisk Przywróć.

Czcionki

W zależności od potrzeb istnieje możliwość wybrania czcionki. Dla naszych klientów udostępniliśmy jej 13 różnych typów. Pod nazwą każdej z nich znajduje się przykładowy wygląd w różnych formatach.

Ikony

Mamy do wyboru 3 różne warianty wyglądu ikon. Dodatkowo istnieje możliwość wyboru w jakiej postaci wyświetla się ikona koszyka (torba, wózek lub koszyk) oraz loader.

Wskazówka

Od teraz możesz zmienić rodzaj loadera, wybierając jedną z 5 propozycji widocznych powyżej.

Styl okien i przycisków

Ostatnim elementem, który możemy modyfikować z poziomu zakładki Style jest styl okien i przycisków. Mamy do wyboru 3 różne warianty zaokrągleń.

Generowanie i wgrywanie szablonu

Po zaprojektowaniu wyglądu szablonu możemy go wygenerować i pobrać na dysk korzystając z przycisku Generuj widocznego w prawym górnym rogu:

Obok przycisku Generuj dostępna jest również opcja Importuj szablon, umożliwiająca wgranie wcześniej zapisanego szablonu z dysku i ponowną jego edycję.

W przypadku prawidłowego wygenerowania szablonu wyświetlony zostanie komunikat informujący o tym fakcie i pobrany plik.

Pobrany szablon należy zaimportować w Comarch e-Sklep w zakładce Wygląd sklepu > Zaimportuj szablon z Kreatora Wyglądu.

W szablonie Topaz znajduje się informacja na temat godziny wygenerowania szablonu w Kreatorze. Taka informacja znajduje się w panelu administracyjnym w menu: Wygląd sklepu > Ustawienia > Więcej (trzy kropki), gdzie należy wybrać opcję Edytuj ustawienia zaawansowane, a potem ponownie Więcej > Edytuj HTML. Następnie z listy plików należy wybrać _layout.html. Informacje na temat modyfikacji, w tym godzina ostatniej modyfikacji, znajdują się nad oknem edycji pliku. Jeżeli plik nie był modyfikowany, wówczas godzina odpowiada godzinie wygenerowania szablonu w kreatorze.

Kreatorze wyglądu istnieje również możliwość cofania się podczas tworzenia szablonu, w ramach której obsługujemy do 30 kroków w wstecz. Dodatkowo możemy także wykonywać krok do przodu. Zapisywane są wszystkie zmiany na elementach, informacje odnośnie styli, czcionek, ikonach oraz nazwie szablonu.

Aktualizacja szablonu

W Kreatorze Wyglądu znajduje się opcja aktualizacji poprzednich wersji szablonu. W celu zaktualizowania całego szablonu należy wgrać plik z poprzednim szablonem do Kreatora Wyglądu, według tej instrukcji:

po uruchomieniu strony kreatora wybierz opcję: Stwórz nowy projekt,
wybierz Nowy szablon,
w prawym górnym rogu wybierz opcję Importuj szablon,

następnie zaimportuj plik z szablonem, który ma być zaktualizowany. Po poprawnym zaimportowaniu szablonu otrzymasz informację zwrotną:

po wgraniu szablonu do aktualizacji użyj opcji Generuj.

Dzięki temu w prosty sposób można starsze szablony Topaz podnieść do wersji aktualnej.

Więcej informacji

Więcej informacji można znaleźć w artykułach o wyglądzie sklepu oraz o dostosowaniu wyglądu.

Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Spis treści

Wstęp

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jak zacząć?

Aktualizacja szablonu

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Pozostałe zmiany

Gdzie należy uzupełnić teksty alternatywne (alt)?

Zalecenia dla udostępnianych treści – ogranicz migające elementy

Dostosuj komunikację mailową – aktualizacja lub zmiana treści e-mail

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Wstęp

Wskazówka

Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami

W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz jeden ze standardowych szablonów Comarch, czyli: Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii.

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jako właściciel e-Sklepu lub Partner Comarch zadbaj, aby zadbać o dostosowanie swojej witryny do obowiązujących przepisów. Nowe wymogi to wspólna odpowiedzialność:

Comarch e-Sklep – zajmiemy się kwestiami technicznymi w przypadku Gotowych Szablonów Comarch, do których należą m.in. zmiany w kodzie,
Właściciel, administrator lub Partner sklepu – musisz zadbać o treści i elementy, które dodajesz samodzielnie. Chodzi tu głównie opis produktów, zdjęcia i grafiki czy identyfikację wizualną.

Jak zacząć?

Aktualizacja szablonu

Wskazówka

Jak zaktualizować szablon?

Wygenerowanie zupełnie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
Wybór i edycja jednego z gotowych układów i jego modyfikacja,
Import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Wskazówka

Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?

Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony:

Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".

Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu:

W panelu bocznym pojawi się dokładna informacja na temat koloru.

W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.

Gdzie dostosować kolory?

Kolory w szablonie możesz zmienić korzystając z Kreatora Wyglądu. Po imporcie szablonu, edycji lub stworzeniu nowego projektu, przejdź do zakładki "Style" i edytuj motyw kolorystyczny:

Następnie możesz zmieniać swobodnie kolor na wybranych elementach:

Zmian możesz dokonać także z poziomu panelu administracyjnego, przechodząc do zakładki Wygląd Sklepu > Ustawienia.

Pozostałe zmiany

Teksty alternatywne ("Alt", alty) w Comarch e-Sklep

Pomaga osobom korzystającym z czytników ekranu, które odczytują tekst alternatywny na głos,
Poprawia dostępność stron internetowych, czyniąc je bardziej przyjaznymi dla wszystkich użytkowników,
Wpływa na pozycjonowanie w wyszukiwarkach, ponieważ dobrze opisane obrazy są lepiej interpretowane przez algorytmy Google.

Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:

Przyklad

Poprawne :

Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.

Niepoprawne:

Sukienka.
Buty sportowe.
Fajna kanapa.
Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP

Korzystam z Comarch ERP Optima

Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego:

Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:

Korzystam z Comarch ERP XT

Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".

W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii

5. Dla zdjęć w Blogu

6. Dla zdjęć w plikach użytkownika w sekcji "Twoje pliki"

Wskazówka

Atrybut title - obowiązkowy czy nie?

Zalecenia dla udostępnianych treści - ogranicz migające elementy

1.Obrazki i bannery

2.Materiały audio i viedo

Audiodeskrypcja to dodatkowy opis dźwiękowy, który przedstawia istotne elementy wizualne nagrania osobom niewidzącym,
Transkrypcja to zapis tekstowy całej treści audio, umożliwiający odbiór treści osobom niesłyszącym, może to być w formie napisów dla audiodeskrypcji.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

1.Treści mailowe są domyślne, nie zostały sformatowane

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Struktura Stosuj nagłówki (<h1>, <h2> itd.) dla przejrzystości. Używaj krótkich akapitów i list punktowanych.
Tekst i formatowanie Zapewnij wysoki kontrast między tekstem a tłem. Wybieraj czytelne czcionki (sans-serif, min. 12-14 px). Nie używaj wyłącznie koloru do przekazywania informacji.
Obrazy i multimedia Dodawaj tekst alternatywny (alt text) do obrazów. Unikaj tekstu osadzonego w grafikach, jeśli można go przesłać jako tekst.
Linki i przyciski Stosuj opisowe teksty linków zamiast „Kliknij tutaj”. Upewnij się, że są łatwe do kliknięcia na ekranach dotykowych.
Język i czytelność Używaj prostego i zrozumiałego języka. Unikaj skrótów i branżowego żargonu, jeśli odbiorca może ich nie znać.
Testowanie Sprawdź wiadomość na różnych urządzeniach i czytnikach ekranu. Zweryfikuj zgodność ze standardami WCAG.

Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS

3.Załączniki (m.in. instrukcje, katalogi)

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Szablon dla Gastronomii

Dla Gastronomii - przewodnik konfiguracji

Spis treści

Wstęp

Dedykowane konfiguracje

Wybor wariantów – konfiguracja „rozmiar burgera” oraz „rodzaj pieczywa”

Składniki i dodatki

Składniki

Dodatki

Alergeny

Określenie i walidacja obszaru dostawy

Określenie obszaru za pomocą mapy

Określenie obszaru za pomocą kodu pocztowego

Realizacja zamówień

Orientacyjny czas realizacji zamówienia

Zezwól na składanie zamówień tylko w wybranym zakresie godzin

1. Wstęp

Szablon jest dedykowany do sprzedaży jedzenia online, możliwy do swobodnej konfiguracji. Jest responsywny, dzięki czemu idealnie nadaje się do prezentacji przepisów, menu lub promocji produktów żywnościowych. Może zostać zastosowany zarówno do niewielkiej, lokalnej pizzerii, jak i do restauracji, piekarni czy cukierni. Wszystkie elementy są zaprojektowane tak, aby jak najlepiej zaprezentować ofertę oraz ułatwić użytkownikowi nawigację i szybkie złożenie zamówienia. Główne wyróżniki szablonu to:

dostosowana lista produktów w formie MENU,
popup z możliwością personalizacji zamówienia (dodanie kolejnych składników i dodatków),
wyświetlenie orientacyjnego czasu realizacji zamówienia,
komunikat o braku możliwości składania zamówienia w określonych dniach i godzinach,
możliwość ustawienia rejonu dostawy,
wyświetlanie alergenów.

Szablon współpracuje z Comarch e-Sklep w każdej wersji (Light, Standard, Enterprice oraz B2B) oraz Comarch ERP XT, ERP XL oraz ERP Optima. Przejdź do naszego sklepu demonstracyjnego i zobacz, jak prezentuje się szablon dla gastronomii w Comarch e-Sklep. W tym artykule skupiliśmy się na prezentacji dedykowanych funkcji dla tego szablonu. Znajdziesz tu krótkie instrukcje konfiguracji. Podstawowe informacje na temat szablonu dla gastonomii znajdziesz w artykule: Dla gastronomii - podstawowe informacje.

2. Dedykowane konfiguracje

Szablon Dla Gastronomii posiada dedykowane funkcje, które są możliwe do swobodnej modyfikacji. Funkcje te nie są dostępne w innych, standardowych szablonach. W szablonie dla Gastronomii kupowanie jest możliwe bezpośrednio z listy. Menu, bo tak została nazwana sekcja z listą towarów, dostępne jest do prezentacji w dwóch wariantach: kafli oraz listy. Zmiana układu listy możliwa jest z poziomu panelu administracyjnego (Wygląd sklepu/ Ustawienia/ zakładka Zarządzanie kaflem produktu). Podczas kupowania bezpośrednio z menu wyświetla się popup, który posiada następujące informacje:

zdjęcie produktu,
opis,
możliwe do wyboru warianty,
dodatkowe produkty, ktore można umiejscowić pod nazwą „Składniki” czy „Dodatki”.

Dzięki temu możliwa jest personalizacja danego towaru, a Klient w szybki sposób może wybrać ekstra składniki czy dodatki w postaci np. sosów do dania głównego. Może również wybrać rodzaj pieczywa czy rozmiar burgera. Nad przyciskiem "dodaj do koszyka" znajduje się tzw. przycisk drugorzędny. Służy on do wpisania liczby, przez którą wartości wybrane w popupie oraz towar nadrzędny (jakim w tym przypadku jest burger) zostaną pomnożone.

2.1. Wybór wariantów - konfiguracja "rozmiar burgera" oraz "rodzaj pieczywa"

Burger został skonfigurowany jako fantom. Informacje takie jak "rozmiar burgera" czy "rodzaj pieczywa" to jego warianty. Instrukcję dotyczącą konfiguracji fantomów znajdziesz w artykule: Fantom (towar zgrupowany) – konfiguracja

Wskazówka

Na zrzucie ekranu w popupie widnieje fantom dwupoziomowy (rozmiar burgera i rodzaj pieczywa), co oznacza, że należy dodać dwa atrybuty grupujące na karcie towaru w systemie ERP.

2.2. Składniki i dodatki

"Składniki" oraz "dodatki" to towary proste, które klienci mogą dodać do dania głównego. Poprawnie skonfigurowane wyświetlą się na popupie podczas kupowania z listy. W systemach ERP definiowane są jako zamienniki lub towary podobne. Jest kilka rzeczy, o których musisz pamiętać podczas konfiguracji dodatków i składników:

towar nie może posiadać atrybutów grupujących,
produkty muszą mieć zdefiniowane przynajmniej jedno zdjęcie,
towar musi być zamiennikiem jednostronnym,
łączna ilość zamienników nie może przekraczać 20 towarów prostych. Ograniczenie to dotyczy każdego z niżej wskazanych systemów ERP.

Poniżej zamieściliśmy instrukcję konfiguracji dla poszczególnych systemów ERP.

2.3. Składniki

2.3.1. W jaki sposób zostały skonfigurowane "Składniki" w ERP Optima?

Towary znajdujące się w popupie jako "składniki" to zamienniki utworzone w systemie Comarch ERP Optima. Aby towar wyświetlił się poprawnie, należy: Krok 1. Utworzyć w systemie Comarch ERP Optima kategorię o nazwie i kodzie "INNE",

Wskazówka

Grupa musi być domyślną dla składników, które się w niej znajdują. Dodatkowo musi ona zostać dodana jako podgrupa grupy głównej, która została wybrana na definicji oddziału.

Krok 2. Utworzyć towar prosty (czyli np. dodatkowy ser), przyporządkować go do grupy INNE, Krok 3. Do towaru nadrzędnego (w tym przypadku burgera) dodać zamiennik jednostronny, Krok 4. Po wykonaniu synchronizacji produkty będą widoczne na popupie. Dodatkowo, produkty, które są w kategorii "INNE" nie wyświetlą się w menu. Grupa ta nie jest także widoczna w menu kategorii.

2.3.2 W jaki sposób zostały skonfigurowane "Składniki" w ERP XT?

Towary znajdujące się w popupie jako "składniki" to produkty podobne utworzone w systemie Comarch ERP XT. Aby towar wyświetlił się poprawnie, należy: Krok 1. Utworzyć w systemie Comarch ERP XT grupę produktów o nazwie "INNE", Krok 2. Utworzyć towar (np. dodatkowa szynka), przyporządkować go do grupy "INNE". Krok 3. Na karcie towaru nadrzędnego (w tym przypadku burgera) dodać produkt podobny (jednostronny), Krok 4. Po wykonaniu synchronizacji produkty będą widoczne na popupie. Dodatkowo, produkty, które są w kategorii "INNE" nie wyświetlą się w menu. Grupa ta nie jest także widoczna w menu kategorii.

2.3.3 W jaki sposób zostały skonfigurowane "Składniki" w ERP XL?

Towary znajdujące się w popupie jako "składniki", to produkty podobne utworzone w systemie Comarch ERP XL. Aby towar wyświetlił się poprawnie, należy: Krok 1. Utworzyć w systemie Comarch ERP XL grupę produktów o nazwie "INNE". Grupa musi zostać dodana jako podgrupa grupy głównej, która została wybrana na definicji oddziału,

Przyklad

Jeśli na definicji oddziału w zakładce Eksport/ Cennik wybierzesz grupę Szablon gastronomiczny:

To należy w niej dodać podgrupę o nazwie "INNE".

Krok 2. Utworzyć towar prosty(np. szynka), przyporządkować go do grupy "INNE". Krok 3. Na karcie towaru nadrzędnego (w tym przypadku pizza hawajska) dodać zamiennik(jednostronny) w zakładce Zamienniki/ Zamienniki. Dodatkowo w edycji zamienników w zakładce "Miejsca w strukturze firmy" trzeba dodać oddział e-Sklepu,

Krok 4. Po wykonaniu synchronizacji produkty z grupy "INNE" będą widoczne na popupie jako składniki, ale nie wyświetlą się jako osobna grupa "INNE" w menu kategorii.

2.4 Dodatki

2.4.1 W jaki sposób zostały skonfigurowane "Dodatki" w Comarch ERP Optima?

Towary znajdujące się w popupie jako "dodatki" to zamienniki utworzone w systemie Comarch ERP Optima. Aby towar wyświetlił się poprawnie, należy: Krok 1. Utworzyć towar prosty (czyli np. oliwa z oliwek), przyporządkować go do grupy, która jest udostępniona do e-Sklepu, najwygodniej jeśli posiada ona nazwę "DODATKI". Krok 2. Do towaru nadrzędnego (w tym przypadku burgera) dodać zamiennik jednostronny, Efekt: Po wykonaniu synchronizacji produkty będą widoczne na popupie. Dodatkowo, produkty z kategorii "DODATKI" wyświetlą się w menu, a grupa będzie widoczna w menu kategorii.

2.4.2 W jaki sposób zostały skonfigurowane "Dodatki" w Comarch ERP XT?

Towary znajdujące się w popupie jako "dodatki" to produkty podobne utworzone w systemie Comarch ERP XT. Aby towar wyświetlił się poprawnie, należy: Krok 1. Utworzyć towar (np. sos czosnkowy), przyporządkować go do grupy, która jest udostępniona do e-Sklepu, najwygodniej o nazwie "DODATKI" lub innej. Krok 2. Do towaru nadrzędnego (w tym przypadku burgera) dodać produkt podobny (jednostronny), Efekt: Po wykonaniu synchronizacji produkty będą widoczne na popupie jako dodatki. Kategoria "DODATKI" wyświetli się w Menu, obok innych kategorii stworzonych w systemie ERP XT.

2.4.3 W jaki sposób zostały skonfigurowane "Dodatki" w Comarch ERP XL?

Towary znajdujące się w popupie jako "dodatki" to zamienniki utworzone w systemie Comarch ERP XL. Aby towar wyświetlił się poprawnie, należy: Krok 1. Utworzyć towar prosty (czyli np. cola), przyporządkować go do grupy, która jest udostępniona do e-Sklepu, najwygodniej o nazwie "DODATKI". Krok 2. Na karcie towaru nadrzędnego (w tym przypadku pizza hawajska) dodać zamiennik(jednostronny) w zakładce Zamienniki/ Zamienniki. Dodatkowo w edycji zamienników w zakładce "Miejsca w strukturze firmy" trzeba dodać oddział e-Sklepu,

Efekt: Po wykonaniu synchronizacji produkty będą widoczne na popupie. Dodatkowo, produkty z kategorii "DODATKI" wyświetlą się w menu kategorii, które widoczne jest nad menu

3. Alergeny

Szablon dla Gastronomii został dostosowany do wyświetlania tabel z alergenami, które mogą znaleźć się w produktach. Alergeny możesz wyświetlić zatem za pomocą:

konfiguracji banneru „Tabela”,
dodania dowolnej treści na stronie użytkownika,
oznaczeniu ich jako atrybuty.

3.1. Alergeny jako atrybuty - widoczność na szczegółach towaru - Konfiguracja ERP Optima

Aby dodać spis produktów lub substancji uczulających, który zostanie wyświetlony w zakładce "Alergeny" widocznej na szczegółach towaru, należy: Krok 1. Utworzyć w ERP Optima atrybut tekstowy o nazwie ALERGENY

Krok 2. Atrybut należy dodać do towaru, na którym na być widoczny. Aby to zrobić, należy przejść z pozycji cennika do zakładki Atrybuty Krok 3. W polu "wartość" należy wpisać alergeny, które mogą się znaleźć w produkcie. Pole to posiada ograniczenie ilości znaków . W tym wypadku, jeśli zabraknie miejsca, to możliwe jest utworzenie kolejnego atrybutu, tym razem o nazwie ALERGENY_DWA. Kolejno można tworzyć atrybuty ALERGENY_TRZY itd.

Efekt: Po synchronizacji alergeny zostaną wyświetlone na szczegółach towaru w zakładce "Alergeny"

3.2. Alergeny jako atrybuty - widoczność na szczegółach towaru - Konfiguracja ERP XT

Aby dodać spis produktów lub substancji uczulających, który zostanie wyświetlony w zakładce "Alergeny" dostępnej na szczegółach towaru, należy: Krok 1. Utworzyć w systemie ERP XT atrybut o nazwie ALERGENY

Krok 2. Atrybut należy dodać do towaru, na którym ma być widoczny. Aby to zrobić, należy przejść na kartę towaru w zakładkę e-Sklep:

Krok 3. W polu "wartość PL" należy wpisać alergeny, które mogą się znaleźć w produkcie. Pole to posiada ograniczenie. W tym wypadku, jeśli zabraknie miejsca, to możliwe jest utworzenie kolejnego atrybutu, tym razem o nazwie Alergeny_dwa. Kolejno można tworzyć atrybuty Alergeny_trzy itd. Efekt: Po synchronizacji alergeny zostaną wyświetlone na szczegółach towaru w zakładce "Alergeny"

3.3. Alergeny jako atrybuty - widoczność na szczegółach towaru - Konfiguracja ERP XL

Krok 1. Utworzyć w systemie ERP XL atrybut tekstowy o nazwie ALERGENY

Krok 2. Atrybut należy dodać do towaru, na którym na być widoczny. Aby to zrobić, należy przejść z pozycji cennika do zakładki Atrybuty:

Krok 3. W polu "wartość" należy wpisać alergeny, które mogą się znaleźć w produkcie. Pole to posiada ograniczenie ilości znaków . W tym wypadku, jeśli zabraknie miejsca, to możliwe jest utworzenie kolejnego atrybutu, tym razem o nazwie ALERGENY_DWA. Kolejno można tworzyć atrybuty ALERGENY_TRZY itd. Efekt: Po synchronizacji alergeny zostaną wyświetlone na szczegółach towaru w zakładce "Alergeny"

4. Określenie i walidacja obszaru dostawy

W szablonie dla Gastronomii możesz określić obszar dostawy. Możesz to zrobić na dwa sposoby: określenie za pomocą kodu pocztowego oraz mapy. Aby użyć funkcji w swoim e-Sklepie należy: Krok 1. Przejść do panelu administracyjnego, a następnie do zakładki Wygląd Sklepu/ Ustawienia/ zakładka Ogólne. Krok 2. Następnie odnajdź "obszar dostaw" i określ obszar dostawy za pomocą mapy lub kodów pocztowych. Możesz zrezygnować z określania obszaru dostawy, wybierając opcję "nie określaj obszaru".

4.1. Określenie obszaru za pomocą mapy

Krok 1. Aby określić obszar za pomocą mapy wybierz odpowiednią opcję z listy. Po zaznaczeniu "Mapy" ukaże się mała mapa. Kliknij niebieski przycisk "wybierz obszar", po czym ustaw odpowiednio pinezki.

Krok 2. Następnie, po określeniu obszaru, zapisz obszar, wybierając przycisk znajdujący się poniżej mapki.

Efekt: Po zapisaniu obszaru na mapie zaznaczony będzie odpowiedni, określony przez Ciebie rejon. Aby zmienić lub usunąć obszar, wystarczy wybrać przycisk "wyczyść obszar", który pojawi się w lewym, dolnym rogu poniżej mapy. Zmiany należy zapisać i opublikować.

4.2. Określenie obszaru za pomocą kodu pocztowego

Krok 1. Aby określić obszar za pomocą kodu pocztowego wybierz odpowiednią opcję z listy. Krok 2. Po zaznaczeniu "Kodów pocztowych" ukaże się obszar, w którym należy wpisać obsługiwane kody. Po wpisaniu kodu, aby dodać kolejny, kliknij "Dodaj kod pocztowy". Zmiany należy zapisać i opublikować.

Efekt: Wprowadzone przez Ciebie kody pocztowe będą widoczne w panelu administracyjnym. Możesz je usunąć poprzez kliknięcie krzyżyka. Nie ma ograniczeń ilości dodawanych kodów. Efekt w e-Sklepie: Klient po uzupełnieniu danych zamawiającego otrzyma od razu informację, czy jego adres znajduje się w obszarze dostawy.

5. Realizacja zamówień

W szablonie dla Gastronomii możesz określić orientacyjny czas realizacji zamówienia, a także określić, kiedy jest ono możliwe do złożenia.

5.1. Orientacyjny czas realizacji zamówienia

Krok 1. Aby włączyć funkcję wystarczy przejść z poziomu panelu administracyjnego do obszaru Wygląd sklepu/ Ustawienia/ zakładka Ogólne po czym odnaleźć sekcję "Realizacja zamówień". Krok 2. Następnie w "Orientacyjny czas realizacji zamówienia" należy wpisać czas, w jakim zazwyczaj dostarczasz zamówienie:

Efekt: Po złożeniu zamówienia Twoi Klienci zobaczą thank you page z odliczaniem czasu do realizacji:

5.2. Zezwól na składanie zamówień tylko w wybranym zakresie godzin

We wspomnianym obszarze "Realizacja zamówień" istnieje także funkcja, która pozwala na składanie zamówień tylko w wybranym zakresie godzin oraz blokowaniu składania zamówień w wybrane dni (np. święta). Krok 1. Aby ją uruchomić, wystarczy zaznaczyć checbox " Zezwój na składanie zamówień tylko w wybranym zakresie czasu" Krok 2. W tym miejscu możesz ustawić godziny oraz dni, w których klienci mogą składać zamówienia. Zapisz wprowadzone godziny.

Jeśli chcesz usunąć "aktualnie zablokowane daty dostaw" , naciśnij krzyżyk znajdujący się po prawej stronie określonej daty. Efekt: Klient przeglądający menu przy próbie złożenia zamówienia w czasie, którego nie obejmuje zakres realizacji zamówień, zobaczy wówczas następujący komunikat:

Dla Gastronomii - podstawowe informacje

Spis treści

Wstęp

Konfiguracja szablonu Dla Gastronomii w panelu administracyjnym

Ustawienia Strony Głównej

Elementy w szablonie

1. Nagłówek

2. Banner

3. Menu

4. Popup – kupowanie z listy

5. Koszyk

6. Widget

7. Lookbook

8. Blog

9. Info-banner

10. Element tekstowy ze zdjęciem

11. Stopka

12. Strefa Klienta

Wstęp

dostosowana lista produktów w formie MENU,
popup z możliwością personalizacji zamówienia (dodanie kolejnych składników i dodatków),
wyświetlenie orientacyjnego czasu realizacji zamówienia,
komunikat o braku możliwości składania zamówienia w określonych dniach i godzinach,
możliwość ustawienia rejonu dostawy,
wyświetlanie alergenów.

Przejdź do naszego sklepu demonstracyjnego i zobacz, jak prezentuje się szablon dla gastronomii w Comarch e-Sklep. W niniejszym artykule zawarliśmy podstawowe informacje na temat funkcji dostępnych w szablonie. Dzięki udogodnieniom i możliwości edycji niektórych elementów możesz łatwo spersonalizować swój e-Sklep. Szczegółowe instrukcje z dedykowanymi konfiguracjami znajdziesz w artykule: Dla gastronomii - przewodnik konfiguracji. Szablon możesz dowolnie modyfikować z poziomu Kreatora Wyglądu dla sprzedaży detalicznej (B2C). Wystarczy, ze przejdziesz na stronę Kreatora i edytujesz szablon "Dla Gastronomii":

Konfiguracja szablonu Dla Gastronomii w panelu administracyjnym

Z poziomu panelu administracyjnego możesz dokonywać edycji każdego elementu znajdującego się na stronie. Możesz także ustalać sposoby dostaw oraz płatności. Po przejściu do sekcji Wygląd sklepu/ Ustawienia dostępne są ustawienia dla zakładek: Ogólne, Strona główna, Dodatkowe, Zarządzanie strefą klienta oraz Zarządzanie kaflem produktu.

W zakładce Ogólne możesz dokonać zmian w motywie kolorystycznym Twojego e-Sklepu. Z tego poziomu również możesz dokonać m.in takich zmian, jak: prezentacja punktów odbioru osobistego, edycja terminu dostaw, ustalenie orientacyjnego czasu realizacji zamówienia czy określenie rejonu dostawy.
W zakładce Strona główna znajdują się ustawienia, które pomagają „układać” poszczególne elementy na stronie głównej. W tym miejscu możesz zdecydować, gdzie powinny wyświetlać się produkty, lookbook i bannery. Część wyświetlanych elementów możesz ukryć, a te które znajdują się w nagłówku, także wyróżnić.
W zakładce Dodatkowe widnieją ustawienia, dzięki którym możesz decydować o możliwości udostępniania towarów w poszczególnych mediach społecznościowych. Możesz włączyć prezentację tabeli alergenów na stronie towaru. Z tego poziomu możliwe jest również ustawienie poziomu zaokrągleń okien i przycisków w szablonie, a także zezwolenie na tłumaczenie strony przez Tłumacz Google.
W zakładce Zarzadzanie strefą klienta znajdziesz ustawienia listy elementów, które mają być widoczne dla niego po zalogowaniu do strefy klienta,
W zakładce Zarządzanie kaflem produktu możesz ustawić domyślny sposób wyświetlania menu (czyli towarów na liście) oraz zdecydować, czy Twoi klienci mogą kupować bezpośrednio z niego lub sekcji produktów proponowanych (na przykład promocji).

Ustawienia Strony Głównej

Ustawienia zawarte w tym miejscu odpowiadają za elementy, które wyświetlane są na stronie głównej. Możesz zmieniać ich kolejność, nazwę, ukryć je lub wyróżnić. W tym miejscu wyróżnia się następujące sekcje:

Ustawienia nagłówka strony

W nagłówku znajdują się następujące elementy:

Logotyp,
Odnośnik do listy z produktami (nasze produkty),
Blog,
Lookbook,
Informacje o firmie,
Kontakt,
Koszyk,
Możliwość wyboru języka i waluty w e-Sklepie.

Ustawienia treści strony

Elementy w szablonie

1. Nagłówek

W szablonie dla gastronomii dostępne są dwa rodzaje nagłówka: header-1 oraz header-6. Te rodzaje nagłówków dostępne są w Kreatorze i posiadają funkcję tzw. przyklejonego nagłówka. Przy przewijaniu strony u góry ekranu zawsze widoczny jest pasek z częścią elementów nagłówka (m.in. menu). Dzięki temu przeglądający ofertę w każdym miejscu strony ma dostęp do skróconej wersji nagłówka strony. Sekcja „Nagłówek” posiada dodatkowe opcje do ustawienia. Z listy menu, możesz decydować o:

Widoku wyszukiwanych towarów w nagłówku,
Wyświetlaniu top bannera,
Pokazywaniu rozwijanej listy towarów znajdującej się w koszyku.

2. Banner

W szablonie Dla Gastronomii udostępniliśmy sześć rodzajów bannerów. Z poziomu Kreatora Wyglądu możesz zdecydować, które z nich powinny znaleźć się na Twojej stronie. Aby dodać zdjęcia do banneru przejdź do zakładki Wygląd sklepu/ Ustawienia/ Bannery, a następnie klikając na kafelek o nazwie mainBanner wybierz odpowiednie zdjęcie.

Szczegóły na temat dodawania i edycji bannerów znajdują się w artykule: Bannery.

3. Menu

W szablonie dla Gastronomii kupowanie jest możliwe bezpośrednio z listy. Menu, bo tak została nazwana sekcja z listą towarów, dostępne jest do prezentacji w dwóch wariantach: kafli oraz listy. Zmiana układu listy możliwa jest z poziomu panelu administracyjnego (Wygląd sklepu/ Ustawienia/ zakładka Zarządzanie kaflem produktu).

4. Popup – kupowanie z listy

Podczas kupowania bezpośrednio z menu wyświetli się popup, za pomocą którego możliwa jest personalizacja danego towaru:

Dzięki temu klient w prosty i szybki sposób może wybrać dodatkowe składniki czy dodatki w postaci np. sosów. Może również wybrać rodzaj pieczywa czy rozmiar burgera.

5. Koszyk

W szablonie Dla Gastronomii składanie zamówienia jest szybkie i wygodne dla użytkownika. Koszyk został zaprojektowany tak, aby użytkownik mógł w jednym kroku wypełnić niezbędne dane:

Formularz z danymi zamawiającego oraz danymi do faktury,
Sposób dostawy,
Sposób płatności,
Miejsce na wpisanie kodu rabatowego.

Po uzupełnieniu powyższych informacji można przejść do podsumowania, w którym prezentowane są wcześniej wprowadzone dane klienta. Oprócz tego w koszyku następuje sprawdzenie rejonu dostawy. Klient, po wpisaniu adresu, otrzyma natychmiast informację, czy znajduje się on w rejonie, gdzie dowozisz zamówienia. Dodatkowo, po finalizacji zamówienia, Klient zobaczy czas pozostały do jego realizacji:

W szablonie istnieje także możliwość wyświetlania w koszyku informacji o kwocie, której brakuje do darmowej dostawy. Funkcja ta możliwa jest do uruchomienia z poziomu Panelu Administracyjnego w sekcji Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne:

Ustawienia można zmienić według własnego uznania. Po dokonaniu wyboru należy użyć opcji Zapisz i Publikuj.

6. Widget

Sekcja „Widget” pozwala dodać jeden z dwóch dostępnych wariantów, które pozwolą zaprezentować informacje, takie jak: zdjęcie, tytuł nagłówka, tekst przycisku, link do przycisku, a także opis. Widget można dodać podczas tworzenia szablonu dla Gastronomii w Kreatorze Wyglądu.

7. Lookbook

Widok ten charakteryzuje się prezentacją zdjęć w formie kafelków i precyzyjnym oznaczeniem towarów na zdjęciu. Dzięki znacznikom umieszczonym na grafice Twoi klienci będą mogli podejrzeć towar i dodać go bezpośrednio do koszyka. Po kliknięciu na przycisk wyświetli się popup ze szczegółami towaru oraz opcją zakupu.

Wskazówka

Rekomendowany rozmiar grafik do lookbooka to 560 x 500 px.

Aby poprawnie skonfigurować lookbook, skorzystaj z naszej instrukcji zawartej w artykule: Jak skonfigurować Lookbook w Comarch e-Sklep?

8. Blog

Prowadzenie bloga jest istotnym elementem sklepu internetowego. Dzięki niemu sprzedawca może dzielić się swoją wiedzą i spostrzeżeniami na temat reklamowanych produktów. W szablonie dla gastronomii blog możesz wykorzystać np. do prezentacji przepisów. Prowadzenie bloga ma również dobry wpływ na pozycjonowanie ze względu na unikalne treści. Dzięki temu Twój e-Sklep może częściej pojawiać się w wynikach wyszukiwania. W szablonie Dla Gastronomii masz możliwość tworzenia dowolnej ilości wpisów. Na stronie głównej wyświetlone zostaną trzy najnowsze. Użytkownik ma możliwość podglądu całej listy artykułów. Wystarczy, że kliknie w etykietę Najnowsze wpisy.

Szczegółowe informacje na temat konfiguracji bloga w e-Sklepie znajdują się w artykule: Jak skonfigurować blog?

9. Info-banner

Banner informacyjny pozwala na zaprezentowanie w przejrzysty sposób korzyści z zakupów w Twoim e-Sklepie.

Modyfikacji tego obszaru dokonasz z poziomu panelu administracyjnego przechodząc do sekcji Wygląd sklepu/ Ustawienia/ Bannery. Następnie przechodząc do szczegółów banneru o nazwie info-banner dostosujesz element do swoich preferencji. Możesz skorzystać z domyślnych grafik lub dodać własne.

Szczegółowe informacje na temat konfiguracji info-banneru znajdują się w artykule: Konfiguracja banneru informacyjnego w szablonie.

11. Element tekstowy ze zdjęciem

Wskazówka

Za wyświetlanie elementu tekstowego w szablonie dla Gastronomii odpowiada obiekt o nazwie text-el-photo-mp-1.

Więcej informacji na temat konfiguracji znajduje się w artykule: Element tekstowy w szablonie.

11. Stopka

12. Strefa Klienta

Do Strefy Klienta w szablonie Dla Gastronomii masz możliwość zalogowania się poprzez Facebooka oraz przez Google. Więcej na temat konfiguracji logowania przez Facebooka i Google znajdziesz tutaj.

Jak dodać wiele linków do banneru top?

Spis treści

Wstęp

Jak zaprezentować wiele linków w bannerze top?

Wstęp

Jak zaprezentować wiele linków w bannerze top?

Krok 1. Aby ustawić wskazany banner według własnych potrzeb przejdź do sekcji Wygląd sklepu > Ustawienia > Bannery. W tym miejscu powinien znajdować się banner o nazwie top:

Krok 2. W ramach edycji banneru przejdź do sekcji Widok zaawansowany:

W takim wypadku całość banneru top będzie klikalna, a wypełniony tekst zostanie zaprezentowany na środku banneru:

Krok 4. Do banneru top można dodać dodatkowe linki. Należy to zrobić wchodząc do edycji banneru lub poprzez opcję Dodaj więcej linków:

Krok 5. Z poziomu wskazanej opcji w zakładce Linki za pomocą przycisku plusa masz możliwość dodania linku:

Następnie możesz wprowadzić nazwę, dodać link oraz zadecydować czy ma się on otwierać w nowym oknie:

Wskazówka

Aby prezentować wiele linków w szablonie należy uzupełnić link i nazwę dla linku domyślnego.

Dzięki dodaniu wielu linków masz możliwość ich prezentacji banneru top w następujący sposób:

- Jeżeli w bannerze top wskazany został tekst: zostanie on przesunięty do lewej strony, a po prawej stronie w ramach tej opcji będzie wyświetlane do 4 linków:

- W przypadku, gdy potrzebujesz więcej linków możesz zrezygnować z wypełnionego tekstu – dzięki temu na bannerze top będziesz mógł dodać do 6 linków:

Wskazówka

Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Spis treści

Wstęp

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jak zacząć?

Aktualizacja szablonu

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Pozostałe zmiany

Gdzie należy uzupełnić teksty alternatywne (alt)?

Zalecenia dla udostępnianych treści – ogranicz migające elementy

Dostosuj komunikację mailową – aktualizacja lub zmiana treści e-mail

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Wstęp

Wskazówka

Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami

W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz jeden ze standardowych szablonów Comarch, czyli: Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii.

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jako właściciel e-Sklepu lub Partner Comarch zadbaj, aby zadbać o dostosowanie swojej witryny do obowiązujących przepisów. Nowe wymogi to wspólna odpowiedzialność:

Comarch e-Sklep – zajmiemy się kwestiami technicznymi w przypadku Gotowych Szablonów Comarch, do których należą m.in. zmiany w kodzie,
Właściciel, administrator lub Partner sklepu – musisz zadbać o treści i elementy, które dodajesz samodzielnie. Chodzi tu głównie opis produktów, zdjęcia i grafiki czy identyfikację wizualną.

Jak zacząć?

Aktualizacja szablonu

Wskazówka

Jak zaktualizować szablon?

Wygenerowanie zupełnie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
Wybór i edycja jednego z gotowych układów i jego modyfikacja,
Import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Wskazówka

Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?

Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony:

Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".

Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu:

W panelu bocznym pojawi się dokładna informacja na temat koloru.

W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.

Gdzie dostosować kolory?

Kolory w szablonie możesz zmienić korzystając z Kreatora Wyglądu. Po imporcie szablonu, edycji lub stworzeniu nowego projektu, przejdź do zakładki "Style" i edytuj motyw kolorystyczny:

Następnie możesz zmieniać swobodnie kolor na wybranych elementach:

Zmian możesz dokonać także z poziomu panelu administracyjnego, przechodząc do zakładki Wygląd Sklepu > Ustawienia.

Pozostałe zmiany

Teksty alternatywne ("Alt", alty) w Comarch e-Sklep

Pomaga osobom korzystającym z czytników ekranu, które odczytują tekst alternatywny na głos,
Poprawia dostępność stron internetowych, czyniąc je bardziej przyjaznymi dla wszystkich użytkowników,
Wpływa na pozycjonowanie w wyszukiwarkach, ponieważ dobrze opisane obrazy są lepiej interpretowane przez algorytmy Google.

Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:

Przyklad

Poprawne :

Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.

Niepoprawne:

Sukienka.
Buty sportowe.
Fajna kanapa.
Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP

Korzystam z Comarch ERP Optima

Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego:

Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:

Korzystam z Comarch ERP XT

Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".

W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii

5. Dla zdjęć w Blogu

6. Dla zdjęć w plikach użytkownika w sekcji "Twoje pliki"

Wskazówka

Atrybut title - obowiązkowy czy nie?

Zalecenia dla udostępnianych treści - ogranicz migające elementy

1.Obrazki i bannery

2.Materiały audio i viedo

Audiodeskrypcja to dodatkowy opis dźwiękowy, który przedstawia istotne elementy wizualne nagrania osobom niewidzącym,
Transkrypcja to zapis tekstowy całej treści audio, umożliwiający odbiór treści osobom niesłyszącym, może to być w formie napisów dla audiodeskrypcji.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

1.Treści mailowe są domyślne, nie zostały sformatowane

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Struktura Stosuj nagłówki (<h1>, <h2> itd.) dla przejrzystości. Używaj krótkich akapitów i list punktowanych.
Tekst i formatowanie Zapewnij wysoki kontrast między tekstem a tłem. Wybieraj czytelne czcionki (sans-serif, min. 12-14 px). Nie używaj wyłącznie koloru do przekazywania informacji.
Obrazy i multimedia Dodawaj tekst alternatywny (alt text) do obrazów. Unikaj tekstu osadzonego w grafikach, jeśli można go przesłać jako tekst.
Linki i przyciski Stosuj opisowe teksty linków zamiast „Kliknij tutaj”. Upewnij się, że są łatwe do kliknięcia na ekranach dotykowych.
Język i czytelność Używaj prostego i zrozumiałego języka. Unikaj skrótów i branżowego żargonu, jeśli odbiorca może ich nie znać.
Testowanie Sprawdź wiadomość na różnych urządzeniach i czytnikach ekranu. Zweryfikuj zgodność ze standardami WCAG.

Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS

3.Załączniki (m.in. instrukcje, katalogi)

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Szablon Opal

Wskazówka

Główne wyróżniki szablonu:

Nawigacja w szablonie
- Podstawowe akcje w nagłówku (logowanie, wyszukiwanie, koszyk, profil klienta) w formie ikon.
- Duży banner na stronie głównej w formie kafelków ułatwia prezentację aktualnych promocji lub konkretnych kategorii towarowych.
- Lista produktów na stronie głównej, która idealnie zaprezentuje nowości, promocje, towary rekomendowane itp.
- Graficzne menu producentów w formie slidera.
- Płytkie dwupoziomowe menu w połączeniu z filtrami na liście produktów daje możliwość wygodnej i szybkiej nawigacji.
- Graficzne menu kategorii na stronie „produkty”
- Rozwijalna stopka.
Towary
- Produkty na liście danej kategorii zaprezentowane na dużych przejrzystych kafelkach.
- Drugie zdjęcie towaru oraz jego warianty (np. kolor, rozmiar) wyświetlane po najechaniu kursorem na towar.
- Warianty towaru wyświetlane są w takiej kolejności w jakiej zostały dodane w systemie ERP.
- Bezpośrednie przejście na szczegóły produktu w wybranym wariancie.
- Prezentacja stanów magazynowych w formie komunikatu „zostały ostatnie sztuki”.
- Atrybuty grupujące wyświetlane jako kafelki. Dla wariantów kolorystycznych przedstawione w formie miniaturek zdjęć.
- Zestawy na towarze w formie slidera.
- Sekcja „polecane” prezentująca zamienniki.
- Funkcja „powiadom o dostępności”
Zamówienie
- Wybór akcji podczas dodawania do koszyka.
- Możliwość rejestracji na zamówieniu.
- Macierz dostaw w formie kafelków.
- Wybór paczkomatów i punktów odbioru osobistego z mapy.
- Reklamacje i zwroty do zrealizowanych zamówień dostępne w profilu klienta,
- Ponowienie nieudanej płatności dostępne zarówno dla klientów zarejestrowanych jak i jednorazowych,
- Widok szczegółów złożonego zamówienia dla niezalogowanych klientów.

W szablonie graficznym Opal istnieje możliwość wyłączenia ukrywania stopki. W zależności od preferencji może być domyślnie zwinięta lub rozwinięta. Można to zmienić w ustawieniach szablonu w menu Wygląd sklepu/Ustawienia. W Profilu Klienta na liście zamówień widnieje informacja o statusach dostawy i płatności poszczególnych dokumentów. Wytyczne dla szablonu Opal znajdziesz w artykule Konfiguracja fantomów dla szablonu Opal Więcej o darmowych szablonach przeczytasz w artykule Gotowe szablony Comarch

Szablon Agat

Wskazówka

Główne wyróżniki szablonu:

Nawigacja w szablonie
- Podstawowe akcje w nagłówku (logowanie, rejestracja, koszyk, profil klienta) w formie opisanych ikon,
- Lista produktów na stronie głównej, która idealnie zaprezentuje nowości, promocje, towary rekomendowane itp.,
- Duży banner w formie karuzeli z widocznymi brzegami zdjęć sąsiednich,
- Głębokie wielopoziomowe menu na liście produktów oraz 3 poziomowe menu główne,
- Graficzne menu kategorii na stronie „produkty”,
- Duże zdjęcia kategorii na liście produktów,
- Ostatnio przeglądane towary na stronie głównej.
Towary
- Bardzo duże zdjęcia na szczegółach produktu idealnie prezentujące asortyment,
- Prezentacja stanów magazynowych w formie liczbowej i graficznej,
- Atrybuty grupujące wyświetlane jako kafelki,
- Zestawy na towarze w formie slidera,
- Sekcje prezentujące towary podobne (zamienniki), towary typu akcesoria i towary polecane,
- Mechanizm w postaci lupy, pozwalający na powiększanie zdjęcia na szczegółach towaru.
Zamówienie
- Wybór akcji podczas dodawania do koszyka,
- Możliwość rejestracji na zamówieniu,
- Macierz dostaw w formie kafelków w dwóch kolumnach (dostawa i płatność),
- Wybór paczkomatów i punktów odbioru osobistego z mapy,
- Ponowienie nieudanej płatności dostępne zarówno dla klientów zarejestrowanych jak i jednorazowych,
- Widok szczegółów złożonego zamówienia dla niezalogowanych klientów.

W przypadku dużej ilości kategorii będzie wyświetlana druga linia menu. W Profilu Klienta na liście zamówień widnieje informacja o statusach dostawy i płatności poszczególnych dokumentów. Więcej o darmowych szablonach przeczytasz w artykule Gotowe szablony Comarch

Szablon Bursztyn

Wskazówka

Główne wyróżniki szablonu:

Nawigacja w szablonie
- Duży banner na stronie głównej w formie przewijalnego slidera ułatwia prezentację aktualnych nowości.
- Dodatkowe bannery na dole strony idealne do zaprezentowania promocji w sklepie.
- Lista produktów na stronie głównej, która zaprezentuje nowości, promocje, towary rekomendowane itp.
- Graficzne menu producentów w formie slidera.
- Towary polecane na stronie głównej.
- Dwa rodzaje menu do wyboru w połączeniu z filtrami na liście produktów daje możliwość wygodnej i szybkiej nawigacji:
  - Dwupoziomowe menu poziome.
  - Wielopoziomowe menu pionowe z opcją prezentacji zdjęć kategorii.
Towary
- Lookbook – prezentacja zdjęć kolekcji lub katalogu z naniesionymi odnośnikami do towarów dostępnych w sklepie.
- Produkty na liście danej kategorii w formie kafelków z możliwością bezpośredniego dodania do koszyka.
- Atrybuty grupujące wyświetlane jako listy rozwijalne.
- Zestawy promocyjne prezentowane na karcie towaru
- Sekcja „polecane” prezentująca zamienniki.
- Statusy dostępności na szczegółach produktu.
- Funkcja „powiadom o dostępności”.
- Funkcja porównywania produktów. Stany magazynowe w oknie Porównaj wyświetlają się w formie opisowej oraz obrazkowej.
Zamówienie
- Wybór akcji podczas dodawania do koszyka.
- Macierz dostaw w formie czytelnej listy sposobów dostaw z podpiętymi sposobami płatności,
- Wybór paczkomatów Inpost,
- Reklamacje i zwroty do zrealizowanych zamówień dostępne w profilu klienta,
- Ponowienie nieudanej płatności dostępne zarówno dla klientów zarejestrowanych jak i jednorazowych,
- Widok szczegółów złożonego zamówienia dla niezalogowanych klientów.

W Profilu Klienta na liście zamówień widnieje informacja o statusach dostawy i płatności poszczególnych dokumentów. Więcej o darmowych szablonach przeczytasz w artykule Gotowe szablony Comarch.

Kreator sklepu hurtowego (B2B)

Obsługa sekcji Lista towarów w szablonie Szafir

Spis treści

1. Filtry

2. Kategoria

3. Domyślny widok listy produktów

4. Filtr typu kolor

5. Krótki opis

6.Towary wielowariantowe

7. Graficzne menu

Od wersji 2021.5 został dodany nowy widok listy towarów w szablonie Szafir. W panelu administracyjnym na zakładce Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Lista towarów znajdują się nowe oraz dotychczasowe parametry związane z wyświetlaniem listy produktów, prezentacji filtrów, kategorii oraz możliwe jest wybranie menu graficznego. Dzięki zebraniu wszystkich ustawień listy towarów w jednym miejscu administrator ma do nich szybki dostęp oraz może jeszcze bardziej zindywidualizować wygląd swojego sklepu, a tym samym dostosować go do swoich potrzeb czy trendów panujących w danej branży.

Na zakładce Lista towarów można zdecydować np.: o ilości wyświetlanych filtrów lub miejscu na stronie, w którym mają się znajdować. Administrator sklepu może również zmienić formę graficzną prezentowania nazw, opisu i zdjęć kategorii oraz aktywować nowe graficzne menu nawigacji dla podgrup. Aby wprowadzone zmiany były widoczne w szablonie należy je zapisać i opublikować.

1. Filtry

Użytkownik może zdecydować, czy filtry mają wyświetlać się po lewej stronie pod menu kategorii, czy u góry nad listą towarów.
Użytkownik może określić, czy wyświetlana sekcja filtry domyślnie będzie domyślnie zwinięta, czy rozwinięta.
Użytkownik może określić liczbę wyświetlanych wartości w filtrze: 3, 5 lub 8.
Użytkownik może wskazać czy filtrowanie ma być przeprowadzone po użyciu przycisku Zastosuj, czy dynamicznie po wybraniu właściwych checkboxów,

Przyklad

W ramach przykładu w panelu administracyjnym zostały zaznaczone parametry:

Liczba wyświetlanych wartości: 5,
Widok panelu filtra: U góry nad listą towarów,
Filtruj po użyciu przycisku „Zastosuj”: Tak,
Sekcja domyślnie: Rozwinięta.

Wskazówka

W przypadku zaznaczenia parametru Sekcja domyślnie - Zwinięta, aby otworzyć obszar filtry należy kliknąć ikonę filtra.

2. Kategoria

Obszar kategoria daje możliwość wyboru czy: nazwa, grafika i opis kategorii, będą znajdowały się nad listą towarów, czy pod listą towarów.
Forma graficzna prezentowania: nazwy, opisu i zdjęcia kategorii, może być ustawiona jako zdjęcie w tle i zdjęcie po lewej.
Sekcja może być domyślnie zwinięta lub rozwinięta.

Przyklad

W ramach przykładu w panelu administracyjnym zostały zaznaczone parametry:

Nazwa, grafika i opis Kategorii: Nad listą towarów.
Forma graficzna prezentowania nazwy, opisu i zdjęcia kategorii: Zdjęcie w tle.
Sekcja domyślnie: Rozwinięta.

W przypadku, gdy użytkownik ustawi np.:

Nazwa, grafika i opis kategorii: Pod listą towarów.
Forma graficzna prezentowania nazwy, opisu i zdjęcia kategorii: Zdjęcie po lewej.
Sekcja domyślnie: Rozwinięta.

Nazwa, grafika oraz opis ustawi się pod listą towarów.
Zdjęcie zostanie wyświetlone po lewej stronie, natomiast opis obok.

Uwaga

W przypadku, gdy Użytkownik ustawi Sekcja domyślnie - Zwinięta, klient zobaczy grafikę i opis dopiero po kliknięciu w strzałkę skierowaną w dół.

3. Domyślny widok listy produktów

Użytkownik ma możliwość ustawienia rodzaju wyświetlania się listy towarów na komputerze/laptopie i na urządzeniu mobilnym.

Desktop: szybkie zakupy, lista lub kafelki.
Mobile: szybkie zakupy lub lista.

Przyklad

Desktop – kafelki spowoduje, że Klient wchodząc do sklepu zobaczy towary w formie kafelków.

Poniżej przedstawiono różnicę pomiędzy widokami mobilnymi – szybkie zakupy oraz lista. Zrzut ekranu pierwszy po lewej przedstawia widok szybkie zakupy.

4. Filtr typu kolor

Użytkownik ma możliwość wyświetlania filtra kolor w formie graficznej.

Uwaga

Atrybut kolor wyświetli się wtedy i tylko wtedy gdy:

Użytkownik doda atrybut typu lista o wartości kolor na wybraną grupę towarową bez podanej wartości.

Użytkownik doda atrybut kolor na wybranym towarze i poda ustali wartość atrybutu.

Pełny opis konfiguracji tej funkcji w szablonie Szafir został przedstawiony w osobnym artykule.

5. Krótki opis

Użytkownik ma możliwość dodania krótkiego opisu na widoku typu lista domyślnie rozwinięty - oznacza to, że skrócony opis (dodany w systemie Comarch ERP Optima), będzie wyświetlany na liście towarów, gdy użytkownik zaznaczy parametry:

Krótki opis – Tak
Domyślny widok listy produktów:
- Desktop – Lista,
- Mobile – Lista (W przypadku urządzeń mobilnych).

Wskazówka

Krótki opis należy uzupełnić w Comarch ERP Optima: Ogólne/ Cennik/ Szczegóły wybranego towaru/ Zakładka e-Handel, Sekcja języki / Dodaj (Plusik) lub Otwórz (Lupka)/ Pozycjonowanie/ Opis skrócony:

6. Towary wielowariantowe

Użytkownik ma możliwość wyboru towarów wielowariantowych (fantomów) bezpośrednio z listy towarów. Oznacza to, że po kliknięciu w "Wybierz wariant towaru" użytkownik nie zostanie przełączony na szczegóły towaru - zamiast tego wyskoczy dodatkowe okno z możliwością wyboru wariantu towaru.

7. Graficzne menu

Użytkownik ma możliwość ustawienia graficznego menu, czyli wyświetlania zdjęć kategorii i podkategorii. Jeżeli główna kategoria ma swoje podkategorie, menu graficzne zostanie wyświetlone w następujący sposób.

Dodawanie graficznego menu dostępne jest w Kreatorze wyglądu, poprzez dodanie do szablonu parametru subcategories-1 w widoku Listy towarów.

Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Spis treści

Jak wyeksportować swój szablon z Comarch e-Sklep?

Jak wgrać własny szablon do Comarch e-Sklep?

Jak wyeksportować swój szablon z Comarch e-Sklep?

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Eksport szablonu.

Krok 2. W tym miejscu możesz opcjonalnie (przed eksportem) określić autora szablonu, podać adres e-mail, telefon oraz adres WWW swojego e-Sklepu.

Krok 3. Jeżeli chcesz wyeksportować szablon do pliku użyj przycisku Eksportuj szablon.

Gotowe! Szablon został wyeksportowany do pliku na Twoim urządzeniu.

Wskazówka

Z tego miejsca możesz także wyeksportować posiadane w e-Sklepie bannery, korzystając z przycisku Eksportuj bannery.

Jak wgrać własny szablon do Comarch e-Sklep?

Własny szablon. Jak go wgrać?

Po skomponowaniu swojego własnego szablonu możesz wgrać go do e-Sklepu. Postępuj zgodnie z poniższymi krokami.

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Import szablonu.

Krok 3. Wybierz plik XML swojego szablonu i naciśnij Importuj szablon.

Uwaga

Wskazówka

W zakładce Szablony możesz określić, czy wgrywany szablon ma być domyślny i aktywny w e-Sklepie.

Gotowe! Twój szablon został zaimportowany do e-Sklepu.

Planowane dostawy towarów w e-Sklepie

Spis treści

Wstęp

Zastosowanie

Kto może używać tej opcji

Konfiguracja funkcji Sprawdź dostawy

Skąd pobierane są informacje o planowanych dostawach

Dodatkowe informacje

Wstęp

Comarch e-Sklep umożliwia klientowi sprawdzenie dostępności towaru w sklepie. Dzięki funkcji Sprawdź dostępność towaru w sklepie, osoby odwiedzające Twój e-Sklep będą mogły sprawdzić z poziomu strony internetowej, czy dany towar został już zamówiony u dostawcy.

Zastosowanie

Funkcja służy do sprawdzania nie tylko, czy towar został zamówiony u dostawcy, ale również udostępnia informacje o zamówionej ilości oraz planowanej dostawie. Po wejściu na kartę produktu klient ma możliwość kliknięcia w napis Sprawdź dostawy. W tym momencie sklep uruchomi Comarch e-Sklep Sync, aby ten pobrał informacje z dokumentu Zamówienia Zakup (ZZ) o planowanych dostawach z systemu ERP XL.

Opcja jest dostępna na stronie szczegółów towaru na wszystkich towarach w sklepie - zarówno na tych, które można kupić jak i na takich, gdzie nie ma opcji dodawania do koszyka (np. zapytaj o cenę, czy powiadom o dostępności).

Kto może używać tej opcji?

Aby skorzystać ze wspomnianej funkcjonalności należy posiadać:

e-Sklep w wersji B2B,
Działającą usługę Comarch e-Sklep Sync,
System ERP XL,
Zainstalowany szablon Szafir.

Konfiguracja

W panelu administracyjnym Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne należy znaleźć Dostawy towarów i wybrać opcję Tak.
Po zapisaniu i opublikowaniu zmian klienci po przejściu do szczegółów towaru będą mieli możliwość sprawdzenia planowanych dostaw.

Skąd pobierane są informacje o planowanych dostawach?

Informację wyświetlane na szczegółach towaru są pobierane z listy zamówień zakupu z systemu Comarch ERP XL. W zależności od statusu dokumentu ZZ klient widzi inny status na oknie z informacjami. Status dokumentu ZZ:

Potwierdzone – Dostawa potwierdzona,
Niepotwierdzone – Dostawa niepotwierdzona,
Anulowane potwierdzenie – Brak informacji,
Zamknięte potwierdzone – Brak informacji.

Czas planowanej daty dostawy brany jest z dokumentu ZZ z pola Data realizacji. Datę na dokumencie można modyfikować po potwierdzeniu dostawy. Zmiany dokonują się w e-Sklepie w momencie ich zapisania.

Towary wielowartościowe

Dla towarów wielowartościowych (fantomów i towarów z cechami) sprawdzanie dostępności (oraz wyświetlanie planowanych dostaw) pokazuje się według wybranej cechy.

Wskazówka

W szablonie Szafir wybraną cechą jest ta, która w momencie wywołania funkcji sprawdzenia dostępności w salonie jest oznaczona widoczną granatową ramką.

Dodatkowe informacje

Szczegółowe informacje dotyczące działania Comarch e-Sklep Sync znajdziesz w artykule: Comarch e-Sklep Sync.

Wyróżnienie przycisku paska nawigacji w szablonie Szafir

Wstęp

W e-Sklepie jako sprzedawca możesz chcieć zwrócić szczególną uwagę swoich klientów na konkretny element strony. Takim elementem może być wyróżniony kafelek paska nawigacji, który będzie informował na przykład o trwającej promocji czy wyprzedaży. Dzięki wyróżnieniu i przekierowaniu klient szybciej trafi na stronę z interesującym go asortymentem.

Konfiguracja

W szablonie Szafir możliwe jest ustawienie wyróżnienia kolor tła oraz czcionki wyróżnionego elementu w pasku nawigacji. Aby to zrobić zaloguj się do panelu administracyjnego, a następnie do obszaru Wygląd sklepu/ Ustawienia. W zakładce Ogólne odnajdź sekcję „Kolor tła wyróżnionego elementu w pasku nawigacji”. Pod nią znajdują się również pozycje odpowiadające za zmianę koloru czcionki przed, jak i po najechaniu na kafelek kursorem.

Wybierz kolory, którymi chcesz wyróżnić element w pasku nawigacji. Następnie zapisz zmiany. Teraz przejdź do zakładki Strona główna. Zaznacz te elementy, które mają zostać wyróżnione. Wystarczy, że wybierzesz odpowiedni checkbox pod Wyróżnij.

W efekcie klienci odwiedzający stronę Twojego sklepu zobaczą wyróżnione elementy. Mogą się one różnić różnić się w zależności od tego, czy klient jest zalogowany czy też nie.

Tabela rozmiarów w szablonie Szafir

Spis treści

Wstęp

Aktywacja tabeli rozmiarów w szablonie Szafir

Wstęp

W sklepach internetowych, szczególnie tych z odzieżą, bardzo często widoczna jest tabela rozmiarów. Pozwala na prezentację szczegółowych informacji na temat asortymentu w sklepie. Odnośnik do tabeli umieszczony jest najczęściej na szczegółach towaru. Warto pamiętać, że tabela rozmiarów jest funkcją, którą możesz dostosować do swojej branży i zaprezentować w niej dowolne dane. W takiej formie prezentowane są m.in.: wymiary produktów, cechy charakterystyczne, a także zalecenia względem użytkowania. Aby móc skorzystać z przygotowanego przez nas mechanizmu tabeli rozmiarów w swoim e-Sklepie należy posiadać:

aktualną wersję szablonu Szafir (min. 2023.0.2),
oraz aktualną wersję e-Sklepu (min. 2023.0).

Postępuj zgodnie z poniższą instrukcją, aby poprawnie skonfigurować tabelę.

Aktywacja tabeli rozmiarów w szablonie Szafir

Tabela rozmiarów może być prezentowana na 3 różne sposoby, w zależności od oczekiwanego efektu:

jeżeli posiadasz wspólną tabelę dla całego asortymentu, ilość informacji jest niewielka i chcesz pokazać tabelę w formie popup’a, skorzystaj ze sposobu konfiguracji poprzez sekcję bannerową o nazwie SizeTable.
jeżeli posiadasz dużą ilość tabel, ponieważ posiadasz zróżnicowany asortyment skorzystaj z prezentacji poprzez osobną Stronę o nazwie Tabela rozmiarów,
jeżeli chcesz prezentować tabelę rozmiarów indywidualnie dla każdego towaru skorzystaj z konfiguracji tabeli, jako załącznika w formacie PDF – udostępnionego w systemie Comarch ERP.

Dodatkowo możesz wybrać, dla których towarów ma się wyświetlać tabela rozmiarowa:

dla wszystkich towarów,
tylko dla towarów z wariantami.

Aby skonfigurować tabelę z poziomu panelu administracyjnego, postępuj zgodnie z instrukcją: Krok 1. Zaloguj się do panelu administracyjnego, a następnie przejdź do sekcji Wygląd sklepu/ Ustawienia. Krok 2. W zakładce Ogólne odszukaj sekcję o nazwie Tabela rozmiarów. Krok 3. Spośród dostępnych parametrów wybierz, czy tabela rozmiarów ma się pojawiać na towarach z wariantami, czy na wszystkich Krok 4. Wybierz sposób, na podstawie jakiej konfiguracji będzie prezentowana tabela rozmiarów - banneru o nazwie SizeTable, dedykowanej stronie o nazwie Tabela rozmiarów, czy załącznika PDF.

Konfiguracja tabeli rozmiarów poprzez banner o nazwie SizeTable

Aby dodać tabelę rozmiaru poprzez banner o nazwie SizeTable postępuj zgodnie z instrukcją: Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ zakładka Ogólne. Pod parametrem: Tabela rozmiarów prezentowana na podstawie zaznacz SizeTable. Krok 2. Kolejno przejdź do zakładki: Wygląd sklepu/ Ustawienia, a następnie na zakładkę Bannery. Krok 3. Przejdź do szczegółów sekcji bannerowej o nazwie SizeTable, a następnie dodaj odpowiednie obrazki. Krok 4. Zapisz wprowadzone zmiany.

Efekt: Po zapisaniu i opublikowaniu zmian Klient przeglądający stronę przechodząc do tabeli rozmiarów ujrzy dodane przez Ciebie obrazki w następujący sposób:

Konfiguracja tabeli rozmiarów w formie dedykowanej Strony

Możliwe jest także dodanie tabeli rozmiarów wykorzystując gotowe Strony w panelu administracyjnym, gdzie przygotowaliśmy dedykowaną stronę oraz treść o nazwie Tabela Rozmiarów. Postępuj zgodnie z instrukcją, aby skonfigurować tabelę poprzez gotową stronę: Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ zakładka Ogólne. Pod parametrem: Tabela rozmiarów prezentowana na podstawie zaznacz Strony.

Krok 2. Kolejno przejdź do sekcji: Ustawienia/ Treści/ zakładka Regulamin i inne. Krok 3. Z listy dostępnych treści przejdź do edycji treści o nazwie Tabela rozmiarów.

Jest to przygotowana przez nas propozycja dotycząca prezentacji tabeli rozmiarów. Treść możesz dowolnie edytować i dostosować ją do swoich oczekiwań.

Wskazówka

Pamiętaj, aby wszelkie wprowadzone zmiany zapisać oraz opublikować.

Efekt: Po naciśnięciu odnośnika do tabeli rozmiarów Klient zostanie przekierowany na utworzoną wcześniej stronę w e-Sklepie, gdzie widoczna będzie wcześniej wpisana przez Ciebie treść.

Konfiguracja tabeli w systemie Comarch ERP - plik PDF

Tabelę rozmiarów możesz także skonfigurować umieszczając plik PDF w formie załącznika na towarze, w swoim systemie Comarch ERP. Przykład konfiguracji w systemie Comarch ERP Optima: Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ zakładka Ogólne. Pod parametrem: Tabela rozmiarów prezentowana na podstawie zaznacz plik PDF. Krok 2. W systemie ERP Optima przejdź do szczegółów wybranego towaru. Krok 3. W zakładce Atrybuty dodaj załącznik w postacie pliku PDF, gdzie będzie zaprezentowana tabela rozmiarów.

Uwaga

Załącznik musi znajdować się na pierwszej pozycji.

Krok 4. Upewnij się, że załącznik jest udostępniany do Comarch e-Sklep. Krok 5. Zapisz zmiany i wykonaj synchronizację danych.

Efekt: Klient po kliknięciu w przycisk tabela rozmiarów zobaczy przygotowany plik w osobnej karcie przeglądarki.

Rozbudowana stopka w szablonach Topaz i Szafir - jak ją skonfigurować?

Spis treści

Wstęp

Jak przystąpić do edycji stopki?

Więcej możliwości edycji stopki

Jak skonfigurować rozbudowaną stopkę?

Wstęp

Konfiguracja rozbudowanej stopki

Jak przystąpić do edycji stopki?

Więcej możliwości edycji stopki

Przykładowy wygląd rozbudowanej stopki w szablonie Topaz

Przykładowy wygląd rozbudowanej stopki w szablonie Szafir

Jak skonfigurować poszczególne elementy?

- Elementy 1-5: dodawanie kolejnych grup stron oraz zmiana ich kolejności dokonywana jest poprzez sekcję Nagłówek/Stopka w Ustawieniach w obrębie zakładki Wygląd Sklepu. W obrębie danej grupy możesz dodawać konkretne strony poprzez kliknięcie przycisku Dodaj stronę ze sklepu.

Wskazówka

Zmiany kolejności poszczególnych grup odnośników lub zmiany danych odnośników w obrębie danej grupy dokonuje się metodą Przeciągnij i upuść.

- Element 6: odpowiada za wyświetlanie następujących informacji: e-mail, numer telefonu, telefon2 (jeśli nie istnieje, to zastępowany jest przez telefon komórkowy) fax lub skype. W celu edycji danych kontaktowych należy przejść w panelu e-Sklepu do zakładki Ustawienia/Ustawienia sklepu. Informacje o adresie e-mail pobierane są automatycznie z zakładki Ogólne z sekcji Konto e-mail sklepu. Aby dodać lub zmodyfikować numer telefonu konieczne jest wybranie zakładki Dane sprzedawcy, następnie Infolinia i zweryfikowanie pola Telefon.
  Wskazówka
  W elemencie wyświetlone zostaną maksymalnie 3 informacje (e-mail, telefon i jedno z wybranych pól np. telefon2, telefon komórkowy lub fax.
- Element 7: odwołania do portali społecznościowych dodajemy bez zmian. Więcej o tym znajdziesz tutaj.
- Elementy 8-9: aby dodać informację o operatorach płatności oraz partnerach logistycznych należy wybrać zakładkę Wygląd Sklepu/Ustawienia/Bannery. Edycji dokonasz z perspektywy kafelków: Logistics Partners oraz Payment Operators poprzez dodanie właściwych grafik operatorów i partnerów. Aby zmienić nazwę „Operator płatności” i/lub „Partnerzy logistyczni” wybierz zamiast zakładki Bannery, zakładkę Tłumaczenia. Wyszukaj po parametrze „ID” LogisticsPartnersBannerTitle oraz PaymentOperatorsBannerTitle i zmodyfikuj pole „Tekst” według własnych preferencji. Zmiany zapisz i opublikuj. W przypadku chęci usunięcia któregoś z elementów, zaznacz go i naciśnij przycisk „Usuń”.

Wskazówka

Zalecane parametry grafik dla operatorów płatności i partnerów logistycznych: szerokość maksymalna 64 px, rozszerzenie PNG.

- Element 10: dane dotyczące firmy pobierane są z zakładki Ustawienia/Ustawienia sklepu/Dane sprzedawcy/Dane identyfikacyjne, a także z obszaru: Ustawienia/ Ustawienia sklepu/ Informacja o działalności gospodarczej/ Numer KRS lub CEIDG, Organ rejestrujący oraz Ustawienia/ Ustawienia sklepu/ Adres pocztowy, gdzie uwzględnione zostaną wszystkie pola za wyjątkiem Szerokości i długości geograficznej.

Kreator wyglądu Szafir (B2B)

Spis treści

Wstęp

Zastosowanie

Kto może używać tej opcji?

Zaczynamy

Krok 1 – strona główna
Krok 2 – Lista towarów
Krok 3 – Koszyk

Style

Funkcja cofania zmian

Generowanie i wgrywanie szablonu

Aktualizacja szablonu

Więcej informacji

Wstęp

Jednym z kluczowych elementów, który przyczynia się do sukcesu w branży e-commerce jest oprawa wizualna sklepu. W dużym stopniu to właśnie ona wpływa na całościowe wrażenia użytkowników i ich proces zakupowy. Dzięki narzędziu - Kreator Szablonu Szafir (B2B), właściciele sklepów mają możliwość stworzyć swój własny, niepowtarzalny szablon, który będzie dostosowany do obsługi klientów detalicznych oraz typu firma - połączenie modeli B2B i B2C.

Zastosowanie

W ramach kreatora zaprojektujesz wszystkie niezbędne obszary sklepu:

stronę główną,
listę towarów,
koszyk zakupowy.

Kto może używać tej opcji?

Aby móc używać tego narzędzia należy posiadać:

Comarch e-Sklep w wersji Enterprise lub B2B,
szerokość ekranu powyżej 1280 px, a zalecana to 1920 px,
oraz jedną z przeglądarek internetowych w aktualnej wersji.

Wskazówka

Kreator szablonu Szafir dostępny jedynie w wersji przeglądarkowej.

Zaczynamy!

Jak zaprojektować układ szablonu?

Aby rozpocząć tworzenie szablonu należy przejść na stronę Kreatora Wyglądu. Wyświetlony zostanie powitalny komunikat. Na początku należy określić, dla jakiego modelu sprzedaży projektujesz szablon dla swojego e-Sklepu. Do wyboru masz sprzedaż detaliczną lub hurtową. Sprzedaż hurtowa przeznaczona jest dla użytkowników, którzy chcą sprzedawać swoje produkty również klientom biznesowym w hurtowych ilościach. Wybierz odpowiedni model, a następnie naciśnij przycisk Rozpocznij pracę. Po jego kliknięciu będzie można stworzyć nowy szablon lub edytować jeden z kilku gotowych.

W sytuacji gdy wcześniej tworzony był już projekt, widoczny będzie przycisk umożliwiający dokończenie szablonu lub rozpoczęcie nowego projektu.

Opcja Nowy szablon umożliwia zbudowanie od początku nowego szablonu Szafir według Twojego indywidualnego pomysłu.

Pozostałe trzy opcje do wyboru to gotowe wersje szablonu Szafir z możliwością ich edycji. Dzięki temu nie ma potrzeby tworzenia nowego szablonu od podstaw, ponieważ możesz wybrać jedną z gotowych propozycji, a następnie łatwo go edytować dostosowując do swoich potrzeb. Podwójne kliknięcie w wybrany kafelek pozwala przejść dalej. W trzech krótkich krokach zapoznasz się z podstawowymi funkcjami kreatora. Następnie możesz już przystąpić do dalszych modyfikacji szablonu lub od razu wygenerować przygotowaną wersję szablonu Szafir.

Od czego zacząć?

Gdy już wybierzesz wersję językową dla swojego Kreatora warto zacząć od nazwania swojego przyszłego szablonu. Można to zrobić klikając Zmień i wpisując nazwę w lewym górnym rogu, zastępując nazwę "Szafir(2023)". Nazwa ta będzie widoczna po zaimportowaniu szablonu do panelu administracyjnego oraz po wyeksportowaniu szablonu do pliku XML wraz z datą i godziną jego wygenerowania.

Krok 1 - Strona główna

W tej sekcji należy zaprojektować wygląd strony głównej naszego Comarch e-Sklepu. Strona główna może składać się z następujących elementów:

Nagłówek,
Baner,
Widget,
Banner pop-up,
Polecane,
Newsletter,
Slider producentów,
Slider marek,
Aktualności
Banner infografika
Stopka.

Po rozwinięciu każdej z sekcji ukażą się dostępne elementy:

Metodą "Przeciągnij i upuść" przenosimy wybrane elementy na obszar po prawej stronie:

Postępuj analogicznie z pozostałymi elementami.

Nagłówek

Sekcja „Nagłówek” prezentuje jeden widok. Nagłówek dodatkowo można konfigurować w zakresie wielkości linków w Menu kategorii i prezentacji funkcji związanych ze składaniem Zapytań o wycenę.

Bannery

Sekcja "Bannery" pozwala wybrać jedną możliwości prezentacji banneru. Informacje dotyczące rekomendowanych rozmiarów obrazków w bannerach opisaliśmy w tym artykule.

Widget

Sekcja "Widget" pozwala dodać jeden z dwóch dostępnych wariantów, które pozwolą zaprezentować następujące funkcje.

Widget-banner-1
- Dodanie zdjęcia,
- Dodanie tekstu nagłówka (tekst pionowy),
- Dodanie tekstu przycisku (tooltip).
- Dodanie linku do przycisku,
- Dodanie tekstu..

Widget-banner-2
- Dodanie zdjęcia,
- Dodanie tekstu nagłówka (tekst pod zdjęciem),
- Dodanie tekstu,
- Dodanie linku do tekstu.

Banner pop-up

Sekcja "Banner pop-up" pozwala wybrać jedną z dwóch możliwości prezentacji banerów. Bannery będą możliwe do wyświetlenia jedynie na stronie głównej e-Sklepu.

Proponowane

Sekcja "Proponowane" posiada dodatkowe opcje do ustawienia. Z listy menu, dostępnej pod przyciskiem Zmień typ możesz wybrać jakiego rodzaju produkty mają się w tym obszarze wyświetlać (m.in. nowość, najczęściej oglądane, wyprzedaż, sugerowane). Po zmianie typu tej sekcji, będzie się ona odpowiednio nazywać po wgraniu szablonu do sklepu:

Dodatkowo po najechaniu kursorem na tę sekcję, wybierając Opcje, możemy ustawić liczbę towarów, która będzie się wyświetlać (maksymalnie 50).

Podczas tworzenia szablonu w Kreatorze wyglądu Szafir po dodaniu sekcji towary polecane można określić typ wyświetlanych produktów. Nazwa sekcji jest zależna oraz adekwatna do określonego typu. Daną nazwę można modyfikować w tłumaczeniach szablonu. Dodatkowo każdy wybrany typ jest podlinkowany do wszystkich produktów wskazanego rodzaju. W zależności od wybranego typu, edycji parametrów wyświetlania dokonasz w panelu administracyjnym e-Sklepu. Z kolei informację o typie towaru ustawisz w systemie ERP. Typy towarów edytowane z poziomu panelu administracyjnego Comarch e-Sklep:

Promocja,
Nowość,
Najczęściej oglądane / najczęściej kupowane,
Cross-selling – oferowanie produktów uzupełniających wcześniejsze zakupy,
Producent,
Marka,
Ręcznie wybrane,
Kategoria,
Ostatnio oglądane.

Aby zdecydować o parametrach wyświetlania tych informacji należy przejść w panelu administracyjnym Comarch e-Sklep do zakładki Ustawienia/Ustawienia sklepu/sekcji Towary:

Producent, marka, ręcznie wybrane, kategoria oraz ostatnio oglądane obsługiwane są w ramach obiektu lokalnego "Siatka towarów". Po wyborze jednego z wyżej wymienionych typów zmian ustawień należy dokonać z poziomu panelu administracyjnego przechodząc do obszaru zakładki Wygląd sklepu/Ustawienia/Ustawienia zaawansowane oraz zakładki Obiekty. Na szczegółach wybranego obiektu (Siatka towarów) określamy jakie dokładnie towary zostaną zaprezentowane w sekcji "Proponowane". W przypadku wyboru "Producenta" lub "Marki" należy samodzielnie określić producenta lub markę.

Dodawanie informacji o typie produktu w systemie ERP dotyczy:

Nowości,
Produktu z gazetki,
Produktu polecanego,
Wyprzedaży,
Promocja,
Nowość,
Super jakości,
Super ceny,
Najlepszej oceny,
Rekomendacji sprzedawcy.

Ustawienia parametrów newslettera można edytować w panelu administracyjnym, w zakładce Ustawienia/ Ustawienia sklepu/ Mailing.

Slider marek

Sekcja "Slider marek" umożliwia dodanie do szablonu jednego widoków slidera marek. Na sliderach wyświetlane są loga marek, które zostały zaimportowane z systemu ERP. Po kliknięciu w wybrane logo, pojawi się lista wszystkich towarów, dla których dodana jest konkretna marka. Sekcje mogą być dodane w szablonie w dowolnym miejscu na stronie głównej.

Slider producentów

Sekcja "Slider producentów " umożliwia dodanie do szablonu jednego widoków slidera producentów. Na sliderach wyświetlane są loga producentów, które zostały zaimportowane z systemu ERP. Po kliknięciu w wybrane logo, pojawi się lista wszystkich towarów, dla których dodany jest konkretny producent. Sekcje mogą być dodane w szablonie w dowolnym miejscu na stronie głównej.

Aktualności

Sekcja umożliwia zamieszczenie aktualności na stronie głównej w formie listy artykułów z bloga. Tekst wprowadza się w panelu administracyjnym przechodząc do zakładki e-Marketing/Blog.

Banner infografika

Sekcja "Banner infografika" pozwala na zaprezentowanie korzyści z zakupów w Twoim sklepie. Dotyczą one obszarów: informacji o dostawie, płatnościach, rabatach czy programie lojalnościowym. Banner możesz dodać tylko do strony głównej. Dodatkowe bannery mieszczą się w katalogu homepage-small w panelu administracyjnym e-Sklepu, obszar: Wygląd sklepu/ Ustawienia/ Bannery.

Stopka

Sekcja "Stopka" zawiera jeden widok do wyboru.

W widoku Stopki widnieją strony statyczne, którymi można zarządzać w sekcji Wygląd Sklepu/ Ustawienia/ Nagłówek i Stopka. Dla każdej z sekcji wyświetla się jej utworzona w panelu nazwa. W stopce znajdują się także informacje na temat rodzaju prezentowanych cen w e-Sklepie (brutto czy netto) oraz komunikat @Comarch SA 2022. All rights reserved Powered by Comarch e-Sklep. Dodatkowo istnieje możliwość umieszczenia w stopce odnośników do mediów społecznościowych oraz ich ikony. W stopce trzeciej możemy dodać ikony naszych dostawców oraz form płatności wykorzystywanych w sklepie.

Po wybraniu wszystkich niezbędnych sekcji nasza strona główna powinna być gotowa. Efekt naszej pracy możemy podejrzeć klikając Podgląd w prawym górnym rogu.

Dzięki tej opcji możesz zobaczyć, jak będzie prezentował się Twój szablon zarówno w wersji dekstop, jak i mobile.

Strona główna wymaga dwóch podstawowych elementów: nagłówka oraz stopki. Pozostałe elementy nie są obowiązkowe.

Krok 2 - Lista towarów

Kolejnym krokiem jest utworzenie listy towarów. Aby to zrobić, należy rozwinąć listę zgodnie z poniższym rysunkiem, a następnie przejść do wskazanej zakładki:

Bannery

Sekcja "Bannery" daje możliwość wyboru prezentacji bannerów na liście dostępnych towarów, dzięki którym masz możliwość prezentacji nowych grafik.

Panel filtra

Sekcja "Panel filtra" umożliwia dodanie do szablonu jednego z dwóch dostępnych wariantów. Dodatkowo możesz zdecydować o liczbie wyświetlanych wartości filtrów a także o widoku sekcji filtrów.

Podkategorie

Sekcja "Podkategorie" umożliwia dodanie jednego widoku podkategorii. Jeżeli główna kategoria ma swoje podkategorie, menu graficzne zostanie wyświetlone w następujący sposób:

Opis kategorii

Sekcja umożliwia dodanie jednego z dwóch dostępnych opisów kategorii. Wybierając jeden z nich możesz zdecydować czy forma graficzna prezentowania: nazwy, opisu i zdjęcia kategorii, ma być ustawiona jako zdjęcie lub zdjęcie po lewej stronie. Sekcja może być domyślnie zwinięta lub rozwinięta.

Lista towarów

Podobnie, jak w przypadku strony głównej konfigurujemy wygląd listy towarów. Dodatkowo możemy wskazać domyślny widok listy towarów, prezentację atrybutów a także zdecydować czy pozwolisz na zakup towarów wielowariantowych z listy towarów.

W Kreatorze Szablonu Szafir dostępny jest jeden widok listy towarów:

Krok 3 - Koszyk

Po utworzeniu szczegółów towaru przechodzimy do wyboru wersji koszyka dostępnego w e-Sklepie. W Kreatorze Szablonu Szafir dostępne są dwie wersje koszyka.

Dodatkowo na stronie koszyka możesz wskazać sposób prezentacji przeliczników jednostek miary i zdecydować o wyświetlaniu punktów lojalnościowych:

Następnie możemy przejść do modyfikacji wyglądu naszego szablonu. W tym celu należy przejść do zakładki Style.

Style

Jak zmienić kolory, czcionki oraz ikony?

Po dodaniu elementów strony możemy dodatkowo podejrzeć, jak będzie wyglądał nasz przyszły szablon. W tym celu należy przejść do zakładki Style.

Dodatkowo w zakładce Style możemy zmodyfikować wygląd naszego szablonu. Zmianie podlega motyw kolorystyczny.

Motyw kolorystyczny

Aby zmienić kolor naszego szablonu należy przejść do sekcji Motyw kolorystyczny, gdzie do wyboru przygotowaliśmy 3 gotowe motywy.

Każdy z motywów możemy edytować według indywidualnych preferencji. Możemy zmodyfikować kolor poszczególnych elementów (m.in.: tło strony, tło nagłówka, nazwę towaru). Zmiany należy zapisać klikając Zapisz. Jeśli wykonane zmiany nie są zadowalające, możemy przywrócić ustawienia domyśle dla danego motywu kolorystycznego, klikając przycisk Przywróć.

Czcionki

Ikony

Wskazówka

Od teraz możesz zmienić rodzaj loadera, wybierając jedną z 5 propozycji widocznych powyżej.

Funkcja cofania zmian

Mamy możliwość przywracania zmian: dodawania/ usuwania elementów oraz edycji ich położenia, a także stylu w szablonie.

Wskazówka

Funkcję cofania obejmuje zmiany motywu kolorystycznego, natomiast edycja poszczególnych kolorów w motywie nie jest zapisywana.

Generowanie i wgrywanie szablonu

Po zaprojektowaniu wyglądu szablonu możemy go wygenerować i pobrać na dysk korzystając z przycisku Generuj widocznego w prawym górnym rogu:

Obok przycisku Generuj dostępna jest również opcja Importuj szablon, umożliwiająca wgranie wcześniej zapisanego szablonu z dysku i ponowną jego edycję.

W przypadku prawidłowego wygenerowania szablonu wyświetlony zostanie komunikat informujący o tym fakcie i pobrany plik.

Pobrany szablon należy zaimportować w Comarch e-Sklep w zakładce Wygląd sklepu/ Zaimportuj szablon z Kreatora Wyglądu.

W szablonie Szafir znajduje się informacja na temat godziny wygenerowania szablonu w Kreatorze. Taka informacja znajduje się w panelu administracyjnym w menu: Wygląd sklepu/ Ustawienia/ Więcej (trzy kropki), gdzie należy wybrać opcję Edytuj ustawienia zaawansowane, a potem ponownie Więcej/ Edytuj HTML. Następnie z listy plików należy wybrać _layout.html. Informacje na temat modyfikacji, w tym godzina ostatniej modyfikacji, znajdują się nad oknem edycji pliku. Jeżeli plik nie był modyfikowany, wówczas godzina odpowiada godzinie wygenerowania szablonu w kreatorze.

Aktualizacja szablonu

W Kreatorze szablonu Szafir znajduje się opcja aktualizacji poprzednich wersji szablonu. W celu zaktualizowania całego szablonu należy wgrać plik z poprzednim szablonem do Kreatora szablonu Szafir według tej instrukcji:

po uruchomieniu strony kreatora wybierz opcję: Stwórz nowy projekt,
wybierz Nowy szablon,
w prawym górnym rogu wybierz opcję Importuj szablon,

następnie zaimportuj plik z szablonem, który ma być zaktualizowany. Po poprawnym zaimportowaniu szablonu otrzymasz informację zwrotną:

po wgraniu szablonu do aktualizacji użyj opcji Generuj.

Dzięki temu w prosty sposób można starsze szablony Szafir podnieść do wersji aktualnej.

Więcej informacji

Więcej informacji można znaleźć w artykułach o wyglądzie sklepu oraz o dostosowaniu wyglądu.

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Jak wykonać kopię bezpieczeństwa?

W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu.

Jak wyeksportować bannery?

Jak zabezpieczyć hasłem swój szablon?

W tym miejscu nadasz hasło dla swojego szablonu.

Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno:

Składać się z minimum 8 znaków,
Zawierać dużą literę,
Zawierać małą literę,
Zawierać cyfrę 0-9,
Zawierać znak specjalny – ‘!.+?;^]=-(&_)#=

Gotowe! Teraz Twój szablon został zabezpieczony hasłem.

Banner pop-up w szablonie Szafir i Topaz

W niniejszym artykule dowiesz się, w jaki sposób dodać banner pop-up w swoim szablonie Topaz i Szafir. Banner wyświetla się w formie wyskakującego pop-upa, na którym możesz zaprezentować zdjęcie, treść a także przejść do wybranego towaru.

Konfiguracja nowego bannera

Krok 1. Dodaj jeden z dostępnych wariantów banneru pop-up w Kreatorze Wyglądu. Za pomocą funkcji przeciągnij i upuść dodaj banner do nowo utworzonego szablonu Szafir lub Topaz:

Krok 2. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Bannery. Z listy dostępnych bannerów wybierz banner popup_2:

Krok 3. Po wpisaniu nazwy nowego banneru wyświetla się nowy formularz. W tym miejscu masz możliwość dodania opisu dla administratora oraz obrazków do katalogu.

Jeżeli powyższe kroki zostały wykonane, to możesz przejść do dodania obrazku. Po dodaniu obrazków istnieje również możliwość uzupełnienia szczegółów dotyczących konkretnego zdjęcia. Aby dokonać modyfikacji w tym obszarze przejdź w Widok zaawansowany.

Po kliknięciu w odnośnik pojawi się panel, w którym można zmienić np. tekst na bannerze, nagłówek, czas jego wyświetlania, link do którego kieruje dany obrazek, a także tooltip i tekst alternatywny.

Tak wprowadzone zmiany należy zapisać i opublikować. Gotowe! Banner pop - up został dodany i tak prezentuje się w szablonie Topaz.

Po kliknięciu w znacznik "Sprawdź" Twoi klienci zostaną przeniesieni na kartę towaru, gdzie będą mogli dokonać towar do koszyka.

Jak zaktualizować szablon do najnowszej wersji?

Wskazówka

Wstęp

Jak zaktualizować szablon?

Instrukcja aktualizacji szablonów: Rubin, Szafir, Topaz i One Page Shop (dostępnych w Kreatorze Wyglądu)

wygenerowanie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Podczas dokonywania modyfikacji w szablonach zachęcamy do skorzystania z naszego Centrum Pomocy.

Wskazówka

Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Instrukcja aktualizacji szablonów: Bursztyn, Agat i Opal.

Następnie wyświetli się nowe okno, w którym należy:

wybrać tzw. slot, który zostanie nadpisany nowym (aktualnym) szablonem. W każdym e-Sklepie dostępne są 4 miejsca na wgranie szablonu, spośród których jeden szablon oznacza się jako aktywny i domyślny,
określić, czy wgrywany szablon ma podmienić istniejące bannery. Gdy parametr zostanie zaznaczony, wówczas wszystkie bannery zapisane na danym slocie zostaną usunięte i zastąpione bannerami z importowanego szablonu. Jeżeli w nadpisywanym szablonie znajdują się bannery oraz lookbooki, które mają nadal wyświetlać się w e-Sklepie, należy wskazany parametr zostawić odznaczony. Gdy parametr nie zostanie zaznaczony, wówczas dotychczasowe bannery i lookbooki nie zostaną usunięte.
Zaimportować szablon do e-Sklepu.
Wskazówka
Import szablonu jest operacją nieodwracalną i spowoduje nadpisanie dotychczasowego szablonu. W przypadku, gdy szablon był modyfikowany (dokonywano zmian w kodzie HTML) jego aktualizacja spowoduje, iż zmiany nie zostaną przeniesione. Warto wykonać eksport posiadanego szablonu do pliku w celu zapisania oraz posiadania wglądu to wprowadzanych modyfikacji. Jeżeli istnieje taka konieczność należy ponownie dokonać samodzielnej edycji szablonu.

Wszelkie zmiany należy zapisać, a następnie opublikować.

Uwaga

Jeżeli szablon nie zostanie opublikowany, wówczas nie pojawi się on w e-Sklepie.

Instrukcja aktualizacji innych szablonów (niż szablonów Comarch) oraz aktualizacji szablonów z własnymi modyfikacjami

Szablon Szafir

Szablon Szafir jest dedykowany dla sklepów w wersji B2B. Dostępny jest także dla sklepów w wersji Enterprise. Użytkownik może zainstalować szablon zarówno przy uruchomieniu nowego sklepu, jak i w obecnie używanym sklepie z poziomu panelu administracyjnego. W szablonie Szafir obsługiwana jest funkcja PWA, czyli Progressive Web App. W przypadku otworzenia na urządzeniu mobilnym (w trybie responsywnym) strony e-Sklep z szablonem Szafir, sklep wyświetl komunikat o możliwości pobrania skrótu na ekran główny urządzenia. W efekcie e-Sklep uruchomiony z takiego skrótu będzie wyglądał jak aplikacja natywna zainstalowana na urządzeniu mobilnym i dostosowana do wyświetlania na nim. W szablonie zaimplementowano także meta znaczniki Open Graph niezbędne do prawidłowej komunikacji z platformą Facebook oraz przesyłania towarów dla sklepu Facebook. Więcej na ten temat przeczytasz tutaj. Główne wyróżniki szablonu: 1. Funkcje B2B:

Obsługa klientów detalicznych oraz typu firma – połączenie modeli B2B oraz B2C,
Wyświetlanie zamówień, faktur i wydań zewnętrznych z systemu ERP w profilu klienta dzięki wykorzystaniu Comarch e-sklep Sync,
Inna prezentacja strony głównej przy wykorzystaniu parametru Dostęp tylko dla klientów zalogowanych,
Obsługa wielu koszyków (z możliwością edycji nazwy koszyka i usuwania całego koszyka jednym przyciskiem),
Zmiana firmy w nagłówku oraz możliwość dodawania pracowników w profilu klienta – obsługa wielu loginów,
Możliwość szybkich zakupów z list towarowych bez przechodzenia na szczegóły,
Szablon przystosowany do dużych zamówień z wieloma pozycjami,
Opiekun handlowy dla Kontrahenta – widoczny po zalogowaniu, zamiast danych kontaktowych sklepu w nagłówku,
Możliwość blokady zmiany Danych Firmy przez Kontrahenta. Więcej informacji na ten temat zostało przedstawione w artykule.

2. Nawigacja w szablonie:

Możliwość wyboru jednego z trzech widoków na listach towarowych,
Możliwość ustawienia krótkiego opisu towarów dla widoku o typie „Lista”,
Głębokie wielopoziomowe menu główne w orientacji pionowej,
Aktualności na stronie głównej w formie listy artykułów z bloga. Możliwość prezentacji artykułów na dwa sposoby: rozszerzony i kompaktowy (menu Wygląd sklepu > Ustawienia > Ustawienia szablonu),
Lista produktów na stronie głównej, która idealnie zaprezentuje nowości, promocje, towary rekomendowane itp.,
Duży przewijany banner na stronie głównej,
Małe banery nad stopką, po dodaniu powyżej pięciu obrazów – możliwe do przewijania,
Graficzne menu kategorii na stronie Produkty.

3. Towary:

Prezentacja stanów magazynowych w formie graficznej, tekstowej oraz liczbowej zgodnie z konfiguracją w panelu administracyjnym,
Prezentowanie i odtwarzanie plików w formacie MP4. Po przesłaniu filmu z systemu Comarch ERP Optima lub Comarch ERP XL do swojego e-Sklepu, zostanie on wyświetlony w sekcji z filmami lub w galerii w zależności od wariantu widoku na stronie ze szczegółami towaru.
Prezentacja towarów tylko w cenie netto (po włączeniu w menu Wygląd sklepu > Ustawienia > Ustawienia szablonu w sekcji Cena netto dla parametru Prezentacja tylko ceny netto na stronie prezentacji towaru opcji Tak).
Warianty towarów wyświetlane w formie tabelki z możliwością dodania do koszyka dowolnej ilości każdego wariantu,
Zestawy na towarze w formie slidera,
Sekcja prezentujące towary podobne (zamienniki). Wyświetlają się również inne typy (definiowane w systemie ERP) m.in. akcesoria, sugerowane, użytkownika.
W przypadku, gdy towar posiada jednostkę pomocniczą i zostanie ona wybrana przez kontrahenta, wówczas cena w jednostce podstawowej będzie wyświetlana nad ceną w jednostce pomocniczej.
Wyświetlanie daty od kiedy towar będzie dostępny w e-Sklepie, w przypadku jej określenia dla statusu Zapowiedź,
Wyświetlanie informacji o kosztach dostawy,
Po przejściu na stronę sklepu z końcówką /produkty,2 wyświetlane są grupy towarów. Użytkownik ma możliwość wybrania konkretnej kategorii, po jej wyborze zostanie wyświetlona lista towarów wybranej grupy.
Lista towarów dla widoku o typie „Lista” zawiera krótki opis towarów, który domyślnie jest zwinięty. Po rozwinięciu szczegółów, kontrahent ma możliwość uzyskania większej ilości informacji na temat produktu bez przechodzenia do karty towaru.
Dodawanie opinii do towaru. Dostępność tej funkcji zależy od ustawień w panelu administracyjnym: Ustawienia > Ustawienia sklepu > Towary > Opinie o towarze.
Możliwość prezentowania ceny poprzedniej jako sugerowanej ceny detalicznej (w menu Wygląd sklepu > Ustawienia > Ustawienia szablonu w sekcji Cena poprzednia dla parametru Prezentuj cenę poprzednią jako sugerowaną cenę detaliczną włączona opcja Tak (domyślnie zaznaczony jest parametr Nie). Zmiany w szablonie należy zapisać i opublikować.)

W panelu administracyjnym na zakładce Wygląd sklepu > Ustawienia > Ustawienia szablonu na zakładce Lista towarów znajdują się nowe parametry związane z wyświetlaniem listy produktów: do zmiany prezentowania kategorii, filtrów oraz graficznego menu. Aktualnie można zdecydować o ilości wyświetlanych filtrów, miejscu w którym mają się znajdować i tego, czy ta sekcja ma się rozwijać czy nie w e-Sklepie. Administrator sklepu może również zmienić formę graficzną prezentowania nazw, opisu i zdjęć kategorii oraz aktywować nowe graficzne menu nawigacji dla podgrup. Aby wprowadzone zmiany były widoczne w szablonie należy je zapisać i opublikować. 4. Zamówienie:

Zamówienie dla zarejestrowanych kontrahentów oraz niezarejestrowanych,
Możliwość wyboru skonfigurowanych adresów na zamówieniu,
Szybkie składanie zamówień w jednym kroku,
Macierz dostaw w formie list rozwijalnych (dostawa i płatność),
W profilu klienta możliwość pobierania kopii faktury elektronicznej w formacie PDF wystawionej do zamówienia w systemie ERP. Wyświetlane są także dokumenty ZS, FS i WZ,
Ponowienie nieudanej płatności dostępne zarówno dla klientów zarejestrowanych jak i jednorazowych,
Możliwość dodania załączników do zamówienia,
Widok szczegółów złożonego zamówienia dla niezalogowanych klientów,
Możliwość anulowania edytowalnego zamówienia, które nie zostało jeszcze wysłane do systemu ERP,
Anulowanie uprzednio edytowanego zamówienia usuwa również koszyk z towarami, które miały zostać dodane do danego zamówienia,
Obsługa zwrotów i reklamacji, wraz z załącznikami (jeżeli w panelu administracyjnym w menu Ustawienia > Ustawienia sklepu > Reklamacje / zwroty zostanie włączona opcja Załączniki do reklamacji i zwrotów) do zrealizowanych zamówień,
Klienci detaliczni podczas składania zamówienia z paragonem mają dostępne pole, w którym mogą podać numer NIP, na który w przyszłości może zostać wystawiona faktura do paragonu. Informacja o rodzaju dokumentu handlowego wybranego przez Klienta jest widoczna na szczegółach zamówienia w Strefie Klienta oraz w panelu administracyjnym, a także zostanie przeniesiona do systemu ERP,
Klienci firmowi podczas zakupów mogą zdecydować w koszyku, czy do danego zamówienia ma być wystawiony dokument handlowy w postaci faktury lub paragonu. Po wybraniu opcji Paragon widoczne jest pole z numerem NIP. Po jego uzupełnieniu możliwe jest wygenerowanie w systemie ERP w późniejszym terminie faktury sprzedaży do paragonu.
Formularz zamówienia zapamiętuje wprowadzony numer NIP. Zmiana z Faktury na Paragon przenosi wprowadzony numer NIP i nie wymaga ponownego wprowadzenia.
Dostępna kolumna na liście zamówień z adresem e-mail, która umożliwia rozpoznanie, czy zamówienie zostało złożone przez kontrahenta, czy przez któregoś z jego pracowników.

Wskazówka

Jeżeli w panelu e-Sklep w zakładce Ustawienia > Ustawienia sklepu > Zamówienia włączony jest parametr "Składanie zamówień tylko przez firmy" w e-Sklepie możliwe będzie wygenerowanie jedynie Faktury VAT. W przypadku, gdy klient wybierze opcję paragonu i nie poda nr NIP, a opcja ta będzie włączona, zostanie wystawiona faktura na podstawie nr NIP podanego podczas rejestracji.

5. Pobieranie danych:

Szablon szafir podczas rejestracji pobiera dane z GUS. Więcej w artykule Pobieranie danych z GUS.

6. Strefa Klienta:

dedykowane menu w profilu Klienta zalogowanego,
dostęp do wszystkich transakcji oraz dokumentów sprzedaży – zamówienia, zapytania o wycenę, oferty sprzedaży, faktury, wydania zewnętrzne,
wygodny proces reklamacji oraz zwrotów,
zarządzanie pracownikami oraz danymi firmy,
dostęp do programu lojalnościowego oraz dedykowanych promocji Klienta,
dodatkowe pliki do pobrania oraz zgody w e-Sklepie.

Każdą zakładkę w Strefie Klienta można odpowiednio obudować w link, w celu utworzenia bezpośredniego odnośnika. Poniżej znajduje się lista elementów w Strefie Klienta oraz ich nazwy, jakie można wykorzystać:

Zamówienia pochodzące z e-Sklepu – eshop-orders
Zamówienia pochodzące z systemu ERP (pobrane przez Comarch e-Sklep Sync) – erp-orders
Zapytania o Wycenę – inquiries
Oferty Sprzedaży – offers
Faktury – invoices
Wydania zewnętrzne – sor
Wydania magazynowe – wm
Reklamacje/Zwroty w trakcie realizacji – active-complaints
Reklamacje/Zwroty zrealizowane – executed-complaints
Dane firmy – customer-details
Pracownicy – employees-list
Twoje konto – your-account
Program lojalnościowy – loyalty
Zgody – consents
Do pobrania – to-download
Promocje – discounts.

Przyklad

Adres https://demob2b.comarchesklep.pl/profil-klienta/6?tab=discounts stanowi bezpośredni odnośnik do zakładki Promocje w Strefie Klienta.

Wskazówka

Jeżeli chcesz zaprezentować ceny netto na liście towarów, należy odpowiednio skonfigurować prezentację cen w e-Sklepie. Instrukcja dotycząca prezentacji cen netto znajduje się w artykule o Cenach i rabatach.

Konfiguracja paska nawigacji w szablonie Szafir oraz przykłady zastosowania zostały przedstawione w artykule Pasek nawigacji - Szablon Szafir. Dodatkowo w Strefie Klienta na liście zamówień z e-Sklepu (zakładka Sklep B2B) oraz na liście zamówień przesyłanych przez Comarch e-Sklep Sync (zakładka Pozostała sprzedaż) widnieją statusy płatności i dostaw dla poszczególnych zamówień. W szablonie możliwe jest wyświetlanie sugerowanej ceny detalicznej widocznej zarówno dla klientów zalogowanych jak i niezalogowanych. Sugerowana cena detaliczna wyświetlana jest na podstawie ceny poprzedniej z systemu ERP. Aby ją wyświetlić klientom niezalogowanym należy w panelu administracyjnym e-Sklepu w sekcji Ustawienia > Ustawienia sklepu > Ceny i rabaty włączyć parametr Ukrywanie cen dla klientów niezalogowanych.

Następnie należy włączyć parametr Wyświetlanie cen poprzednich dla klientów niezalogowanych.

Po jego włączeniu w ustawieniach szablonu Szafir (Wygląd sklepu > Ustawienia) w sekcji Cena poprzednia - Prezentuj cenę poprzednią jako sugerowaną cenę detaliczną należy wybrać "Tak". W przypadku kiedy sklep jest dostępny dla klientów niezalogowanych i nie są ukrywane ceny, wystarczy aktywować tylko parametr w sekcji Wygląd sklepu.

Po włączeniu powyższych ustawień, klient niezalogowany przeglądający ofertę e-Sklepu zobaczy towary w sugerowanych cenach detalicznych.

Klient zalogowany lub każdy klient (jeśli ukrywanie cen klientom niezalogowanym jest wyłączone) także zobaczy sugerowaną cenę detaliczną.

Sugerowana Cena detaliczna będzie widoczna również na liście towarów.

W Strefie Klienta na zakładce Pracownicy istnieje możliwość blokowania pracowników. Domyślnie każdy nowo dodany pracownik jest oznaczany jako aktywny. Kontrahent ma możliwość blokowania pracowników, po kliknięciu w opcję Zablokuj. Wówczas taki pracownik nie może się zalogować do e-Sklepu. Po zablokowaniu istnieje możliwość odblokowana pracownika w efekcie czego zalogowanie ponownie jest możliwe.

W Strefie Klienta na zakładce Promocje wyświetlane są rabaty przesyłane z systemów Comarch ERP: Altum i XL. Promocje wyświetlane są wraz z opisami, jakie dodano do nich w systemie ERP. W Szablonie Szafir widnieją dodatkowe bannery, które wyświetlają się nad stopką strony. Na dodatkowych bannerach obsługa sklepu ma możliwość zaprezentowania informacji na temat sklepu, np. informacji o dostawie, płatnościach, rabatach czy programie lojalnościowym. Istnieje możliwość edycji bannerów udostępnionych przez e-Sklep lub dodania własnych obrazów. Powyżej pięciu zdjęć bannery są przewijalne.

Dodatkowe bannery mieszczą się w katalogu homepage-small w panelu administracyjnym e-Sklepu, obszar: Wygląd sklepu > Ustawienia > Bannery. W szablonie znajduje się także graficzne menu producentów. Producenci wyświetlani są pod newsletterem na stronie głównej. Menu jest budowane na podstawie producentów i ich logotypów przesyłanych z systemu ERP. Producentów zdefiniowanych w systemie ERP należy przypisać do towarów zgodnie z instrukcją używanego systemu ERP. Dostępne w szablonie motywy kolorystyczne to: Granatowy (domyślny), Niebieski oraz Pomarańczowy. Zmiana wybranego motywu możliwa jest w panelu administracyjnym w sekcji Wygląd sklepu > Ustawienia zakładka Ustawienia szablonu. Po wyborze docelowego motywu zmiany należy zapisać i opublikować. Widok listy towarów o typie „Lista” zawiera krótki opis towaru, który domyślnie jest zwinięty. Istnieje możliwość rozwinięcia szczegółów w celu uzyskania większej ilości informacji na temat produktu, bez przechodzenia do strony produktu. Po rozwinięciu szczegółów na liście widoczny jest opis towaru oraz szczegóły towaru: producent, marka, waga, stan magazynowy, status dostępności, czas dostępności (dla statusu Dostępny) oraz data zapowiedzi (dla statusu Zapowiedź). Krótki opis należy dodać w systemie ERP.

W szablonie istnieje możliwość używania powszechnie stosowanych symboli walut: zł, €, £, $. Nowy widok symbolu waluty będzie dostępny:

na liście walut/języków do wyboru – każda waluta z odpowiednim symbolem;
na liście towarów;
na szczegółach towaru;
w koszyku: na pozycjach towarów, dla form płatności i dostaw;
w Strefie Klienta w Liście zakupów;
w Strefie Klienta w sekcjach: Zamówienia, Oferty sprzedaży, Reklamacje/Zwroty, Promocje;
w porównywarce towarów;
w wyszukiwarce prostej oraz zaawansowanej.

Aby uruchomić funkcję należy w systemie ERP udostępnić waluty obce do e-Sklepu oraz opcjonalnie w panelu administracyjnym e-Sklepu w menu Ustawienia > Ustawienia sklepu > Dane sklepu > Waluty wprowadzić swoje nazwy dla walut przesłanych z systemu ERP. Wybór oraz zmiana symbolu waluty będzie możliwa po kliknięciu w listę rozwijaną znajdująca się w prawym górnym rogu szablonu, z lewej strony przycisku "Zaloguj się":

Aktualną czcionka szablonu Szafir jest czcionka Roboto – Google Font. Gotowa instrukcja dotycząca zmiany czcionki dostępna jest w artykule: Zmiana czcionki w szablonie.

Sprawdź historię zakupów

W e-Sklepie istnieje możliwość podglądu historii zakupów towaru dla klientów zalogowanych. Funkcja działa na podstawie wystawionych faktur do złożonego zamówienia na dany towar. Odnośnik "Sprawdź historię zakupów" widoczny jest na szczegółach towaru. Po kliknięciu przycisku widoczna będzie historia zakupów z ostatnich 6 miesięcy. Funkcję można aktywować, jeśli e-Sklep:

Jest w wersji B2B
Posiada zainstalowaną i aktywną usługę e-Sklep Sync
Jest powiązany z programem Comarch ERP XL.

Aby włączyć parametr, należy przejść do zakładki Wygląd sklepu > Ustawienia, a następnie w ustawieniach podglądu historii zakupów zaznaczyć Tak.

Widok ustawień w panelu administracyjnym

Efekt widoczny na szczegółach towaru w szablonie Szafir

Historia zakupów wyświetlana po naciśnięciu przycisku "Sprawdź historię zakupów"

Informacja o tym, że towar znajduje się w koszyku.

W szablonie Szafir Klient zostanie poinformowany o tym, że dany produkt znajduje się już w koszyku. Po wyborze towaru i kliknięciu "Kup teraz", przy ponownej próbie dodania do koszyka, na przycisku pojawi się ikona oraz odpowiedni tooltip:

Informacja widnieje na szczegółach towaru. W szablonie Szafir prezentacja tej informacji stanowi dodatek i domyślnie jest wyłączona.

Żeby ją uruchomić, należy przejść do panelu administracyjnego, a następnie do sekcji Wygląd sklepu > Ustawienia zakładka Ogólne. Następnie po odnalezieniu sekcji "Informuj o tym, że towar znajduje się już w koszyku" należy zmienić opcję na "TAK". Po dokonaniu modyfikacji koniecznie zapisz i opublikuj zmiany. Więcej o darmowych szablonach przeczytasz w artykule Gotowe szablony Comarch.

Szablon Rubin - podstawowe informacje

Wstęp

obsługa sprzedaży dla klientów biznesowych oraz indywidualnych,
intuicyjna nawigacja boczna pozwalająca na szybki przegląd towarów dodanych do koszyka bądź zapytania o wycenę,
trzy widoki listy towarów, w tym lista pozwalająca na jednoczesne dodawanie wielu towarów zarówno do koszyka, jak i do list zakupów,
szczegóły towaru z paskiem nawigacji przyklejonym do nagłówka, który podczas przeglądania szczegółów oferty umożliwia natychmiastowy dostęp do najważniejszych sekcji i funkcji – w tym możliwość szybkiego dodania towaru do koszyka,
koszyk z rekomendacjami produktów oraz jednostronną finalizacją, ułatwiającą zakup,
profil klienta pozwalający na łatwą identyfikację statusów zamówień oraz dostęp do faktur i wydań zewnętrznych z systemu ERP,
obsługa wielu list zakupów,
możliwość składania zapytań o wycenę produków.

Obsługa sprzedaży dla klientów biznesowych

obsługa klientów detalicznych oraz typu firma – połączenie modeli B2B oraz B2C,
możliwość włączenia tylko cen netto,
obsługa wielu koszyków (z możliwością edycji nazwy koszyka i usuwania całego koszyka jednym przyciskiem),
obsługa wielu list zakupowych, ułatwiająca powtórne zakupy tych samych towarów.
wyświetlanie zamówień, faktur i wydań zewnętrznych z systemu ERP w profilu klienta dzięki wykorzystaniu Comarch e-sklep Sync,
możliwość włączenia limitów kredytowych,
opcja dostępu do sklepu tylko dla zalogowanych użytkowników,
możliwość dodawania pracowników w profilu klienta,
opiekun handlowy dla kontrahenta.

Konfiguracja szablonu Rubin w panelu administracyjnym

Z poziomu panelu administracyjnego możesz dokonywać konfiguracji opcji wyglądu szablonu. Po przejściu do sekcji Wygląd sklepu > Ustawienia dostępne są ustawienia dla czterech zakładek:

W zakładce Ogólne możesz dokonać zmian w motywie kolorystycznym Twojego e-Sklepu. Z tego poziomu również możliwe do konfiguracji są takie opcje jak: ustawienia ceny netto, prezentacja promocji, rabatów progowych czy jednostek pomocniczych.
W zakładce Strona główna znajdują się ustawienia, dzięki którym możesz ustalić kolejność poszczególnych elementów na stronie głównej. Dodatkowo możesz zarządzać animacjami na poszczególnych bannerach i sliderach.
W zakładce Lista towarów znajdują się ustawienia dotyczące filtrów czy wyświetlania opisu danej kategorii towarowej. Z tego miejsca można zarządzać prezentacją informacji na kaflach w ramach listy.
W zakładce Zarzadzanie strefą klienta znajdziesz ustawienia elementów, które mają być widoczne po zalogowaniu do strefy klienta.

Strona główna

Banner w formie slidera – ustawienia dla banneru można znaleźć w sekcji Wygląd sklepu > Ustawienia > Bannery po przejściu do sekcji mainBanner. Domyślny rozmiar dla obrazka we wskazanym bannerze wynosi: 1574px x 425px. Więcej o ustawieniach można przeczytać w artykule dotyczącym konfiguracji bannerów.

Banner z infografikami – pozwala na zaprezentowanie korzyści z zakupów w Twoim sklepie. Domyślny rozmiar obrazków wynosi: 48px x 48px. Edycja banneru jest możliwa z poziomu opcji Wygląd sklepu > Ustawienia > Bannery po przejściu do sekcji homepage-small.

Banner popup – pozwala na poinformowanie klientów o bieżącej ofercie czy rabatach. Domyślny rozmiar grafiki w bannerze wynosi: 330px x 418px. Edycja banneru jest możliwa z poziomu opcji Wygląd sklepu > Ustawienia > Bannery po przejściu do sekcji banner_popup1.

Zapis do newslettera – newsletter to jeden z kluczowych elementów każdej strony internetowej, który pozwala na utrzymywanie kontaktu z użytkownikami i budowanie bazy subskrybentów. W przypadku szablonu Rubin, sekcja z zapisem do newslettera jest możliwa do ustawienia w formie stałej sekcji na stronie głównej.

Możliwe jest także zaprezentowania zapisu do newslettera w formie banneru.

Towary polecane – slider z wybranymi towarami. Mogą to być na przykład towary z wybraną flagą, najczęściej kupowane na sklepie lub ustawione ręcznie z poziomu Panelu Administracyjnego. Elementy te możliwe są do edycji w zakładce Wygląd Sklepu > Ustawienia > Edytuj ustawienia zaawansowane > Obiekty po przejściu do obiektu new-product-mp-x. Więcej informacji można znaleźć w ramach artykułu dotyczącego wyświetlania towarów polecanych w szablonach.

Tekst SEO – wskazany element charakteryzuje się możliwością wprowadzenia statycznego opisu na stronie głównej w e-Sklepie. Aby ustawić treść, przejdź do zakładki Wygląd Sklepu > Ustawienia > Edytuj ustawienia zaawansowane > Obiekty. W tym miejscu należy odszukać obiekt text-element-1-mp-1 i edytować element tekstowy.

Aktualności – w tej sekcji znajdziesz najnowsze artykuły z bloga w formie slidera. Każdy wpis zawiera obrazek, tytuł, krótki fragment treści, a także tagi tematyczne oraz datę ostatniej aktualizacji.

Slider marek oraz slider producentów – w ramach wskazanych sliderów będą pokazywały się loga marek i producentów, uzupełnionych po stronie systemów Comarch ERP.

Lista towarów

1. Widoki list towarów

Lista towarów zawiera trzy różne widoki. W zakładce Wygląd sklepu > Ustawienia > Lista towarów jest możliwość wybrania domyślnego widoku:

Każdy z nich ma inne zastosowanie i cechy charakterystyczne:

W ramach widoku kafli użytkownicy mają możliwość szybkiego dodania pojedynczej sztuki towaru:

W przypadku listy z rozbudowanym kaflem, możesz zaprezentować opis towaru lub jego atrybutów zgodnie z ustawieniem:

Szybka lista charakteryzuje się możliwością dodania wielu towarów jednocześnie. Na wskazanej liście jest możliwość dodawania równocześnie kilku towarów zarówno do listy zakupów, jak i do koszyka:

W przypadku ustawień dla widoków szybkiej listy i rozbudowanych kafli, istnieje możliwość ustalenia ilości wyświetlanych atrybutów:

2. Graficzna prezentacja wariantów

W ramach kafli możesz ustawić graficzną prezentację wariantów – po najechaniu na kafel zostaną zaprezentowane atrybuty w postaci:

miniatur zdjęć,
wariantów kolorystycznych,
wartości tekstowej.

Wskazaną prezentację można włączyć po przejściu do opcji Wygląd sklepu > Ustawienia > Lista towarów. W tym miejscu można wybrać sposób prezentacji wariantów:

3. Opis kategorii

Na liście towarów możesz wyświetlić także opis danej kategorii dodany po stronie systemu Comarch ERP. Jest on zaprezentowany w szablonie w następującej formie:

Jeżeli został on wypełniony, możesz zdecydować czy ma być on domyślnie zwinięty czy rozwinięty:

4. Panel filtra

W ramach ustawień listy towarów do dostosowania możliwe są też filtry. Z tego poziomu dostępne do skonfigurowania są następujące opcje:

Liczba wyświetlanych wartości, która wskazuje ile domyślnie będzie pokazanych elementów danego filtra przed przyciskiem „Pokaż więcej”:

W przypadku takiego ustawienia przed wskazanym przyciskiem będzie prezentowane pięć wartości filtra – reszta zostanie zaprezentowana po rozwinięciu:

Filtruj po użyciu przycisku „Zastosuj”:

Zgodnie z ustawieniem filtry będą działać dopiero po kliknięciu wskazanego przycisku. Jeżeli parametr jest ustawiony na „Nie”, lista będzie filtrować się dynamicznie po wybraniu filtra.

Domyślne ustawienie filtrów jako zwiniętych bądź rozwiniętych:

Wskazane ustawienie wpływa na to, czy po wejściu na listę towarów będą wskazane wartości filtrów czy zostaną one zaprezentowane dopiero po rozwinięciu:

Wskazanie elementów, które mają być prezentowane w panelu filtrów:

Graficzna prezentacja filtra typu kolor, którą należy skonfigurować zarówno w Panelu administracyjnym, jak i systemie Comarch ERP według instrukcji. Po wykonaniu odpowiednich kroków, kolory będą prezentować się następująco:

Szczegóły towaru

1. Sekcja z towarem

W ramach szczegółów towaru możemy wyróżnić sekcje z towarem.

W jej ramach prezentowane są zdjęcia towarów oraz informacje towarze, takie jak:

Ceny, w tym prezentację:
- ceny netto,
- najniższej ceny towaru,
- sugerowanej ceny detalicznej po włączeniu ustawienia w menu Wygląd sklepu > Ustawienia dla parametru Prezentuj cenę poprzednią jako sugerowaną cenę detaliczną.
- cen w ramach progów rabatowych po odpowiednim ustawieniu rabatów progowych.
Jednostki miary oraz przeliczniki do jednostki podstawowej lub domyślnej.
Stan magazynowy.
Dostępność produktu.
Cechy towaru.
Informacja o wartości dostawy danego towaru.
Możliwość udostępnienia towaru w social mediach lub za pomocą linku.
Opcję „Zapytaj o towar” bądź „Zapytaj opiekuna” w zależności od konfiguracji.

W tym miejscu klienci mają także dostęp do dodatkowych opcji takich jak:

Tabela rozmiarów – możliwa do ustawienia z poziomu ustawień Wygląd sklepu > Ustawienia > Ogólne. Tabela rozmiarów jest możliwa do skonfigurowania w formie strony, pliku pdf lub popupu.
Sprawdź dostępność w salonie – dzięki wskazanemu elementowi, potencjalni klienci będą mieli okazję sprawdzić, czy dany towar znajduje się w sklepie stacjonarnym (salonie). Funkcja jest dostępna po spełnieniu odpowiednich wymagań konfiguracyjnych opisanych w artykule: Sprawdź dostępność towaru w salonie.
Historia zakupów – dla sklepów w wersji B2B, powiązanych z systemem Comarch ERP XL oraz aktywną usługą e-Sklep Sync, możliwe jest włączenie wskazanego ustawienia w opcjach Wygląd sklepu > Ustawienia > Ogólne:

Dzięki temu możliwe będzie wskazanie historii zakupów z ostatnich 6 miesięcy

Harmonogram dostaw – funkcja służy do sprawdzania, czy towar został zamówiony u dostawcy, jak również udostępnia informacje o zamówionej ilości oraz planowanej dostawie. Więcej informacji na jej temat można przeczytać w artykule udostępnionym w Centrum Pomocy.

2. Opis i specyfikacja

W pierwszej kolejności wskazane są opis i specyfikacja danego towaru. Wskazane elementy takie jak opis czy atrybuty towaru są możliwe do dodania po stronie systemów Comarch ERP.

3. Podmiot odpowiedzialny

4. Opinie o towarze

5. Pliki do pobrania

Sekcja z plikami do pobrania zwiera pliki załączone na karcie towaru po stronie systemu Comarch ERP:

6. Zestawy

W przypadku korzystania z systemu Comarch ERP Optima, do zaprezentowania na stronie szczegółów towaru możliwe są zestawy:

Dzięki wskazanej prezentacji, klient może dowiedzieć się o promocyjnej ofercie zakupu kilku towarów jednocześnie w tańszej cenie.

7. Towary podobne i akcesoria

Koszyk

Formularz z danymi zamawiającego oraz danymi do faktury.
Sposób dostawy.
Sposób płatności.

Dzięki temu promocja zostanie zaprezentowana w koszyku w następujący sposób:

Dodatkowo, w przypadku dostaw, możliwe jest także włączenie edycji daty dostawy:

Wskazane ustawienie prezentuje się następująco:

Zapytanie o wycenę

Do zapytania o wycenę możesz przejść z poziomu nagłówka, klikając ikonę "Zapytanie o wycenę". Po kliknięciu w szablonie prezentowany jest panel boczny z towarami dodanymi do zapytania:

Po przejściu do szczegółów, dostępny jest formularz:

Profil klienta

1. Ustawienia profilu klienta

Dostępne – ustawienie wyświetlania danego elementu na stronie. Jeżeli parametr jest zaznaczony (podświetla się na szaro) wówczas element będzie widoczny na stronie.
Kolejność – w tym polu za pomocą strzałek możemy zmienić kolejność przycisków.
Ikona – w tym miejscu należy wprowadzić nazwę ikony, która powinna się wyświetlać na dodanym elemencie.
Etykieta PL – nazwa elementu, która będzie się wyświetlała w polskiej wersji strony.
Id tłumaczenia – id z którego będą pobierane tłumaczenia elementu wyświetlane w obcojęzycznej wersji strony. Tłumaczenia dodawane są w panelu administracyjnym: Wygląd sklepu > Ustawienia > Tłumaczenia.

2. Dokumenty dostępne w profilu klienta

W ramach profilu klienta dostępne są dokumenty związane z procesem zamówienia w e-Sklepie. Z tego poziomu klient ma dostęp do zakładek prezentujących:

zamówienia,
faktury,
wydania zewnętrzne,
wydania magazynowe.

3. Zapytania o wycenę i oferty sprzedaży

Z tego poziomu klient ma dostęp również do listy z wykonanymi zapytaniami o wycenę.

Po stworzeniu wyceny na dane zapytanie, w zakładce Oferta sprzedaży pojawi się oferta do zaakceptowania przez klienta:

Więcej informacji na temat zapytań i ofert sprzedaży można znaleźć w artykułach: Zapytaj o cenę oraz Jak stworzyć ofertę sprzedaży i zapytanie ofertowe?

4. Reklamacje/zwroty

Klient ma możliwość zareklamowania towaru po przejściu na szczegóły zamówienia. Z tego poziomu jest możliwość wybrania opcji reklamacji dla towaru:

Informacje o reklamacjach znajdą się w zakładce Reklamacje/ Zwroty:

5. Moje dane

6. Pracownicy

We wskazanej zakładce istnieje możliwość dodania pracownika, jak również jego zablokowania.

Dodatkowo jeżeli pracownik jest przypisany do kilku firm istnieje możliwość zmiany firmy z poziomu nagłówka sklepu:

Więcej na temat pracowników w e-Sklepie możesz dowiedzieć się w artykule: Wielu pracowników kontrahenta.

7. Twoje konto

We wskazanej zakładce znajdują się dane kontaktowe klienta, jak i dane do logowania – e-mail i hasło. Z tego poziomu dostępna jest również historia konta

8. Zgody

W tym miejscu klientowi prezentowana jest lista zaakceptowanych zgód:

9. Do pobrania

10. Promocje

rabaty dla nowego klienta
rabaty od wartości zamówienia
rabat dla stałego klienta
rabaty z Comarch ERP
stała cena z Comarch ERP

Aby wskazane promocje wyświetlały się w profilu klienta należy włączyć ustawienie w Wygląd sklepu > Ustawienia > Ogólne:

Informacje o konfiguracji rabatów można znaleźć w ramach artykułu: Rabaty – rodzaje i zasady wyliczania.

Listy zakupów

W ramach listy jest możliwa do ustawienia data przypomnienia:

Dodatkowo z tego poziomu klient ma możliwość nadania liście nazwy, przeniesienia jej do zapytania o wycenę, jak również dodania towarów z listy do koszyka.

Lookbook

Wskazówka

Rekomendowany rozmiar grafik do lookbooka to 578 x 578 px.

Aby poprawnie skonfigurować lookbook, skorzystaj z naszej instrukcji zawartej w artykule: Jak skonfigurować Lookbook w Comarch e-Sklep?

Blog

Szczegółowe informacje na temat konfiguracji bloga w e-Sklepie znajdują się w artykule: Jak skonfigurować blog?

Kreator sklepu detalicznego (B2C)

Dlaczego na szczegółach towaru w szablonie Topaz w wersji 2021 nie wyświetlają się zdjęcia ?

Od wersji 2021 w Comarch e-Sklep dostępy jest filtr img2, który standardowo został obsłużony w szablonie Topaz w wersji 2021. W przypadku najnowszej wersji szablonu wgranej do sklepu w wersji 2020.4 lub starszej mogą nieprawidłowo wyświetlać się zdjęcia na szczegółach towaru (z uwagi na zastosowany filtr img2, który nie jest obsługiwany we wcześniejszych wersjach e-Sklepu). Jeśli posiadasz Comarch e-Sklep w wersji 2020.4 lub starszej niezbędne jest wygenerowanie szablonu Topaz w wersji 2020. Na stronie Kreatora wyglądu , wybierz jedną z opcji:

stwórz nowy projekt,
edytuj gotowy szablon,
dokończ poprzedni szablon.

Na środku strony dostępne jest pole: Wybierz wersję, w którym należy wybrać z listy wersję: 2020 i kliknąć w przycisk – Rozpocznij.

Zostaniesz wówczas przekierowany na stronę Kreatora wyglądu w wersji 2020.4, gdzie będziesz mógł wygenerować szablon w wersji (2020.4), zgodnej z wersją e-Sklepu. Po wygenerowaniu szablonu w wersji 2020.4, zaimportuj szablon do panelu administracyjnego e-Sklepu. Możesz to zrobić w menu Wygląd sklepu/ Ustawienia/ Więcej / Edytuj ustawienia zaawansowane/ Import szablonu.

Jak wstawić dodatkową Wtyczkę (Widget) w szablonie Topaz?

Poniżej wklejonego skryptu mają zostać tylko linijki zawierające zamknięcie tagu html, zamknięcie tagu body oraz zamknięcie( {% endif -%} ) jednego warunku. Powyżej wklejonego kodu powinno być zamknięcie ( {% endif -%} ) warunku {% if config.External.SalesManago -%}. Krok 4. Zapisać i opublikować zmiany.

Uwaga

Powyższa instrukcja dotyczy szablonu Topaz. Należy także pamiętać, iż różnego rodzaju wtyczki mogą wymagać odrębnej implementacji w różnych plikach szablonu. Zawsze należy zapoznać się z dokumentacją oraz wymaganiami dostawcy wtyczki. Jeżeli powyższa instrukcja nie jest wystarczająca dla wyświetlenia dodatkowej wtyczki w szablonie należy skontaktować się z Partnerem Comarch, w celu uzyskania dodatkowej pomocy.

Wskazówka

Chcesz dodać do e-Sklepu wtyczkę Facebook Messenger Chat? Skorzystaj z odrębnie przygotowanej instrukcji dostępnej w artykule Obsługa wtyczki Czatu Facebooka w szablonach.

Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Spis treści

Jak wyeksportować swój szablon z Comarch e-Sklep?

Jak wgrać własny szablon do Comarch e-Sklep?

Jak wyeksportować swój szablon z Comarch e-Sklep?

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Eksport szablonu.

Krok 2. W tym miejscu możesz opcjonalnie (przed eksportem) określić autora szablonu, podać adres e-mail, telefon oraz adres WWW swojego e-Sklepu.

Krok 3. Jeżeli chcesz wyeksportować szablon do pliku użyj przycisku Eksportuj szablon.

Gotowe! Szablon został wyeksportowany do pliku na Twoim urządzeniu.

Wskazówka

Z tego miejsca możesz także wyeksportować posiadane w e-Sklepie bannery, korzystając z przycisku Eksportuj bannery.

Jak wgrać własny szablon do Comarch e-Sklep?

Własny szablon. Jak go wgrać?

Po skomponowaniu swojego własnego szablonu możesz wgrać go do e-Sklepu. Postępuj zgodnie z poniższymi krokami.

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Import szablonu.

Krok 3. Wybierz plik XML swojego szablonu i naciśnij Importuj szablon.

Uwaga

Wskazówka

W zakładce Szablony możesz określić, czy wgrywany szablon ma być domyślny i aktywny w e-Sklepie.

Gotowe! Twój szablon został zaimportowany do e-Sklepu.

Element tekstowy w szablonie Topaz

Spis treści

Wstęp

Element tekstowy w Kreatorze Wyglądu Topaz

Konfiguracja elementu tekstowego w panelu administracyjnym

Element bez obrazka
Element z obrazkiem

Wstęp

Szablon Topaz możesz samodzielnie zbudować w Kreatorze. Dzięki unikalnej kombinacji różnych elementów będzie on dostosowany do Twoich potrzeb. Jednym z nich jest element tekstowy, dostępny w wersji bez obrazka i z obrazkiem. Charakteryzuje się on możliwością wprowadzenia statycznego opisu na stronie głównej w e-Sklepie. Możesz zawrzeć w nim np. podstawowe informacje na temat Twojej firmy, asortymentu sklepu lub inne wartościowe dla Ciebie treści.

Wskazówka

Zobacz, jak wygląda element tekstowy z obrazkiem bezpośrednio w naszym sklepie demonstracyjnym pod adresem: demo.comarchesklep.pl.

Element tekstowy w Kreatorze Wyglądu Topaz

W Kreatorze Wyglądu masz do wyboru dwa rodzaje elementu tekstowego:

bez obrazka (sam tekst) (textElement-1),
z obrazkiem (textElement-2).

Dodaj element tekstowy do kompozycji Twojego projektu i dowiedz się, jak skonfigurować go pod swój e-Sklep. Element ten możesz dodać do strony głównej szablonu.

Konfiguracja elementu tekstowego w panelu administracyjnym

Po wygenerowaniu szablonu wgraj go na zakładce Wygląd sklepu/ Zaimportuj szablon z Kreatora wyglądu, zgodnie z instrukcją.

Element bez obrazka

Jeżeli w Kreatorze wybrałeś element tekstowy bez obrazka (o nazwie textElement-1), przejdź do zakładki Wygląd Sklepu/ Ustawienia/ "Więcej" Edytuj ustawienia zaawansowane/ Obiekty. Znajdź na liście obiekt text-el-no-photo-mp-2 (typ tekstowy), a następnie przejdź do jego szczegółów klikając w nazwę obiektu. Domyślny element zawiera nagłówek pierwszego poziomu oraz drugiego poziomu, a także tekst podzielony na trzy kolumny. Masz możliwość edycji treści za pomocą znaczników języka HTML. Przed rozpoczęciem modyfikacji upewnij się, że masz wybrany odpowiedni język.

Wskazówka

Dla każdej wersji językowej należy osobno zmienić treść.

Po zakończonej edycji pamiętaj o zapisaniu oraz opublikowaniu zmian.

Element textElement-1 na stronie sklepu prezentuje się domyślnie:

Element z obrazkiem

Jeżeli w Kreatorze wybrałeś element z obrazkiem (nazwa:textElement-2) konfigurację elementu rozpocznij od dodania zdjęcia dla elementu w plikach użytkownika. Aby to zrobić przejdź do zakładki Ustawienia/ Pliki użytkownika i ikoną plusa wgraj zdjęcie, które chcesz dodać do elementu tekstowego.

Następnie przejdź do zakładki Wygląd Sklepu/ Ustawienia/ "Więcej" Edytuj ustawienia zaawansowane/ Obiekty. Znajdź na liście obiekt text-el-photo-mp-1(typ tekstowy) i przejdź do jego szczegółów. Domyślny element zawiera nagłówek pierwszego poziomu oraz drugiego poziomu, miejsce na zdjęcie oraz tekst podzielony na dwie kolumny. Masz możliwość edycji treści oraz zmiany położenia obrazka za pomocą znaczników języka HTML. Przed rozpoczęciem modyfikacji upewnij się, że masz wybrany odpowiedni język.

Wskazówka

Dla każdej wersji językowej należy osobno zmienić treść.

Aby obrazek został wgrany do elementu tekstowego, pomiędzy znacznikami <image></image> musisz poprawnie wpisać ścieżkę dla wgranego wcześniej obrazka. Dla plików użytkownika jest to user/nazwa obrazka. Po zakończonej edycji pamiętaj o zapisaniu oraz opublikowaniu zmian.

Element textElement-2 z wgranym obrazkiem na stronie sklepu prezentuje się następująco:

W wersji mobilnej e-Sklepu masz możliwość widoku elementu tekstowego w wersji zwiniętej lub rozwiniętej. Część treści jest początkowo ukryta, ale odwiedzający może wyświetlić pełny tekst, klikając przycisk Więcej, który następnie może zwinąć za pomocą przycisku Mniej.

Wskazówka

Zobacz element tekstowy z obrazkiem bezpośrednio w naszym sklepie demonstracyjnym pod adresem: demo.comarchesklep.pl.

Rozbudowana stopka w szablonach Topaz i Szafir - jak ją skonfigurować?

Spis treści

Wstęp

Jak przystąpić do edycji stopki?

Więcej możliwości edycji stopki

Jak skonfigurować rozbudowaną stopkę?

Wstęp

Konfiguracja rozbudowanej stopki

Jak przystąpić do edycji stopki?

Więcej możliwości edycji stopki

Przykładowy wygląd rozbudowanej stopki w szablonie Topaz

Przykładowy wygląd rozbudowanej stopki w szablonie Szafir

Jak skonfigurować poszczególne elementy?

- Elementy 1-5: dodawanie kolejnych grup stron oraz zmiana ich kolejności dokonywana jest poprzez sekcję Nagłówek/Stopka w Ustawieniach w obrębie zakładki Wygląd Sklepu. W obrębie danej grupy możesz dodawać konkretne strony poprzez kliknięcie przycisku Dodaj stronę ze sklepu.

Wskazówka

Zmiany kolejności poszczególnych grup odnośników lub zmiany danych odnośników w obrębie danej grupy dokonuje się metodą Przeciągnij i upuść.

- Element 6: odpowiada za wyświetlanie następujących informacji: e-mail, numer telefonu, telefon2 (jeśli nie istnieje, to zastępowany jest przez telefon komórkowy) fax lub skype. W celu edycji danych kontaktowych należy przejść w panelu e-Sklepu do zakładki Ustawienia/Ustawienia sklepu. Informacje o adresie e-mail pobierane są automatycznie z zakładki Ogólne z sekcji Konto e-mail sklepu. Aby dodać lub zmodyfikować numer telefonu konieczne jest wybranie zakładki Dane sprzedawcy, następnie Infolinia i zweryfikowanie pola Telefon.
  Wskazówka
  W elemencie wyświetlone zostaną maksymalnie 3 informacje (e-mail, telefon i jedno z wybranych pól np. telefon2, telefon komórkowy lub fax.
- Element 7: odwołania do portali społecznościowych dodajemy bez zmian. Więcej o tym znajdziesz tutaj.
- Elementy 8-9: aby dodać informację o operatorach płatności oraz partnerach logistycznych należy wybrać zakładkę Wygląd Sklepu/Ustawienia/Bannery. Edycji dokonasz z perspektywy kafelków: Logistics Partners oraz Payment Operators poprzez dodanie właściwych grafik operatorów i partnerów. Aby zmienić nazwę „Operator płatności” i/lub „Partnerzy logistyczni” wybierz zamiast zakładki Bannery, zakładkę Tłumaczenia. Wyszukaj po parametrze „ID” LogisticsPartnersBannerTitle oraz PaymentOperatorsBannerTitle i zmodyfikuj pole „Tekst” według własnych preferencji. Zmiany zapisz i opublikuj. W przypadku chęci usunięcia któregoś z elementów, zaznacz go i naciśnij przycisk „Usuń”.

Wskazówka

Zalecane parametry grafik dla operatorów płatności i partnerów logistycznych: szerokość maksymalna 64 px, rozszerzenie PNG.

- Element 10: dane dotyczące firmy pobierane są z zakładki Ustawienia/Ustawienia sklepu/Dane sprzedawcy/Dane identyfikacyjne, a także z obszaru: Ustawienia/ Ustawienia sklepu/ Informacja o działalności gospodarczej/ Numer KRS lub CEIDG, Organ rejestrujący oraz Ustawienia/ Ustawienia sklepu/ Adres pocztowy, gdzie uwzględnione zostaną wszystkie pola za wyjątkiem Szerokości i długości geograficznej.

Szablon Topaz - informacje

Autor: Comarch Kontakt: e-sklep@comarch.pl Cena: bezpłatny Kreator wyglądu: https://kreator.comarchesklep.pl/ Demo online: https://demo-topaz2.comarchesklep.pl/ https://demo-topaz.comarchesklep.pl/

Kreator wyglądu Comarch e-Sklep umożliwia stworzenie oraz modyfikację nowego szablonu graficznego Topaz opartego na silniku DotLiquid.

Wygenerowany szablon jest również w technologii Responsive Web Design (RWD), dzięki czemu strona sklepu dostosowuje się automatycznie do rozdzielczości urządzenia, na którym jest wyświetlana i nie ma potrzeby tworzenia osobnych szablonów dla wersji mobilnej. Dodatkowo szablon jest dostosowany do wyświetlania w rozdzielczości 4K.

Od wersji 2019.6 szablon posiada obsługę funkcji PWA, czyli Progressive Web App. Gdy otworzysz e-Sklep z szablonem Topaz na urządzeniu mobilnym (w trybie responsywnym), sklep wyświetli komunikat o możliwości pobrania skrótu na ekran główny urządzenia. W rezultacie e-Sklep uruchomiony z takiego skrótu będzie wyświetlał się jak aplikacja natywna zainstalowana na urządzeniu mobilnym i dostosowana do wyświetlania na nim.

Szablon Topaz możesz samodzielnie zbudować w kreatorze, dzięki unikalnej kombinacji różnych elementów (dostępnych dla stron: strona główna, lista towarów oraz szczegóły towaru), a także motywów kolorystycznych, czcionki i wyglądu ikonofontów.

Wygenerowany szablon można dodatkowo poddać edycji w panelu administracyjnym. Proste ustawienia pozwalają spersonalizować wygląd sklepu poprzez zmianę następujących parametrów:

Motyw kolorystyczny – możliwość skorzystania z predefiniowanych motywów i ich edycji. Możliwe jest wybieranie indywidualnych kolorów szablonu z wykazu bądź wprowadzanie kolorów przy użyciu zapisu szesnastkowego (heksadecymalnego),
Ustawienia wstążek – zmiana kolorystyki flag promocyjnych na towarach,
Bannery – możliwość edycji bannerów (zdjęcia, opis, linki),
Logo i favicon – możliwość wgrania własnego logo i favicon (ikony widocznej na zakładce przeglądarki),
Obiekty – konfigurowalne obiekty pozwalające zmienić np. ilość i sortowanie towarów wyświetlanych w kategoriach.

Wskazówka

Od wersji 2021.2 po uzupełnieniu pola Link (w widoku zaawansowanym) – cały baner staje się „klikalny”, to znaczy, że w przypadku kliknięcia na baner zostanie wykonane przekierowanie do określonego wcześniej linku (zarówno wewnętrznego - z danego e-Sklepu, jak i zewnętrznego - spoza danego e-Sklepu). W przypadku uzupełnienia obu pól: link oraz tekst – na banerze zostanie wyświetlony guzik: „Sprawdź”.

Wskazówka

Od wersji 2022 w szablonie zaimplementowano meta znaczniki Open Graph niezbędne do prawidłowej komunikacji z platformą Facebook oraz przesyłania towarów dla sklepu Facebook. Więcej na ten temat przeczytasz tutaj.

Możesz także skorzystać z Gotowych szablonów Comarch, dostępnych w panelu administracyjnym Wygląd sklepu/Gotowe szablony Comarch.Z tego poziomu możesz pobrać i zainstalować przygotowany przez nas szablon Topaz.

Zalecane rozmiary zdjęć/banerów:

Podczas modyfikacji wyglądu szablonu Topaz w kreatorze istnieją trzy rodzaje nagłówków. Dla trzeciego rodzaju nagłówka (Header-3) wymiary dostępnego tam banneru wynoszą: 1118×534 px.

Wskazówka

W wersji 2021.2. w szablonie Topaz umożliwiono dodanie więcej niż jednego zdjęcia do banneru w nagłówku nr 3. Po dodaniu minimum dwóch obrazków na bannerze pojawi się slajder pozwalający na ich przewijanie (za pomocą strzałek).

Podczas modyfikacji wyglądu szablonu Topaz w kreatorze, mamy możliwość wyboru sześciu prezentacji banerów. Wymiary podane w jednostce px.

Banner-1:

Banner-2:

Banner-3:

Banner-4:

Banner-5:

Banner-6:

Wskazówka

Możliwość edytowania wyżej opisanego banneru z poziomu panelu administracyjnego Comarch e-Sklepu: Wygląd Sklepu/Ustawienia/Bannery/kafelki homepage. Nazwa znajdująca się pod zalecanym rozmiarem grafiki wskazuje poprzez który kafelek ma zostać dodany obraz. O kolejności dodanych w obrębie jednego kafelka obrazków możesz zdecydować indywidualnie, przeciągając i upuszczając grafikę.

Rozmiar dla baneru, który pokazuje się po rozwinięciu kategorii wynosi 220px x 295px:

Wskazówka

Możliwość edytowania wyżej opisanego banneru z poziomu panelu administracyjnego Comarch e-Sklepu: Wygląd Sklepu/Ustawienia/Bannery/menuBanner

Rozmiar dla zdjęcia na stronie Kontakt wynosi 610px x 605px:

Wskazówka

Możliwość edytowania wyżej opisanego banneru z poziomu panelu administracyjnego Comarch e-Sklepu: Wygląd Sklepu/Ustawienia/Bannery/contactBanner

Rozmiary dla zdjęć na stronie Lookbook wynosi: 560px x 630px, 700px x 850px, 1260px x 540px, 630px x 950px, 560px x 630 px.

Wskazówka

Możliwość edytowania wyżej opisanego banneru z poziomu panelu administracyjnego Comarch e-Sklepu: Wygląd Sklepu/Ustawienia/Bannery/lookbook

Rozmiar dla baneru, który pokazuje się na zakładce Promocje, po otworzeniu sekcji Profil klienta wynosi 1920px x 680px.

Wskazówka

Możliwość edytowania wyżej opisanego banneru z poziomu panelu administracyjnego Comarch e-Sklepu: Wygląd Sklepu/Ustawienia/Bannery/CustomerProfileBanner

Rozmiary dla zdjęć kategorii na liście wynoszą 885×400 dla dużego obrazka i 430×400 dla małego obrazka. Zdjęcia w wersji mobilnej przycinane są centralnie do rozmiarów 380×360. Widok listy kategorii zależy od wybranej listy towarów.
Lista kategorii w szablonie dla widoku 1 i 2 listy towarów (obiekty o nazwach: products-1 i products-2)

Lista kategorii w szablonie dla widoku 3 i 4 listy towarów (obiekty o nazwach: products-3 i products-4)

Rozmiar dla obrazu produktu wynosi 660px x 630px.

Dla bardziej zaawansowanych użytkowników znających technologie takie jak HTML, CSS, JS, DotLiquid udostępniony jest obszar z plikami szablonu, gdzie można dokonywać zmian na poziomie kodu szablonu, co daje dalsze, praktycznie nieograniczone możliwości edycji i personalizacji wyglądu sklepu.

Od wersji 2019.6 została dodana możliwość kopiowania wcześniej złożonego zamówienia do koszyka, a także możliwość sprawdzenia historii konta przez zalogowanych użytkowników. Niezarejestrowani użytkownicy mogą sprawdzić szczegóły złożonego zamówienia w Comarch e-Sklep. W tym celu kontrahent powinien przejść do szczegółów zamówienia za pomocą linku, który otrzymuje w wiadomości e-mail. Dodatkowo wprowadzona została możliwość włączenia w Szablonie Topaz sprzedaży w jednostkach niecałkowitych, a także sprawdzania poprawności wprowadzanego numeru NIP dla Polski. Więcej na ten temat opisane zostało w ulotce do wersji 2019.6.

Od wersji 2020 na liście towarów został rozszerzony obszar klikalny dla wybranego towaru poprzez który można przejść do jego szczegółów. Klient może przejść do szczegółów towaru klikając nie tylko w zdjęcie towaru, ale również w jego nazwę oraz cenę lub odpowiedni napis, na przykład Zapytaj o cenę. Również w tej wersji została dodana możliwość wprowadzenia przez Klientów podczas składania zamówienia daty dostawy zakupionego towaru. Dodatkowo od tej wersji w momencie, gdy zalogowany klient będzie chciał przejść do strony logowania lub rejestracji (na przykład klikając w odpowiednią sekcję stopki) zostanie on przeniesiony na stronę profilu klienta. Więcej na temat zmian opisano w ulotce do wersji 2020. Od wersji 2020.3 w szablonie Topaz została wprowadzona możliwość dodania do szablonu slajdera marek oraz producentów. Na sliderach wyświetlane są loga marek lub producentów, które zostały zaimportowane z systemu ERP. Również w tej wersji została dodana możliwość szesnastkowego zapisu kolorów wyświetlanych w e-Sklepie. Zapis heksadecymalny dla poszczególnych sekcji w szablonie dostępny jest w panelu administracyjnym na ustawieniach wyglądu sklepu. Więcej na ten temat zostało opisane w ulotce do wersji 2020.3. Również w wersji 2020.3 została udostępniona strona wyszukiwarki zaawansowanej. Umożliwia ona bardziej precyzyjne określenie poszukiwanych w sklepie towarów, poprzez:

określenie kategorii produktowej,
wybranie sposobu wyszukiwania (z wyrażeniem, ze wszystkimi słowami, z którymkolwiek ze słów, z częścią słowa),
określenie pól, które mają być sprawdzone podczas wyszukiwania (opis towaru, cechy towaru, symbol, kod towaru, kod EAN, kod producenta),
zawężenie cech wyszukiwanego towaru (ceny, produktów ze zdjęciem, czy flag dodanych do towaru, jak nowość czy wyprzedaż),
wybranie producentów,
określenie marek.

Od wersji 2020.4 dodano możliwość prezentacji drugiego zdjęcia na liście towarów dla szablonu Topaz. Po najechaniu kursorem na zdjęcie główne pojawi się drugie zdjęcie. Opcję można włączyć w Ustawieniach szablonu w panelu administracyjnym e-Sklepu Wygląd sklepu/ Ustawienia w sekcji Prezentowanie drugiego zdjęcia towaru na liście. W wersji 2020.4 poprawiono również skalowanie bannerów na ekranach o niestandardowych rozdzielczościach dla szablonu Topaz. Co więcej, w wersji 2020.4 szablonu Topaz zmieniono sposób wyświetlania sekcji Blog na stronie głównej. Jeżeli w e-Sklepie nie opublikowano żadnych wpisów do bloga, to pomimo dodania tej sekcji w Kreatorze Wyglądu, nie będzie ona widoczna na stronie głównej. Publikacja minimum jednego wpisu spowoduje pojawienie się bloga w e-Sklepie. Od wersji 2020.4 dla szablonu Topaz dodano w Profilu Klienta na liście zamówień informacje o statusach dostawy i płatności poszczególnych dokumentów. Od wersji 2021.2. dla szablonu Topaz wprowadzono nowy sposób filtrowania towarów. Usprawniono sposób wyświetlania ilości wyników w danym filtrze. Jeżeli wyszukiwanie odbywa się na podstawie jednego filtra, wówczas liczba towarów w danym filtrze wyświetla łączną ilość dla poszczególnych pozycji, zaś dla pozostałych filtrów określa, ile z nich spełnia dane kryteria. Gdy filtrowanie odbywa się w kilku sekcjach, wówczas będą wyświetlane odpowiednie ilości towarów spełniające wskazane kryteria. Jeżeli ilość towarów w danej sekcji wyniesie 0 to zostanie ona wyłączona, bez możliwości zaznaczenia. W szablonie Topaz, na stronie szczegółów towaru dodano w wersji 2021.2. mechanizm pozwalający na powiększenie zdjęcia towaru. Po kliknięciu w miniaturkę zdjęcia pokazuje się jego powiększenie. Od wersji 2021.2 w szablonie Topaz w nagłówku 1 i 2 z poziomym menu, wprowadzono rozszerzanie menu, kiedy do e-Sklepu udostępnionych jest bardzo dużo kategorii oraz podkategorii. W ustawieniach szablonu Topaz (które dostępne są w panelu administracyjnym w menu Wygląd sklepu/ Ustawienia/ Ustawienia szablonu) dodano parametry umożliwiające zarządzanie edycją terminu dostawy podczas składania zamówienia. W wersji 2021.2. można pozwolić klientom na planowanie terminu dostawy poprzez określenie jej oczekiwanej daty lub daty dostawy oraz jej godziny. Dla włączonego parametru domyślnie ustawiono edycję daty dostawy.

Od wersji 2021.2. w ustawieniach szablonu Topaz dodano także parametr, który pozwala określenie, w jakiej kolejności mają zostać wyświetlone kategorie w e-Sklepie. Parametr znajduje się w panelu administracyjnym w sekcji Wygląd Sklepu/Ustawienia. Istnieją dwie możliwości: kolejność zgodna z ustawieniami w systemie ERP lub domyślna – zgodna z zaleceniami optymalizacyjnymi szablonu. Uwaga, aby wyświetlać kategorie zgodnie z ustawieniami w systemie ERP, należy odpowiednio w posiadanym systemie ERP ustalić kolejność kategorii, a następnie wykonać synchronizację danych. Podczas ustawienia minimalnej wartości zamówienia dla darmowej dostawy od wersji szablonu Topaz 2022, klient po wyborze dostawy, widzi komunikat określający, jaka jest minimalna wartość zamówienia by, dostawa była darmowa. Komunikat zostanie wyświetlony, gdy dla wybranej dostawy określono próg wartości zamówienia (większy od 0zł), po przekroczeniu, którego koszt dostawy będzie darmowy, a wartość samego koszyka nie spełnia jeszcze określonych warunków. Przykładowa konfiguracja darmowej dostawy o minimalnej wartości zamówienia.

Przykładowa konfiguracja darmowej dostawy o minimalnej wartości zamówienia.

Od wersji 2022 dla nowo przygotowanych widoków listy towarów w szablonie Topaz zostały dodane i obsłużone następujące ustawienia w panelu administracyjnym w zakładce Wygląd sklepu/ Ustawienia:

Dla powyższych punktów domyślnymi ustawieniami są opcje zaznaczone powyżej. Ustawienia te można zmienić według własnego uznania, a następnie należy użyć opcji Zapisz i Publikuj. Od wersji 2022.2 został dodany nowy widok szczegółów towaru. Obiekt o nazwie product-details-3 dostępny jest do wyboru podczas tworzenia nowego szablonu w Kreatorze Wyglądu Comarch. W nowym widoku została dodana nowoczesna galeria zdjęć, w której oprócz zdjęć można zaprezentować także film dodany dla towaru w systemie ERP. Widok charakteryzuje się przejrzystym układem, zawiera dodatkowe sekcje z towarami polecanymi, ostatnio oglądanymi, a także zestawami towarów dostępnych do kupienia. Od wersji 2022.4 dodany został nowy widok szczegółów towaru. Obiekt products-details-4 zawiera wszystkie dotychczasowe funkcje, obsługuje również wszystkie mechanizmy znane z poprzednich widoków szczegółów towaru. Najnowszy widok charakteryzuje się nowoczesną galerią zdjęć, w której dostępne są także filmy. Pod galerią w formie zakładek prezentowany jest opis towaru, cechy, opinie klientów oraz załączniki. Widoczne są również dodatkowe sekcje z zestawami towarów do kupienia, towarami polecanymi, a także ostatnio oglądanymi. Obiekt products-details-4 widoczny jest w Kreatorze Wyglądu Comarch. podczas tworzenia lub edycji szablonu. W najnowszej wersji szablonu Topaz możliwe jest prezentowanie i odtwarzanie plików w formacie MP4. Po przesłaniu filmu z systemu Comarch ERP Optima lub Comarch ERP XL do swojego e-Sklepu, zostanie on wyświetlony w sekcji z filmami lub w galerii w zależności od wariantu widoku na stronie ze szczegółami towaru.

Również w wersji 2020.4 został udostępniony parametry do zarządzania prezentacją atrybutów, który znajduje się w Panelu Administracyjnym w sekcji: Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Dodatkowe. Klient ma możliwość graficznej prezentacji atrybutów dla towarów:

zgrupowanych z atrybutami,
z cechami,
z atrybutami wielowartościowymi

W wersji 2022.5 dodano nowy motyw kolorystyczny dla szablonu Topaz. Dzięki motywowi ciemnemu interfejs graficzny przybiera ciemniejsze barwy, zastępując jasne tony. W kontraście do tła wszystkie ikony, przyciski oraz napisy przybierają barwę jasną. Domyślnie elementy szablonu składają się z granatowego, fioletowego oraz czerwonego koloru, jednak można je zmienić i dostosować do swoich indywidualnych potrzeb. Motyw ciemny w szablonie Topaz można zaprojektować samodzielnie, korzystając przy tym z Kreatora Wyglądu Comarch.

Obsługa wyświetlania kolorów w filtrze na liście towarów

Od wersji szablonu 2023.1.1 dodaliśmy obsługę filtru typu kolor w formie graficznej. Funkcję można uruchomić z poziomu panelu administracyjnego e-Sklepu, w zakładce Wygląd sklepu/Ustawienia/Ustawienia szablonu/Dodatkowe. Dodatkowo, jest ona dostępna jest ona także z poziomu Kreatora Wyglądu, w sekcji Lista towarów/Ustawienia.

Po jej zaznaczeniu wyświetli się odpowiednia sekcja, pozwalająca na przypisanie odpowiednich wartości atrybutu odpowiadającego za kolor do konkretnych wartości heksadecymalnej. Aby poprawnie skonfigurować funkcję w systemie Comarch ERP potrzebny będzie atrybut o nazwie Kolor, którego typem będzie Lista, a za wartości listy obierzemy odpowiednie dla nas nazwy kolorów.

Wskazówka

Opcja ta posiada także funkcję automatycznego mapowania kolorów po ich nazwie. Dostępna będzie ona dla atrybutów, których struktura kolorów jest standardowa np. Nazwa atrybutu to Kolor, a jego wartości to czerwony, zielony, niebieski, itd. Mapowanie to nie zadziała dla atrybutów, których wartości będą takie jak np. wielokolorowy, zgniły zielony, etc. W tym wypadku konieczne będzie korzystanie z wyżej wspomnianego, mapowania ręcznego. [/indicator.] Poprawnie utworzone filtry graficznie, będą prezentować się na stronie następująco:

Ilość kupionych i kupujących towar

Od wersji 2023.1.1 w szablonie Topaz dodano możliwość liczenia ilości osób, która zakupiła dany towar. Funkcja ta możliwa jest do uruchomienia z poziomu Kreatora wyglądu w sekcji Szczegóły towaru/Towar/Ustawienia:

Możesz ją także skonfigurować z poziomu panelu administracyjnego, przechodząc do sekcji Wygląd sklepu/Ustawienia/Ustawienia szablonu/Ogólne w zakładce Informacja o ilości zakupionego towaru. Podczas konfiguracji możesz zaznaczyć jedną z dostępnych opcji:

Tak, zawsze pokazuj wartość zakupionych sztuk i klientów – po zaznaczeniu tego parametru klient będzie miał zawsze możliwość podejrzenia ilości kupionego towaru oraz liczby osób, które dokonały zakupu,
Tak, powyżej ilości sprzedanych sztuk – w tym przypadku po zaznaczeniu opcji klient będzie miał możliwość podejrzenia ilości dotychczas zakupionego towaru oraz liczby osób, które dokonały zakupu. Będzie to możliwe jednak tylko wtedy, gdy towar został sprzedany w ilości większej niż X sztuk,
Nie – informacja na temat ilości zakupionego towaru oraz kupujących nie będzie widoczna.

Dane dotyczące ilości sprzedanych sztuk nie są przetwarzane natychmiastowo. Informacje te aktualizują się po około 24 godzinach. Po tym czasie są widoczne w e-Sklepie. Wspomniana funkcja prezentuje się następująco:

Przywracanie koszyka dla klientów niezalogowanych

W szablonie Topaz przywracany jest koszyk dla niezalogowanych klientów. Po opuszczeniu strony lub wyłączeniu przeglądarki klient niezalogowany powracający do sklepu będzie widział towary dodane do koszyka wcześniej. Proces ten działa dzięki zapisywaniu informacji w ciasteczkach. Szczegóły dotyczące generowania szablonu Topaz znajdziesz w artykule o kreatorze szablonu.

Wymagania szablonu Topaz:

Comarch e-Sklep w wersji minimum 2019.2,
e-Sklep obsługujący procesy B2C,
przeglądarki internetowe:

Informacja o tym, że towar znajduje się w koszyku.

W szablonie Topaz Klient zostanie poinformowany o tym, że dany produkt znajduje się już w koszyku. Po wyborze towaru i kliknięciu "Kup teraz", przy ponownej próbie dodania do koszyka, na przycisku pojawi się ikona oraz odpowiedni tooltip:

Informacja widnieje na szczegółach towaru oraz pop upie podczas kupowania z listy. W szablonie Topaz prezentacja tej informacji stanowi dodatek i domyślnie jest wyłączona.

Żeby ją uruchomić, należy przejść do panelu administracyjnego, a następnie do sekcji Wygląd sklepu/ Ustawienia/ zakładka "dodatkowe". Następnie po odnalezieniu sekcji "Informuj o tym, że towar znajduje się już w koszyku" należy zmienić opcję na "TAK". Po dokonaniu modyfikacji koniecznie zapisz i opublikuj zmiany.

Wskazówka

Od nowej wersji 2024 w koszykach szablonów Topaz oraz One Page Shop jest możliwość wyświetlania ceny za sztukę. Pojawi się ona po dodaniu do koszyka kilku sztuk produktu. Przy jednej sztuce towaru wyświetlana będzie tylko cena.

Przeglądarki

Mozilla Firefox – aktualna wersja przeglądarki, nie starsza niż trzy miesiące,
Google Chrome – aktualna wersja przeglądarki, nie starsza niż trzy miesiące,
Microsoft Edge – nie wspierana dla szablonu Topaz,
Internet Explorer – nie wspierana dla szablonu Topaz.

Od wersji 2024.1.1 w szablonie Topaz dodano możliwość wyświetlania w koszyku informacji jakiej kwoty brakuje do darmowej dostawy. Funkcja ta możliwa jest do uruchomienia z poziomu Panelu Administracyjnego w sekcji Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne:

Ustawienia te można zmienić według własnego uznania, a następnie należy użyć opcji Zapisz i Publikuj.

Graficzna prezentacja atrybutów na karcie produktu oraz na liście towarów w szablonie Topaz

Wstęp

Funkcja umożliwia prezentację atrybutów w formie kolorów oraz miniatur. Dotyczy ona towarów zgrupowanych (fantomów). W tym artykule dowiesz się jak poprawnie zmodyfikować ustawienia, aby Twój e-Sklep obsługiwał graficzną prezentację atrybutów.

Konfiguracja atrybutów graficznych

Aby skonfigurować atrybuty graficzne należy przejść w Panelu administracyjnym do zakładki Wygląd sklepu/ Ustawienia/Dodatkowe. W tym miejscu możesz dokonać wyboru w jaki sposób powinny być prezentowane atrybuty: jako kolory lub miniatury zdjęć. Po najechaniu kursorem na zdjęcie produktu, który znajduje się na liście towarów, zostanie wyświetlona odpowiednia wersja graficzna atrybutu.

Wskazówka

Pamiętaj, aby wprowadzone zmiany były widoczne w e-Sklepie należy je Zapisać i Opublikować.

Po przejściu do zakładki Dodatkowe domyślnie parametr odnoszący się do graficznej prezentacji wariantów towarów ustawiony jest na Nie.

Funkcjonalność opisywanych wariantów zależy od wybranej wersji listy towarów oraz szczegółów towarów, które możemy edytować w Kreatorze Wyglądu Comarch e-Sklep. Aby sprawdzić, który wariant posiada nasz szablon, podczas jego tworzenia musimy najechać na ikonkę informacyjną i, znajdującą się na kafelkach danego szczegółu towaru, listy towarowej, etc.

Products-4 oznacza 4 wariant listy towarów, a więc nazwa danego kafelku, a następnie przypisana jej cyfra oznacza dany wariant odpowiedniej sekcji. Kreator wyglądu Comarch e-Sklep

Wariant - Kolory

Po wybraniu wariantu Kolory, automatycznie w panelu administracyjnym pojawi się nowe okno z nazwami kolorów i ich odpowiednikami graficznymi w notacji heksadecymalnej. Związane jest to z samą konfiguracją wspomnianej funkcji i mapowaniem kolorów. Funkcja ta działa na podstawie atrybutów ustawianych na towarach w systemie ERP. Domyślnie wartości kolorów takie jak np. czerwony, zielony, etc. mapowane są automatycznie i wypełnianie poniższego okienka nie jest konieczne. Natomiast, jeżeli nasz atrybut zawiera niestandardowe nazwy kolorów np. brzoskwiniowy, wielokolorowy - wtedy musimy skorzystać z poniższego pola i przypisać odpowiedniej wartości atrybutu interesujący nas kolor.

Przykładowa konfiguracja wariantu - Kolory

W systemie ERP utwórz atrybut o nazwie Kolor i formacie lista, a następnie udostępnij go do Comarch e-Sklep.

Wypełnij pozycje listy wpisując kolory, np. czerwony, zielony, niebieski itd. Następnie przypisz wspomniany atrybut do odpowiedniego towaru, który zostanie przesłany do e-Sklepu. Przy przypisywaniu tego atrybutu do danego towaru, jego Wartość pozostaw pustą, tak aby umożliwić wybór wariantów kolorystycznych.

Po wykonaniu powyższych czynności wykonaj synchronizację z e-Sklepem.

Prezentacja wariantu Kolory na stronie e-Sklepu

Na liście towarów - dla wariantów 3 i 4 (products-3 oraz products-4)

Na szczegółach towarów - dla wszystkich wariantów

Ponadto jeżeli atrybut, który został użyty do utworzenia powyższych wariantów towarów, przypiszesz do swojej grupy towarowej w systemie Comarch ERP i utworzysz z niego filtr, pojawi się on także w formie graficznej.

Wariant - Miniatury (tylko dla towarów zgrupowanych - "fantomów")

Wybranie wariantu miniatury pozwoli na prezentację wariantu towarów w sposób graficzny przy użyciu pierwszego zdjęcia danego towaru zgrupowanego (fantoma). W związku z jej charakterystyką (do obsłużenia każdy z towarów potrzebuje swojego zdjęcia) funkcja ta dostępna jest tylko dla towarów zgrupowanych.

Przykładowa konfiguracja wariantu - Miniatury

W systemie Comarch ERP stwórz towar zgrupowany zgodnie z dokumentacją Comarch e-Sklep. Przykładowa konfiguracja w tym przykładzie została utworzona na podstawie atrybutu Kolor.

Prezentacja wariantu Miniatury na stronie e-Sklepu

Na liście towarów - dla wariantów 3 i 4 (products-3 oraz products-4)

Na szczegółach towarów - dla wariantów 3 i 4 (product-details-3 oraz product-details-4)

Ilość kupujących i ilość zakupionego towaru w szablonie Topaz

Wstęp

Funkcja prezentuje liczbę osób, które kupiły dany towar. Prezentowana jest także ilość zakupionego asortymentu w określonym czasie. Informacja ta widoczna będzie na szczegółach towaru w szablonie Topaz. Po najechaniu kursorem na ilość osób wyświetli się tooltip informujący dodatkowo o tym, ile sztuk danego towaru zostało sprzedanych.

Wskazówka

Funkcja jest dostępna w szablonie Topaz od wersji 2023.1

Przykład wyświetlania informacji na szczegółach towaru

Konfiguracja - panel administracyjny

Z poziomu panelu administracyjnego przejdź do zakładki Wygląd sklepu/ Ustawienia/ Ogólne. Odnajdź sekcje Informacja o ilości zakupionego towaru. Do wyboru masz trzy opcje:

Tak, zawsze pokazuj wartość zakupionych sztuk i klientów – po zaznaczeniu tego parametru klient będzie miał zawsze możliwość podejrzenia ilości kupionego towaru oraz liczby osób, które dokonały zakupu,
Tak, powyżej ilości sprzedanych sztuk – w tym przypadku po zaznaczeniu opcji klient będzie miał możliwość podejrzenia ilości kupionego towaru oraz liczby osób, które dokonały zakupu, ale tylko wtedy, gdy towar został sprzedany w ilości większej niż X sztuk,
Nie – informacja na temat ilości zakupionego towaru oraz kupujących nie będzie widoczna.

Po dokonaniu modyfikacji zmiany należy zapisać i opublikować.

Konfiguracja - Kreator wyglądu B2C

Z poziomu Kreatora wyglądu B2C również możesz ustawić wspomniany parametr. Podczas projektowania szablonu przejdź na widok dotyczący Szczegółów towaru. Następnie przejdź do ustawień sekcji Towar. Znajdź Informacje o ilości zakupionego towaru. Zaznacz odpowiedni parametr, po czym zapisz zmiany.

Po dokonaniu modyfikacji wygeneruj szablon, a następnie zaimportuj go w swoim e-Sklepie.

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Jak wykonać kopię bezpieczeństwa?

W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu.

Jak wyeksportować bannery?

Jak zabezpieczyć hasłem swój szablon?

W tym miejscu nadasz hasło dla swojego szablonu.

Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno:

Składać się z minimum 8 znaków,
Zawierać dużą literę,
Zawierać małą literę,
Zawierać cyfrę 0-9,
Zawierać znak specjalny – ‘!.+?;^]=-(&_)#=

Gotowe! Teraz Twój szablon został zabezpieczony hasłem.

Banner pop-up w szablonie Szafir i Topaz

Konfiguracja nowego bannera

Krok 1. Dodaj jeden z dostępnych wariantów banneru pop-up w Kreatorze Wyglądu. Za pomocą funkcji przeciągnij i upuść dodaj banner do nowo utworzonego szablonu Szafir lub Topaz:

Krok 2. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Bannery. Z listy dostępnych bannerów wybierz banner popup_2:

Krok 3. Po wpisaniu nazwy nowego banneru wyświetla się nowy formularz. W tym miejscu masz możliwość dodania opisu dla administratora oraz obrazków do katalogu.

Tak wprowadzone zmiany należy zapisać i opublikować. Gotowe! Banner pop - up został dodany i tak prezentuje się w szablonie Topaz.

Po kliknięciu w znacznik "Sprawdź" Twoi klienci zostaną przeniesieni na kartę towaru, gdzie będą mogli dokonać towar do koszyka.

Poznaj nasz produkt - konfiguracja banneru informacyjnego w szablonie

Wstęp

W Kreatorze Wyglądu (B2C) dla szablonu Topaz oraz One Page Shop jest możliwość dodania banneru informacyjnego, który zaprezentuje jeden z Twoich produktów w sklepie. Dzięki zastosowaniu infografik wraz z opisem klienci Twojego sklepu będą mogli zapoznać się z zaletami wyróżnionego towaru.

Konfiguracja

Aby skonfigurować dodany przez Ciebie banner należy przejść w Panelu Administracyjnym do zakładki: Wygląd sklepu/ Ustawienia / Bannery do konfiguracji banneru info-banner-0-A:

Zdjęcie na pierwszej pozycji będzie zdjęciem znajdującym się na środku.
Pozostałe zdjęcia to miniaturki do których można dodać opis (tekst).
Maksymalnie wyświetlać będzie się 7 zdjęć.
Minimalnie należy umieścić 2 zdjęcia.

Jeśli chcesz wyświetlić na środku zdjęcie swojego produktu wraz z przyciskiem kup teraz, należy przejść do konfiguracji ustawień zaawansowanych banneru wstawić pełny link z https do pierwszego zdjęcia, czyli URL/PHOTO.

Wskazówka

Pamiętaj, aby link do towaru zawierał pełny url wraz z zabezpieczeniem SSL - przykład adresu: https://demo.comarchesklep.pl/my-boo-pomadka-do-ust-w-plynie-01/3-140-5

Dodając następne zdjęcie będą one wyświetlały się jako miniatury. Można do nich dodać tekst, który wyświetli się pod zdjęciem.

Wskazówka

Maksymalnie można dodać 7 zdjęć.

Polecane produkty, kategorie oraz bannery w wyszukiwarce

Wstęp

Na ustawieniach nagłówka w Kreatorze wyglądu:

W panelu administracyjnym w zakładce Wygląd sklepu/ Ustawienia/ Ustawienia sklepu/ Dodatkowe. W tym miejscu wybierz w Widoku wyszukiwania towarów w nagłówku opcję ’Z rekomendacjami”.

Pojawiający się popup z rekomendacjami składa się z trzech osobnych elementów, jakimi są:

Polecane produkty
Polecane kategorie
Polecane marki

Ostatnio oglądane,
Ręczny,
Grupa towarowa,
Producent,
Marka.

Wskazówka

W popupie z rekomendacjami wyświetlonych zostanie maksymalnie 6 polecanych towarów

Grupy najwyższego poziomu,
Podgrupy począwszy od,
Wybrane,
Zawężaj menu do wybranej grupy.

Przyklad

Jeśli kategoria ma więcej niż trzy podkategorie, to widoczna będzie jedynie ta, która jest ostatnia

Wskazówka

Jeśli obiekt header-recomm-categories, header-recomm-products lub banner headerRecommLogos zostanie usunięty, to popup z rekomendacjami nie będzie widoczny na stronie

Modyfikacja informacji wyświetlanych na kaflu towaru

oraz mozaika.

Kupowanie z listy towarów
Dodawanie do ulubionych z listy towarów
Prezentowanie drugiego zdjęcia towaru
Graficzna prezentacja wariantów towaru
Dodatkowe informacje na kaflu
Dodatkowe funkcje na kaflu

W przypadku list towarów 1 i 2, modyfikacja informacji jest uproszczona, ogranicza się jedynie do:

Kupowanie z listy towarów
Dodawanie do ulubionych z listy towarów
Prezentowanie drugiego zdjęcia towaru

Jak zaktualizować szablon do najnowszej wersji?

Wskazówka

Wstęp

Jak zaktualizować szablon?

Instrukcja aktualizacji szablonów: Rubin, Szafir, Topaz i One Page Shop (dostępnych w Kreatorze Wyglądu)

wygenerowanie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Podczas dokonywania modyfikacji w szablonach zachęcamy do skorzystania z naszego Centrum Pomocy.

Wskazówka

Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Instrukcja aktualizacji szablonów: Bursztyn, Agat i Opal.

Następnie wyświetli się nowe okno, w którym należy:

wybrać tzw. slot, który zostanie nadpisany nowym (aktualnym) szablonem. W każdym e-Sklepie dostępne są 4 miejsca na wgranie szablonu, spośród których jeden szablon oznacza się jako aktywny i domyślny,
określić, czy wgrywany szablon ma podmienić istniejące bannery. Gdy parametr zostanie zaznaczony, wówczas wszystkie bannery zapisane na danym slocie zostaną usunięte i zastąpione bannerami z importowanego szablonu. Jeżeli w nadpisywanym szablonie znajdują się bannery oraz lookbooki, które mają nadal wyświetlać się w e-Sklepie, należy wskazany parametr zostawić odznaczony. Gdy parametr nie zostanie zaznaczony, wówczas dotychczasowe bannery i lookbooki nie zostaną usunięte.
Zaimportować szablon do e-Sklepu.
Wskazówka
Import szablonu jest operacją nieodwracalną i spowoduje nadpisanie dotychczasowego szablonu. W przypadku, gdy szablon był modyfikowany (dokonywano zmian w kodzie HTML) jego aktualizacja spowoduje, iż zmiany nie zostaną przeniesione. Warto wykonać eksport posiadanego szablonu do pliku w celu zapisania oraz posiadania wglądu to wprowadzanych modyfikacji. Jeżeli istnieje taka konieczność należy ponownie dokonać samodzielnej edycji szablonu.

Wszelkie zmiany należy zapisać, a następnie opublikować.

Uwaga

Jeżeli szablon nie zostanie opublikowany, wówczas nie pojawi się on w e-Sklepie.

Instrukcja aktualizacji innych szablonów (niż szablonów Comarch) oraz aktualizacji szablonów z własnymi modyfikacjami

Kreator wyglądu Topaz (B2C)

Spis treści

Wstęp

Zastosowanie

Kto może używać tej opcji?

Zaczynamy

Krok 1 – Strona główna
Krok 2 – Lista towarów
Krok 3 – Szczegóły towaru
Krok 4 – Koszyk

Style

Generowanie i wgrywanie szablonu

Aktualizacja szablonu

Więcej informacji

Wstęp

Kreator jest dostępny pod linkiem: Kreator szablonu Comarch e-Sklep. Odnośnik znajduje się w panelu administracyjnym e-Sklepu Wygląd sklepu/ Kreator wyglądu.

Zastosowanie

W ramach kreatora zaprojektujesz wszystkie niezbędne obszary sklepu:

stronę główną,
listę towarów,
szczegóły towaru,
koszyk zakupowy.

Po utworzeniu szkieletu e-Sklepu, przychodzi czas na modyfikację oprawy wizualnej szablonu. Możesz dowolnie zmieniać kolory elementów znajdujących się na stronie, ikony, a także czcionkę.

Kto może używać tej opcji?

Aby móc używać tego narzędzia należy posiadać:

Comarch e-Sklep obsługujący procesy B2C,
szerokość ekranu powyżej 1280 px, a zalecana to 1920 px,
oraz jedną z przeglądarek internetowych w aktualnej wersji.

Wskazówka

Kreator wyglądu Comarch e-Sklep dostępny jedynie w wersji przeglądarkowej.

Zaczynamy!

Jak zaprojektować układ szablonu?

W sytuacji gdy wcześniej tworzony był już projekt, widoczny będzie przycisk umożliwiający dokończenie szablonu lub rozpoczęcie nowego projektu.

Opcja Nowy szablon umożliwia zbudowanie od początku nowego szablonu Topazu według Twojego indywidualnego pomysłu.

Wskazówka

Szablon Topaz - Demo jest gotowym szablonem, który możesz zainstalować bezpośrednio z obszaru Wygląd sklepu/Gotowe szablony Comarch.

Pozostałe sześć opcji do wyboru to gotowe wersje szablonu Topaz z możliwością ich edycji. Dzięki temu nie ma potrzeby tworzenia nowego szablonu od podstaw, ponieważ możesz wybrać jedną z gotowych propozycji, a następnie łatwo go edytować dostosowując do swoich potrzeb. Podwójne kliknięcie w wybrany kafelek pozwala przejść dalej. W trzech krótkich krokach zapoznasz się z podstawowymi funkcjami kreatora. Następnie możesz już przystąpić do dalszych modyfikacji szablonu lub od razu wygenerować przygotowaną wersję szablonu Topaz.

Od czego zacząć?

Gdy już wybierzesz wersję językową dla swojego Kreatora warto zacząć od nazwania swojego przyszłego szablonu. Można to zrobić klikając Zmień i wpisując nazwę w lewym górnym rogu, zastępując nazwę "Topaz (2022.5)". Nazwa ta będzie widoczna po zaimportowaniu szablonu do panelu administracyjnego oraz po wyeksportowaniu szablonu do pliku XML wraz z datą i godziną jego wygenerowania.

Krok 1 - Strona główna

W tej sekcji należy zaprojektować wygląd strony głównej naszego Comarch e-Sklepu. Strona główna może składać się z następujących elementów:

Nagłówek,
Banner,
Banner pop-up,
Widget
Proponowane,
Newsletter,
Sekcja z filmami,
Blog,
Slider producentów,
Slider marek,
Element tekstowy,
Banner informacyjny,
Lookbook.
Stopka.

Po rozwinięciu każdej z sekcji ukażą się dostepne elementy:

Metodą "Przeciągnij i upuść" przenosimy wybrane elementy na obszar po prawej stronie:

Postępuj analogicznie z pozostałymi elementami.

Nagłówek

Sekcja "Nagłówek" prezentuje pięć widoków. Trzeci z nich zawiera pionowe menu, które pozwala wyświetlić standardowo trzy poziomy kategorii produktowych. Pierwszy poziom można dodatkowo konfigurować w zakresie ilości pokazywanych kategorii. W tym celu w menu Wygląd sklepu/ Ustawienia/ Ustawienia szablonu dodano nowy parametr: widok pierwszego poziomu menu głównego (dla trzeciego typu nagłówka) z następującymi opcjami:

wygodny (ustawiony domyślnie i pozwalający wyświetlić maksymalnie 10 kategorii w pierwszym poziomie menu)
oraz kompaktowy (wyświetla do 16 kategorii w pierwszym poziomie menu). Ten typ nagłówka połączony jest z bannerem (o zalecanych wymiarach 1118px x 534px), widocznym tylko na stronie głównej.

W piątym możesz zaprezentować zdjęcia kategorii w formie miniatur w nagłówku. Zdjęcia kategorii dodane w systemie ERP są pomniejszone i są wyświetlane przy nazwie kategorii. Wszystkie rodzaje nagłówków dostępnych w Kreatorze mają funkcję tzw. przyklejonego nagłówka. Przy przewijaniu strony sklepu w dół, u góry ekranu zawsze widoczny jest pasek z częścią elementów nagłówka (m.in. menu kategorii oraz wyszukiwarka). Dzięki temu przeglądający ofertę e-Sklepu, w każdym miejscu strony ma dostęp do skróconej wersji nagłówka strony. Sekcja "Nagłówek" posiada dodatkowe opcje do ustawienia. Z listy menu, można decydować o:

Widoku wyszukiwanych towarów w nagłówku,
Wyświetlanie top bannera,
Ukrywanie ikon w nagłówku,
Pokazywanie rozwijanej listy towarów znajdujących się w koszyku.

Banner

Banner popup

Sekcja "Banner popup" pozwala wybrać jedną z dwóch możliwości prezentacji banerów. Bannery będą możliwe do wyświetlenia jedynie na stronie głównej e-Sklepu.

Banner promocyjny

Banner promocyjny to banner, który wyświetli się na stronie głównej Twojego e-Sklepu. Będzie prezentował typ towaru, który wskażesz. Taki rodzaj banneru pomoże Ci w prezentacji towarów, które zostały objęte na przykład promocją.

Widget

Sekcja "Widget" pozwala dodać jeden z dwóch dostępnych wariantów, które pozwolą zaprezentować następujące funkcje.

Widget-banner-1
- Dodanie zdjęcia,
- Dodanie tekstu nagłówka (tekst pionowy),
- Dodanie tekstu przycisku (tooltip).
- Dodanie linku do przycisku,
- Dodanie tekstu..

Widget-banner-1
- Dodanie zdjęcia,
- Dodanie tekstu nagłówka (tekst pod zdjęciem),
- Dodanie tekstu,
- Dodanie linku do tekstu.

Proponowane

Dodatkowo po najechaniu kursorem na tę sekcję, wybierając Opcje, możemy ustawić liczbę towarów, która będzie się wyświetlać (maksymalnie 50).

Podczas tworzenia szablonu Topaz w Kreatorze wyglądu Comarch po dodaniu sekcji towary proponowane można określić typ wyświetlanych produktów. Nazwa sekcji jest zależna oraz adekwatna do określonego typu. Daną nazwę można modyfikować w tłumaczeniach szablonu. Dodatkowo każdy wybrany typ jest podlinkowany do wszystkich produktów wskazanego rodzaju. W zależności od wybranego typu, edycji parametrów wyświetlania dokonasz w panelu administracyjnym e-Sklepu. Z kolei informację o typie towaru ustawisz w systemie ERP. Typy towarów edytowane z poziomu panelu administracyjnego Comarch e-Sklep:

Promocja,
Nowość,
Najczęściej oglądane / najczęściej kupowane,
Cross-selling – oferowanie produktów uzupełniających wcześniejsze zakupy,
Producent,
Marka,
Ręcznie wybrane,
Kategoria,
Ostatnio oglądane.

Aby zdecydować o parametrach wyświetlania tych informacji należy przejść w panelu administracyjnym Comarch e-Sklep do zakładki Ustawienia/Ustawienia sklepu/sekcji Towary:

Dodawanie informacji o typie produktu w systemie ERP dotyczy:

Nowości,
Produktu z gazetki,
Produktu polecanego,
Wyprzedaży,
Promocja,
Nowość,
Super jakości,
Super ceny,
Najlepszej oceny,
Rekomendacji sprzedawcy.

Sekcja "Newsletter" pozwala dodać wybrany wariant zapisu klientów do subskrypcji. Dwa z nich są w formie wyskakującego okienka (pop-up), które prezentowane są wyłącznie na stronie głównej e-Sklepu (newsletter-3, newsletter-4). Dodatkowo, w wersji przeglądarkowej szablonu, w newsletterze w formie popup (newsletter-3) widoczny jest banner (niedostępny w wersji mobilnej) o wymiarach 275px x 475px. Wszystkie teksty dostępne w nowym newsletterze są edytowalne w ustawieniach szablonu w menu Wygląd sklepu/ Ustawienia/ Bannery/ Newsletter banner. Te typy newslettera mogą być używane jednocześnie z pozostałymi wersjami newslettera dostępnymi w szablonie Topaz.

Sekcja z filmami

Sekcja z filmami daje możliwość dodania filmów promujących nie tylko produkty, ale również Twoją firmę lub producentów czy marki. Filmy dodasz z poziomu panelu administracyjnego przechodząc do Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Strona główna. W tej sekcji możesz zaprezentować filmy: udostępnione w sekcji Ustawienia/Pliki użytkownika, opublikowane w portalu Youtube, dodane na zewnętrznym hostingu.

Slider marek

Sekcja "Slider marek" umożliwia dodanie do szablonu dwóch widoków slidera marek. Pod przyciskiem Opcje możliwe jest wybranie jednego z trzech sposobów jego prezentacji: brak wyszarzenia (dodane logo mają zachowane oryginalne kolory), wyszarzenie (dodane logo jest szare, kolor pojawia się po najechaniu kursorem myszki na logo), błysk (po najechaniu myszką, na logo pojawia się animacja świetlna). Na sliderach wyświetlane są loga marek, które zostały zaimportowane z systemu ERP. Po kliknięciu w wybrane logo, pojawi się lista wszystkich towarów, dla których dodana jest konkretna marka. Sekcje mogą być dodane w szablonie w dowolnym miejscu na stronach: głównej, liście towarów i szczegółach towaru.

Slider producentów

Sekcja "Slider producentów " umożliwia dodanie do szablonu dwóch widoków slidera producentów. Pod przyciskiem Opcje możliwe jest wybranie jednego z trzech sposobów jego prezentacji: brak wyszarzenia (dodane logo mają zachowane oryginalne kolory), wyszarzenie (dodane logo jest szare, kolor pojawia się po najechaniu kursorem myszki na logo), błysk (po najechaniu myszką, na logo pojawia się animacja świetlna). Na sliderach wyświetlane są loga producentów, które zostały zaimportowane z systemu ERP. Po kliknięciu w wybrane logo, pojawi się lista wszystkich towarów, dla których dodany jest konkretny producent. Sekcje mogą być dodane w szablonie w dowolnym miejscu na stronach: głównej, liście towarów i szczegółach towaru.

Element tekstowy

Element tekstowy pozwala na zamieszczenie dłuższego opisu, który będzie wyświetlany na stronie głównej Comarch e-Sklep. W kreatorze wyglądu Comarch są do wyboru dwa warianty:

element tekstowy z samym tekstem,
element tekstowy z możliwością dodania zdjęcia.

Tekst wprowadza się edytując obiekt tekstowy w ustawieniach szablonu: Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Obiekty:

text-el-no-photo-mp-1 – element bez obrazka,
text-el-photo-mp-2 – element z obrazkiem.

Strona główna wymaga dwóch podstawowych elementów: nagłówka oraz stopki. Pozostałe elementy nie są obowiązkowe.

Banner informacyjny

info-banner-1 – element z ikonkami i podpisem
- Szybka dostawa,
- Gwarancja jakości,
- Odbiór osobisty,
- Reklamacje,
- Zwroty towarów,

info-banner-2 – element z ikonkami i krótką informacją
- Ekspresowa wysyłka,
- Darmowa dostawa,
- Obsługa klienta,

info-banner-2 – element z ikonkami i krótkim opisem
- Ekspresowa dostawa,
- Darmowa dostawa,
- Strefa kontaktu.

Stopka

Sekcja "Stopka" zawiera trzy widoki do wyboru.

W każdym widoku widnieją strony statyczne, którymi można zarządzać w sekcji Wygląd Sklepu/ Ustawienia/ Nagłówek i Stopka. Dla każdej z sekcji wyświetla się jej utworzona w panelu nazwa. W stopce znajdują się także informacje na temat rodzaju prezentowanych cen w e-Sklepie (brutto czy netto) oraz komunikat @Comarch SA 2022. All rights reserved Powered by Comarch e-Sklep. Dodatkowo istnieje możliwość umieszczenia w stopce odnośników do mediów społecznościowych oraz ich ikony. W stopce trzeciej możemy dodać ikony naszych dostawców oraz form płatności wykorzystywanych w sklepie.

Krok 2 - Lista towarów

Kolejnym krokiem jest utworzenie listy towarów. Aby to zrobić, należy rozwinąć listę zgodnie z poniższym rysunkiem, a następnie przejść do wskazanej zakładki:

Podobnie, jak w przypadku strony głównej konfigurujemy wygląd listy towarów. Dodatkowo możemy wskazać liczbę towarów, jaka ma się wyświetlać na liście (maksymalnie 50):

W zakładce Kafle, możemy dopasować wygląd kafli do swoich preferencji:

W Kreatorze dostępnych jest 5 widoków listy towarów:

Dodatkowo poziomu listy towarów możliwe jest także dostosowanie wyglądu kafla. Dostępne są trzy warianty:

Trzeci z wariantów kafli jest ustawiony jako domyślny. Posiada on ikonę koszyka, dzięki czemu można dodać produkty do koszyka z poziomu listy towarów. Po najechaniu myszką na dany produkt na liście towarów została obsłużona możliwość zmiany zdjęcia na drugie. Stanie się tak wówczas, gdy danemu produktowi zostały przypisane min. dwa zdjęcia w systemie ERP.

Wskazówka

Zalecamy dodawanie zdjęć produktów z białym tłem.

W niektórych widokach listy towarów przycisk dodawania do porównania oraz oceny jest widoczny bez konieczności logowania się do e-Sklepu. Na liście towarów przy nazwie produktu dodany jest także tooltip, który po najechaniu kursorem na nazwę towaru wyświetli pełną treść (w przypadku długich nazw).

Krok 3 - Szczegóły towaru

Po utworzeniu listy towarów przechodzimy do tworzenia szczegółów towaru.

Wskazówka

Warto zwrócić uwagę, że na każdej stronie sklepu możemy ustawić różne sekcje towarów polecanych o różnych typach (przykładowo na szczegółach towaru polecane towary mogą się inaczej wyświetlać niż na liście towarów).

Krok 4 - Koszyk

Po utworzeniu szczegółów towaru przechodzimy do wyboru wersji koszyka dostępnego w e-Sklepie. W Kreatorze Wyglądu dostępne są dwie wersje koszyka:

Koszyk 4 krokowy,
Koszyk 3 krokowy,
Koszyk 1 krokowy.

Następnie możemy przejść do modyfikacji wyglądu naszego szablonu. W tym celu należy przejść do zakładki Style.

Style

Jak zmienić kolory, czcionki oraz ikony?

Po dodaniu elementów strony możemy dodatkowo podejrzeć, jak będzie wyglądał nasz przyszły szablon. W tym celu należy przejść do zakładki Style.

Dodatkowo w zakładce Style możemy zmodyfikować wygląd naszego szablonu. Zmianie podlegają:

motyw kolorystyczny,
czcionka,
ikony,
styl okien i przycisków.

Motyw kolorystyczny

Aby zmienić kolor naszego szablonu należy przejść do sekcji Motyw kolorystyczny, gdzie do wyboru przygotowaliśmy 6 gotowych motywów.

Wskazówka

W aktualnej wersji Kreatora dodaliśmy nowy, ciemny motyw kolorystyczny.

Czcionki

Ikony

Mamy do wyboru 3 różne warianty wyglądu ikon. Dodatkowo istnieje możliwość wyboru w jakiej postaci wyświetla się ikona koszyka (torba, wózek lub koszyk) oraz loader.

Wskazówka

Od teraz możesz zmienić rodzaj loadera, wybierając jedną z 5 propozycji widocznych powyżej.

Styl okien i przycisków

Ostatnim elementem, który możemy modyfikować z poziomu zakładki Style jest styl okien i przycisków. Mamy do wyboru 3 różne warianty zaokrągleń.

Generowanie i wgrywanie szablonu

Po zaprojektowaniu wyglądu szablonu możemy go wygenerować i pobrać na dysk korzystając z przycisku Generuj widocznego w prawym górnym rogu:

Obok przycisku Generuj dostępna jest również opcja Importuj szablon, umożliwiająca wgranie wcześniej zapisanego szablonu z dysku i ponowną jego edycję.

W przypadku prawidłowego wygenerowania szablonu wyświetlony zostanie komunikat informujący o tym fakcie i pobrany plik.

Pobrany szablon należy zaimportować w Comarch e-Sklep w zakładce Wygląd sklepu/ Zaimportuj szablon z Kreatora Wyglądu.

W szablonie Topaz znajduje się informacja na temat godziny wygenerowania szablonu w Kreatorze. Taka informacja znajduje się w panelu administracyjnym w menu: Wygląd sklepu/ Ustawienia/ Więcej (trzy kropki), gdzie należy wybrać opcję Edytuj ustawienia zaawansowane, a potem ponownie Więcej/ Edytuj HTML. Następnie z listy plików należy wybrać _layout.html. Informacje na temat modyfikacji, w tym godzina ostatniej modyfikacji, znajdują się nad oknem edycji pliku. Jeżeli plik nie był modyfikowany, wówczas godzina odpowiada godzinie wygenerowania szablonu w kreatorze.

Aktualizacja szablonu

po uruchomieniu strony kreatora wybierz opcję: Stwórz nowy projekt,
wybierz Nowy szablon,
w prawym górnym rogu wybierz opcję Importuj szablon,

następnie zaimportuj plik z szablonem, który ma być zaktualizowany. Po poprawnym zaimportowaniu szablonu otrzymasz informację zwrotną:

po wgraniu szablonu do aktualizacji użyj opcji Generuj.

Dzięki temu w prosty sposób można starsze szablony Topaz podnieść do wersji aktualnej.

Przywracanie koszyka dla klientów niezalogowanych

Więcej informacji

Więcej informacji można znaleźć w artykułach o wyglądzie sklepu oraz o dostosowaniu wyglądu.

Dla Gastronomii - przewodnik konfiguracji

Spis treści

Wstęp

Dedykowane konfiguracje

Wybor wariantów – konfiguracja „rozmiar burgera” oraz „rodzaj pieczywa”

Składniki i dodatki

Składniki

Dodatki

Alergeny

Określenie i walidacja obszaru dostawy

Określenie obszaru za pomocą mapy

Określenie obszaru za pomocą kodu pocztowego

Realizacja zamówień

Orientacyjny czas realizacji zamówienia

Zezwól na składanie zamówień tylko w wybranym zakresie godzin

1. Wstęp

dostosowana lista produktów w formie MENU,
popup z możliwością personalizacji zamówienia (dodanie kolejnych składników i dodatków),
wyświetlenie orientacyjnego czasu realizacji zamówienia,
komunikat o braku możliwości składania zamówienia w określonych dniach i godzinach,
możliwość ustawienia rejonu dostawy,
wyświetlanie alergenów.

2. Dedykowane konfiguracje

zdjęcie produktu,
opis,
możliwe do wyboru warianty,
dodatkowe produkty, ktore można umiejscowić pod nazwą „Składniki” czy „Dodatki”.

2.1. Wybór wariantów - konfiguracja "rozmiar burgera" oraz "rodzaj pieczywa"

Wskazówka

Na zrzucie ekranu w popupie widnieje fantom dwupoziomowy (rozmiar burgera i rodzaj pieczywa), co oznacza, że należy dodać dwa atrybuty grupujące na karcie towaru w systemie ERP.

2.2. Składniki i dodatki

towar nie może posiadać atrybutów grupujących,
produkty muszą mieć zdefiniowane przynajmniej jedno zdjęcie,
towar musi być zamiennikiem jednostronnym,
łączna ilość zamienników nie może przekraczać 20 towarów prostych. Ograniczenie to dotyczy każdego z niżej wskazanych systemów ERP.

Poniżej zamieściliśmy instrukcję konfiguracji dla poszczególnych systemów ERP.

2.3. Składniki

2.3.1. W jaki sposób zostały skonfigurowane "Składniki" w ERP Optima?

Wskazówka

Grupa musi być domyślną dla składników, które się w niej znajdują. Dodatkowo musi ona zostać dodana jako podgrupa grupy głównej, która została wybrana na definicji oddziału.

2.3.2 W jaki sposób zostały skonfigurowane "Składniki" w ERP XT?

2.3.3 W jaki sposób zostały skonfigurowane "Składniki" w ERP XL?

Przyklad

Jeśli na definicji oddziału w zakładce Eksport/ Cennik wybierzesz grupę Szablon gastronomiczny:

To należy w niej dodać podgrupę o nazwie "INNE".

Krok 4. Po wykonaniu synchronizacji produkty z grupy "INNE" będą widoczne na popupie jako składniki, ale nie wyświetlą się jako osobna grupa "INNE" w menu kategorii.

2.4 Dodatki

2.4.1 W jaki sposób zostały skonfigurowane "Dodatki" w Comarch ERP Optima?

2.4.2 W jaki sposób zostały skonfigurowane "Dodatki" w Comarch ERP XT?

2.4.3 W jaki sposób zostały skonfigurowane "Dodatki" w Comarch ERP XL?

Efekt: Po wykonaniu synchronizacji produkty będą widoczne na popupie. Dodatkowo, produkty z kategorii "DODATKI" wyświetlą się w menu kategorii, które widoczne jest nad menu

3. Alergeny

Szablon dla Gastronomii został dostosowany do wyświetlania tabel z alergenami, które mogą znaleźć się w produktach. Alergeny możesz wyświetlić zatem za pomocą:

konfiguracji banneru „Tabela”,
dodania dowolnej treści na stronie użytkownika,
oznaczeniu ich jako atrybuty.

3.1. Alergeny jako atrybuty - widoczność na szczegółach towaru - Konfiguracja ERP Optima

Efekt: Po synchronizacji alergeny zostaną wyświetlone na szczegółach towaru w zakładce "Alergeny"

3.2. Alergeny jako atrybuty - widoczność na szczegółach towaru - Konfiguracja ERP XT

Krok 2. Atrybut należy dodać do towaru, na którym ma być widoczny. Aby to zrobić, należy przejść na kartę towaru w zakładkę e-Sklep:

3.3. Alergeny jako atrybuty - widoczność na szczegółach towaru - Konfiguracja ERP XL

Krok 1. Utworzyć w systemie ERP XL atrybut tekstowy o nazwie ALERGENY

Krok 2. Atrybut należy dodać do towaru, na którym na być widoczny. Aby to zrobić, należy przejść z pozycji cennika do zakładki Atrybuty:

4. Określenie i walidacja obszaru dostawy

4.1. Określenie obszaru za pomocą mapy

Krok 2. Następnie, po określeniu obszaru, zapisz obszar, wybierając przycisk znajdujący się poniżej mapki.

4.2. Określenie obszaru za pomocą kodu pocztowego

5. Realizacja zamówień

W szablonie dla Gastronomii możesz określić orientacyjny czas realizacji zamówienia, a także określić, kiedy jest ono możliwe do złożenia.

5.1. Orientacyjny czas realizacji zamówienia

Efekt: Po złożeniu zamówienia Twoi Klienci zobaczą thank you page z odliczaniem czasu do realizacji:

5.2. Zezwól na składanie zamówień tylko w wybranym zakresie godzin

Jak edytować informacje o towarze z sekcji proponowane?

W Kreatorze Wyglądu B2C dla szablonu Topaz dostępne są parametry stylu wyświetlanych kafli towaru w sekcji proponowane. Dzięki temu możesz zwiększyć konwersję sprzedaży rekomendowanych swoim klientom produktów. Wybierz sekcję proponowane, następnie jej widok (pojedynczy lub podwójny), a potem przejdź do ustawień sekcji, gdzie masz możliwość edycji informacji o towarze, które będą widoczne na kaflu towaru. Aby dokonać modyfikacji sekcji proponowane, przejdź do zakładki „Kafle”. Tam masz możliwość wybrania następujących opcji:

Pozwalaj na kupowanie z sekcji towarów proponowanych,
Pozwalaj na dodawanie do ulubionych z sekcji towarów proponowanych,
Prezentuj drugie zdjęcie towaru w sekcji towarów proponowanych,
Powiększ kafel po najechaniu na niego kursorem.

Na podglądzie kafla możesz na bieżąco sprawdzać, jak prezentuje się towar z włączonymi parametrami.

Jak dodać obrazek do nazwy kategorii i podkategorii w Comarch e-Sklep?

Spis treści

Wstęp

Jak dodać zdjęcie do nazwy kategorii w Comarch e-Sklep?

Comarch ERP Optima
Comarch ERP XL
Comarch ERP XT

Jak ustawić dodane zdjęcie kategorii jako ikonkę w nagłówku szablonu Topaz?

Jak mogę dodać obrazek do nazwy podkategorii?

Więcej informacji

Wstęp

Jak dodać zdjęcie do nazwy kategorii w Comarch e-Sklep?

Comarch ERP Optima

Krok 1. Aby dodać zdjęcia kategorii w Comarch ERP Optima przejdź do zakładki Ogólne > Grupy towarowe i wybierz grupę do której ma zostać dodane zdjęcie.

Krok 2. Następnie na zakładce Atrybuty za pomocą symbolu Plusa dodaj atrybut binarny.

Wskazówka

Jeśli nie posiadasz atrybutu binarnego to aby go utworzyć przejdź do zakładki Ogólne > Atrybuty i w pierwszej zakładce symbolem Plusa dodaj atrybut w formacie binaria.

Krok 3. Po dodaniu zdjęć kategorii zmiany zapisz ikoną dyskietki oraz wykonaj synchronizację.

Comarch ERP XL

3. Zmiany zapisz ikoną dyskietki oraz wykonaj synchronizację.

Comarch ERP XT

Krok 3. Zapisz wprowadzone zmiany i wykonaj synchronizację.

Jak ustawić dodane zdjęcie jako ikonkę w nagłówku szablonu Topaz?

Widok nagłówka header-2 ze sklepu demonstracyjnego - https://demo.comarchesklep.pl/

Krok 1. Skonfiguruj funkcję wyświetlania się ikon nagłówka. Istnieją dwie możliwości konfiguracji tej funkcji:

Z poziomu Kreatora Wyglądu – Podczas tworzenia szablonu Topaz w Kreatorze Wyglądu dodaj nagłówek header-1,2,3 lub 5. Następnie przejdź do jego edycji i oznacz parametr „Ukryj ikony w nagłówku” na „tak”:

Zapisz zmiany, a następnie wygeneruj szablon.

Z poziomu panelu administracyjnego – W sytuacji gdy wgrałeś już wygenerowany szablon do Twojego sklepu i chcesz wprowadzić zmiany w zakresie wyświetlania się obrazków przy nazwach kategorii, przejdź do sekcji Wygląd sklepu > Ustawienia > Dodatkowe i wprowadź zmiany przy parametrze „Ukryj ikony w nagłówku”:

Wprowadzone zmiany zapisz i opublikuj.

Krok 2. Wgraj zdjęcia kategorii do Twojego systemu ERP. Informacje na temat jak wgrać zdjęcia kategorii do poszczególnych systemów ERP znajdziesz pod pierwszym punktem tego artykułu.

Wskazówka

Jak mogę dodać zdjęcie do nazwy podkategorii?

Widok zdjęć podkategorii na liście towarów ze sklepu demonstracyjnego - https://demo.comarchesklep.pl/

Aby dodać zdjęcia do podkategorii postępuj według poniższych kroków: Krok 1. Skonfiguruj funkcję wyświetlania podkategorii. Istnieją dwie możliwości konfiguracji tej funkcji:

Z poziomu Kreatora Wyglądu - Tworząc szablon Topaz lub dla Gastronomii przejdź do edycji Listy towarów w Kreatorze Wyglądu. Następnie dodaj układ listy towarów: products-1,2,3 lub 4 i edytując go oznacz parametr "Udostępnij zdjęcia podkategorii".

Zapisz zmiany, a następnie wygeneruj szablon.

Z poziomu panelu administracyjnego - W sytuacji gdy wgrałeś już wygenerowany szablon do Twojego sklepu i chcesz wprowadzić zmiany w zakresie wyświetlania się obrazków przy nazwach podkategorii, przejdź do sekcji Wygląd sklepu > Ustawienia > Ogólne i oznacz parametr "Udostępnij zdjęcia podkategorii":

Więcej informacji

Więcej na temat dodawania obrazków w e-Sklepie można przeczytać w artykułach:

- - Obrazki w e-Sklepie
  - Obrazki (optymalizacje)

Banner promocyjny w szablonie Topaz i One Page Shop

Banner promocyjny - jak to działa?

Dodanie banneru

W podglądzie układu szablonu, po najechaniu kursorem na obszar z bannerem promocyjnym, zobaczysz możliwość jego edycji.

Wybierz ikonę "zębatki", aby móc edytować i określić liczbę wyświetlanych towarów oraz typ promowanych towarów.

Edycja banneru

Odnajdź banner na liście nazwany "promotionalBanner", a następnie wybierz go, aby edytować i dodać zdjęcie

Po dokonaniu modyfikacji należy zapisać i opublikować zmiany. Gotowe! Teraz Twój banner promocyjny wyświetli się na stronie głównej.

Indywidualny banner dla kategorii towarowej w szablonie Topaz

Indywidualny banner dla kategorii towarowej - jak to działa?

Od wersji 2024.5 w Twoim e-Sklepie masz możliwość dodania banneru do wybranej przez Ciebie grupy towarowej. Pomoże Ci to lepiej wyeksponować i dopasować zdjęcia czy komunikaty, które chcesz przedstawić przeglądającym ofertę Twojego sklepu. Możesz ustalić na przykład, który konkretny obrazek powinien wyświetlić się w kategorii z artykułami kosmetycznymi do twarzy, a który przy towarach związanych z pielęgnacją włosów.

Dodanie banneru

Banner możesz dodać z poziomu Kreatora wyglądu. Aby to zrobić, przejdź na stronę "Lista towarów", po czym wybierz dowolny banner i przeciągnij go w wybrane przez Ciebie miejsce. Jeśli pozostałe strony szablonu są gotowe i skonfigurowane, to możesz go w całości wygenerować. Więcej informacji na temat Kreatora Wyglądu oraz poszczególnych sekcji znajdziesz w artykule: Kreator wyglądu Topaz (B2C) Teraz możesz zaimportować szablon do panelu administracyjnego, w którym nastąpi reszta konfiguracji. Postępuj zgodnie z poniższą instrukcją.

Edycja banneru

Odnajdź odpowiedni banner na liście, a następnie wybierz go, aby edytować. Podczas edycji możesz wybrać jeden typ banneru spośród trzech: Standardowy, Lookbook oraz Dla kategorii. Dodaj obrazek ikoną plusa, a następnie zaznacz typ "Dla kategorii".

Aby wybrać kategorię, kliknij na dodany wcześniej obrazek, a następnie naciśnij "Zmień", aby zmienić kategorię.

Po naciśnięciu przycisku wyświetli się lista kategorii dostępnych w Twoim e-Sklepie. Wybierz tę, przy której chcesz wyświetlić banner.

Po zmianie kategorii naciśnij "Wybierz", aby zatwierdzić.

Dodana kategoria pojawiła się na liście. Możesz ją zmienić, usunąć, lub dodać kolejną. Po modyfikacjach wybierz przycisk "Zmień".

Po modyfikacjach należy zapisać i opublikować zmiany. Gotowe! Teraz Twój banner dla kategorii wyświetli się na liście towarów przy wybranej przez Ciebie grupie towarowej.

Jak edytować nagłówek w szablonie B2C?

Spis treści

Wstęp

Jak dodać logotyp i favicon?

Jak edytować odnośniki do mediów społecznościowych?

Jak dodać strony lub grupy stron?

Wstęp

Nagłówek w e-Sklepie to stały element, umieszczony na górze ekranu lub na dole w wersji mobilnej. Jego głównym celem jest umożliwienie użytkownikom szybkiego dostępu do różnych sekcji witryny, takich jak: “Strona główna”, “O nas” czy “Kontakt”. Dzięki opcji edycji nagłówka możesz prosto i szybko:

dodawać, edytować, wyróżniać i usuwać strony lub grupy stron,
dodać, edytować lub usuwać odnośniki do mediów społecznościowych,
w jednym miejscu zmienić logotyp i favicon.

Możliwość edycji nagłówka dostępna jest dla szablonów B2C: Topaz, One Page Shop oraz Dla Gastronomii. Aby edytować zawartość nagłówka sklepu, należy przejść w panelu administracyjnym do obszaru: Wygląd sklepu > Ustawienia > Nagłówek:

W tym miejscu masz możliwość:

ustawienia logotypu i faviconu,
ustalenia, które media społecznościowe powinny wyświetlać się w nagłówku,
dodania stron lub grupy stron,
przejścia do konfiguracji menu kategorii.

Jak dodać logotyp i favicon?

Aby dodać logotyp i favicon, wybierz przycisk „Wyślij plik”, a następnie wybierz plik z odpowiedniego miejsca na Twoim komputerze.

Wskazówka

Pamiętaj, że w przypadku logotypu, maksymalny rozmiar obrazka wynosi 30 KB, a wymiary to 200 x 200px. Rekomendowane formaty: PNG, JPG, JPEG, SVG. W przypadku faviconu maksymalny rozmiar obrazka wynosi 10 KB, a rekomendowane formaty to: PNG, JPG, JPEG, SVG.

Jak edytować odnośniki do mediów społecznościowych?

Wskazówka

Miniatury z odnośnikami do mediów społecznościowych są widoczne w drugim i trzecim typie nagłówka (header-2 oraz header-3) w szablonie Topaz.

Aby edytować istniejący odnośnik do mediów społecznościowych, przejdź do szczegółów logotypu wybranego serwisu, który chcesz podłączyć do e-Sklepu. W miejscu "# " w kodzie wklej link do swojego portalu. Dzięki temu możliwe będzie przekierowanie użytkownika do konkretnego medium społecznościowego. Następnie zapisz zmiany.

Aby dodać nowy odnośnik do mediów społecznościowych wystarczy, że naciśniesz ikonę plusa.

Wyświetli się wówczas edytor, do którego należy wkleić analogiczny kod, jak w przykładzie prezentowanym powyżej. Fragment kodu należy skopiować z poziomu panelu administracyjnego. W miejscu "#"w kodzie wklej link do swojego portalu. Jeśli chcesz zmienić obrazek, to we fragmencie kodu w miejscu linku wklej swój odnośnik do wybranego zdjęcia. Może to być odnośnik skopiowany z pliku, który znajduje się w Plikach użytkownika.

Wskazówka

W nagłówku wyświetli się pięć pierwszych ikon mediów społecznościowych, które zostały dodane w panelu administracyjnym.

Jak dodać strony lub grupy stron?

Z poziomu obszaru Wygląd sklepu > Ustawienia > Nagłówek możesz dodać Stronę lub Grupę stron. Aby to zrobić, należy wybrać sekcję "Dodaj stronę lub grupę stron".

Po wybraniu tej opcji wyświetli się następujący popup:

Z poziomu popupu należy zaznaczyć parametr: Stronę lub Grupę stron i uzupełnić obowiązkowe pole "Nazwa". Następnie, aby dodać odnośnik do strony, należy edytować dodaną stronę lub grupę.

Podczas edycji w panelu administracyjnym wyświetli się obszar, w którym możliwe jest dokonanie zmian. Możesz zdecydować, czy do strony lub grupy stron dodasz już istniejącą stronę ze sklepu, czy stronę zewnętrzną:

Po wyborze opcji "Dodaj stronę ze sklepu" pokaże się popup z listą stron, które można wybrać i dodać do sekcji.

Możesz także dodać stronę zewnętrzną, uzupełniając pola na formularzu:

Przy dodanym odnośniku możesz zdecydować, czy chcesz go wyróżnić, otworzyć w nowej karcie, czy usunąć.

Wprowadzone zmiany należy zapisać i opublikować. Poniżej prezentujemy efekt wprowadzonych konfiguracji (dodanie mediów społecznościowych, grupy stron oraz wyróżnienia):

Jak zaprezentować banner z odliczaniem czasu w szablonach B2C?

Spis treści

Wstęp

Jak na stronie głównej zaprezentować banner z odliczaniem czasu?

Jak zaprezentować odliczanie czasu w bannerze top?

Wstęp

Banner promocyjny z odliczaniem czasu będzie prezentowany na stronie głównej Twojego e-Sklepu i będzie wskazywał czas do końca opisanej oferty. Taki rodzaj banneru pomoże Ci w zwróceniu uwagi Klientów na okazje ograniczone czasowo, które są dostępne w obrębie Twojego sklepu.

Jak na stronie głównej zaprezentować banner z odliczaniem czasu?

Krok 1. Banner możesz dodać z poziomu Kreatora Wyglądu B2C (zamiennie: panel administracyjny e-Sklepu: Wygląd sklepu/ Kreator wyglądu).W Kreatorze banner znajduje się w sekcji Banner promocyjny. Stąd przeciągnij go w wybrane przez Ciebie miejsce w szablonie:

Krok 2. Szablon z tak przygotowanym bannerem należy wygenerować. Po zaimportowaniu szablonu do panelu administracyjnego możesz przejść do dalszej konfiguracji odliczania czasu. Krok 3. Przejdź do ustawień Wygląd sklepu/ Ustawienia/ Bannery. W tej sekcji znajdź banner o nazwie promotionalBanner, a następnie przejdź do jego edycji.

Krok 4. Za pomocą ikony plusa dodaj obrazek w rozmiarze 1920px na 680px do banneru. Po przesłaniu właściwego obrazka kliknij na niego, aby przejść do edycji.

Krok 5. Wybierz zakładkę Ustawienia. Tutaj masz możliwość zdefiniowania do kiedy ma trwać odliczanie:

Wskazówka

Po skończeniu odliczania banner nadal będzie widoczny na sklepie, aby móc poinformować o zakończeniu oferty. Jeżeli chcesz, aby banner przestał być widoczny wraz z zakończeniem odliczania, należy przejść do sekcji Widok zaawansowany. Tutaj znajdują się dodatkowo ustawienia dotyczące czasu prezentowania banneru na sklepie:

Krok 6. Gotowe! Twój banner będzie prezentował się w sklepie następująco:

Jak zaprezentować odliczanie czasu w bannerze top?

Odliczanie czasu jest także dostępne z poziomu banneru top. Jest to banner znajdujący się na samej górze witryny. Dzięki ustawieniu odliczania czasu w tym miejscu będziesz mógł od razu zwrócić uwagę klientów na dostępne okazje. Aby to zrobić, zastosuj się do poniższej instrukcji Krok 1. Przejdź do sekcji Wygląd sklepu/ Ustawienia/ Bannery i wybierz banner o nazwie top.

Krok 2. Kliknij na edycję konfiguracji wskazanego banneru.

Krok 3. W zakładce Ustawienia zdefiniuj czas odliczania:.

Wskazówka

Aby czas odliczania pokazywał się w bannerze top należy uzupełnić pole "Tekst" w Widoku zaawansowanym:

Tekst będzie traktowany jako napis informacyjny przy odliczaniu czasu.

Krok 4. Banner top będzie prezentował się na sklepie następująco:

Wskazówka

Opcja odliczania czasu w bannerze top jest możliwa do skonfigurowania wraz z linkami. Informacje o konfiguracji banneru top z wieloma linkami można znaleźć w artykule Jak dodać wiele linków dla banneru top? W takim przypadku należy uzupełnić konfigurację linków, ustawić opcję odliczania czasu, jak również uzupełnić pole "Tekst". Dzięki temu banner top zyska następujący wygląd:

Jak zaprezentować banner w liście towarów dla szablonu Topaz?

Spis treści

Wstęp

Jak dodać banner do listy towarów?

Wstęp

Jak dodać banner do listy towarów?

Wskazówka

Aby zmienić banner wystarczy kliknąć inny banner, natomiast aby go usunąć należy ponownie kliknąć na dodany banner.

Wskazówka

Pamiętaj o tym, aby zapisać i opublikować wprowadzone zmiany.

Krok 6. Gotowe! Twój banner będzie prezentował się w sklepie następująco:

Wskazówka

Dostosowanie wyglądu e-Sklepu

Nowości i promocje w szablonie

Na stronie głównej sklepu wyświetlane są produkty prezentowane jako promocje w Twoim sklepie. Nowości i promocje w szablonie: 1 - strona główna

Produkty które wyświetlają się w tym obszarze oznacza się odpowiednim parametrem na kartach towarowych w systemie ERP. Więcej na temat dodawania atrybutów czasowych do produktów można przeczytać w poniższych artykułach:

Jednak rodzaj wyświetlanych produktów możesz zmodyfikować dopasowując je do własnych upodobań. Dzięki temu na stronie głównej można zaprezentować nie tylko promocje, ale np. nowości, rekomendacje sprzedawcy, produkt z gazetki czy też wyprzedaż. Zmianę rodzaju wyświetlanych produktów wykonuje się w Panelu administracyjnym. W tym celu należy edytować obiekt, który domyślnie wyświetla nowości zdefiniowane w systemie ERP. Zaloguj się do Panelu administracyjnego i przejdź do obszaru Wygląd sklepu/ Ustawienia. Następnie użyj przycisku ‘Więcej’ i Edytuj Ustawienia zaawansowane. Przejdź do zakładki 'Obiekty' i edytuj obiekt 'productnew'. Nowości i promocje w szablonie: 2 - lista obiektów

Nowości i promocje w szablonie: 2 - lista obiektów

W edycji obiektu 'productnew' możesz zmienić typ wyświetlanych produktów wybierając je z listy rozwijanej. Nowości i promocje w szablonie: 3 - nowości i promocje

Nowości i promocje w szablonie: 3 - nowości i promocje

Po zmianie zapisz swój wybór i opublikuj szablon, aby nowe produkty pojawiły się na stronie.

Integracja z edrone - dostosowanie szablonu

Wskazówka

Darmowe szablony Comarch od wersji 2018.1 posiadają wbudowaną integrację z zaawansowanym systemem do zarządzania relacjami z klientami edrone. Jeżeli korzystasz z innych szablonów, to ten artykuł może być dla Ciebie pomocny. Poniżej znajduje się lista kroków, które należy wykonać w celu integracji z edrone.

Ustawiamy swój App ID z edrone w panelu administracyjnym (Ustawienia/Ustawienia Sklepu/Ogólne/Integracja z edrone)
W głównym folderze szablonu tworzymy folder edrone, w którym umieszczamy pliki, których zawartość znajduje się w kolejnych punktach
W pliku html, na końcu sekcji head includujemy plik edrone/head.html (dodajemy {% include ‘edrone/head.html’ -%} ) {% if config.External.Edrone.AppId != '' -%} <script type="text/javascript"> (function (srcjs) { window._edrone = window._edrone || {}; _edrone.app_id = '{{ config.External.Edrone.AppId }}'; _edrone.version = '1.0.0'; _edrone.platform_version = '{{ config.Version }}'; _edrone.platform = 'comarch'; _edrone.shop_lang = '{{ page.Language }}';{% if page.PageId != config.DefinedPages.Order.Id -%} _edrone.action_type = 'other'; {% if usr.Authenticated -%} {% if customer.Address.Name != '' -%} {% assign FullName = customer.Address.Name -%} {% if FullName contains ' ' -%} {% assign HalfName = FullName | Split:' ' -%} {% endif %} _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}'; {% if HalfName[1] -%} _edrone.last_name = '{{ HalfName[1] }}'; {% endif %} {% endif -%} {% if customer.Address.Country != '' -%} _edrone.country = '{{ customer.Address.Country }}'; {% endif -%} {% if customer.Address.City != '' -%} _edrone.city = '{{ customer.Address.City }}'; {% endif -%} {% if customer.Address.Phone != '' -%} _edrone.phone = '{{ customer.Address.PhoneNo }}'; {% endif -%} _edrone.email = '{{ customer.Email }}'; {% endif -%} {% endif -%}var doc = document.createElement('script'); doc.type = 'text/javascript'; doc.async = true; doc.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + srcjs; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(doc, s); })("//d3bo67muzbfgtl.cloudfront.net/edrone_2_0.js"); </script> {% endif -%}
W pliku html, na końcu sekcji body includujemy pliki edrone/product-presentation.html oraz edrone/subscribe.html
- product-presentation.html
{% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%} <script type="text/javascript"> {% if productdetails -%} {% assign product-presentation = productdetails -%} {% elseif product-details -%} {% assign product-presentation = product-details -%} {% endif -%} window._edrone = window._edrone || {}; _edrone.action_type = 'product_view'; _edrone.product_ids = '{{ product-presentation.Product.Id }}'; _edrone.product_titles = '{{ product-presentation.Product.Name }}'; {% if product-presentation.Product.ImageId > 0 -%} _edrone.product_images = 'http:{{ page.BaseHref }}img/large/{{ product-presentation.Product.ImageId }}/{% if product-presentation.Product.Images[0].Name != "" -%}{{ product-presentation.Product.Images[0].Name }}{% else %}.jpg{% endif %}'; {% endif -%} {% if product-presentation.Product.Code != '' -%} _edrone.product_skus = '{{ product-presentation.Product.Code }}'; {% endif -%} _edrone.product_urls = '{{ page.CanonicalLink }}'; _edrone.product_category_ids = '{{ page.GroupId }}'; _edrone.product_category_names = '{{ page.CurrentSiteNode.Name }}'; </script> {% endif %}
Wskazówka
Jeżeli w swoim szablonie obiekt ze szczegółami produktu ma inną nazwę, to należy zmodyfikować warunek.
- subscribe.html
{% if config.External.Edrone.AppId != '' -%} {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.CustomerProfile.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Newsletter/Subscribe' || d.action.Action == 'newsletter/subscribe') && d.action.Result){ var queryString = c.data.split('&'); for(i=0; i<queryString.length; i++){ if(queryString[i].indexOf('email') != -1){ var email = queryString[i].split('=')[1].replace('%40','@'); } } _edrone.customer_tags = 'From Newsletter Subscribe'; _edrone.email = email; _edrone.subscriber_status = '1'; _edrone.action_type = 'subscribe'; _edrone.init(); } }); </script> {% endif %} {% if page.PageId == config.DefinedPages.CustomerProfile.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Newsletter/Unsubscribe' || d.action.Action == 'newsletter/unsubscribe') && d.action.Result){ var queryString = c.data.split('&'); for(i=0; i<queryString.length; i++){ if(queryString[i].indexOf('email') != -1){ var email = queryString[i].split('=')[1].replace('%40','@'); } } _edrone.customer_tags = 'From Newsletter Subscribe'; _edrone.email = email; _edrone.subscriber_status = '0'; _edrone.action_type = 'subscribe'; _edrone.init(); } }); </script> {% endif %} {% endif %}
Wskazówka
Jeżeli w swoim szablonie umożliwiasz zapis do newslettera z innych stron niż strona główna i profil klienta oraz pozwalasz na wypisanie poza profilem klienta, to należy zmodyfikować powyższy plik.

Uwaga
W wersji 2018.7 z domyślnych szablonów Comarch usunięto akcję dotyczącą zapisu i wypisu z newslettera, ponieważ dane przekazywane są przez Comarch e-Sklep w tle.
W szablonach Agat, Bursztyn i Opal, w tym samym miejscu includujemy również plik edrone/add-to-cart.html {% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){ _edrone.action_type = 'add_to_cart'; _edrone.init(); } }); </script> {% endif %}
Wskazówka
Plik należy dodać do wszystkich szablonów, które nie są oparte o najnowszą wersję szablonu Szafir (w tym szablonie dodawanie do koszyka w edrone obsłużone jest bezpośrednio w funkcjach szablonu – spowodowane jest to możliwością dodawania kilku towarów jednocześnie czego inne szablony nie posiadają).
W szablonie Bursztyn, w tym samym miejscu includujemy również plik edrone/add-to-cart-with-data.html {% if config.External.Edrone.AppId != '' -%} {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.ProductList.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){ window._edrone = window._edrone || {};var products = d.collection["customer.Cart"].Products; var size = products.length; var product = products[size-1];_edrone.product_ids = product.Id; _edrone.product_titles = product.NameNoHtml; if(product.ImageId > 0){ _edrone.product_images = 'http:{{ page.BaseHref }}img/large/'+product.ImageId+'/.jpg'; } if(product.Code != ''){ _edrone.product_skus = product.Code; } _edrone.product_urls = 'http:{{ page.BaseHref }}'+product.Url; _edrone.product_category_ids = product.DefaultGroup; _edrone.action_type = 'add_to_cart'; _edrone.init(); } }); </script> {% endif %} {% endif %}
Wskazówka
Kod działa dla dodawania do koszyka ze strony głównej i listy towarów. Jeżeli pozwalasz na dodawanie do koszyka z innych stron, należy go zmodyfikować.
W pliku z podziękowaniami za zakup (Agat – partials/cart/summary.html, Bursztyn i Opal – order/thank-you.html, Szafir – order/thx.html), na końcu pliku (tuż pod includem rich-snippetów), includujemy plik edrone/order.html {% if config.External.Edrone.AppId != '' -%} <script type="text/javascript"> _edrone.action_type = 'order';{% if cart -%} {% assign order = cart -%} {% endif -%}{% assign FullName = order.Customer.DeliveryAddress.Name -%} {% if FullName contains ' ' -%} {% assign HalfName = FullName | Split:' ' -%} {% endif %} _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}'; {% if HalfName[1] -%} _edrone.last_name = '{{ HalfName[1] }}'; {% endif %} _edrone.country = '{{ order.Customer.DeliveryAddress.Country }}'; {% if order.Customer.DeliveryAddress.City != '' -%} _edrone.city = '{{ order.Customer.DeliveryAddress.City }}'; {% endif %} {% if order.Customer.DeliveryAddress.PhoneNo != '' -%} _edrone.phone = '{{ order.Customer.DeliveryAddress.PhoneNo }}'; {% endif %} _edrone.email = '{{ order.Customer.Email }}'; {% assign size = order.PlacedOrder.Products | Size -%} var ids = ''; var titles = ''; var images = ''; var skus = ''; var urls = ''; var categoryIds = ''; var counts = ''; {% for product in order.PlacedOrder.Products -%} ids += '{{ product.Id }}{% if forloop.index != size -%}|{% endif -%}'; titles += '{{ product.NameNoHtml }}{% if forloop.index != size -%}|{% endif -%}'; images += '{% if product.ImageId > 0 -%}http:{{ page.BaseHref }}img/large/{{ product.ImageId }}/.jpg{% endif -%}{% if forloop.index != size -%}|{% endif -%}'; skus += '{{ product.Code }}{% if forloop.index != size -%}|{% endif -%}'; urls += 'http:{{ page.BaseHref }}{{ product.Url }}{% if forloop.index != size -%}|{% endif -%}'; categoryIds += '{{ product.DefaultGroup }}{% if forloop.index != size -%}|{% endif -%}'; counts += '{{ product.Quantity | Normalize }}{% if forloop.index != size -%}|{% endif -%}'; {% endfor -%} _edrone.product_ids = ids; _edrone.product_titles = titles; _edrone.product_images = images; _edrone.product_skus = skus; _edrone.product_urls = urls; _edrone.product_category_ids = categoryIds; _edrone.product_counts = counts; _edrone.order_id = '{{ order.PlacedOrder.Id }}'; _edrone.base_currency = '{{ order.Currency }}'; _edrone.order_currency = '{{ order.Currency }}'; _edrone.base_payment_value = '{{ order.OrderTotalValue | ToString | Replace:",","." }}'; _edrone.order_payment_value = '{{ order.OrderTotalValue | ToString | Replace:",","." }}'; _edrone.init(); </script> {% endif -%}
Wskazówka
Jeżeli w swoim szablonie używasz dla koszyka innej nazwy obiektu niż cart lub order, to powyższy kod należy zmodyfikować.

Edrone i dodawanie towarów w szablonie Szafir:

Plik js/init-ui1.js

Funkcja serialAddingToCart

Na samym początku funkcji znajduje się pętla “each”, a w niej instrukcja warunkowa „if (quantity > 0)”. Na końcu tej instrukcji warunkowej wklejamy poniższy kod:

if(typeof _edrone !== 'undefined') {
var product = form.parents('.product-item-lq');
var base = $('[data-base]').data('base');

if (first) { _edrone.product_ids = productId; _edrone.product_titles = product.find('.product-name-lq').text(); _edrone.product_images = base + product.find('img').data('src'); _edrone.product_skus = product.find('.product-code-lq').text(); _edrone.product_urls = base + product.find('a').attr('href'); _edrone.product_category_ids = $('[data-group-id]').data('group-id'); _edrone.product_category_names = $('[data-group-name]').data('group-name'); first = false; } else { _edrone.product_ids += '|' + productId; _edrone.product_titles += '|' + product.find('.product-name-lq').text(); _edrone.product_images += '|' + base + product.find('img').data('src'); _edrone.product_skus += '|' + product.find('.product-code-lq').text(); _edrone.product_urls += '|' + base + product.find('a').attr('href'); _edrone.product_category_ids += '|' + $('[data-group-id]').data('group-id'); _edrone.product_category_names += '|' + $('[data-group-name]').data('group-name'); } } Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod:

if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}

Funkcja addManyProducts

Na samym początku funkcji znajduje się pętla “for(var i=0; i<products.length; i++)” iterująca po produktach. Tuż przed nią należy dodać poniższą linijkę: var first = true; Następnie, w tej pętli znajduje się instrukcja warunkowa „if(products[i].askForPriceChild == false && products[i].quantity > 0)”. Na samym jej końcu należy dodać poniższy kod:

if(parameters && !validationError && products[i].supply != undefined && typeof _edrone !== 'undefined'){
if(first){
_edrone.product_ids = products[i].supply;
_edrone.product_images = products[i].img;
_edrone.product_skus = products[i].code;
var name = _edrone.product_titles;
var url = _edrone.product_urls;
var categoryId = _edrone.product_category_ids;
var categoryName = _edrone.product_category_names;
first = false;
} else {
_edrone.product_ids += '|' + products[i].supply;
_edrone.product_images += '|' + products[i].img;
_edrone.product_skus += '|' + products[i].code;
_edrone.product_titles += '|' + name;
_edrone.product_urls += '|' + url;
_edrone.product_category_ids += '|' + categoryId;
_edrone.product_category_names += '|' + categoryName;
}
}

Kilkanaście linijek niżej (w tej samej funkcji) jest “$.post”. Na samym jego początku należy dodać poniższy kod:

if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}

Dodanie funkcji simpleAddToCartSuccess

Na końcu pliku js/init-ui1.js należy dodać poniższy kod:

function simpleAddToCartSuccess(e){
updateClientArea();
if(typeof _edrone !== 'undefined') {
if ($('.add-from-presentation-lq').index() == -1) {
var product = $(e.currentTarget).parents('.product-item-lq');
var base = product.parents('[data-base]').data('base');
_edrone.product_ids = product.data('product-id');
_edrone.product_titles = product.find('.product-name-lq').text();
_edrone.product_images = base + product.find('img').attr('src');
_edrone.product_skus = product.find('.product-code-lq').text();
_edrone.product_urls = base + product.find('a').attr('href');
_edrone.product_category_ids = product.parents('[data-group-id]').data('group-id');
_edrone.product_category_names = product.parents('[data-group-name]').data('group-name');
}
_edrone.action_type = 'add_to_cart';
_edrone.init();
}
}

Następnie należy zmodyfikować “event”, który jest wywoływany przy kliknięciu w element z klasą “add-to-cart-update-client-area-lq”. Zmieniamy zawartość tego eventa na: app.post(e, simpleAddToCartSuccess, e); Cały event powinien wyglądać następująco:

$('body').on('click', '.add-to-cart-update-client-area-lq', function(e) {
app.post(e, simpleAddToCartSuccess, e);
});

Plik js/init-ui2.js

Funkcja serialAddingFromWishlist

Na samym początku funkcji znajduje się pętla “each”. Tuż przed nią należy dodać poniższą linijkę: var first = true; Następnie, w tej pętli znajduje się instrukcja warunkowa „if (quantity > 0)”. Na samym jej końcu należy dodać poniższy kod:

if(typeof _edrone !== 'undefined') {
if (first) {
_edrone.product_ids = productId;
_edrone.product_titles = productContainer.find('.product-name-lq').text();
_edrone.product_images = base + productContainer.find('img').attr('src');
_edrone.product_skus = productContainer.find('.product-code-lq').text();
_edrone.product_urls = base + productContainer.find('a').attr('href');
_edrone.product_category_ids = categoryId;
first = false;
} else {
_edrone.product_ids += '|' + productId;
_edrone.product_titles += '|' + productContainer.find('.product-name-lq').text();
_edrone.product_images += '|' + base + productContainer.find('img').attr('src');
_edrone.product_skus += '|' + productContainer.find('.product-code-lq').text();
_edrone.product_urls += '|' + base + productContainer.find('a').attr('href');
_edrone.product_category_ids += '|' + categoryId;
}
}

Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod:

if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}

Powiększanie zdjęć w szczegółach towaru w szablonie Topaz

W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.

Wskazówka

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

Uwaga

Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

Na początku w pliku elements\product-details-1.html lub elements\product-details-2.html (w zależności od typu wyglądu), za pomocą narzędzia wyszukiwania, znajdź linijkę: <img alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{image.Id}}/{{image.Link}}.jpg"> W miejsce tej linijki wklej następujacy kod: <img class="open-gallery" alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg"> Następnie w tym samym pliku, za pomocą narzędzia wyszukiwania, znajdź linijkę:

<img alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">

W jej miejsce wklej następujący kod:

<img class="open-gallery" alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">

Kolejnym krokiem jest przejście do pliku js\layout1.js. W pliku tym, za pomocą narzędzia wyszukiwania, znajdujemy frazę var productDetailsFunctions = {, a następnie bezpośrednio pod nią wklejamy następujący kod:

openGallery: function (e) {
var t = $(".product-details__image").slick("slickCurrentSlide");
var i = $(e.currentTarget).parents(".product-details__images");
i.addClass("opened-gallery");
i.append('<svg class="svgIcon close-gallery-button"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>');

$("body").addClass("modal-opened");
$(".open-gallery:not(.opened-gallery-switch)").addClass("opened-gallery-switch");
$(".product-details__image-list").addClass("slider-hidden");
$(".product-details__image").addClass("opened-gallery");
$(".product-details__image").slick("unslick");

this.setGallerySlider(t);
$(".draggable").css("top", "25%");
},
closeGallery: function (e) {
$(".product-details__images").removeClass("opened-gallery");
$(".product-details__image").removeClass("opened-gallery");
$(".open-gallery.opened-gallery-switch").removeClass("opened-gallery-switch");
$(e.currentTarget).remove();
$(".product-details__image-list").removeClass("slider-hidden");
$("body").removeClass("modal-opened");
$(".product-details__image").slick("unslick");
$(".draggable").css("top", "0");

this.setSlider();
},
setGallerySlider: function (t) {
$(".product-details__image").slick ({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
nextArrow: '<button type="button" aria-label="nextArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowRight"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',
prevArrow: '<button type="button" aria-label="prevArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowLeft"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',
accessibility: false,
dots: false,
});
$(".product-details__image").slick("slickGoTo", t, true);
},

W tym samym pliku za pomocą narzędzia wyszukiwania znajdź frazę var body = $('body'); a bezpośrednio pod nią wklej następujacy kod:

body.on("click", ".open-gallery:not(.opened-gallery-switch)", function(e) {
productDetailsFunctions.openGallery(e);
}),

$("body").on("click", ".close-gallery-button", function(e) {
productDetailsFunctions.closeGallery(e);
}),

Przejdź do pliku css\elements\product-deatils-1-g.css lub css\elements\product-deatils-2-g.css (w zależności od typu wyglądu). Na koncu pliku wklej następujący kod:

.close-gallery-button {
position: fixed;
right: 0;
top: 0;
background: transparent;
color: #656565;
z-index: 20;
border: 0;
font-size: 20px;
width: 50px;
height: 50px;
cursor: pointer;
}

.slider-hidden {
display: none;
}

.opened-gallery {
position: fixed;
display: flex;
z-index: 20;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #ffffff;
width: 100%;

.slick-next:last-child {
right: 20px;
}

.slick-next:first-child {
left: 20px;
}

.slick-next {
height: 35px;
width: 35px;
}

img { 
  max-height: none;
  }
}

Ostatnim krokiem jest przeście do pliku css\base_layout-g.css. Znajdź frazę body { i bezpośrednio pod wyszukaną linijką wklej następujacy kod:

 &.modal-opened {
overflow: hidden;
}

Prezentacja własnych punktów odbioru osobistego w formie mapy

Spis treści

Ustawienia ogólne

Szablon Szafir

Szablon Agat

Szablon Opal

Szablon Bursztyn

Wskazówka

Ustawienia ogólne

Niezbędne ustawienia do włączenia widoku własnych punktów odbioru na mapie: 1. Dodanie w panelu sklepu klucza aplikacji do Google Maps API (Wygląd Sklepu > Ustawienia) google maps api input

2. Zaznaczenie opcji wyświetlania punktów odbioru osobistego na mapie (Wygląd Sklepu > Ustawienia) change to map view

3. Dodanie własnych punktów odbioru (Ustawienia > Płatności i dostawy > Odbiór osobisty) add delivery points

Wskazówka

Wypełniając formularz nowego punktu, trzeba pamiętać o polach „Szerokość/długość geograficzna”

4. Włączyć opcję odbioru osobistego w panelu (Ustawienia > Płatności i dostawy > Odbiór osobisty) enable delivery points

5. Dodać dostawę za pomocą własnych punktów odbioru do sposobów dostawy deliveries

6. Dodać dostawę do macierzy dostaw oraz określić metody płatności za ten rodzaj dostawy add delivery method

7. Dokonać niezbędnych modyfikacji w kodzie szablonu wg poniższych instrukcji.

Szablon Szafir

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść pliki „collection-points-scripts.html” i „collection-points-styles.html” w głównym folderze szablonu.
Umieść plik „collection-points.js” w folderze „js”.
Umieść plik “collection-points.css” w folderze “css”.
Podmień plik “collection-points.html”, który znajduje się w folderze „order/delivery-partials”.
W pliku „__layout.html”, na końcu sekcji „<head>” dodaj poniższą linijkę:
```
{% include 'collection-points-styles.html' %}
```
W pliku „__layout.html”, na końcu sekcji „<body>” dodaj poniższą linijkę:
```
{% include 'collection-points-scripts.html' %}
```

Szablon Agat

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collection-points.css” w folderze “css”.
Umieść plik “collection-points.js” w folderze “js”.
Podmień plik “order.js”, który znajduje się w folderze “js”.
Podmień plik “delivery-adress.html”, który znajduje się w folderze “partials/cart”.
Podmień plik “init.js”, który znajduje się w folderze “js”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

{% if page.PageId == config.DefinedPages.Order.Id -%} 
   <link rel="stylesheet" type="text/css" href="css/collection-points.css"> 
{% endif -%}

Szablon Opal

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collection-points.js” w folderze “js”.
Umieść plik “collection-points.css” w folderze “css”.
Podmień plik “order.js”, który znajduje się w folderze “js”.
Podmień plik “data-form.html”, który znajduje się w folderze “order/cst-data”.
Podmień plik “cart.html”, który znajduje się w folderze “order”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

{% if page.PageId == config.DefinedPages.Order.Id -%} 
   <link rel="stylesheet" type="text/css" href="css/collection-points.css"> 
{% endif -%}

Do pliku “order-cart.html”, wklej poniższy kod:

{% extends '_layout.html' -%}

{% block PageContent -%}
    <script src="{{ cart.CollectionPointMapUrl }}"></script>
    <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script>
    <script src="js/collection-points.js?v={{ lqTS }}"></script>
    {% include 'order-cart-container.html'%}
{% endblock -%}

{% block PageBodyEnd -%}
    <script>__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script>
    <script src="js/order.js?v={{ lqTS }}" charset="utf-8" type="text/javascript"></script>
{% endblock -%}

Szablon Bursztyn

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collectionpoints.js” w folderze “js”.
Umieść plik “collectionpoints.css” w folderze “css”.
Podmień plik “order.js”, który znajduje się w folderze “js”.
Podmień plik “cart.html”, który znajduje się w folderze “order”.
Podmień plik “order-short-info.html”, który znajduje się w folderze “order”.
Podmień plik “cart-products-partial.html”, który znajduje się w folderze “order”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

{% if page.PageId == config.DefinedPages.Order.Id -%}
    <link rel="stylesheet" type="text/css" href="css/collectionpoints.css">
{% endif -%}

Do pliku “order-cart.html”, wklej poniższy kod:

{% extends '_layout.html' -%}

{% block PageContent -%}
    <script src="{{ cart.CollectionPointMapUrl }}"></script>
    <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script>
    <script src="js/collectionpoints.js?v={{ lqTS }}"></script>
    {% include 'order-cart-container.html'%}
{% endblock -%}

{% block PageBodyEnd %}
    <script type="text/javascript">__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script>
    <script src="js/order.js?v={{ lqTS }}"></script>
{% endblock %}

Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Spis treści

Jak wyeksportować swój szablon z Comarch e-Sklep?

Jak wgrać własny szablon do Comarch e-Sklep?

Jak wyeksportować swój szablon z Comarch e-Sklep?

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Eksport szablonu.

Krok 2. W tym miejscu możesz opcjonalnie (przed eksportem) określić autora szablonu, podać adres e-mail, telefon oraz adres WWW swojego e-Sklepu.

Krok 3. Jeżeli chcesz wyeksportować szablon do pliku użyj przycisku Eksportuj szablon.

Gotowe! Szablon został wyeksportowany do pliku na Twoim urządzeniu.

Wskazówka

Z tego miejsca możesz także wyeksportować posiadane w e-Sklepie bannery, korzystając z przycisku Eksportuj bannery.

Jak wgrać własny szablon do Comarch e-Sklep?

Własny szablon. Jak go wgrać?

Po skomponowaniu swojego własnego szablonu możesz wgrać go do e-Sklepu. Postępuj zgodnie z poniższymi krokami.

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Import szablonu.

Krok 3. Wybierz plik XML swojego szablonu i naciśnij Importuj szablon.

Uwaga

Wskazówka

W zakładce Szablony możesz określić, czy wgrywany szablon ma być domyślny i aktywny w e-Sklepie.

Gotowe! Twój szablon został zaimportowany do e-Sklepu.

Zmiana kolorystyki

Wskazówka

W e-Sklepie istnieje możliwość modyfikacji kolorów w każdym szablonie. Możesz wybrać Gotowe Szablony Comarch lub stworzyć swój własny w Kreatorze wyglądu, a następnie edytować niektóre ustawienia. Aby zmienić kolorystykę należy przejść do sekcji Wygląd Sklepu/Ustawienia, po czym wybrać zakładkę Ustawienia szablonu. Szablony Bursztyn i Opal posiadają trzy predefiniowane schematy kolorów:

Pomarańszowy
Niebieski
Szary

Szablon Agat, podobnie jak wyżej wymienione, posiada również trzy schematy kolorów:

Złoty
Zielony
Lodowy

Szablon Szafir posiada następujące schematy kolorów:

Granatowy
Niebieski
Pomarańczowy

Z poziomu Panelu Administracyjnego możesz również modyfikować szablon Topaz. Podobnie jak podczas projektowania w Kreatorze Wyglądu możesz wybrać jeden z pięciu motywów kolorystycznych:

Domyślny
Bordowy
Beżowy
Granatowy
Błękitny

Każdy motyw można dodatkowo samodzielnie skonfigurować, na przykład zmienić kolory poszczególnych elementów szablonu. Po dokonaniu wszelkich modyfikacji pamiętaj o ich zapisaniu oraz opublikowaniu. W tym celu naciśnij symbol dyskietki znajdujący się w prawym górnym rogu, a następnie wybierz więcej i wybierz Publikuj.

Uwaga

Pamiętaj o ustawieniu szablonu jako Domyślny i Aktywny!

Jak dodać nową treść i stronę?

Spis treści

Wstęp

Dodawanie nowej treści

Dodawanie nowej strony

Dodanie strony

Przypisanie obiektu do strony

Powiązanie nowej strony z treścią użytkownika

Umieszczenie strony w stopce e-sklepu

Wstęp

W Comarch e-Sklep użytkownik ma możliwość tworzenia własnych stron oraz treści. Te drugie stanowią m.in. wiadomości E-mail i SMS, zgody formalne, czy dodatkowe treści użytkownika, np. regulamin sklepu. W panelu administracyjnym znajdują się standardowe treści oraz strony, które są odpowiednio ze sobą zmapowane w określony sposób, w wybranych miejscach wyświetlane.

Dodawanie nowej treści

Tworzenie treści

Aby utworzyć w e-Sklepie nową treść należy w panelu administracyjnym przejść do sekcji: Ustawienia/Treści/zakładka Regulamin i Inne, po czym dodać nową treść użytkownika.

Po wybraniu przycisku Dodaj należy uzupełnić nazwę oraz identyfikator. Po uzupełnieniu danych wyświetli się strona, na której możliwe jest udostępnienie treści. Możliwe jest także wgranie treści z pdf, a także dodanie załączników, które mogą być później np.

Wybierając przycisk Więcej (trzy kropki w prawym, górnym rogu) możemy podejrzeć identyfikator strony, a także dodać załączniki do wiadomości e-mail. Po wybraniu drugiej opcji wyświetli się lista, z której można wybrać odpowiednie treści.

Wskazówka

Wartość identyfikatora będzie potrzebna podczas dalszej konfiguracji.

Po dokonaniu modyfikacji wybierz Zapisz i publikuj, aby treść była widoczna na stronie. Możesz również wybrać opcję zapisz bez publikacji.

Dodawanie nowej strony

Dodanie strony

Nową stronę tworzymy w panelu administracyjnym w obszarze: Wygląd sklepu/Strony. W sekcji Użytkownika skorzystaj z przycisku Dodaj. Wypełnij pola z nazwą, linkiem i tytułem strony i zatwierdź przyciskiem Dodaj. Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywowania wystarczy kliknąć na jej kafelek i zmienić przełącznik opcji Aktywna na TAK W celu publikacji strony użyj przycisku Więcej/Publikuj. Po dodaniu nowej strony należy zapamiętać jej numer, który znajduje się na końcu adresu URL.

Wskazówka

Numer strony widnieje w nawiasie przy jej nazwie. Możesz to sprawdzić przechodząc kolejno do sekcji: Wygląd sklepu/Ustawienia/Edytuj ustawienia zaawansowane/Strony.

Przypisanie obiektu do strony

Przejdź do obszaru Wygląd sklepu/Ustawienia, następnie użyj przycisku Więcej i wybierz Edytuj ustawienia zaawansowane. Przejdź na zakładkę "Strony". Dla nowo dodanej strony w kolumnie Plik należy wpisać nazwę pliku user-page.html. Wprowadzone zmiany zachowaj za pomocą przycisku Zapisz.

Umieszczenie strony w stopce e-sklepu

W zakładce Wygląd sklepu/Ustawienia/Nagłówek/Stopka należy wybrać odpowiednią sekcję i dodać nową stronę.

Strony w e-Sklepie

Obszar do zarządzania stronami znajdujący się w Panelu administracyjnym w obszarze Wygląd sklepu/Strony, zawiera listę wszystkich stron obsługiwanych przez e-Sklep zaprezentowaną w formie kafelków, podzielonych na dwie kategorie, strony standardowe oraz użytkownika.

Z poziomu listy stron możesz edytować jedną z nich poprzez kliknięcie w kafelek lub dodać nową stronę w obszarze stron użytkownika za pomocą kafelka z plusem.

Po przejściu do edycji strony masz możliwość usunięcia strony oraz zmiany ustawień takich jak:

Aktywność
Nazwa
Język
Adres Url/ Link
Tytuł strony (meta title)
Opis strony (meta description)
Słowa kluczowe (meta keywords)
Tooltip dla URL
Klucz

Uwaga

Możliwość usuwania stron dostępna jest jedynie dla stron użytkownika w menu więcej po przejściu w edycję wybranej strony

Wskazówka

Dezaktywować możesz wszystkie strony użytkownika oraz następujące strony standardowe:

Porównywarka towarów
Wyszukiwanie zaawansowane
Kontakt
Regulamin sklepu
Polityka prywatności
Prawo do odstąpienia od umowy
Informacje o sklepie
Wysyłka
Płatność
Reklamacje i zwroty
Program lojalnościowy
Blog
Blog szczegóły wpisu
HTTP 404

Więcej o stronach przeczytasz w artykule Dodawanie nowej strony do szablonu (z zachowaniem styli).

Produkty polecane

W szablonach Comarch e-Sklep wyświetlane są produkty prezentowane jako polecane w Twoim sklepie.

Domyślnie w sekcji polecane wyświetlają się towary oznaczone w ERP atrybutem 'rekomendacja sprzedawcy' Jednak rodzaj wyświetlanych produktów możesz zmodyfikować dopasowując je do własnych upodobań. Dzięki temu na stronie głównej można zaprezentować nie tylko towary polecane, ale np. nowości, promocje, produkt z gazetki czy też wyprzedaż. Zmianę rodzaju wyświetlanych produktów wykonuje się w Panelu administracyjnym. W tym celu należy edytować obiekt, który domyślnie wyświetla nowości zdefiniowane w systemie ERP. Zaloguj się do Panelu administracyjnego i przejdź do obszaru Wygląd sklepu/ Ustawienia. Następnie użyj przycisku ‘Więcej’ i Edytuj Ustawienia zaawansowane. Przejdź do zakładki 'Obiekty' i edytuj obiekt 'productrecommended'.

W edycji obiektu 'productrecommended' możesz zmienić typ wyświetlanych produktów wybierając je z listy rozwijanej.

Po zmianie zapisz swój wybór i opublikuj szablon, aby nowe produkty pojawiły się na stronie, w sekcji polecane.

Ustawienia Wyglądu Sklepu

Spis treści

Ustawienia

Ustawienia szablonu
Bannery
Tłumaczenia
Nagłówek / Stopka
Dokumentacja

Ustawienia zaawansowane

Ustawienia (JSON)
Szablon
Obiekty
Testy A/B
Strony
Import z pliku XML
Eksport do pliku XML

Edytuj HTML

Ustawienia

Obszar Wygląd sklepu/ Ustawienia zawiera szereg ustawień odnośnie wyglądu Twojego sklepu pogrupowanych w zakładki:

Ustawienia szablonu,
Bannery,
Tłumaczenia,
Nagłówek / Stopka,
Dokumentacja.

Ustawienia szablonu

W ustawieniach szablonu możesz:

konfigurować kolorystykę swojego szablonu,
korzystać z parametrów określających sposób animacji banneru głównego,
wybrać akcję po dodaniu do koszyka,
dodać klucz aplikacji Google Maps API, aby korzystać z map Google.

Wskazówka

Ilość parametrów zależna jest od wykorzystywanego szablonu, a także od własnych ustawień dodanych w zakładce Ustawienia (JSON) w ustawieniach zaawansowanych, a następnie wprowadzonych w pliku __settings.liquid

Więcej o konfiguracji kolorów Twojego sklepu przeczytasz w artykule Zmiana kolorystyki

Bannery

W tej zakładce możesz modyfikować istniejące bannery lub dodawać nowe zgodnie z artykułem Bannery

Tłumaczenia

W obszarze Tłumaczenia znajduje się lista fraz wykorzystywanych w szablonie oraz ich tłumaczeń. Możesz dodawać, usuwać, a także edytować istniejące frazy, aby dostosować szablon do swoich potrzeb. Listę fraz wraz z tłumaczeniami można wyeksportować do pliku XML oraz zaimportować z wcześniej przygotowanego pliku XML.

Wskazówka

Fraz systemowych nie można usuwać, ale można je edytować.

Nagłówek / Stopka

W zakładce Nagłówek / Stopka możliwe jest dodanie favicon.ico, czyli grafiki, która jest widoczna na zakładce w przeglądarce.

Aby dodać zdjęcie, należy kliknąć przycisk Wyślij plik, po czym wybrać odpowiednią grafikę o rozmiarze nie większym niż 10 KB. W tym obszarze możesz również edytować elementy wyświetlające się w stopce. W sekcji Dołącz do nas możesz edytować i usuwać istniejące linki do portali społecznościowych lub dodawać nowe, a także wykorzystać obszar do innych odniesień zewnętrznych przydatnych w Twoim sklepie.

Wskazówka

Od wersji 2019.5 dodane zostały nowe odnośniki do najczęściej wykorzystywanych social mediów, które wyświetlane są w stopce szablonu. Mogą teraz Państwo kierować swoich użytkowników dodatkowo do serwisu Instagram, YouTube oraz Snapchat.

W sekcji Strony możesz edytować i dodawać grupy stron wyświetlających się w stopce.

Po przejściu w edycję danej grupy możesz edytować nazwę w wielu językach, modyfikować listę stron poprzez usunięcie istniejących lub dodanie nowych stron ze sklepu, bądź stron zewnętrznych. Usunąć grupę możesz z poziomu menu więcej w prawym górnym rogu.

Dokumentacja

W tej zakładce znajdziesz link do Centrum Pomocy gdzie znajduje się aktualna dokumentacja odnośnie silnika Liquid

Ustawienia zaawansowane

Obszar Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane (menu 'więcej' w prawym górnym rogu) zawiera bardziej zaawansowane ustawienia pogrupowane w zakładki:

Ustawienia (JSON),
Szablon,
Obiekty,
Testy A/B,
Strony,
Import z pliku XML,
Eksport do pliku XML.

Wskazówka

Szczegółowe informacje dla webmasterów odnośnie poniższych ustawień znajdziesz w artykule Szablony w sklepie

Ustawienia (JSON)

W tej zakładce dostępne są ustawienia analogiczne z zakładką Ustawienia szablonu, którą znajdziesz w sekcji Wygląd sklepu/ Ustawienia, ale przedstawione w formacie JSON. W tym miejscu możesz dodać własne ustawienia dla szablonów.

Szablon

W tej zakładce możesz ustawić szablon jako domyślny i/lub aktywny oraz podstawowe informacje o szablonie: nazwę, wersję, datę utworzenia oraz dane autora. Poprzez opcję Zmień hasło masz możliwość nadania hasła szablonowi i zablokowania nim obszarów, w których dokonuje się edycji szablonu oraz dostępu do szablonu poprzez aplikację Liquid Sync.

Uwaga

Zablokowanie hasłem dostępu do szablonu przez Liquid Sync spowoduje całkowity brak dostępu, mimo podania poprawnego hasła w aplikacji Liquid Sync.

Obiekty

W zakładce Obiekty znajduje się lista konfigurowalnych obiektów lokalnych - więcej o tych obiektach przeczytasz w artykule Obiekty lokalne. Na liście masz możliwość prostej konfiguracji istniejących obiektów po kliknięciu w wiersz z obiektem lub konfiguracji w formacie JSON po kliknięciu w adekwatną opcję oraz możliwość dodania kolejnych obiektów, które później mogą zostać wykorzystane w szablonie sklepu.

Testy A/B

Testy A/B pozwalają na wyświetlenie strony sklepu w dwóch różnych odsłonach celem zbadania i porównania ogólnej jakości i funkcjonalności szablonów, zaznaczonych w zakładce Szablon jako aktywne. W praktyce przy ustawieniu dwóch szablonów A i B jako aktywnych, sklep będzie się wyświetlał klientom raz w wersji A raz w wersji B (po równo). Jest to metoda badawcza, która w połączeniu z Google Analytics daje materiał do analizy współczynników konwersji, czyli procentowej wielkości określającej stosunek użytkowników strony, którzy wykonali pożądaną akcję (np. zakup) do wszystkich użytkowników danej strony. Okres trwania testów A/B możesz ustawić w panelu na 1 do 365 dni.

Strony

Zakładka zawiera listę stron w sklepie wraz z obiektami oraz plikami html które są przypisane do danej strony. W kolumnach Plik i Include możesz przypisać odpowiedni pliki html do wybranej strony. Po kliknięciu w wiersz z nazwą strony masz możliwość wybrania obiektów dostępnych na danej stronie.

Import z pliku XML

Import z pliku XML pozwala wczytać w sklepie wcześniej przygotowany i wyeksportowany szablon po kliknięciu w opcję Wybierz plik XML a następnie przycisk Importuj szablon znajdujący się poniżej. Jeżeli nadpisujesz istniejący szablon i chcesz zrobić pełny import, pamiętaj o zaznaczeniu opcji Podmień istniejące bannery, aby nadpisać bannery z szablonu wybranego na liście rozwijalnej w lewym górnym rogu.

Uwaga

Pamiętaj! Przed importem sprawdź, czy w liście rozwijalnej w lewym górnym rogu masz wybrany odpowiedni wolny slot lub szablon, który chcesz nadpisać nowym.

Eksport do pliku XML

Eksport przygotowanego szablonu do pliku XML następuje po kliknięciu w przycisk Eksportuj szablon. Dodatkowo istnieje możliwość eksportu tylko bannerów do pliku XML poprzez wybranie przycisku Eksportuj bannery. Przed eksportem możesz uzupełnić dane autora szablonu takie jak Autor, E-mail, Telefon, Adres WWW.

Edytuj HTML

Z obszaru Edytuj ustawienia zaawansowane poprzez menu Więcej widoczne w prawym górnym rogu masz dostęp do obszaru Edytuj HTML.

Uwaga

Uwaga. Ustawienia zaawansowane przeznaczone są dla webmasterów. Ustawienia wpływają w sposób bezpośredni na zachowanie strony w przeglądarce internetowej. Niepoprawnie wprowadzone dane mogą spowodować:

błąd wyświetlania strony,
nieprawidłowe funkcjonowanie strony,
nieprawidłowe wyświetlanie strony,
nieprawidłowe formatowanie strony.

Z tego obszaru masz możliwość edycji kodu szablonu dzięki dostępowi do plików html, css, js, co daje praktycznie nieograniczone możliwości personalizacji wyglądu oraz tworzenia własnych szablonów. Możesz również tworzyć oddzielne szablony dla sklepu na Facebooku lub wersji mobilnej poprzez listę rozwijalną obok listy z aktywnym szablonem. Na liście plików możesz wejść w edycję plików istniejących lub dodać nowe pliki. Po wejściu w edycję pliku masz możliwość jego edycji lub usunięcia, a także blokady poprzez wcześniej zdefiniowane hasło w ustawieniach zaawansowanych na zakładce Szablon. Pliki podniesione do edycji widoczne są w formie zakładek w lewym górnym rogu. Od wersji 2020 dla szablonu Topaz została dodana informacja na temat godziny wygenerowania szablonu w kreatorze. Taka informacja znajduje się w pliku _layout.html nad oknem edycji. Jeżeli plik nie był modyfikowany, wówczas godzina odpowiada godzinie wygenerowania szablonu w kreatorze. Jeżeli plik został zmodyfikowany to prezentowana godzina jest godziną ostatniej modyfikacji pliku.

Wskazówka

Więcej o plikach szablonu przeczytasz w artykule Pliki szablonu oraz Szablony w sklepie.

Dodawanie nowej strony do szablonu (z zachowaniem stylów)

Wskazówka

W e-Sklepie możesz dodawać nowe strony do swojego szablonu. Dzięki dodatkowemu odnośnikowi Klient może przenieść się do przeznaczonej dla niego treści. W celu dodania nowej strony w e-Sklepie z zachowaniem obecnego wyglądu stron, wystarczy wykonać kilka prostych kroków.

Wskazówka

Instrukcja dotyczy szablonów Topaz oraz Szafir od wersji 2021.5. W przypadku szablonów Bursztyn, Opal, Agat od wersji 2022. W przypadku wszystkich szablonów w wersji poniżej 2021.5 obowiązuje instrukcja "Jak wyświetlać własną Treść na nowo dodanej Stronie użytkownika"

Krok 1. Tworzenie nowej strony

a) W panelu administracyjnym przejdź do zakładki Wygląd sklepu > Strony. Na dole strony znajduje się sekcja Użytkownika. Skorzystaj z przycisku plusa, aby dodać nową stronę.

b) W oknie pop-up uzupełnij pole Nazwa i Tytuł strony (meta title). Pole Link uzupełni się automatycznie. Następnie zatwierdź przyciskiem DODAJ.

Uwaga

Należy zapamiętać Identyfikator strony - numer znajdujący się na końcu wygenerowanego linka URL strony. Przykład: http://demo.comarch-esklep.pl/testowy/nowa_strona/27

Wskazówka

Pole link uzupełni się automatycznie na podstawie wprowadzonej nazwy. Możesz także wprowadzić swój własny tekst.

Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywacji, trzeba zmienić wartość przełącznika Aktywna na "Tak".

c) Po wykonaniu powyższych operacji mamy gotową pustą stronę. W celu jej publikacji, użyj na szczegółach strony przycisku Więcej > Publikuj, znajdującego się w prawym górnym rogu strony.

Krok 2. Przyporządkowanie nowej strony do odpowiedniego pliku (obiektu) w szablonie

Aby nowa strona mogła zostać prawidłowo wyświetlona w e-Sklepie, należy przyporządkować ją do odpowiedniego pliku w posiadanym szablonie. Postępuj zgodnie z poniższymi krokami i powiąż wcześniej dodaną stronę z plikiem user-page.html . a) W panelu administracyjnym przejdź do sekcji Wygląd sklepu > Ustawienia > Edytuj ustawienia zaawansowane (z rozwijanej listy w prawym górnym rogu ekranu). b) W zakładce Strony nowo dodana strona powinna pojawić się na końcu listy. Wprowadź w pustym polu w kolumnie Plik wartość user-page.html.

c) Wprowadzone zmiany zapisz oraz opublikuj (przyciski w prawym górnym rogu). Zapisz i publikuj

Krok 3. Utworzenie własnej treści dla nowej strony

Na nowo dodanej stronie możliwe jest w łatwy i szybki sposób wprowadzenie własnych treści. Treść użytkownika dodajemy zgodnie z poniższymi informacjami: a) W panelu administracyjnym przejdź do sekcji Ustawienia > Treści formalne, po czym przejdź do zakładki Regulamin i inne. b) Dodaj nową treść użytkownika, klikając w przycisk Dodaj regulamin. c) Wprowadź nazwę nowej strony oraz dowolną treść, jaką chcesz wyświetlić. W tym miejscu możesz także wgrać własne załączniki. W dodatkowym elemencie na pasku nowej strony pojawią się odnośniki do załączonych plików, do których Klient będzie miał swobodny dostęp. Zapisz przyciskiem Dodaj bez publikacji lub Dodaj i publikuj. Treść dla nowej strony

d) Następnie wejdź ponownie w szczegóły zapisanej treści i wprowadź Identyfikator*.

Uwaga

W polu Identyfikator wprowadź identyfikator cyfrowy strony utworzonej w kroku 1. Pamiętaj! Musi to być to przypisany numer z zakładki Wygląd sklepu > Ustawienia, Więcej > Edytuj ustawienia zaawansowane > Strony, inaczej powiązanie treści użytkownika z nowo dodaną stroną się nie powiedzie.

e) Zapisz i publikuj. Po wykonaniu powyższych kroków pod adresem URL z punktu 1. powinna być widoczna treść wprowadzona w sekcji Regulamin i inne.

Krok 4. Dodanie strony do sekcji

W ostatnim kroku, należy przejść do zakładki Wygląd sklepu > Ustawienia > Nagłówek lub Stopka, następnie kliknąć w odpowiednią sekcję i z tego miejsca dodać nową stronę, wybierając opcję Dodaj stronę ze sklepu.

Uwaga

Pamiętaj o publikacji szablonu po wprowadzeniu powyższych zmian!

Wykonanie powyższych kroków pozwala na utworzenie własnej strony, a następnie powiązanie ją z treścią użytkownika. Nowa strona będzie widoczna w stopce szablonu, a po przejściu do niej wyświetli się utworzona wcześniej treść.

Udostępnij towar w mediach społecznościowych - konfiguracja dla szablonów Topaz i Szafir

Spis treści

Wstęp

Konfiguracja udostępniania towarów w szablonie Topaz

Konfiguracja udostępniania towarów w szablonie Szafir

Wstęp

Dzięki funkcji udostępniania towarów klienci mają możliwość udostępnienia wybranego asortymentu w mediach społecznościowych lub za pomocą komunikatorów internetowych. Jest to jedna z częściej używanych opcji w sklepach internetowych. W Comarch e-Sklep możesz udostępniać produkty na następujących platformach:

Facebook
Twitter
Linkedin
WhatsApp
Printerest
Gmail
E-mail

Aby skorzystać z przygotowanego przez nas mechanizmu udostępniania towaru musisz posiadać:

aktualną wersję szablonu Topaz (min. 2023.0) – sprawdzić wersję szablonu,
oraz aktualną wersję e-Sklepu (min. 2023.0),
certyfikat SSL.

Konfiguracja udostępniania towarów w szablonie Topaz

Aby skonfigurować udostępnianie towarów w szablonie postępuj zgodnie z poniższą instrukcją. Krok 1. Zaloguj się do panelu administracyjnego, a następnie przejdź do sekcji Wygląd sklepu/ Ustawienia. Krok 2. W zakładce Dodatkowe odszukaj sekcję o nazwie Udostępnianie towarów. Krok 3. Spośród dostępnych platform wybierz te, na których Klient będzie mógł udostępniać Twoje towary. Krok 4. Po dokonaniu modyfikacji zapisz i opublikuj zmiany.

Wskazówka

Jeżeli nie pozwolisz na udostępnianie towarów, to widok na szczegółach towaru nie ulegnie zmianie. Produkt będzie można udostępnić klikając przycisk Poleć towar

Na szczegółach towaru ikona i napis "Poleć towar" zmienia się na "Udostępnij na". Po kliknięciu w ikonę Klient będzie mógł wybrać opcje, które zostały wybrane w panelu administracyjnym.

W wersji mobilnej Klient będzie mógł udostępnić towar w aplikacjach, które posiada zainstalowane w swoim smartfonie. Lista aplikacji otworzy się po kliknięciu w przycisku Dostępne aplikacje.

Konfiguracja udostępniania towarów w szablonie Szafir

Aby skonfigurować udostępnianie towarów w szablonie postępuj zgodnie z poniższą instrukcją. Krok 1. Zaloguj się do panelu administracyjnego, a następnie przejdź do sekcji Wygląd sklepu/ Ustawienia. Krok 2. W zakładce Ogólne odszukaj sekcję o nazwie Udostępnianie towarów. Krok 3. Spośród dostępnych platform wybierz te, na których Klient będzie mógł udostępniać Twoje towary. Krok 4. Po dokonaniu modyfikacji zapisz i opublikuj zmiany.

Wskazówka

Jeżeli nie pozwolisz na udostępnianie towarów, to widok na szczegółach towaru nie ulegnie zmianie. Produkt będzie można udostępnić klikając przycisk Poleć towar

Rozbudowana stopka w szablonach Topaz i Szafir - jak ją skonfigurować?

Spis treści

Wstęp

Jak przystąpić do edycji stopki?

Więcej możliwości edycji stopki

Jak skonfigurować rozbudowaną stopkę?

Wstęp

Konfiguracja rozbudowanej stopki

Jak przystąpić do edycji stopki?

Więcej możliwości edycji stopki

Przykładowy wygląd rozbudowanej stopki w szablonie Topaz

Przykładowy wygląd rozbudowanej stopki w szablonie Szafir

Jak skonfigurować poszczególne elementy?

- Elementy 1-5: dodawanie kolejnych grup stron oraz zmiana ich kolejności dokonywana jest poprzez sekcję Nagłówek/Stopka w Ustawieniach w obrębie zakładki Wygląd Sklepu. W obrębie danej grupy możesz dodawać konkretne strony poprzez kliknięcie przycisku Dodaj stronę ze sklepu.

Wskazówka

Zmiany kolejności poszczególnych grup odnośników lub zmiany danych odnośników w obrębie danej grupy dokonuje się metodą Przeciągnij i upuść.

- Element 6: odpowiada za wyświetlanie następujących informacji: e-mail, numer telefonu, telefon2 (jeśli nie istnieje, to zastępowany jest przez telefon komórkowy) fax lub skype. W celu edycji danych kontaktowych należy przejść w panelu e-Sklepu do zakładki Ustawienia/Ustawienia sklepu. Informacje o adresie e-mail pobierane są automatycznie z zakładki Ogólne z sekcji Konto e-mail sklepu. Aby dodać lub zmodyfikować numer telefonu konieczne jest wybranie zakładki Dane sprzedawcy, następnie Infolinia i zweryfikowanie pola Telefon.
  Wskazówka
  W elemencie wyświetlone zostaną maksymalnie 3 informacje (e-mail, telefon i jedno z wybranych pól np. telefon2, telefon komórkowy lub fax.
- Element 7: odwołania do portali społecznościowych dodajemy bez zmian. Więcej o tym znajdziesz tutaj.
- Elementy 8-9: aby dodać informację o operatorach płatności oraz partnerach logistycznych należy wybrać zakładkę Wygląd Sklepu/Ustawienia/Bannery. Edycji dokonasz z perspektywy kafelków: Logistics Partners oraz Payment Operators poprzez dodanie właściwych grafik operatorów i partnerów. Aby zmienić nazwę „Operator płatności” i/lub „Partnerzy logistyczni” wybierz zamiast zakładki Bannery, zakładkę Tłumaczenia. Wyszukaj po parametrze „ID” LogisticsPartnersBannerTitle oraz PaymentOperatorsBannerTitle i zmodyfikuj pole „Tekst” według własnych preferencji. Zmiany zapisz i opublikuj. W przypadku chęci usunięcia któregoś z elementów, zaznacz go i naciśnij przycisk „Usuń”.

Wskazówka

Zalecane parametry grafik dla operatorów płatności i partnerów logistycznych: szerokość maksymalna 64 px, rozszerzenie PNG.

- Element 10: dane dotyczące firmy pobierane są z zakładki Ustawienia/Ustawienia sklepu/Dane sprzedawcy/Dane identyfikacyjne, a także z obszaru: Ustawienia/ Ustawienia sklepu/ Informacja o działalności gospodarczej/ Numer KRS lub CEIDG, Organ rejestrujący oraz Ustawienia/ Ustawienia sklepu/ Adres pocztowy, gdzie uwzględnione zostaną wszystkie pola za wyjątkiem Szerokości i długości geograficznej.

Jak dodać zdjęcia 360° dla moich towarów w Comarch e-Sklep?

Zdjęcia obrotowe 360° umożliwiają zaprezentowanie produktu z każdej strony. Dzięki nim klient może dokładniej obejrzeć produkt i tym samym dostrzec więcej detali. Fotografia obrotowa świetnie sprawdza się przy towarach, które posiadają wiele elementów lub oryginalną budowę. Aby dla swoich towarów zaprezentować zdjęcia w formie 360° musisz:

posiadać aktualną wersję (min. 2023.1.4) szablonu Topaz (B2C) lub Szafir (B2B),
posiadać odpowiednio przygotowane katalogi ze zdjęciami na zewnętrznym hostingu.

Domyślnie zdjęcia 360° widoczne są na liście towarowej i na szczegółach towaru. Jeśli chcesz ograniczyć wyświetlanie zdjęć przejdź do panelu administracyjnego do zakładki Wygląd sklepu/ Ustawienia/ Ogólne i znajdź parametr Wyświetlaj zdjęcia 360° na liście towarów, a następnie zmień parametr na Nie. Pamiętaj, aby po zmianie parametru zapisać i opublikować zmiany.

Jak przygotować zdjęcia 360°, aby móc udostępnić je dla moich towarów?

Krok 1. Sfotografuj swój towar z różnych stron obracając się wokół jego osi - tworząc odpowiednią ilość zdjęć prezentującą towar z różnych stron. Krok 2. Zatytułuj kolejno przygotowane zdjęcia podając numer klatki: 1, 2, 3, 4, itd. Numeracja zdjęć będzie odpowiadać za kolejność prezentowanej klatki. Krok 3. Utwórz folder, w którym umieścisz przygotowane zdjęcia i udostępnij je na zewnętrznym serwerze, w celu uzyskania linku do katalogu. Tak przygotowany katalog udostępnisz następnie w formie atrybutu na towarze w swoim systemie Comarch ERP.

Jak dodać zdjęcie 360° dla mojego towaru w Comarch e-Sklep?

Krok 1. Przejdź do swojego systemu Comarch ERP i dodaj nowy atrybut o nazwie 360photo i typie tekst. Krok 2. Przejdź do edycji wybranego towaru i dodaj w odpowiednim miejscu nowy atrybut o nazwie 360photo. Jako wartość atrybutu wprowadź adres URL do zewnętrznego hostingu, na którym znajduje się katalog z przygotowanym zdjęciem w formacie 360°. Krok 3. Zapisz zmiany i wykonaj synchronizację danych. Gotowe! W Twoim e-Sklepie pojawiły się właśnie zdjęcia w formie 360°. Od teraz Twoi Klienci zobaczą sprzedawane towary z różnych stron.

Wskazówka

Do prawidłowego wyświetlania się zdjęcia 360° należy dodać wskazany wyżej atrybut na towarze nadrzędnym, tak żeby ścieżka do niego alfabetycznie była na pierwszym miejscu. Wskazane zdjęcie będzie widoczne na liście towarowej na ojcu oraz w galerii towaru. Jeśli towary podrzędne nie będą posiadały zdjęć 360°, to będą widoczne z towaru nadrzędnego. Dla każdego języka można dodać tylko jedno zdjęcie 360°.

Oznaczenie dostępności zdjęcia 360° na szczegółach towaru w szablonie Topaz

Zobacz jak prezentuje się zdjęcie w formacie 360° w jednym z naszych sklepów demonstracyjnych.

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Jak wykonać kopię bezpieczeństwa?

W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu.

Jak wyeksportować bannery?

Jak zabezpieczyć hasłem swój szablon?

W tym miejscu nadasz hasło dla swojego szablonu.

Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno:

Składać się z minimum 8 znaków,
Zawierać dużą literę,
Zawierać małą literę,
Zawierać cyfrę 0-9,
Zawierać znak specjalny – ‘!.+?;^]=-(&_)#=

Gotowe! Teraz Twój szablon został zabezpieczony hasłem.

Jak skonfigurować Lookbook w Comarch e-Sklep?

Spis treści

Lookbook – czym jest i jak do wykorzystać?

Konfiguracja lookbooka w panelu administracyjnym

Jak oznaczyć towary na zdjęciu w lookbooku?

Lookbook w Szablonie Topaz

Lookbook w Szablonie Szafir

Lookbook w Szablonie Opal

Lookbook w Szablonie Bursztyn

Wskazówka

Lookbook - czym jest i jak do wykorzystać?

Chociaż lookbook został stworzony głównie z myślą o świecie mody, to można w nim prezentować towary z dowolnych kategorii. Może to być zarówno seria zdjęć z kolekcją ubrań, jak i zdjęcie ścianki warsztatowej, na której zaznaczono dostępne w sklepie narzędzia. Dodatkowo, na zamieszczonych fotografiach możliwe jest dodanie odnośników kierujących do konkretnych produktów sprzedawanych w e-Sklepie. W przypadku e-Sklepu lookbookiem można nazwać zbiór fotografii przedstawiających konkretną kategorię produktową. Towary prezentowane na zdjęciach powinny być odpowiednio wyeksponowane. Żeby produkt skutecznie przyciągał uwagę zaleca się, aby zdjęcia były wykonywane na neutralnym tle, które będzie odpowiednio komponowało się ze stroną sklepu. Dzięki lookbookowi możesz przedstawić Klientowi np. odpowiednie zastosowanie swoich produkt i tym samym inspirować ich. Dodatkowo funkcja ta pozwala na promowanie wielu towarów w bardzo atrakcyjnej formie.

Konfiguracja lookbooka w panelu administracyjnym

Niektóre szablony, takie jak Opal czy Topaz, domyślnie posiadają skonfigurowany banner jako lookbook. Oznacza to, że nie musisz tworzyć specjalnie dodatkowej sekcji.

W przypadku innych szablonów lookbook może wiązać się z dodaniem nowego banneru. Aby dodać lookbook do swojej strony należy zalogować się do panelu administracyjnego i postępuj zgodnie z poniższą instrukcją: Krok 1. Przejdź do sekcji Wygląd sklepu/ Ustawienia/ Bannery. Jeżeli nie masz sekcji bannerowej o nazwie lookbook naciśnij przycisk plusa, aby dodać nowy banner.

Jeżeli masz taką sekcję przejdź do jej edycji.

Krok 2. Wprowadź nazwę dla nowego lookbooka. Następnie naciśnij dodaj.

Krok 3. Po wpisaniu nazwy nowego banneru wyświetla się nowy formularz. W tym miejscu masz możliwość dodania opisu dla administratora oraz obrazków do katalogu.

Uzupełnij wszystkie pola i zaznacz opcję lookbook.

Nazwa – wprowadź tu nagłówek dla swojego Lookbooka,
Link – wprowadź przyjazną treść w linku dla lookbooka – wyświetli się ona, gdy dodasz w swoim sklepie więcej niż jeden lookbook.

Jeżeli powyższe kroki zostały wykonane, to możesz przejść do dodawania obrazków. Po dodaniu obrazków istnieje również możliwość uzupełnienia szczegółów dotyczących konkretnego zdjęcia. Aby dokonać modyfikacji w tym obszarze przejdź w Widok zaawansowany.

Jak oznaczyć towary na zdjęciu w lookbooku?

Krok 1. Dodaj zdjęcie dla swojego lookbooka. Krok 2. Przejdź do jego szczegółów.

Krok 3. Kliknij na zdjęciu w miejsce, dla którego chcesz oznaczyć towar. Otworzy Ci się nowy popup, w którym wybierzesz towar ze swojej bazy.

Gotowe! Dla wybranej grafiki zostały oznaczone towary. Przechodząc do lookbooka w szablonie Topaz, kiedy klikniesz w ikonę "plusa" znajdującą się na danym towarze, masz możliwość dodania tego towaru do koszyka, a ikoną serduszka dodasz towar do ulubionych.

Lookbook w sklepie demonstracyjnym https://demo-topaz.comarchesklep.pl/

Wskazówka

Konfiguracja lookbooka jest taka sama dla wszystkich szablonów Comarch. Każdy z nich posiada jednak odmienny widok i sposób oznaczenia towarów. Niżej możesz zobaczyć, jak wyglądają lookbooki w poszczególnych szablonach Comarch.

Lookbook w Szablonie Topaz

Szablon Topaz dedykowany sprzedaży detalicznej posiada dwa widoki lookbooka do wyboru: mozaikę lub listę. Aby zdecydować jaki widok jest dla Ciebie odpowiedni przejdź do zakładki Wygląd Sklepu/ Ustawienia i w sekcji Ustawienia lookbooka wybierz jeden z dostępnych widoków:

Widok typu Lista

Widok ten charakteryzuje się prezentacją zdjęć jedno pod drugim, w dwóch równoległych kolumnach. W tym widoku masz możliwość precyzyjnego oznaczenia towarów na bannerze i umożliwić dzięki temu ich zakup bezpośrednio z sekcji lookbook. Służą do tego znaczniki, które dodasz w dowolnym miejscu na obrazku podczas konfiguracji. Dodatkowo Twoi Klienci będą mogli swobodnie dodawać oznaczone towary do ulubionych w swoim profilu.

Wskazówka

Rekomendowany rozmiar bannerów do loobooka w widoku lista wynoszą: 620px x 620px. Pamiętaj, że każdy obrazek powinien mieć nie więcej niż 500 KB. Ilość znaczników jaką możesz dodać zależna jest od pola Lookbook json, które może zmieścić maksymalnie 3000 znaków.

Widok typu Lista – Lookbook w szablonie Topaz

Po kliknięciu w znacznik pokaże się kafel ze zdjęciem i ceną towaru.

Jeśli towar jest fantomem, to po kliknięciu w przycisk „Kup teraz” pojawi się popup z atrybutami do wyboru.

Widok lookbooka w formie listy możesz zobaczyć w naszym sklepie demonstracyjnym.

Widok typu mozaika

Widok typu mozaika charakteryzuje się różnorodnym rozmieszczeniem grafik w odmiennych rozmiarach – tworząc tytułową mozaikę. Na każdej grafice możesz oznaczyć towary, które są dostępne do kupienia w Twoim e-Sklepie. Z tego poziomu Klient będzie mógł w szybki sposób przejść do szczegółów towaru i poznać szczegóły na jego temat.

Wskazówka

Rekomendowany rozmiar bannerów w lookbooku dla widoku mozaika to kolejno: 560px x 630px, 700px x 850px, 1260px x 540px, 630px x 950px, 560px x 630 px. Pamiętaj, że każdy obrazek powinien mieć nie więcej niż 500 KB.

Widok typu Mozaika - Lookbook w szablonie Topaz

Oznaczone towary w lookbooku z widokiem mozaika - szablon Topaz

Widok lookbooka w formie mozaiki możesz zobaczyć w naszym sklepie demonstracyjnym. Jeżeli chcesz posiadać kilka stron Lookbook wybieranych z listy w Twoim nagłówku, to w sekcji z bannerami dodaj kolejny Lookbook a następnie włącz odpowiednie ustawienie w Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne:

Wskazówka

Wskazana funkcjonalność nie jest dostępna w nagłówku header-5, ponieważ tam nie występuje zakładka Lookbook w nagłówku

Dzięki niemu zyskasz rozbudowaną zakładkę z Lookbookiem w swoim sklepie internetowym, który będzie prezentował się następująco:

Jeśli chcesz, żeby Twoi Klienci mogli dodać wszystkie towary z Lookbooka do koszyka, to w zakładce Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne zezwól na dodawanie towarów do koszyka.

Wskazówka

Ikona koszyka pojawi się w Lookbooku jeśli wszystkie towary do niego dodane, będę proste i dostępne w sklepie. Towar prosty po dodaniu go w zakładce Wygląd sklepu/ Ustawienia/ Bannery/ Lookbook będzie miał parametr hasAttributes: false

Lookbook w Szablonie Szafir

Aby sekcja lookbook mogła być widoczna na głównej stronie Twojego e-Sklepu to musisz w pierwszej kolejności aktywować go w pasku nawigacji. W tym celu przejdź do zakładki Wygląd sklepu/ Ustawienia/ Strona główna i zaznacz sekcję lookbook.

Lista kilku lookbooków w szablonie Szafir

Jak wygląda lookbook w szablonie Szafir możesz zobaczyć w naszym sklepie demonstracyjnym

Lookbook w Szablonie Opal

Widok lookbooka w szablonie Opal charakteryzuje się rozmieszczeniem zdjęć w formie mozaiki. Na grafikach można precyzyjnie oznaczyć towary, które z poziomu lookbooka można dodać bezpośrednio do koszyka.

Jak wygląda lookbook w szablonie Opal możesz zobaczyć w naszym sklepie demonstracyjnym.

Lookbook w Szablonie Bursztyn

Widok lookbooka w szablonie Bursztyn charakteryzuje się prezentacją zdjęć jedno obok drugiego. Na bannerach można precyzyjnie oznaczyć towary i ilości, które z poziomu lookbooka można dodać bezpośrednio do koszyka.

Oznaczone towary w lookbooku - szablon Bursztyn

Tworzenie filtrów na liście kategorii w e-Sklepie

Spis treści

Wstęp

Comarch ERP XT

Comarch ERP Optima

Comarch ERP XL

Comarch ERP Altum

Wstęp

Dobrze skonfigurowane filtry w znacznym stopniu uproszczą i skrócą proces wyszukiwania poszczególnych produktów , co z pewnością przełoży się na pozytywny odbiór i częstsze zakupy w Twoim e-Sklepie. Dodanie nowego filtra odbywa się poprzez utworzenie nowego atrybutu w systemie ERP, a następnie odpowiednie przyporządkowanie go grupy towarowej.

Comarch ERP XT

Poniżej znajdziesz kroki, które w łatwy i szybki sposób pomogą Ci utworzyć nowe filtry kategorii w Twoim e-Sklepie.

Krok 1. Na początku musimy utworzyć Atrybuty, które mają być widoczne na Twojej liście filtrów. Logujemy się do panelu administracyjnego Twojego systemu Comarch ERP XT. Rozwijamy zakładkę Więcej funkcji i klikamy w Comarch e-Sklep. W nowym widoku wchodzimy w Atrybuty w Comarch e-Sklep,

a następnie w górnym prawym roku ikonę Dodaj.

Krok 2. W sekcji Nazwa uzupełnij nazwę atrybuty dla każdego języka osobno, a następnie wciśnij przycisk Zapisz zmiany.

Krok 3. Teraz musisz przyporządkować powstałe atrybuty do konkretnej grupy, żeby posłużyły Ci jako filtry kategorii na liście towarowej. W zakładce Więcej funkcji/ Comarch e-Sklep/ Grupy w Comarch w e-Sklep,

a następnie kliknij lewym przyciskiem myszki w grupę na, której mają się wyświetlać dodatkowe filtry.

Krok 4. W sekcji Atrybuty kliknij w pole nazwa atrybutu. Wyskoczy Ci lista wszystkich dodanych atrybutów. Wybierz tylko te, które chcesz mieć widoczne na swojej liście towarowej.

Krok 5. Kolejne zmiany będą dokonywane już na karcie towaru. Produkty będą widoczne w twoich filtrach dopiero po dodaniu ich w sekcji: Atrybuty zwykłe. Atrybuty muszą zostać wybrane takie same jak w kroku 4. W tym artykule znajdziesz więcej informacji odnośnie konfiguracji produktów z twoim e-Sklepie: Skonfiguruj swój pierwszy produkt i wyślij go do e-Sklepu

Przyklad

Jak dodamy atrybuty zgodnie z poniższym zdjęciem to produkt będzie widoczny we wszystkich trzech filtrach.

Widok z e-Sklepu po synchronizacji i wybraniu odpowiednich filtrów:

Krok 6. Po wykonaniu powyższych kroków wykonaj synchronizację danych i sprawdź, jak wyglądają nowe filtry w Twoim e-Sklepie.

Comarch ERP Optima

Jak utworzyć filtr?

Poniżej znajdziesz kroki, które w łatwy i szybki sposób pomogą Ci utworzyć nowe filtry kategorii w Twoim e-Sklepie.

Krok 1. Na początku musimy utworzyć Atrybuty, które mają być widoczne na Twojej liście filtrów. Z poziomu ERP Optima W zakładce Ogólne/ Atrybuty otwórz Listę atrybutów i ikoną plusa dodaj nowy atrybut.

Krok 2. W zakładce Ogólne uzupełnij formularz wpisując Kod i Nazwę atrybutu, wybierz format: Lista oraz udostępnij atrybut w e-Sklepie/e-Sale.

Krok 3. Uzupełnij zakładkę Pozycje listy podając wartości dla atrybutu, a następnie zapisz zmiany dyskietką :

Krok 4. Teraz musimy przyporządkować powstałe atrybuty do konkretnej grupy, żeby posłużyły nam jako filtry kategorii na liście towarowej W zakładce Ogólne/ Cennik otwórz Grupę towarową (klikając dwa razy w wybraną grupę).

Krok 5. W sekcji Atrybuty używając plusa dodaj nowy atrybut do grupy towarowej.

Krok 6. Dodaj atrybut wpisując jego nazwę lub wybierając atrybut z listy (klikając na parametr Atrybut). Po dodaniu atrybutu zapisz zmiany klikając w dyskietkę.

Wskazówka

Nie przypisuj wartości do atrybutu na grupie towarowej - wartość atrybutu jest pobierana z karty towarowej. W tym celu należy dodać ten sam atrybut z wartością na danym towarze.

Jak dodać atrybut do towaru?

Krok 1. Kolejne zmiany będą dokonywane już na karcie towaru. Na wybranym towarze przejdź na zakładkę Atrybuty, dodaj nowy atrybut i zapisz zmiany

Krok 2. Wybierz wartość dla wybranego atrybutu i zaznacz parametr "udostępnij w Comarch e-Sklep/e-Sale". Po wykonanych czynnościach zapisz zmiany

Krok 3. Wykonaj synchronizację do e-Sklepu z poziomu Comarch ERP Optima. Teraz możesz wejść do swojego e-Sklepu i zobaczyć swoje nowo dodane filtry.

Comarch ERP XL

Jak utworzyć filtr?

Krok 1. Na początku musimy utworzyć Atrybuty, które mają być widoczne na Twojej liście filtrów. Z poziomu ERP XL w sekcji Administrator, w zakładce Narzędzia/ Atrybuty otwórz Atrybuty i ikoną folderu z zielonym plusem dodaj nową klasę atrybutów.

Krok 2. W zakładce Ogólne uzupełnij formularz wpisując Nazwę atrybutu, wybierz Typ: Lista oraz udostępnij atrybut parametrem e-Sklep.

A, w zakładce Obiekty dodaj do obiektów klasy towarowe.

Krok 3. Uzupełnij formularz Definicje atrybutów podając wartości dla atrybutu, a następnie zapisz zmiany .

Krok 4. Teraz musimy przyporządkować powstałe atrybuty do konkretnej grupy towarowej, aby posłużyły nam jako filtry kategorii na liście towarów. W menu głównym ERP XL otwórz sekcję Sprzedaż, a następnie w zakładce Ogólne/ Towary otwórz Grupę towarową (klikając dwa razy w wybraną pozycję).

Krok 5. W formularzu Wzorca towaru (grupa Bakalie) w zakładce Atrybuty używając plusa dodaj nowy atrybut do grupy towarowej.

Krok 6. Dodaj klasę atrybutu wybierając go z listy i zatwierdź go zaznaczoną ikoną.

Wskazówka

Nie przypisuj wartości do atrybutu na grupie towarowej – wartość atrybutu jest pobierana z karty towarowej. W tym celu należy dodać ten sam atrybut z wartością na danym towarze.

Krok 7. Nie zapomnij w zakładce Aplikacje zaznaczyć parametr e-Sklep.

Jak dodać atrybut do towaru?

Krok 1. Kolejne zmiany będą dokonywane już na karcie towaru. Na wybranym towarze przejdź na zakładkę Atrybuty, dodaj nowy atrybut i zapisz zmiany.

Krok 2. Wybierz wartość dla wybranego atrybutu i zapisz zmiany.

Krok 3.Wykonaj synchronizację do e-Sklepu z poziomu Comarch ERP XL. Teraz możesz wejść do swojego e-Sklepu i zobaczyć swoje nowo dodane filtry.

Comarch ERP Altum

Jak utworzyć filtr?

Krok 1. Zaczynamy od utworzenia nowego atrybutu, który będzie widoczny na Twojej liście filtrów. Z poziomu ERP Altum w sekcji Konfiguracja, w zakładce Atrybuty i klikamy w plus, żeby dodać nową klasę atrybutu.

Krok 2. Wpisujemy Nazwę atrybutu, następnie wybieramy Typ: Lista oraz udostępniamy atrybut parametrem e-Sklep/Podgląd. Dodatkowo trzeba pamiętać, że parametr Aktywny musi być włączony.

Krok 3. Zdefiniujemy teraz nowe wartości dla atrybutu, który dodaliśmy. Należy zaznaczyć go na liście atrybutów, a następnie w sekcji Lista wartości atrybutu wybrać przycisk [Dodaj].

Krok 4. Przejdź teraz do zakładki Lista oddziałów i wybierz obiekt Grupa artykułów. Na dole pojawi Ci się nowo dodany atrybut. Kliknij w niego a następnie Powiąż i zapisz zmiany

Krok 5. Następnie przyporządkuj powstałe atrybuty do konkretnej grupy towarowej, aby posłużyły nam jako filtry kategorii na liście towarów. W menu głównym ERP Altum wybieramy sekcje Artykuły, a następnie wybieramy kategorie, do której mamy dodać wcześniej dodane atrybuty (klikając dwa razy w wybraną pozycję).

Krok 5. W oknie, które się otworzy, przejdź do zakładki Atrybuty i używając plusa dodaj nowy atrybut do grupy towarowej. Po dodaniu zapisujemy zmiany

Krok 6. Przechodzimy teraz do zakładki Oddziały i wykonujemy synchronizację. Jeśli chcemy, żeby nowe atrybuty były widoczne w e-Sklepie to musimy wybrać obiekt Artykuł.

Jak dodać atrybut do towaru?

Krok 1. Kolejne zmiany będą dokonywane już na karcie towaru. Na wybranym towarze przejdź na zakładkę Atrybuty, dodaj nowy atrybut, wybieramy właściwy z listy i klikamy wybierz.

Krok 2. Wybierz wartość dla wybranego atrybutu i zapisz zmiany.

Krok 3. Wykonujemy teraz synchronizację e-Sklepu z Comarch ERP Altum. Teraz możesz wejść do swojego e-Sklepu i zobaczyć swoje nowo dodane filtry.

Logotyp oraz favicon w Comarch e-Sklep

Logotyp e-Sklepu stanowi jeden z elementów identyfikacji wizualnej i jednocześnie jest jej najważniejszą częścią. Dzięki logo firma lub produkt są łatwiejsze do zidentyfikowania przez odbiorcę.

Logo i favicon. Jak je zmienić?

Jak wgrać własny logotyp w e-Sklepie?

Krok 1. W panelu administracyjnym przejdź do sekcji Ustawienia/Ustawienia sklepu/Dane sklepu/.

Krok 2. Wybierz plik i zapisz zmiany.

Uwaga

Maksymalny rozmiar obrazka wynosi 30 KB, wielkość to 200 x 200 px oraz musi być on w formacie *.PNG, *.JPG, *.JPEG, *.SVG.

Jak wgrać favicon?

Logo sklepu można również umieścić w ikonie strony internetowej, która prezentuje się w nagłówku przeglądarki,w wynikach wyszukiwania przy tytule strony, na pasku ulubionych zakładek tzw. favicon.

Krok 1. Przejdź do sekcji Wygląd sklepu/zakładka Nagłówek/Stopka. Krok 2. Wgraj własny favicon dla swojego e-Sklepu i zapisz zmiany.

Uwaga

Uwaga! Maksymalny rozmiar obrazka to 10 KB.

Jak automatycznie ustawić język sklepu w oparciu o język przeglądarki?

W tym artykule dowiesz się jak włączyć funkcję, aby po wejściu do sklepu ustawiał się język ustawiony przez Klienta w przeglądarce. Funkcja ta działa tylko dla sklepów wielojęzycznych.

Wskazówka

Sklep wielojęzyczny to taki, w którym oprócz języka domyślnego, aktywny jest przynajmniej jeden dodatkowy język w zakładce Ustawienia > Ustawienia sklepu > Dane sklepu > Języki

Odtworzenie języka z poprzedniej sesji będzie miało priorytet nad domyślnymi ustawieniami przeglądarki. Oznacza, to że język wybrany podczas ostatniej wizyty użytkownika zostanie zachowany przy kolejnej wizycie, niezależnie od domyślnych ustawień językowych przeglądarki. Funkcja dostępna dla najnowszej wersji szablonów z Kreatora wyglądu. Aby skorzystać z tej funkcji, przejdź w panelu administracyjnym do sekcji Wygląd Sklepu > Ustawienia > Ogólne

Jak edytować nagłówek w szablonie B2C?

Spis treści

Wstęp

Jak dodać logotyp i favicon?

Jak edytować odnośniki do mediów społecznościowych?

Jak dodać strony lub grupy stron?

Wstęp

dodawać, edytować, wyróżniać i usuwać strony lub grupy stron,
dodać, edytować lub usuwać odnośniki do mediów społecznościowych,
w jednym miejscu zmienić logotyp i favicon.

W tym miejscu masz możliwość:

ustawienia logotypu i faviconu,
ustalenia, które media społecznościowe powinny wyświetlać się w nagłówku,
dodania stron lub grupy stron,
przejścia do konfiguracji menu kategorii.

Jak dodać logotyp i favicon?

Aby dodać logotyp i favicon, wybierz przycisk „Wyślij plik”, a następnie wybierz plik z odpowiedniego miejsca na Twoim komputerze.

Wskazówka

Jak edytować odnośniki do mediów społecznościowych?

Wskazówka

Miniatury z odnośnikami do mediów społecznościowych są widoczne w drugim i trzecim typie nagłówka (header-2 oraz header-3) w szablonie Topaz.

Aby dodać nowy odnośnik do mediów społecznościowych wystarczy, że naciśniesz ikonę plusa.

Wskazówka

W nagłówku wyświetli się pięć pierwszych ikon mediów społecznościowych, które zostały dodane w panelu administracyjnym.

Jak dodać strony lub grupy stron?

Z poziomu obszaru Wygląd sklepu > Ustawienia > Nagłówek możesz dodać Stronę lub Grupę stron. Aby to zrobić, należy wybrać sekcję "Dodaj stronę lub grupę stron".

Po wybraniu tej opcji wyświetli się następujący popup:

Po wyborze opcji "Dodaj stronę ze sklepu" pokaże się popup z listą stron, które można wybrać i dodać do sekcji.

Możesz także dodać stronę zewnętrzną, uzupełniając pola na formularzu:

Przy dodanym odnośniku możesz zdecydować, czy chcesz go wyróżnić, otworzyć w nowej karcie, czy usunąć.

Wprowadzone zmiany należy zapisać i opublikować. Poniżej prezentujemy efekt wprowadzonych konfiguracji (dodanie mediów społecznościowych, grupy stron oraz wyróżnienia):

Jak zarządzać elementami na liście towarów z panelu administracyjnego?

Spis treści

Wstęp

Zarzadzanie elementami na liście towarów

Jakie obszary są możliwe do zmiany

Wstęp

Dzięki nowej funkcjonalności, użytkownicy Panelu Administracyjnego będą mogli edytować i aktualizować elementy listy towarów bez potrzeby korzystania z Kreatora Wyglądu. To rozwiązanie zaprojektowano z myślą o szablonie Topaz, współpracującego z każdą wersją Comarch e-Sklepu. Nowa funkcjonalność nie tylko zwiększy wygodę użytkowania, ale także przyczyni się do optymalizacji czasu pracy. W niniejszym artykule przybliżymy szczegóły tego rozwiązania.

Zarządzanie elementami na liście towarów

W wersji 2024.6.1 Comarch e-Sklepu dla szablonu Topaz dodano funkcjonalność zarządzania elementami na liście towarów wprost z Panelu Administracyjnego Comarch e-Sklepu. Aby to zrobić, należy w Panelu Administracyjnym przejść do obszaru Wygląd sklepu (1) > Ustawienia (2) następnie kliknij w kartę Zarządzanie elementami na liście towarów (3) znajdującą się nad kaflami motywów kolorystycznych szablonu:

Jakie obszary są możliwe do zmiany?

Domyślny sposób wyświetlania towarów na liście – możesz zdecydować w jaki sposób zaprezentowane będą towary w Twoim e-Sklepie, domyślny widok to Kafelki;
Wyświetlaj zdjęcia 360° na liście towarów – domyślna wrtość: Tak;
Układ zdjęć kategorii na stronie „Produkty” – możesz wybrać układ zdjęć na stronie „Produkty”, domyślny jest układ listy;
Elementy w panelu filtrów (Kategorie, Cena, Producent, Marka, Dostępność, Ocena, Zdjęcia, Atrybuty, Atrybuty czasowe) – możesz wskazać, które będą widoczne w panelu filtrów;
Udostępnij zdjęcia podkategorii – możesz zdecydować o udostępnianiu zdjęć do podkategorii, domyślna wartość:Tak;
Lista elementów na stronie z listą towarów – w tym obszarze istnieje możliwość zmiany kolejności wyświetlania poszczególnych elementów na stronie głównej sklepu oraz ukrycia wybranych. Zmiany kolejności dokonasz poprzez kliknięcie strzałek w kolumnie „Kolejność„. Aby ukryć element wystarczy, że odznaczysz checkbox w kolumnie Dostępne. Możesz także w szybki sposób przejść do edycji poszczególnych elementów, wybierając opcję „Przejdź do edycji…„, a także edytować etykietę tłumaczenia.

Bannery

Wskazówka

Spis treści

Edycja bannerów

Dodawanie bannerów

Import i eksport bannerów

Banner jest jednym z nośników treści reklamowych. Wystarczy, że przygotujesz obrazek, który przyciągnie wzrok klienta i dobrać do niego odpowiedni tekst promocyjny, a Twój sklep stanie się bardziej atrakcyjny dla klientów.

Edycja bannerów

Modyfikacja domyślnych bannerów dostępnych w szablonach Comarch dostępna jest w Panelu administracyjnym w obszarze Wygląd sklepu/ Ustawienia/ Bannery.

Wybierz banner, który chcesz edytować i kliknij w niego.

Przykładowa lista bannerów w szablonie Topaz

Wyświetlone zostanie okno, w którym możesz uzupełnić nazwę, opis oraz dodać lub zmienić zdjęcia. Edycja kolejności zdjęć w bannerze zarówno w widoku podstawowym i zaawansowanym jest możliwa przy użyciu metody "przeciągnij i upuść".

ban1

Aby móc uzupełnić więcej szczegółów dotyczących bannerów, rozwiń opcję Widok zaawansowany. Pojawi się wtedy panel, w którym można zmienić np. tekst na bannerze, nagłówek, czas jego wyświetlania, link do którego kieruje dany obrazek, a także tooltip i tekst alternatywny. Pole Tekst oraz Link pojawi się po dodaniu obrazka i rozwinięciu widoku zaawansowanego. Pamiętaj, aby zapisać zmiany ikoną dyskietki. Wszystkie zmiany w bannerach należy zatwierdzić opcją Publikuj dostępną w menu rozwijanym Więcej na liście bannerów.

Wskazówka

Rekomendowane rozmiary obrazków w bannerach dla szablonów Comarch:

szablon Szafir: Bannery – przy tworzeniu wyglądu szablonu Szafirz w Kreatorze wybieramy ułożenie bannerów spośród sześciu opcji: Wygląd Sklepu/Ustawienia/Bannery/kafelki homepage

- Banner 1: rekomendowana proporcja obrazków 3:1 (1500 px x 500 px). W celu zachowania dobrej jakości zdjęć na ekranach o wysokiej rozdzielczości ekranu, zalecamy dodawanie obrazków w jednakowej wielkości. Bannery umieszczone nad stopką powinny być tej samej skali, np. 100×100 i 200×200 lub 400×200 i 800×400 itd
- Banner 2: 1255px x780px, 2x 620px x 380px
- Banner 3: 2x 635px x 290px, 2x 840px x 290px
- Banner 4: 1270px x 580px, 2x 635px x 290px,
- Banner 5: 2x 735px x 390px,
- Banner 6: 3x 480px x 385px;

szablon Topaz: Bannery – przy tworzeniu wyglądu szablonu Topaz w Kreatorze wybieramy ułożenie bannerów spośród sześciu opcji: Wygląd Sklepu/Ustawienia/Bannery/kafelki homepage

- Banner 1: 1255px x 780px, 2x 620px x 380px,
- Banner 2: 1920px x 680px,
- Banner 3: 2x 635px x 290px, 2x 840px x 290px
- Banner 4: 1270px x 580px, 2x 635px x 290px,
- Banner 5: 2x 735px x 390px,
- Banner 6: 3x 480px x 385px;

Dodatkowo możliwa jest konfiguracja obrazków w obrębie różnych urządzeń - dodatkowa konfiguracja grafik dla ekranów tabletu i telefonu jest możliwa po kliknięciu w obrazek w ramach edycji konkretnego banneru.

Za pomocą ikony plusa jest możliwe dodanie dopasowanych zdjęć względem ekranów różnych urządzeń: W przypadku jeżeli nie ma dodanych wskazanych obrazków dla tabletu czy telefonu, na urządzeniach mobilnych wyświetla się obrazek dodany dla ekranów komputera.

Zalecane rozmiary dla wskazanych bannerów według tego ustawienia prezentują się następująco:

Banner	Ekran komputera	Ekran tabletu	Ekran telefonu
Banner 1	1255px x 780px, 2x 620px x 380px	840px x 520px, 2 x 420px x 255px	3x 770px x 475px
Banner 2	1920px x 680px	1280px x 455px	3x 770px x 275px
Banner 3	635px x 290px, 2x 840px x 290px	545px x 255px, 2x 720px x 255px	770px x 360px, 2x 770px x 275px
Banner 4	1270px x 580px, 2x 635px x 290px	845px x 385px, 2x 425px x 195px	3x 770px x 230px
Banner 5	2x 735px x 390px	2 x 630px x 365px	3x 375px x 200px
Banner 6	3x 480px x 385px	3x 415px x 330px	3x 770px x 615px

- Rekomendowany rozmiar banneru, który pokazuje się po rozwinięciu kategorii (menuBanner) wynosi
  - - - header1: 220×295 px,
        
        header2: 220×295 px
        
        header3: 1118 x 534 px

konfiguracji można dokonać z poziomu: Wygląd Sklepu/ Ustawienia /Bannery/ menuBanner,

- Rekomendowany rozmiar banneru, który pokazuje się na stronie Kontakt wynosi: 610px x 605px - Wygląd Sklepu/Ustawienia/Bannery/contactBanner,
- Rekomendowane rozmiary bannerów, które pokazują się na stronie Lookbook wynoszą: 2x 560px x 630px, 700px x 850px, 1260px x 540px, 630px x 950px - Wygląd Sklepu/Ustawienia/Bannery/lookbook,
- Rekomendowany rozmiar banneru, który pokazuje się na zakładce Promocje, po otworzeniu sekcji Profil klienta wynosi: 1920px x 680px - Wygląd Sklepu/Ustawienia/Bannery/ CustomerProfileBanner,
- Rekomendowany rozmiar zdjęć towaru wynosi: 660px x 630px;

szablon Bursztyn: 1920 px x 608 px
szablon Opal: banner główny: 1840 px x 578 px, mniejsze zdjęcia pod bannerem głównym: 904 px x 487 px
szablon Agat: rozmiar obrazka dowolny z zachowaniem proporcji 2:1 np. 1200 px x 600 px. W celu zachowania dobrej jakości zdjęcia na ekranach o wysokiej rozdzielczości ekranu, rekomendujemy zdjęcia o rozdzielczości nie mniejszej niż 1140 px x 570 px

Typy bannerów dla szablonów Topaz i Szafir (B2B)

W panelu administracyjnym dodany jest nowy banner o nazwie top, a jego treść brana jest z pola Tekst. Banner pojawia się jako wąski pasek na górze strony. Gdy dodasz adres strony, produktu, promocji lub innego przekierowania w polu Link, po kliknięciu na banner zostanie otworzona odpowiednia strona przypisana do tego banneru. Pamiętaj, aby wprowadzone zmiany zapisać oraz opublikować. W panelu administracyjnym w zakładce Wygląd sklepu/ Ustawienia/ Motyw kolorystyczny znajdują się trzy pola, w których możemy w łatwy sposób zmienić kolory naszego banneru. Pola nazywają się:

Kolor tła w bannerze 'Top’,
Kolor czcionki w bannerze 'Top’,
Kolor czcionki w bannerze 'Top’ po najechaniu.

Wskazówka

Top banner jest widoczny w e-Sklepie dopiero po dodaniu obrazka. Kolor oraz rodzaj pliku nie ma wpływu na kolor lub wygląd banneru.

Dodatkowo w szablonie Szafir został dodany kolejny banner wyświetlany na stronie głównej. Jeśli jest włączona opcja dostępu do sklepu dla zalogowanych kontrahentów to wówczas ukazuje się tylko ten banner. Jeżeli nie został on skonfigurowany, to wówczas widoczny jest domyślnie standardowy banner główny.

Dodawanie bannerów

Nowy banner możesz dodać z poziomu listy bannerów klikając w kafelek z ikoną plusa w widoku kafelkowym lub klikając w przycisk Dodaj w widoku listy. W pojawiającym się oknie uzupełnij nazwę oraz opis banneru, a także zdjęcia, które będą widoczne w sklepie.

Po dodaniu zdjęcia pojawi się możliwość włączenia widoku zaawansowanego, w którym możesz uzupełnić szczegółowe dane. Długość linku dodawanego do slajdu w bannerze może wynosić maksymalnie 500 znaków.

Wskazówka

Po uzupełnieniu komórki link, dla banneru w szablonie Topaz (w widoku zaawansowanym) – cały baner staje się „klikalny”, to znaczy, że w przypadku kliknięcia na baner zostanie wykonane przekierowanie do określonego wcześniej linku. W przypadku uzupełnienia komórki: link oraz tekst – na bannerze zostanie wyświetlony przycisk Sprawdź.

Banner, który ma się wyświetlać na stronie głównej powinien zostać nazwany homepage. Po uzupełnieniu wszystkich potrzebnych informacji, należy je zatwierdzić przyciskiem Dodaj. Tak przygotowany banner należy następnie zaimplementować w kodzie szablonu. Nowo dodane bannery nie zaimplementowane w kodzie szablonu nie będą widoczne w e-Sklepie, ponieważ w kodzie szablonu istnieją odniesienia do domyślnych bannerów takich jak np. homepage czy promotionalbanners.

Import i eksport bannerów

W e-Sklepie istnieje możliwość importu i eksportu bannerów bez sprawdzania limitu danych. Dzięki temu możesz przenosić ich dużą ilość bez nadmiernego obciążania szablonu.

Aby zaimportować szablon przejdź do panelu administracyjnego, a następnie do sekcji Wygląd sklepu/ Ustawienia/ Więcej (trzy kropki w prawym górnym rogu), po czym przejdź do Edytuj ustawienia zaawansowane/ Import z pliku XML.

Szablon zaimportujesz klikając przycisk Wybierz plik XML. Aby zmienić bannery zaznacz podmień istniejące bannery. Opcja ta zastępuje dotychczasowe bannery widniejące na stronie e-sklepu. Zmiany zatwierdzić opcją Publikuj, dostępną w menu rozwijanym Więcej. Zaimportowane bannery możesz zobaczyć w panelu administracyjnym, przechodząc do Wygląd sklepu/ Ustawienia/ Bannery.

Eksport bannerów dokonuje się w Panelu Administracyjnym w Wygląd sklepu/ Ustawienia/ Więcej (trzy kropki w prawym górnym rogu)/ Edytuj ustawienia zaawansowane/ Eksport do pliku XML. Tak należy kliknąć w Eksportuj bannery i zostanie pobrany plik XML.

Wskazówka

Dodatkowe informacje na temat wyświetlających się bannerów znajdują się w artykułach:

Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Spis treści

Wstęp

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jak zacząć?

Aktualizacja szablonu

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Pozostałe zmiany

Gdzie należy uzupełnić teksty alternatywne (alt)?

Zalecenia dla udostępnianych treści – ogranicz migające elementy

Dostosuj komunikację mailową – aktualizacja lub zmiana treści e-mail

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Wstęp

Wskazówka

Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami

W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz jeden ze standardowych szablonów Comarch, czyli: Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii.

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jako właściciel e-Sklepu lub Partner Comarch zadbaj, aby zadbać o dostosowanie swojej witryny do obowiązujących przepisów. Nowe wymogi to wspólna odpowiedzialność:

Comarch e-Sklep – zajmiemy się kwestiami technicznymi w przypadku Gotowych Szablonów Comarch, do których należą m.in. zmiany w kodzie,
Właściciel, administrator lub Partner sklepu – musisz zadbać o treści i elementy, które dodajesz samodzielnie. Chodzi tu głównie opis produktów, zdjęcia i grafiki czy identyfikację wizualną.

Jak zacząć?

Aktualizacja szablonu

Wskazówka

Jak zaktualizować szablon?

Wygenerowanie zupełnie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
Wybór i edycja jednego z gotowych układów i jego modyfikacja,
Import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Wskazówka

Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?

Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony:

Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".

Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu:

W panelu bocznym pojawi się dokładna informacja na temat koloru.

W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.

Gdzie dostosować kolory?

Kolory w szablonie możesz zmienić korzystając z Kreatora Wyglądu. Po imporcie szablonu, edycji lub stworzeniu nowego projektu, przejdź do zakładki "Style" i edytuj motyw kolorystyczny:

Następnie możesz zmieniać swobodnie kolor na wybranych elementach:

Zmian możesz dokonać także z poziomu panelu administracyjnego, przechodząc do zakładki Wygląd Sklepu > Ustawienia.

Pozostałe zmiany

Teksty alternatywne ("Alt", alty) w Comarch e-Sklep

Pomaga osobom korzystającym z czytników ekranu, które odczytują tekst alternatywny na głos,
Poprawia dostępność stron internetowych, czyniąc je bardziej przyjaznymi dla wszystkich użytkowników,
Wpływa na pozycjonowanie w wyszukiwarkach, ponieważ dobrze opisane obrazy są lepiej interpretowane przez algorytmy Google.

Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:

Przyklad

Poprawne :

Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.

Niepoprawne:

Sukienka.
Buty sportowe.
Fajna kanapa.
Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP

Korzystam z Comarch ERP Optima

Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego:

Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:

Korzystam z Comarch ERP XT

Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".

W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii

5. Dla zdjęć w Blogu

6. Dla zdjęć w plikach użytkownika w sekcji "Twoje pliki"

Wskazówka

Atrybut title - obowiązkowy czy nie?

Zalecenia dla udostępnianych treści - ogranicz migające elementy

1.Obrazki i bannery

2.Materiały audio i viedo

Audiodeskrypcja to dodatkowy opis dźwiękowy, który przedstawia istotne elementy wizualne nagrania osobom niewidzącym,
Transkrypcja to zapis tekstowy całej treści audio, umożliwiający odbiór treści osobom niesłyszącym, może to być w formie napisów dla audiodeskrypcji.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

1.Treści mailowe są domyślne, nie zostały sformatowane

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Struktura Stosuj nagłówki (<h1>, <h2> itd.) dla przejrzystości. Używaj krótkich akapitów i list punktowanych.
Tekst i formatowanie Zapewnij wysoki kontrast między tekstem a tłem. Wybieraj czytelne czcionki (sans-serif, min. 12-14 px). Nie używaj wyłącznie koloru do przekazywania informacji.
Obrazy i multimedia Dodawaj tekst alternatywny (alt text) do obrazów. Unikaj tekstu osadzonego w grafikach, jeśli można go przesłać jako tekst.
Linki i przyciski Stosuj opisowe teksty linków zamiast „Kliknij tutaj”. Upewnij się, że są łatwe do kliknięcia na ekranach dotykowych.
Język i czytelność Używaj prostego i zrozumiałego języka. Unikaj skrótów i branżowego żargonu, jeśli odbiorca może ich nie znać.
Testowanie Sprawdź wiadomość na różnych urządzeniach i czytnikach ekranu. Zweryfikuj zgodność ze standardami WCAG.

Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS

3.Załączniki (m.in. instrukcje, katalogi)

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Jak skonfigurować mapę strony (sitemap)?

Wstęp

Mapa strony (sitemap) to spis wszystkich zakładek i podstron dostępnych na stronie internetowej. Dobrze zaplanowana ułatwia nawigację i sprawia, że odwiedzający szybciej znajdują to, czego szukają. Czy warto dostosować mapę strony do swoich potrzeb? Tak! Powinna ona pasować do typu strony i jej użytkowników. Przykładem może być wyróżnienie kategorii produktów, a w przypadku bloga – tematycznych artykułów. Dzięki dobrze zorganizowanej mapie strony, Google może szybciej zrozumieć strukturę strony, co zwiększa jej szanse na lepszą pozycję w wynikach wyszukiwania. W Comarch e-Sklep możesz w prosty sposób stworzyć mapę strony, dopasowaną do potrzeb Twoich Klientów. Opcja ta dostępna jest w każdym z gotowych szablonów B2B oraz B2C: Rubin, Szafir, Topaz, One Page Shop i Dla Gastronomii. Domyślnie, odnośnik do mapy strony znajduje się w stopce.

Jak skonfigurować mapę strony?

Przejdź do panelu administracyjnego Comarch e-Sklep, a następnie do sekcji: Wygląd sklepu > Ustawienia. Wybierz zakładkę "Mapa strony". Przy pierwszym przejściu do obszaru, mapa strony będzie częściowo skonfigurowana.

Widok panelu administracyjnego — Widok konfiguracji mapy strony z poziomu panelu administracyjnego

Domyślnie w grupie "Strony". znajdują się wszystkie strony statyczne czyli te, które dostępne są w Twoim e-Sklepie. Nie są w nich uwzględnione np. kategorie produktów. Grupę tę możesz edytować. Najedź myszką na kafel, a następnie edytuj go:

Podczas edycji w panelu administracyjnym wyświetli się obszar, w którym możliwe jest dokonanie zmian. Możesz zdecydować, czy do grupy stron dodasz już istniejącą stronę ze sklepu, czy stronę zewnętrzną. Jeśli posiadasz w niej już strony, to możesz je również usunąć. Możesz również dodać własną Grupę stron. Aby to zrobić, należy wybrać sekcję „ Dodaj grupę stron " :

Na początku należy ustalić nazwę dla grupy stron:

Podczas edycji w panelu administracyjnym wyświetli się obszar, w którym możliwe jest dodanie strony zewnętrznej lub istniejącej strony ze sklepu.

Po określeniu, jakie strony powinny się wyświetlać, zmiany należy zapisać i opublikować.

Szablony dla zaawansowanych

Silnik szablonów graficznych

Liquid to nowy silnik szablonów graficznych, dostępny w Comarch e-Sklep, który pozwala swobodnie modyfikować interfejs sklepu internetowego. Wykorzystuje kombinacje instrukcji, obiektów, filtrów i akcji aby dynamicznie budować strukturę strony. Dzięki silnikowi Liquid można w dowolny sposób budować listę towarów, szczegóły produktu, proces zamówienia oraz wiele innych elementów dostępnych w Comarch e-Sklep. Poniżej przedstawione zostało kilka przykładów wykorzystania silnika Liquid. Wypisanie nazw produktów promocyjnych

{% for product in newproducts.Products -%}
{{ product.Name }} 
{% endfor -%}

Wyświetlenie obrazków zawartych w banerze

{% for slide in config.Banners['slider'].Images -%} 
<img title="{{slide.Title}}" src="{{slide.Url}}" alt="{{slide.Alt}}" /> 
{% endfor -%}

Prosty formularz logowania

<form method="POST" id="loginForm">
<input name="email" type="email" placeholder="Podaj email" required/>
<input name="password" type="password" placeholder="Podaj hasło" required/>
<input name="__csrf" type="hidden" value="{{ page.CSRF }}"/>
<input name="__action" type="hidden" value="Customer/Login"/>
<button type="submit">Zaloguj</button> 
</form>

Prosty formularz logowania z obsługą po stronie JavaScript

<form method="POST" id="loginForm">
<input name="email" type="email" placeholder="Podaj email" required/>
<input name="password" type="password" placeholder="Podaj hasło" required/>
<input name="__csrf" type="hidden" value="{{ page.CSRF }}" required/>
<button id="loginAction" type="submit">Zaloguj</button>
</form>

<script>
$('#loginAction').on('click', function(){ var data = $('#loginForm').serializeArray();
data.push({name: "__action", value: "Customer/Login"});
$.post(location.href, data).then(function(response)
{
if(response.action.Result) { console.log('udało się zalogować') } 
else { console.log('nie udało się zalogować');
} 
});
}); 
</script>

Wskazówka

W powyższym przykładzie wykorzystana została popularna biblioteka jQuery. Nie jest ona jednak konieczna by korzystać z silnika Liquid.

Składnia języka liquid

Spis treści

Składnia języka Liquid

Rodzaje znaczników
Operatory

Elementy silnika Liquid

Instrukcje sterujące
Obiekty
Filtry
Akcje

Składnia języka Liquid

Rodzaje znaczników

Składnia silnika Liquid zawiera dwa typy znaczników. Znacznik wypisujący dane oraz znacznik sterujący. Znacznik wypisujący dane stosowany jest do wypisywania wartości zmiennych lub wyrażeń, również z zastosowaniem filtrów.

{{customer.Email}}
{{customer.Email | Upcase}}

Filtry mogą przyjmować parametry, które podawane są wewnątrz znaczników wypisujących.

{{3 | Plus: 3}}
{{3 | Plus: 3 | Minus: 2}}

Drugi typ znacznika jest stosowany dla operacji sterujących, m.in. instrukcji warunkowych, pętli itp.

{% if customer.Authenticated -%}
Gratuluję! Masz tutaj dostęp
{% endif -%}
{% unless customer.Company %}
Nie jesteś firmą
{% endunless %}

Uwaga

UWAGA W powyższym przypadku można zauważyć zamknięcie znacznika na dwa różne sposoby: z myślnikiem lub bez. Zalecane jest zamknięcie znacznika z użyciem myślnika, ponieważ instrukcja nie doda wtedy znaku nowej linii do kodu HTML. Jest to szczególnie ważne przy pętlach zawierających dużą ilość iteracji.

Operatory

=	przypisanie
==	równy
>	większy
>=	większy lub równy
<	mniejszy
<=	mniejszy lub równy
and	koniunkcja
or	alternatywa
!=	różny
<>	różny
contains	zawiera ciąg

Wskazówka

Liquid nie posiada operatora negacji. Zamiast tego można skorzystać z instrukcji unless lub wyrażenia == false

Wskazówka

Liquid nie posiada operatorów arytmetycznych. Zamiast tego oferuje filtry: Plus, Minus, Times, DividedBy oraz Modulo.

Elementy silnika Liquid

Instrukcje sterujące

Instrukcje sterujące dodają do kodu HTML oraz CSS logikę charakterystyczną dla języków programowania. Wzbogacają statyczny kod strony o zmienne, instrukcje warunkowe, pętle oraz wstawki zewnętrznego fragmentu kodu.

Obiekty

Obiekty zawierają wszystkie dane sklepu internetowego. Można w nich znaleźć informacje dotyczące produktów, kategorii, konfiguracji sklepu oraz szablonu, a także dane klienta sklepu.

Wskazówka

Więcej na temat obiektów przeczytasz w artykule Dostępne obiekty.

Filtry

Filtry służą do formatowania danych oraz operacji arytmetycznych. Są używane w połączeniu z obiektami, aby zmienić sposób wyświetlania otrzymanych danych.

{{config.Now}}
{{config.Now | Date: "yyyy-MM-dd"}}
{{config.Now | Date: "HH:mm"}}

2016-12-20 13:15:30
2016-12-20
13:15

Wskazówka

Więcej na temat filtrów można przeczytać w artykule Dostępne filtry

Akcje

Interfejs komunikuje się ze sklepem za pomocą akcji. Akcje aktualizują informacje w bazie danych oraz dane sesyjne. Można je zaimplementować za pomocą formularzy lub z użyciem zapytań AJAX. Proste logowanie utworzone za pomocą formularza

<form id="loginForm" method="POST">
<input name="email" required="" type="email" placeholder="Podaj email" />
<input name="password" required="" type="password" placeholder="Podaj hasło" />
<input name="__csrf" type="hidden" value="{{ page.CSRF }}" />
<input name="__action" type="hidden" value="Customer/Login" />
<button type="submit">Zaloguj</button>
</form>

Proste logowanie napisane z użyciem zapytania AJAX

<form id="loginForm" method="POST">
<input name="email" type="email" placeholder="Podaj email" required/>
<input name="password" type="password" placeholder="Podaj hasło" required/>
<input name="__csrf" type="hidden" value="{{ page.CSRF }}"/>
<button id="loginAction" type="submit">Zaloguj</button>
</form>

__collection – nazwa obiektu, który ma zostać zwrócony z serwera
__template – ścieżka pliku html, którego kod chcemy pobrać
__include – wartość zmiennej, jeżeli chcemy wstrzyknąć zmienną w pobrany kod html. Dozwolony jedynie typ prosty

Żaden z parametrów nie jest obowiązkowy, o ile nie wymaga go wykonywana akcja. Nic nie stoi na przeszkodzie, żeby pobrać sam obiekt, lub zwrócić tylko kod html. W odpowiedzi otrzymamy obiekt o parametrach:

action – informacje o rezultacie akcji lub null, jeżeli żadna akcja nie była wykonywana
collection – zwracany obiekt lub null, jeżeli żaden obiekt nie został zwrócony
template – kod html lub null, jeżeli żaden plik nie był pobierany

Parametr action może zawierać m.in. informacje o powodzeniu akcji, ewentualnym przekierowaniu oraz o rezultacie walidacji po stronie serwera. Dla przykładu, można następująco zmodyfikować skrypt odpowiedzialny za obsługę logowania:

<script>
$('#loginAction').on('click', function(){
var data = $('#loginForm').serializeArray();
data.push({name: "__action", value: "Customer/Login"});
$.post(location.href, data).then(function(response){
var actionResponse = response.action;
console.log('Nazwa wykonanej akcji', actionResponse.Action);
console.log('Czy wykonało się poprawnie?', actionResponse.Result);
console.log('Rezultat walidacji serwerowej',
JSON.stringify(actionResponse.Validation));
});
});
</script>

Rezultat operacji w przypadku niepoprawnych danych wyglądać będzie następująco:

Nazwa wykonanej akcji Customer/Login
Czy wykonało się poprawnie? false
Rezultat walidacji serwerowej
[{
"Field":"email",
"Error":"E-mail: Format jest nieprawidłowy"
}]

Natomiast zapytanie z poprawnymi danymi zrwóci:

Nazwa wykonanej akcji Customer/Login
Czy wykonało się poprawnie? true
Rezultat walidacji serwerowej null

Za pomocą jednego zapytania można pobrać wiele obiektów, oddzielając je znakami |. Nie zaleca się stosowania spacji między znakami, ponieważ znajdą się one w nazwie obiektów, co może generować niespodziewane błędy.

$.get(location.href,
{__collection:'page.Language|customer.Currency'}).then(function(response){
var objs = response.collection;
console.log('Język', objs['page.Language']);
console.log('Waluta', objs['customer.Currency']);
});

Język pl
Waluta PLN

Wskazówka

Więcej o akcjach możesz przeczytać w artykule Dostępne akcje.

Pliki szablonu

Spis treści

Pliki szablonu

Struktura katalogów

Pliki użytkownika w sklepie

Plik __settings.liquid

Pliki szablonu

Pliki szablonu dostępne są w panelu administracyjnym lub poprzez narzędzie Comarch e-Sklep Liquid Sync. W panelu sklepu należy przejść do sekcji Wygląd sklepu/Ustawienia w menu więcej należy wybrać opcję Edytuj ustawienia zaawansowane w tej sekcji ponownie wybieramy menu więcej i wybieramy opcję Edytuj HTML. W szablonie wykorzystywane są pliki:

z arkuszami stylów
graficzne
skryptów
pozostałe pliki

Pliki szablonu grupowane są katalogach systemowych oraz katalogach użytkownika. Dopuszczalne rozszerzenia plików:

z arkuszami stylów: .css
graficzne: .gif, .jpg, .jpeg, .png, .ico
skryptów: .js
pozostałe pliki: .htm, .html, .liquid

Dopuszczalne znaki w nazwach plików:

liczby: 0-9
małe litery: a-z (bez znaków diaktrycznych)
znaki specjalne: łącznik, znak podkreślenia, kropka

W trakcie wgrywania pliku z dysku duże litery znajdujące się w nazwach plików (i katalogów) zostaną automatycznie zamienione na małe litery. Znaki specjalne inne niż wskazane zostaną zamienione na znak podkreślenia.

Pliki w szablonie muszą być poprawnie kodowane. Kodowanie UTF-8 bez BOM. Pliki nie mogą zawierać znaków kontrolnych.

Nazwy plików i katalogów zaczynających się od „__” (dwa znaki podkreślenia) są zastrzeżone dla Comarch. Katalogi i pliki z taką nazwą pełnią specjalne funkcje w szablonie lub narzędziach do zarządzania szablonem.

Struktura katalogów

Katalogi „systemowe” Struktura katalogów „systemowych” w szablonie Pliki szablonu: 1 - Struktura katalogów systemowych

W katalogu css należy dodać pliki z arkuszami stylów wykorzystywanych w szablonie. W katalogu css/img należy dodać pliki graficzne wykorzystywane w szablonie. W katalogu js należy dodać pliki skryptów wykorzystywane w szablonie. W katalogu ROOT należy dodać pozostałe pliki wykorzystywane w szablonie (strony, wstawki). Pliki szablonu: 2 - Katalog root

Pliki szablonu z arkuszami stylów, graficzne i skryptów muszą znajdować się we wskazanych powyżej katalogach. W przeciwnym wypadku nie będą poprawnie interpretowane przez przeglądarki internetowe.

Katalogi użytkownika Struktura katalogów użytkownika jest dowolna. Należy przestrzegać, by liczba poziomów zagnieżdżeń była ograniczona do niezbędnego minimum. Zbytnio rozbudowana struktura katalogów może nie być wspierana w narzędziu do synchronizacji szablonów. Dopuszczalne znaki w nazwach katalogów:

liczby: 0-9
małe litery: a-z (bez znaków diaktrycznych)
znaki specjalne: łącznik, znak podkreślenia

Pliki użytkownika w sklepie

W szablonie można korzystać z plików użytkownika (Katalog usr/*). Należy jednak mieć na uwadze, że pliki użytkownika:

nie będą importowane z pliku z szablonem stron
nie będą eksportowane do pliku z szablonem stron

W szablonie nie wolno korzystać z plików znajdujących się w katalogach:

Katalog App_Themes/
Katalog view/
Katalog scripts/
Katalog images/
Katalog t/
Katalog m/
Katalog fb/

Katalogi te zawierają elementy wyglądu dotychczasowych szablonów (bez technologii Liquid).

Plik __settings.liquid

Plik __settings.liquid wykorzystywany jest do budowy interfejsu graficznego do zmiany ustawień szablonu.Plik ten przygotowuje autor szablonu.

Wymagania dla nakładki na ustawienia:

Nazwa pliku to __settings.liquid
Plik implementuje funkcję __SaveLiquidSettings(). Funkcja ta zwraca obiekt js, z którego zostaną zapisane ustawienia. Właściwości tego obiektu mogą zawierać tylko typy proste i tablice. Nie mogą natomiast zawierać obiektów.

__SaveLiquidSettings() Funkcja zwraca obiekt js, z którego zostaną zapisane ustawienia dla szablonu. Funkcja wywoływana jest automatycznie przy zapisie ustawień w panelu administracyjnym. Zapis ustawień w panelu odbywa się poprzez naciśnięcie przycisku Zapisz

. Funkcja ma zwracać wszystkie ustawienia, zarówno te zmienione oraz te niezmienione przez użytkownika. Przykład zawartości pliku __settings.liquid


<style>
.settings {
    height: 100px;
    width: 300px;
    border: solid 1px #000000;
    padding: 8px;
    margin: 8px;
}
</style>
<div class="settings">
    color1:
    <input name="color1" type="color" value="{{settings.color1}}" />
    color2:
    <input name="color2" type="color" value="{{settings.color2}}" />
</div>
<script>
function __SaveLiquidSettings() {
    var o = {};
    //zebranie wszystkich ustawień i zbudowanie z nich obiektu.
    //przykładowa implementacja:
    $(".settings input").each(function (el, el2) { o[el2.name] = el2.value; });
    return o;
}
</script>

Liquid w wydrukach

Spis treści

Szablony wydruków

Wydruk zamówienia

Wydruk zwrotu i reklamacji

Przykład użycia

Szablony wydruków

Comarch e-Sklep umożliwia kontrahentom drukowanie złożonych zamówień lub reklamacji. Szablony wydruków można tworzyć w panelu administracyjnym. Szczegółowy opis obszaru wydruków w panelu e-Sklep można znaleźć w artykule Wydruki, natomiast poniżej omówiony zostanie sposób tworzenia własnych szablonów wydruków za pomocą technologii HTML, CSS, oraz składni Liquid. Wydruk powinien posiadać konstrukcję typowej strony HTML, czyli zawierać wszystkie wymagane znaczniki HTML. Styl css powinien być umieszczony w pliku wydruku, bez ładowania z zewnątrz. W wydrukach można korzystać również z instrukcji sterujących, filtrów, oraz wybranych obiektów silnika Liquid.

Wydruk zamówienia

W wydruku zamówienia dostępne są dwa obiekty:

order
config

Order jest odpowiednikiem obiektu lokalnego customerprofile.Order, czyli obiektu przechowującego zamówienie w profilu klienta. Dokładny opis obiektu znajduje się w artykule Obiekty lokalne. Obiekt config jest opisany w artykule Obiekty globalne. Obiekty dostarczają do wydruku dane zamówienia, zamawiającego oraz sklepu.

Wydruk reklamacji i zwrotu

W wydruku reklamacji i zwortu są dostępne trzy obiekty:

complaint
customer
config

Complaint jest odpowiednikiem obiektu lokalnego customerprofile.Complaint, który przechowuje zwrot lub reklamację w profilu klienta. Strukturę tego obiektu można zobaczyć w artykule Obiekty lokalne. Opis obiektów customer oraz config znajduje się w artykule Obiekty globalne. Obiekty zawierają dane reklamacji lub zwrotu, dane sklepu, oraz dane użytkownika składającego reklamację lub zwrot.

Przykład użycia

Poniżej przedstawiony został minimalistyczny przykład wydruku zamówienia.

<!DOCTYPE html>
<html>
<head>
<title>Zamówienie nr {{ order.Id }} - {{ config.ShortName }} - {{ config.Url }}</title>
</head>
<style>
html {
font-size:14px;
}
body {
font-family:Helvetica;
}
.print {
font-size:1.5rem;
color: #3F51B5;
cursor:pointer;
font-weight:700;
}
@media print {
.print {
display:none;
}
}
</style>
<body>
<h1>Zamówienie nr {{ order.Id }}</h1>
<p>{{ order.Date }}</p>

<h2>Sprzedawca</h2>
<p>{{ config.Shop.ShortName }}</p>
<p>{{ config.Shop.Name }}</p>

<h2>Nabywca:</h2>
<p>{{ order.Customer.DeliveryAddress.Name }} {{ order.Customer.DeliveryAddress.Name2 }}</p>

<h2>Dostawa i płatność</h2>
<p>
{{ order.Delivery.Name }} ({{ order.Delivery.TotalValue | ToPrice }} {{order.Currency}}),
{{ order.Payment.Name }} ({{ order.Payment.TotalValue | ToPrice }} {{order.Currency}}),
</p>    <h2>Produkty</h2>

{% for poduct in order.Products -%}
<p>
{{ poduct.NameNoHtml }} | {{ poduct.Quantity }} x {{ poduct.TotalPrice|ToPrice }}
{{order.Currency}} | {{ poduct.TotalValue|ToPrice }} {{order.Currency}}
</p>
{% endfor -%}

<h2>Razem</h2>
<p>{{order.OrderTotalValue | ToPrice}} {{order.Currency}}</p>
<span class="print" onclick="window.print();">
Drukuj
</span>
</body>
</html>
 

Strona wydruku zamówienia będzie wyglądać w następujący sposób: Strona z wydrukiem zamówienia

Podgląd wydruku w przeglądarce Chrome, który wyświetli się po klinięciu Drukuj, będzie wyglądał jak poniżej. Podgląd wydruku zamówienia

Obiekty globalne

Obiekty globalne dostępne są domyślnie na wszystkich stronach sklepu. Nie wymagają aktywacji.

Spis treści

Config

Usr

Customer

Currency

Translations

Settings

__action

__actionGET

Config

Obiekt udostępnia konfigurację sklepu. Nazwa zmiennej globalnej: config. Obiekt zawiera następujące właściwości:

config.Application	config.Footer
config.AuthenticatedOnly	config.GTM
config.B2B	config.GTMHead
config.Banners.Nazwa	config.Languages
config.CompanyOnly	config.Lookbook
config.Complaints.Nazwa	config.Messages.Nazwa
config.Contact	config.Now
config.Countries.Nazwa	config.Orders
config.Currencies	config.Pages
config.DecimalPlacesPrice	config.Products.Nazwa
config.DecimalSeparator	config.Registration.Nazwa
config.DecimalThousandsSeparators	config.Reviews.Nazwa
config.DefaultCountry	config.Shop.Nazwa
config.DefinedPages.NazwaStrony	config.Stock.Nazwa
config.ENTERPRISE	config.TOS.Nazwa
config.External	config.Tags.Nazwa

Page

Obiekt udostępnia informacje o aktualnej stronie. Nazwa zmiennej globalnej: page. Obiekt zawiera następujące właściwości:

page.BaseHref	page.LinkNext
page.Breadcrumbs	page.LinkPrev
page.CSRF	page.MetaDescription
page.CanonicalLink	page.MetaKeywords
page.Cookies	page.MetaTitle
page.CurrentGroupNodes	page.Objects
page.CurrentSiteNode.Nazwa	page.POST
page.FbDL	page.PageId
page.GET	page.PageKey
page.GtmDL	page.ParentSiteNode.Nazwa
page.GroupId	page.ProductId
page.GroupNodes	page.QueryString
page.HiddenPrices	page.TemplateInclude
page.IsHttp404	page.TemplateName
page.Language	page.Url
page.LanguageId	page.UrlRaw

Usr

Obiekt udostępnia informacje o zalogowanym użytkowniku. Nazwa zmiennej globalnej: usr. Obiekt zawiera następujące właściwości:

usr.Authenticated	usr.IsAdmin
usr.Email

Customer

Obiekt udostępnia informacje o kontrahencie w sklepie (jednorazowy lub zalogowany). Nazwa zmiennej globalnej: customer. Obiekt zawiera następujące właściwości:

customer.Address	customer.Employee
customer.Attributes	customer.HidePrices
customer.Authenticated	customer.Invoice
customer.Cart	customer.NewsletterSubscriber
customer.Carts	customer.PaymentDueDays
customer.Companies	customer.Points
customer.Company	customer.PriceId
customer.CompanyErpId	customer.ReviewAuthor
customer.CompanyId	customer.SSN
customer.ComparisonToolItems	customer.SubtotalPrices
customer.CreditLimit	customer.Supervisor
customer.Currency	customer.TIN
customer.CurrencyExt	customer.UserId
customer.CustomerDetailsEditable	customer.UserId32
customer.DeliveryAddress.Nazwa	customer.VATEU
customer.Email	customer.WishListCount

Currency

Obiekt udostępnia informacje o aktualnie wybranej walucie w sklepie (jest aliasem do właściwości customer.Currency). Nazwa zmiennej globalnej: currency.

Wskazówka

Obiekt ten nie posiada właściwości - zawsze zwraca on używaną walutę (string).

Translations

Obiekt udostępnia tłumaczenia fraz dostępne w sklepie. Nazwa zmiennej globalnej: translations.

Wskazówka

Każdy szablon zawiera standardowe tłumaczenia. Zawierają one Key(id) oraz wartość przypisaną danemu tłumaczeniu dla konkretnego języka.

Settings

Obiekt udostępnia ustawienia danego szablonu w sklepie. Nazwa zmiennej globalnej: settings. Użycie tego obiektu umożliwia dokonywanie pewnych zmian w sklepie bez ingerencji w kod (np. zmiana kolorów).

Wskazówka

Właściwości tego obiektu, można znaleźć w Panelu Administracyjnym w zakładce Ustawienia(JSON). Można je dodawać, edytować i usuwać bezpośrednio w tej zakładce, lub z poziomu graficznej nakładki, za którą odpowiada plik __settings.liquid.

__action

Obiekt udostępnia informacje związane z wykonaną akcją. Nazwa zmiennej globalnej: __action. Dla akcji wykonywanych w AJAX nazwa obiektu: action.

__actionGET

Obiekt udostępnia informacje związane z wykonaną akcją na podstawie parametrów przekazanych w linku. Link wysyłany jest mailem do użytkownika sklepu. Dotyczy akcji takich jak: aktywacja, deaktywacja newslettera, aktywacja konta, potwierdzenie zamówienia, itd. Nazwa zmiennej globalnej: __actionGET.

Opis używanych obiektów globalnych:

config.Application

Obiekt (Object) zawiera informacje o używanej aplikacji. Właściwości:

Name (string) - nazwa oprogramowania,
Website (string) - adres z dodatkowymi informacjami.

config.AuthenticatedOnly

Pole (bool) - tylko zalogowani mają dostęp do sklepu.

config.B2B

Pole (bool) - sklep w wersji B2B.

config.Banners.Nazwa

Tablica obiektów (Object[]) - pojedynczy obiekt zawiera informacje o bannerze. Właściwości:

Images (Object[]) - pojedynczy obiekt zawiera informacje na temat użytego obrazu, Właściwości:
- Alt (string),
- DateTill (string),
- File (string),
- Heading (string),
- Id (int),
- Link (string),
- TargetBlank (bool),
- Text (string),
- Title (string),
- Url (string).
Name (string) - nazwa banera,
TargetBlank (bool) - kliknięcie w baner z linkiem spowoduje otworzenie adresu w nowym oknie,
Type (string) - typ.

config.CompanyOnly

Pole (bool) - tylko firmy mają możliwość rejestracji.

config.Complaints.Nazwa

Obiekt (Object) zawiera informacje o ustawieniach związanych z reklamacjami. Właściwości:

AttachmentExtensions (string) - rozszerzenia załączonych plików,
AttachmentMaxSize (int) - maksymalny rozmiar pliku,
AttachmentEnabled (bool) - załączanie plików,
AttachmentMaxCount (int) - maksymalna ilość załączonych plików,
ComplaintsEnabled (bool) - składanie reklamacji,
DaysToReturn (int) - liczba dni na zwrot,
Defects (Object[]) - obiekt zawiera informacje na temat występującego defektu (np. wada konstrukcyjna), Właściwości:
- Id (int),
- Name (string).
Requests (Object[]) - pojedynczy obiekt zawiera informacje na temat żądań związanych z przedmiotem (np. naprawa); analogicznie do Defects,
Returns (Object[]) - pojedynczy obiekt zawiera informacje na temat zwrotu; analogicznie do Defects,
ReturnsEnabled (bool) - zwrot towaru.

config.Contact

Obiekt (Object) zawiera informacje kontaktowe. Właściwości:

AttachmentExtensions (string) - rozszerzenia załączonych plików,
AttachmentMaxSize (int) - maksymalny rozmiar pliku,
AttachmentsEnabled (bool) - załączanie plików,
AttachmentsMaxCount (int) - maksymalna ilość załączonych plików,
Contacts (Object[]) - pojedynczy obiekt zawiera informacje na temat działu;. Właściwości:
- Id (int),
- Name (string).

config.Countries.Nazwa

Tablica obiektów (Object[]) - pojedynczy obiekt zawiera informacje o ustawieniach danego kraju. Właściwości:

ISOCode (string) - kod kraju,
ISOCode3 (string) - kod kraju (3 znaki),
Name (string) - nazwa kraju,
RequiredFields (Object) - obiekt zawiera informacje odnośnie wymaganych pól,

City (bool),
Street (bool),
StreetNo (bool),
TIN (bool),
ZipCode (bool).

SSNRegex (string) - ustawienia Regex PESEL,
States (string[]) - spis województw,
TINRegex (string) - ustawienia Regex NIP,
ZipCodeFormat (string) - ustawienia kodu pocztowego,
ZipCodeRegex (string) - ustawienia Regex kodu pocztowego.

config.Currencies

Tablica obiektów (Object[]) - pojedynczy obiekt zawiera informacje o walutach. Właściwości:

BankAccount (Object) - obiekt zawiera informacje na temat konta bankowego,
- AccountNumber (string) - numer konta,
- Bank (string) - bank,
- SWIFT (string) - numer KRS lub CEIDG, organ rejestrujący
Code (string) - kod waluty (np. EUR),
Symbol (string).

config.DecimalPlacesPrice

Pole (int) - ilość miejsc po przecinku dotyczących cen.

config.DecimalSeparator

Pole (string) - separator liczb dziesiętnych.

config.DecimalThousandsSeparators

Pole (string) - separator tysięczny (np. 5 600zł zamiast 5600zł).

config.DefaultCountry

Pole (string) - ustawiony kraj domyślny.

config.DefinedPages.NazwaStrony

Obiekt (Object) zawiera informacje o zdefiniowanych stronach. W skład stron wchodzą:

About (Object),
AdvancedSearch (Object),
Blog (Object),
BlogDetails (Object),
Brands (Object),
Complaints (Object),
Contact (Object),
ContinueShopping (Object),
CustomerProfile (Object),
Home (Object),
Http404 (Object),
Login (Object),
LookBook (Object),
Loyalty (Object),
Manufacturers (Object),
Order (Object),
PasswordReminder (Object),
Payment (Object),
Privacy (Object),
ProductComparisonTool (Object),
ProductDetails (Object),
ProductList (Object),
Registration (Object),
Shipping (Object),
Terms (Object),
UponLogging (Object),
WithdrawalRight (Object),
nonexistentgroup (Object),
nonexistentproduct (Object).

Każda strona posiada właściwości:

Name (string),
Heading,
Id (string),
Url (string).

config.ENTERPRISE

Pole (bool) - sklep w wersji Enterprise.

config.External

Obiekt (Object) zawiera informacje o integracjach z zewnętrznymi usługami. Właściwości:

Edrone (Object) - obiekt zawiera informacje komunikacyjne z systemem Edrone, Właściwości:
- AppId (string).
Facebook (Object) - obiekt zawiera informacje komunikacyjne z systemem Facebook, Właściwości:
- AppID (string).
Google (Object) - obiekt zawiera informacje komunikacyjne z systemem Google, Właściwości:
- ClientID (string).
SalesManago.

config.Footer

Obiekt (Object) zawiera informacje o stopce. Właściwości:

JoinUs (string[]) - pojedynczy łańcuch znakowy to link do portalu społecznościowego ustawiany w Panelu Administracyjnym,
Sections (Object[]) - pojedynczy obiekt zawiera informacje na temat stopki. Właściwości:
- Heading (string) - nagłówek,
- Pages (Object[]) - pojedynczy obiekt zawiera informacje na temat odnośniku do stopki.
  - Heading - nagłówek,
  - Id (string) - id,
  - Name (string) - nazwa,
  - Url (string) - url.

config.GTM

Pole (string) - kod Google Tag Manager.

config.GTMHead

Pole (string) - kod Google Tag Manager umieszczany w sekcji 'head.

config.Languages

Obiekt (Object) zawiera informacje o ustawieniach wybranych języków. Właściwości:

Id (int) - id,
Language (string) - język,
Name (string) - nazwa.

config.Lookbook

Obiekt (Object) zawiera informacje o ustawieniach Lookbook. Właściwości:

Current,
List (Object[]). Właściwości:
- Images (Object[]) - pojedynczy obiekt zawiera informacje o obrazie,
  - Alt (string),
  - DateTill (string),
  - File (string),
  - Heading (string),
  - Id (int),
  - JSON (string),
  - Link (string),
  - TargetBlank (bool),
  - Text (string),
  - Title (string),
  - Url (string).
- Name (string),
- TargetBlank (bool),
- Text (string),
- Type (string),
- Url (string).

config.Messages.Nazwa

Tablica obiektów (Object[]) - pojedynczy obiekt zawiera informacje o wiadomości aplikacji. Może być wykorzystywany do wyświetlania treści, np. notyfikacja o wykorzystywaniu cookies. Właściwości:

Days (int) - liczba dni,
Id (string) - id,
Message (string) - treść,
Title (string) - tytuł,
Type (int) - typ,
Url (string) - adres Url.

config.Now

Pole (string) - obecny czas.

config.Orders

Obiekt (Object) zawiera informacje o atrybutach zamówienia. Właściwości:

AttachmentExtensions (string) - rozszerzenia załączonych plików,
AttachmentMaxSize (int) - maksymalny rozmiar pliku,
AttachmentEnabled (bool) - załączanie plików,
AttachmentMaxCount (int) - maksymalna ilość załączonych plików,
AttributesCart (Object) - obiekt zawiera informacje na temat atrybutów w zamówieniu, Właściwości:
- Header (Object[]) - pojedynczy obiekt zawiera informacje na temat atrybutu w nagłówku, Właściwości:
  - Editable (bool) - edytowalność,
  - Format - rodzaj atrybutu,
  - Id - id,
  - Name (string) - nazwa,
  - Required (bool) - czy wymagany,
  - Values - wartości dla atrybutu typu lista.
- Position (Object[]) - pojedynczy obiekt zawiera informacje na temat atrybutu na elemencie zamówienia; analogicznie do Header
AttributesEdit (Object) - obiekt zawiera informacje na temat atrybutów w profilu klienta na szczegółach zamówienia; analogicznie do AttributesCart

config.Pages

Obiekt (Objec) zawiera informacje o stronach użytych w sklepie. Właściwości:

Heading,
Id (string),
Name (string),
Url (string),

config.Products.Nazwa

Obiekt (Object) zawiera informacje o ustawieniach produktów. Właściwości:

ShowCode (bool) - wyświetlanie kodu produktu,
DecimalUnits (bool) - wyświetlanie wartości/liczb niecałkowitych.

config.Registration.Nazwa

Obiekt (Object) zawiera informacje o ustawieniach związanych z rejestracją. Właściwości:

AuthorizationRequired (bool) - wymagana autoryzacja,
Retail (Object) - obiekt zawiera informacje związane z rejestracją klienta prywatnego, Właściwości:
- AddressVisible (bool) - widoczny adres,
- AddressRequired (bool) - wymagany adres,
- PhoneVisible (bool) - widoczny telefon,
- PhoneRequired (bool) - wymagany telefon.
Company (Object) - obiekt zawiera informacje związane z rejestracją klienta firmowego; analogicznie do Retail,
ConfirmationRequired (bool) - wymagane potwierdzenie,
Disabled (bool) - rejestracja,
ValidateTin (bool) - walidacja przy rejestracji.

config.Reviews.Nazwa

Obiekt (Object) zawiera informacje o ustawieniach odnośnie recenzji/opinii o towarze. Właściwości:

AuthenticationRequired (bool) - wymagane zalogowanie,
Enabled (bool) - recenzje,
OnlyPurchasedProducts (bool) - napisanie opinii/ocenianie tylko w przypadku kiedy produkt został wcześniej zakupiony,
Reviews (Object[])- pojedynczy obiekt zawiera informacje o ustawieniu systemu oceny, Właściwości:
- Rate (int) - ocena od 1 do 5,
- Text (string) - opis słowny oceny.

config.Shop.Nazwa

Obiekt (Object) zawiera informacje o konfiguracji sklepu. Właściwości:

Address.Nazwa (Object) - obiekt zawiera informacje na temat konfiguracji danych adresowych sklepu, Właściwości:
- City (string),
- Country (string),
- Latitude (string),
- Longitude (string),
- State (string),
- Street (string),
- StreetNo (string),
- UnitNo (string),
- ZipCode (string).
Contact.Nazwa - obiekt zawiera informacje na temat kongifuracji danych kontaktowych sklepu, Właściwości:
- Email (string),
- Fax (string),
- GG (string),
- GSM (string),
- PhoneNo (string),
- PhoneNo2 (string),
- Skype (string),
Description (string) - opis sklepu,
ImageUrl (string) - nazwa użytego loga,
Name (string) - nazwa sklepu,
Registrant (string) - organ rejestrujący,
Regon (string) - numer Regon,
ShortName (string) - kod firmy,
TIN (string) - numer NIP,

config.Stock.Nazwa

Obiekt (Object) zawiera informacje o ustawieniach magazynowych. Właściwości:

Enabled (bool) - kontrola stanów magazynowych,
QuantityControl (bool) - kontrola ilości.

config.TOS.Nazwa

Obiekt (Object) zawiera informacje o zdefiniowanych treściach w Panelu Administracyjnym. Właściwości:

Consents (Object) - obiekt zawiera informacje na temat udzielonych zgód dla akcji, Właściwości:
- Newsletter (Object[]) - pojedynczy obiekt zawiera informacje na temat zgody (tablica dotyczy akceptacji polityki prywatności), Właściwości:
  - Channels (Object[]), Właściwości:
    - Id (int),
    - Key (string),
    - Name (string),
    - Type (int).
  - Contents,
  - Id (int),
  - PublishedDate (string),
  - Required (bool),
  - Statement (bool),
  - Text (string),
  - Type (string),
- Order (Object[]) - pojedynczy obiekt zawiera informacje na temat zgody (tablica dotyczy odstąpienia od umowy); analogicznie do Newsletter,
- Registration (Object[]) - pojedynczy obiekt zawiera informacje na temat zgody (tablica dotyczy otrzymywanie newslettera i akceptacji regulaminu); analogicznie do Newsletter,
- Inquiries (Object[]) - pojedynczy obiekt zawiera informacje na temat zgody (tablica dotyczy zapytań ofertowych); analogicznie do Newsletter.
FormalContents.Nazwa (Object) - obiekt zawiera informacje wyświetlane na stronach, np. informacje o prawie do odstąpienia od umowy, Właściwości:
- About (Object), Właściwości:
  - ContentHtml (string),
  - ContentPdfUrl,
  - Files,
  - Id (int),
  - Key (string),
  - Name (string),
  - PageId,
  - PublishedDate (string),
  - Type (int).
- Complaints (Object); analogicznie do About,
- Loyalty (Object), analogicznie do About,
- Payment (Object), analogicznie do About,
- Privacy (Object), analogicznie do About,
- Shipping (Object), analogicznie do About,
- Terms (Object), analogicznie do About,
- WithdrawalRight (Object) analogicznie do About.
Pages.

config.Tags.Nazwa

Obiekt (Object) zawiera informacje o konfiguracji tagów. Właściwości:

Blog (Object[]) - pojedynczy obiekt zawiera informacje na temat tagu bloga, Właściwości:
- Text - nazwa,
- Url - url do wszystkich postów z danym tagiem,
- Weight - waga
Search (Object[]) - pojedynczy obiekt zawiera informacje na temat tagu wyszukiwania.

config.TemplateId

Pole (int) - id szablonu.

config.UniqueId

Pole (string) - unikalne id.

config.Url

Pole (string) - adres url sklepu.

config.VATEU

Obiekt (Object) zawiera informacje o konfiguracji VATEU. Właściwości:

ISOCode (string),
Name (string),
Value (string).

config.Version

Pole (string) - wersja sklepu.

page.BaseHref

Pole (string) - podstawowy adres strony (bez obecnej podstrony - jedynie główny odnośnik do strony głównej).

page.Breadcrumbs

Tablica obiektow (Object[]) - pojedynczy obiekt zawiera informacje o breadcrumbs danej strony. Właściwości:

Heading - nagłówek,
Id (string) - numer id,
Name (string) - nazwa,
Url (string) - adres url,

page.CSRF

Pole (string) - wygenerowany token.

page.CanonicalLink

Pole (string) - pełny adres strony, na której znajduje się użytkownik.

page.Cookies

Obiekt (Object) zawiera informacje o cookies.

page.CurrentGroupNodes

Obiekt (Object) zawiera informacje o kategorii.

page.CurrentSiteNode.Nazwa

Obiekt (Object) zawiera informacje o przeglądanej stronie. Właściwości:

Heading,
Id (string),
Name (string),
Url (string),
Count (int) - występuje w szczegółach towaru,
HasChildren (bool) - występuje w szczegółach towaru,
ImageId (int) - występuje w szczegółach towaru,
Image (Object) - obiekt zawiera informacje na temat zdjęcia; występuje w szczegółach towaru. Właściwości:
- ExternalUrl (string),
- Id (int),
- Link (string).

page.FbDL

Pole (string).

page.GET

Obiekt (Object) zawiera informacje pobrane GETem.

page.GtmDL

Pole (string) - Google Tag Manager.

page.GroupId

Pole (int) - id grupy.

page.GroupNodes

Obiekt (Object) zawiera informacje o kategoriach dostępnych w sklepie. Właściwości:

Count (int),
HasChildren (bool),
Heading,
Id (string),
Image (Object) - obiekt zawiera informacje na temat zdjęcia, Właściwości:
- ExternalUrl (string),
- Id (int),
- Link (string).
ImageId (int),
Name (string),
Nodes (Object) - analogicznie do GroupNodes, lecz bez właściwości Nodes,
Url (string).

page.HiddenPrices

Pole (bool) - widoczna cena.

page.IsHttp404

Pole (bool) - zawiera informacje czy strona jest stroną błędu 404.

page.Language

Pole (string) - język strony.

page.LanguageId

Pole (int) - język strony.

page.LinkNext

Pole (string) - następna strona w historii przeglądarki.

page.LinkPrev

Pole (string) - poprzednia strona w historii przeglądarki.

page.MetaDescription

Pole (string) - meta-tagi użyte w tekście źródłowym strony.

page.MetaKeywords

Pole (string) - słowa kluczowe użyte na stronie.

page.MetaTitle

Pole (string) - tytuł strony.

page.Objects

Obiekt (Object) zawiera informacje o obiektach lokalnych dostępnych na stronie.

page.POST

Obiekt (Object) zawiera informacje o elementach wysłanych POSTem.

page.PageId

Pole (int) - id przeglądanej strony.

page.PageId

Pole (string).

page.ParentSiteNode.Nazwa

Obiekt (Object) zawiera informacje o stronie nadrzędnej do tej, którą obecnie przeglądamy. Właściwości:

Id (string) - numer id,
Name (string) - nazwa,
Heading - tytuł,
Url (string) - adres url.

page.ProductId

Pole (int) - id towaru (występuje na stronie ze szczegółami towaru).

page.QueryString

Pole (string) - zawartość GET z url (np. treść wpisana do wyszukiwarki).

page.TemplateInclude

Pole (string) - wartość wpisywana w PA dla konkretnej strony.

page.TemplateName

Pole (string) - nazwa pliku html.

page.Url

Pole (string) - adres url przeglądanej strony.

page.UrlRaw

Pole (string) - adres url przeglądanej strony wraz z dodatkowymi parametrami (takimi jak np. wyszukiwana fraza).

usr.Authenticated

Pole (bool) - zalogowany użytnownik.

usr.Email

Pole (string) - adres email użytkownika.

usr.IsAdmin

Pole (bool) - użytkownik z uprawnieniami administratora.

customer.Address

Obiekt (Object) zawiera informacje o adresie klienta. Właściwości:

City (string),
Country (string),
Email (string),
Name (string),
Name2 (string),
Name3 (string),
PhoneNo (string),
State (string),
StreetNo (string),
UnitNo (string),
ZipCode (string),

customer.Attributes

Obiekt (Object) zawiera informacje o atrybutach.

customer.Authenticated

Pole (bool) - zalogowany użytkownik.

customer.Cart

Obiekt (Object) zawiera informacje o przedmiotach w koszyku. Właściwości:

CartEmpty (bool) - pusty aktywny koszyk klienta,
Count (int) - liczba przedmiotów w koszyku,
Currency (string) - waluta,
CurrencyExt (Object), Właściwości:
- Code (string),
- Symbol (string).
Discount (float) - zniżka,
EditedOrderId (int) - id zamówienia aktualnie edytowanego (występuje kiedy koszyk ma produkty),
Email (string) - adres email,
Id (int) - id koszyka,
Inquiry (bool) - zapytanie ofertowe (występuje kiedy koszyk ma produkty),
Products (Object[]), Właściwości:
- AskForPrice (bool) - zapytanie odnośnie ceny,
- AskForPriceId,
- Code (string) - kod produktu,
- DecimalPlacesPrice (int),
- DecimalUnit (bool) - liczby całkowite dla jednostek,
- DefaultGroup (int) - domyślna grupa,
- Description (string),
- GIdNumber (int),
- Id (int) - id przedmiotu,
- Image (Object) - obiekt zawiera informacje na temat zdjęcia, Własciwości:
  - ExternalUrl (string),
  - Id (int),
  - Link (string).
- ImageId (int) - id obrazu,
- IsSetElement (bool) - przedmiot elementem zestawu,
- IsSetParent (bool) - przedmiot przedmiotem głównym,
- Link (string) - link produktu,
- NameNoHtml (string) - nazwa produktu (bez znaczników HTML),
- No (int) - numer przedmiotu w koszyku,
- Price (decimal) - cena,
- Quantity (int) - ilość,
- SaleUnit (string) - jednostka sprzedażowa (np. para),
- SubtotalPrice (decimal) - cena bez VAT,
- TotalPrice (decimal) - cena całkowita,
- Url (string) - url produktu.
Saved (int) - oszczędność,
SubtotalPrices (bool) - stawka VAT w cenie,
Value (decimal) - wartość,
ValueBeforeDiscount (decimal) - wartość przed obniżką,

customer.Carts

Tablica obiektów (Object[]) - pojedynczy obiekt zawiera informacje o elemencie w liście koszyków. Właściwości:

Count (int) - ilość przedmiotów w koszyku,
Current (bool) - aktywny,
EditedOrderId (int) - id edytowanego zamówienia,
Id (int) - id koszyka,
Inquiry (bool) - zapytanie ofertowe,
Name (string) - nazwa.

customer.Companies

Obiekt (Object) zawiera informacje o firmie. Właściwości:

Default (bool),
Id (int),
Name (string),
Name2 (string).

customer.Company

Pole (bool) - posiadacz konta firmowego.

customer.CompanyErpId

Pole (int) - id firmy klienta (w ERP).

customer.CompanyId

Pole (int) - id.

customer.ComparisonToolItems

Pole - przedmioty przechowywane w porównywarce towarów.

customer.CreditLimit

Obiekt (Object) zawiera informacje o limicie kredytowym. Właściwości:

Active (bool),
Flag (int),
Left (decimal),
OverdueActive (bool),
OverdueLeft (decimal),
OverdueUsed (decimal,
OverdueValue (int),
Status (int),
StatusText (string),
Used (decimal),
Value (int).

customer.Currency

Pole (string) - waluta klienta.

customer.CurrencyExt

Obiekt (Object). Właściwości:

Code (string),
Symbol (string).

customer.CustomerDetailsEditable

Pole (bool) - edytowalność danych klienta.

customer.DeliveryAddress.Nazwa

Obiekt (Object) zawiera informacje o adresie dostawy. Właściwości:

City (string),
Country (string),
Name (string),
Name2 (string),
Name3 (string),
PhoneNo (string),
State (string),
Street (string),
StreetNo (string),
UnitNo (string),
ZipCode (string).

customer.Email

Pole (string) - adres email klienta.

customer.Employee

Obiekt (Object) zawiera informacje o kliencie. Właściwości:

Email (string) - adres email,
LanguageId (int) - język,
Name (string) - nazwa,
Name2 (string) - dodatkowe pole nazwy,
Owner (bool),
PhoneNo (string) - numer telefonu.

customer.HidePrices

Pole (bool) - widoczność cen w sklepie.

customer.Invoice

Pole (bool) - otrzymanie faktury.

customer.NewsletterSubscriber

Pole (bool) - subskrybcja newslettera.

customer.PaymentDueDays

Pole (int) - termin płatności w dniach.

customer.Points

Pole (int) - punkty lojalnościowe klienta.

customer.PriceId

Pole (int) - id cennika (tylko w wersji Enterprise).

customer.ReviewAuthor

Pole (string) - nick wybrany przez klienta.

customer.SSN

Pole (string) - numer PESEL klienta.

customer.SubtotalPrices

Pole (bool) - cena z VAT.

customer.Supervisor

Obiekt (Object). Właściwości:

Email (string),
FirstName (string),
ImageUrl (string),
LastName (string),
PhoneNo (string).

customer.TIN

Pole (string) - numer NIP klienta.

customer.UserId

Pole (string) - id klienta.

customer.UserId32

Pole (string) - id klienta (z 64 znakami).

customer.VATEU

Pole (string) - numer VATEU.

customer.WishListCount

Pole (int) - liczba przedmiotów na liście życzeń/przechowalni użytkownika.

Panel Administracyjny - obiekty dostępne w wiadomościach E-mail

Niniejszy artykuł przedstawia wykaz obiektów, które użytkownik ma do dyspozycji w wiadomościach e-mail. Obiekty te pozwalają na wysyłanie w wiadomościach e-mail do Klientów sprecyzowanych informacji dotyczących m.in. ich zamówienia. W artykule tym znajdzie się szczegółowy opis każdego obiektu oraz jego właściwości, a także informacja, które obiekty są obsługiwane w konkretnych typach maili.

Wskazówka

Lista wiadomości e-mail wraz z obsługiwanymi obiektami znajduje się na końcu artykułu.

Wskazówka

Niniejszy artykuł tworzony był w oparciu o sklep w wersji 2021. Starsze wersje sklepu mogą nie obsługiwać niektórych typów wiadomości lub niektórych obiektów!

Spis obiektów

config

order

customer

complaint

product

cart

inquiry

coupon

discount

loyalty

subject

message

userFields

friend

subscriber

Spis maili oraz obiektów w nich używanych

config

Obiekt config jest podstawowym obiektem w wiadomościach e-mail. Zawiera informacje o ustawieniach sklepu, jego danych kontaktowych, ustawieniach itp. Dostępne właściwości:

TOS - informacje o zgodach, regulaminach, zawiera:
- FormalContents - treści formalne, zawiera:
  - - Terms - regulamin sklepu, zawiera:
      - Id - numer id,
      - Type - typ,
      - Key - klucz,
      - Name - nazwa,
      - ContentHtml - treść w HTML,
      - ContentPdfUrl - adres URL do załączników w formacie PDF,
      - PublishedDate - data publikacji,
      - PageId - numer id podstrony,
      - Files - załączniki, zawiera:
        
        Name - nazwa,
        
        Url - adres URL załącznika,
  Wskazówka
  Pozostałe właściwości pola TOS zawierają te same pola, co powyższe pole config.TOS.FormalContents.
  - - Privacy - polityka prywatności,
    - WithdrawalRight - prawo do odstąpienia od umowy,
    - About - informacje o sklepie,
    - Shipping - wysyłka,
    - Payment - płatność,
    - Complaints - reklamacje i zwroty,
    - Loyalty - program lojalnościowy,
  Wskazówka
  Oprócz powyższych, znajdują się tutaj także informacje dodane w Panelu Administracyjnym w polu Ustawienia -> Treści -> Regulamin i inne -> Użytkownika. Zawierają te same pola co powyższe.
DecimalSeparator - separator liczb dziesiętnych,
DecimalPlacesPrice - ilość cyfr po przecinku,
DecimalThousandsSeparator - separator "tysięcy" - w jaki sposób oddzielane są kolejne 3 cyfry przed przecinkiem,
B2B - czy sklep jest w wersji B2B,
ENTERPRISE - czy sklep jest w wersji Enterprise,
UniqueId - unikalny numer id,
Url - adres URL sklepu,
Version - aktualna wersja sklepu,
CompanyOnly - jeśli true to zamówienie można złożyć tylko jako firma,
AuthenticatedOnly - czy sklep dostępny jest tylko dla zalogowanych użytkowników,
DefaultCountry - kraj domyślny,
Countries - lista krajów, zawiera:
- ISOCode - kod ISO,
- ISOCode3 - kod ISO,
- Name - nazwa kraju,
- ZipCodeRegex - wzorzec do kodów pocztowych danego kraju,
- ZipCodeFormat - format kodu pocztowego danego kraju,
- SSNRegex - wzorzec do numeru PESEL,
- TINRegex - wzorzec do NIPu,
- States - zawiera listę województw,
- RequiredFields - zawiera pola wymagane wraz z wartościami true (wymagane) lub false (nie jest wymagane):
  - City - miasto,
  - Street - ulica,
  - StreetNo - numer domu,
  - TIN - numer NIP,
  - ZipCode - kod pocztowy,
Languages - tablica z językami. Każde pole tablicy zawiera:
- Language - kod języka,
- Name - nazwa języka,
- Id - id języka,
Products - zawiera ustawienia produktów wraz z wartościami true (włączone) lub false (wyłączone):
- ShowCode - pokazywanie kodów,
- DecimalUnits - jednostki dziesiętne,
Reviews - opinie, zawiera:
- Enabled - czy włączone,
- AuthenticationRequired - czy do utworzenia opinii wymagane jest bycie zalogowanym,
- OnlyPurchasedProducts - czy opinie można wystawić tylko zakupionym produktom,
- Reviews - skala ocen - każdy element tablicy zawiera następujące pola:
  - Rate - ocena (cyfra),
  - Text - ocena (tekst),
Registration - informacje dotyczące rejestracji, zawiera:
- Retail - zawiera:
  - AddressVisible - czy adres jest widoczny,
  - AddressRequired - czy adres jest wymagany,
  - PhoneVisible - czy numer telefonu jest widoczny,
  - PhoneRequired - czy numer telefonu jest wymagany,
- Company - konto firmowe, zawiera:
  - AddressVisible - czy adres jest widoczny,
  - AddressRequired - czy adres jest wymagany,
  - PhoneVisible - czy numer telefonu jest widoczny,
  - PhoneRequired - czy numer telefonu jest wymagany,
- AuthorizationRequired - czy autoryzacja jest wymagana,
- ConfirmationRequired - czy potwierdzenie jest wymagane,
- Disabled - czy konto jest nieaktywne,
- ValidateTin - czy numer NIP jest zatwierdzony,
VATEU - tablica prefixów, każdy element zawiera:
- Name - nazwa (np. "PL - Polska"),
- Value - wartość (np. "PL)",
- ISOCode - kod ISO (np. "PL"),
DefinedPages - zawiera listę zdefiniowanych stron:
- Home - strona główna,
- Terms - regulamin,
- Privacy - polityka prywatności,
- Registration - rejestracja,
- Contact - kontakt,
- ProductList - lista produktów
- ProductDetails - szczegóły produktu,
- ProductComparisonTool - porównywarka towarów,
- Order - zamówienie,
- ContinueShopping - kontynuuj zakupy,
- AdvancedSearch - wyszukiwanie zaawansowane,
- CustomerProfile - profil klienta,
- nonexistentgroup - nieistniejąca grupa towarów,
- nonexistentproduct - nieistniejący produkt,
- Login - logowanie,
- Shipping - wysyłka,
- PasswordReminder - przypomnienie hasła,
- UponLogging - strona otwierana po zalogowaniu się,
- Http404 - strona nieistniejąca (błąd 404),
- Payment - płatności,
- About - o firmie,
- WithdrawalRight - prawo do odstąpienia umowy,
- Blog - blog,
- BlogDetails - wpis na blogu,
- Complaints - reklamacje,
- Loyalty - program lojalnościowy,
- Manufacturers - producenci,
- Brands - marki,
Każda ze zdefiniowanych stron zawiera następujące właściwości:
- Id - numer id,
- Name - nazwa
- Heading - nagłówek,
- Url - adres URL podstrony,
Pages - zawiera listę stron, każda ze stron zawiera następujące pola:
- Id - numer id,
- Name - nazwa,
- Heading - nagłówek,
- Url - adres URL podstrony,
Footer - stopka, zawiera:
- JoinUs - "Dołącz do nas" (media społecznościowe) - obrazek i link,
- Sections - sekcje, zawiera listę sekcji. Każda sekcja zawiera:
  - Heading - nagłówek,
  - Pages - lista stron, każda strona zawiera:
    - Id - numer id,
    - Name - nazwa,
    - Heading - nagłówek,
    - Url - adres URL,
Currencies - waluty. Lista, której każdy element zawiera:
- BankAccount - konto bankowe, zawiera:
  - AccountNumber - numer konta,
  - Bank - nazwa banku,
  - SWIFT - kod SWIFT,
- Code - kod waluty,
Stock - stany magazynowe, zawiera:
- Enabled - czy włączona obsługa stanów magazynowych,
- QuantityControl - czy włączona kontrola stanów magazynowych,
Tags - tagi, zawiera listę tagów dla wyszukiwarki i bloga,
Messages - wiadomości (komunikaty). Lista, której każdy element zawiera:
- Title - tytuł,
- Message - treść komunikatu,
- Url - adres URL do podstrony,
- Days - ilość dni, po których komunikat pokazuje się ponownie,
- Id - numer id,
- Type - typ, numer określa, czy komunikat pokazuje się w nagłówku, stopce, czy pop-upie,
GTM - Google Tag Manager,
GTMHead,
Complaints - reklamacje, zawiera:
- Returns - zwroty, każdy element listy zawiera:
  - Id - numer id,
  - Name - nazwa,
- Defects - defekty, każdy element listy zawiera:
  - Id - numer id,
  - Name - nazwa,
- Requests - rozwiązania, każdy element listy zawiera:
  - Id - numer id,
  - Name - nazwa,
- DaysToReturn - ilość dni na zwrot zakupów,
- ReturnsEnabled - czy zwroty są możliwe,
- ComplaintsEnabled - czy reklamacje są możliwe,
- AttachmentsEnabled - czy można dodać załączniki do reklamacji,
- AttachmentsMaxCount - maksymalna liczba załączników,
- AttachmentExtensions - lista zawierająca dozwolone formaty plików - załączników,
- AttachmentMaxSize - maksymalny rozmiar załącznika,
External - logowanie z zewnątrz, zawiera:
- Facebook,
- Google,
- Edrone, zawiera pole AppId,
- SalesMango,
Contact - zawiera pole Contacts
Now - aktualna data,
Shop - informacje o sklepie, zawiera:
- Contact - dane kontaktowe, zawiera:
  - PhoneNo - numer telefonu,
  - PhoneNo2 - drugi numer telefonu,
  - GSM - numer telefonu komórkowego,
  - Fax - fax,
  - Skype - nazwa na Skype,
  - GG - nazwa na Gadu-Gadu,
  - Email - adres e-mail,
- Address - dane adresowe, zawiera:
  - Street - ulica,
  - StreetNo - numer domu,
  - UnitNo - numer lokalu,
  - ZipCode - kod pocztowy,
  - City - miasto,
  - State - województwo,
  - Country - kraj,
  - Latitude - szerokość geograficzna,
  - Longitude - długość geograficzna,
- Name - nazwa sklepu,
- ShortName - skrócona nazwa sklepu,
- TIN - numer NIP,
- Regon - numer identyfikacyjny REGON,
- Registrant - informacja o działalności gospodarczej,
- Description - informacje dodatkowe,
- ImageUrl - adres URL do obrazka z logo sklepu,
- Application - informacje o aplikacji, zawiera:
  - Name - nazwa aplikacji,
  - Website - stronę aplikacji,
Orders - ustawienia dotyczące zamówień, zawiera:
- AttributesCart - zawiera:
  - Header,
  - Position,
- AttributesEdit - zawiera:
  - Header,
  - Position,
- AttachmentsEnabled - czy załączniki są dozwolone,
- AttachmentsMaxCount - maksymalna liczba załączników,
- AttachmentExtensions - lista dozwolonych rozszerzeń plików,
- AttachmentMaxSize - maksymalny rozmiar załącznika,

Obiekt używany w następujących mailach:

Szablon,
Złożenie zamówienia,
Zamówienie potwierdzone przez Klienta,
Zmiana statusu zamówienia,
Zamówienie zrealizowane,
Zamówienie anulowane,
Zamówienie zapłacone płatność online lub ratalna,
Dodanie listu przewozowego,
Dodanie faktury,
Informacja o zamówieniu do punktu odbioru osobistego,
Potwierdzenie złożenia reklamacji,
Zmiana statusu reklamacji,
Zamówienie z ERP,
Rozpoczęcie edycji,
Zatwierdzenie zamówienia,
Przypomnienie o zakupach,
Przypomnienie o dokończeniu płatności online,
Przypomnienie o wystawieniu opinii za zakupiony towar,
Podział zamówienia,
Zamówienie wysłane,
Pierwsze przypomnienie o dokończeniu zamówienia,
Drugie przypomnienie o dokończeniu zamówienia,
Zapytanie o koszt dostawy zamówienie bez kosztów dostawy,
Ustalenie kosztów dostawy,
Złożenie zapytania cenowego,
Powiadomienie o ofercie,
Powiadomienie o dostępności towaru,
Kupon rabatowy,
Rabat dla stałego Klienta,
Kupon rabatowy na darmową dostawę,
Założenie konta przez Klienta,
Założenie konta przez sklep,
Konto potwierdzone,
Stan konta aktywne, zablokowane,
Zmiana adresu e-mail,
Program lojalnościowy,
Przypomnienie hasła,
Reset hasła przez sklep,
Zapis do newslettera,
Zapis do newslettera przez sklep,
Wypisanie z newslettera przez sklep,
Zapytanie ze strony kontakt,
Zapytanie o towar,
Powiadom znajomego o towarze,

order

Obiekt order zawiera wszystkie informacje na temat zamówienia. Dostępne właściwości:

Document - typ dokumentu dodanego do zamówienia (paragon lub faktura),
DocumentText - nazwa dokumentu dodanego do zamówienia,
OrderTotalValueInWords - wartość zamówienia wypisana jako tekst,
ProductsTotalValueBeforeDiscount - wartość zamówienia bez zniżek,
WeightUnit - jednostka masy,
PreOrder - czy przedsprzedaż,
ConfirmationTime - czas na zatwierdzenie zamówienia,
ConfirmationDueDate - termin potwierdzenia zamówienia,
ConfirmationUrl - link do potwierdzenia zamówienia,
ThirdPartyConsent - zgoda na przekazywanie danych osobom trzecim,
Attachments - załączniki,
CanCancel - czy zamówienie może zostać anulowane,
CanAccept - czy zamówienie może zostać zaakceptowane,
CanRestorePayment - czy płatność może zostać kontynuowana,
CanCopy - czy zamówienie może zostać skopiowane,
CanEdit - czy zamówienie może zostać edytowane,
EditingAllowed - czy edycja zamówienia jest dozwolona,
IsEdited - czy zamówienie było edytowane,
RecalculationRequired - czy zamówienie można przeliczyć,
ReportUrl - link do "raportu" z zamówienia,
RelatedOffers - oferty powiązane z zamówieniem,
SubtotalPrices - czy są ceny netto,
ProductsSubtotalValue - wartość netto zamówienia,
ProductsTotalValue - wartość brutto zamówienia
Attributes - atrybuty,
RelatedOrders - powiązane zamówienia,
Id - numer id zamówienia,
Hash - unikalny numer oznaczający zamówienie,
Date - data złożenia zamówienia,
ERPOrderNumber - numer zamówienia z systemu ERP,
Status - status zamówienia (jako liczba),
StatusText - status zamówienia (jako tekst),
Currency - waluta,
LanguageId - numer id języka,
NotDeterminedDeliveryCost - czy nieustalony koszt dostawy,
Note - wiadomość dla sprzedawcy,
Discount - zniżka,
ProductsValue - wartość produktów,
ProductsValueBeforeDiscount - wartość produktów przed rabatem,
ProductsVatValue - wartość VAT w zamówieniu,
OrderTotalValue - wartość zamówienia brutto,
Weight - waga,
Customer - informacje o kupującym, zawiera:
- VATEU - prefix,
- RegisteredUser - czy użytkownik był zalogowany składając zamówienie,
- Email - adres e-mail,
- SSN - numer ubezpieczenia społecznego,
- TIN - numer NIP,
- Invoice - czy użytkownik poprosił o otrzymanie faktury,
- Company - czy konto firmowe,
- DeliveryAddress - adres dostawy, zawiera:
  - Name - dane kupującego,
  - Name2 - dane kupującego,
  - Name3 - dane kupującego,
  - Street - ulica,
  - StreetNo - numer domu,
  - UnitNo - numer lokalu,
  - ZipCode - kod pocztowy,
  - City - miasto,
  - State - województwo,
  - Country - kraj,
  - PhoneNo - numer telefonu,
- InvoiceAddress - adres na fakturze, zawiera:
  - Email - adres e-mail,
  - Name - dane kupującego,
  - Name2 - dane kupującego,
  - Name3 - dane kupującego,
  - Street - ulica,
  - StreetNo - numer domu,
  - UnitNo - numer lokalu,
  - ZipCode - kod pocztowy,
  - City - miasto,
  - State - województwo,
  - Country - kraj,
  - PhoneNo - numer telefonu,
- Buyer - trzecie dane klienta,
- Employee - zwraca informacje na temat pracownika, zawiera:
  - Email - adres e-mail,
  - Name - dane pracownika,
  - Name2 - drugie dane pracownika,
  - PhoneNo - numer telefonu,
  - LanguageId - numer id języka,
Payment - płatność, zawiera:
- SubtotalValue - wartość netto,
- MethodId - numer id metody płatności,
- MethodIdText - metoda płatności (tekst),
- MethodType - metoda płatności (typ),
- Status - status płatności (numer),
- StatusText - status płatności (tekst),
- Name - nazwa metody płatnosci,
- Description - dodatkowy opis metody płatności,
- DueDateText - termin płatności (tekst),
- TotalValue - wartość brutto,
- OnlineNumber - Id transakcji z platności online,
Delivery - dostawa, zawiera:
- SubtotalValue - wartość netto,
- MethodId - numer id sposobu dostawy,
- Name - nazwa sposobu dostawy,
- Description - dodatkowy opis sposobu płatności,
- DateText - termin dostawy (słownie),
- Status - status dostawy,
- StatusText - status dostawy (tekst),
- Waybill - list przewozowy,
- Waybills - listy przewozowe, zawiera:
  - Name - kurier,
  - Number - numer listu przewozowego,
  - Url - link do śledzenia paczki,
- TotalValue - wartość brutto,
- CollectionPointAddress - dane punktu odbioru,
- CollectionPointId - identyfikator punktu odbioru,
- CollectionPointTypeId - identyfikator typu punktu odbioru,
- CollectionPoint - punkt odbioru,
- PackageCount - ilość paczek,
Products - informacje o produktach w zamówieniu. Każdy element zawiera:
- StatusText - status dostępności,
- UnitPriceRatio - przelicznik ceny za jednostkę miary,
- UnitPriceUnit - możliwa jednostka przeliczniowa (np. litry na mililitry, gramy na kilogramy itd.),
- CanReturn - czy produkt może być zwrócony,
- CanComplain - czy produkt może być zareklamowany,
- IsModified - czy modyfikowany,
- IsDeleted - czy skasowany,
- IsEdited - czy edytowany,
- SubtotalPrice - cena netto,
- TotalPrice - cena brutto,
- SubtotalValue - wartość netto,
- TotalValue - wartość brutto,
- Attributes - lista atrybutów,
- No - numer,
- Code - kod towaru,
- Description - wartość atrybutu typu lista,
- Quantity - ilość,
- Unit - jednostka,
- VAT - wartość VAT,
- Price - cena,
- Value - wartość,
- WasteMgmtCost - koszt gospodarowania odpadami,
- ReturnedQuantity - ilość zwróconego towaru,
- IsSetParent - czy przedmiot jest główną częścią np. zestawu,
- IsSetElement - czy nalezy do zestawu,
- SetName - nazwa zestawu,
- UPC - kod EAN towaru,
- Image - zdjęcie, zawiera:
  - Id - numer id zdjęcia,
  - Link - link do towaru,
  - ExternalUrl - zewnętrzny URL,
- ImageId - numer id zdjęcia,
- Id - numer id towaru,
- DefaultGroup - grupa domyślna,
- NameNoHtml - nazwa bez znaczników HTML,
- Link - link do strony produktu,
- Url - link do towaru,
ItemsPerPage - ilość towarów na stronie,
PageCount - ilość stron,
PageNo - numer strony,
TotalItems - ilość produktów,
Documents - lista dokumentów,
DeliveryDate - zawiera liczbę (zazwyczaj dni) w ciągu których towar zostanie dostarczony,
SelectedDeliveryDate - wybrana przez Klienta data dostawy,
ExpectedDate - dzień dostarczenia towaru,
ProcessedDate - data wysłania,
ExpirationDate - dzień do którego towary zostaną dostarczone,
Points - liczba punktów lojalnościowych, które klient otrzyma za zakup towarów,
PointsPaid - punkty lojalnościowe wydane w tym zamówieniu,
SplitPayment - podział płatności,
Source - źródło,
Url - adres URL do zamówienia w profilu Klienta,

Obiekt używany w następujących mailach:

Złożenie zamówienia,
Zamówienie potwierdzone przez Klienta,
Zmiana statusu zamówienia,
Zamówienie zrealizowane,
Zamówienie anulowane,
Zamówienie zapłacone płatność online lub ratalna,
Dodanie listu przewozowego,
Dodanie faktury,
Informacja o zamówieniu do punktu odbioru osobistego,
Zamówienie z ERP,
Rozpoczęcie edycji,
Zatwierdzenie zamówienia,
Przypomnienie o dokończeniu płatności online,
Przypomnienie o wystawieniu opinii za zakupiony towar,
Podział zamówienia,
Zamówienie wysłane,
Zapytanie o koszt dostawy zamówienie bez kosztów dostawy,
Ustalenie kosztów dostawy,

customer

Obiekt customer zawiera informacje na temat Klienta.

Wskazówka

Niektóre pola w obiekcie customer dostępne są tylko dla poszczególnych maili. Przykładowo, pole OldEmail będzie dostępne w wiadomości związanej ze zmianą adresu e-mail, ale w wiadomości ze statusem rejestracji już nie.

Dostępne właściwości:

ConfirmationUrl - adres url do potwierdzenia konta,
Discount - znizki,
PasswordReminderUrl - adres url do przypomnienia hasła,
Status - status Klienta (numer),
StatusText - status Klienta (tekst),
Email - adres e-mail,
Name - dane Klienta,
Name2 - dane Klienta,
PhoneNo - numer telefonu,
OldEmail - poprzedni adres e-mail,

Obiekt używany w następujących mailach:

Potwierdzenie złożenia reklamacji,
Zmiana statusu reklamacji,
Przypomnienie o zakupach,
Powiadomienie o dostępności towaru,
Kupon rabatowy,
Rabat dla stałego Klienta,
Kupon rabatowy na darmową dostawę,
Założenie konta przez Klienta,
Założenie konta przez sklep,
Konto potwierdzone,
Stan konta aktywne, zablokowane,
Zmiana adresu e-mail,
Program lojalnościowy,
Przypomnienie hasła,
Reset hasła przez sklep,
Zapytanie ze strony kontakt,
Zapytanie o towar,
Powiadom znajomego o towarze,

complaint

Obiekt complaint wykorzystywany jest w mailach związanych ze zwrotami i reklamacjami. Dostępne właściwosci:

OrderDate - data zlożenia zamówienia,
OrderDeliveryDate - data dostarczenia zamówienia,
Code - kod reklamowanego towaru,
Defect - powód reklamacji,
DefectDescription - opis powodu reklamacji,
Response - odpowiedź,
DefectDate - data wystąpienia usterki,
Request - sposób rozwiązania problemu,
AccountNumber - numer konta,
ReportUrl - link do reklamacji,
ModifiedDate - data ostatniej modyfikacji,
Attachments - załączniki,
ComplaintId - numer id reklamacji,
CreatedDate - data utworzenia reklamacji,
Status - status reklamacji (liczba),
StatusText - status reklamacji (tekst),
Type- typ reklamacji (liczba),
TypeText - typ reklamacji (tekst),
OrderId - numer id zamówienia,
Quantity - ilość towaru,
Unit - jednostka,
Description - opis,
Price - cena,
Value - wartość,
SubtotalPrices - czy są ceny netto,
SubtotalPrice - cena netto,
TotalPrice - cena brutto,
SubtotalValue - wartość netto,
TotalValue - wartość brutto,
Currency - waluta,
ImageId - numer id zdjęcia towaru,
Image - zdjęcie, zawiera:
- Id - id zdjęcia,
- Link - link do zdjęcia,
- ExternalUrl - zewnętrzny link,
Id - numer id towaru,
DefaultGroup - numer domyślnej grupy,
NameNoHtml - nazwa towaru bez znaczników HTML,
Link - link do strony produktu,
Url - link do towaru,

Obiekt używany w następujących mailach:

Potwierdzenie złożenia reklamacji,
Zmiana statusu reklamacji,

product

Obiekt product wykorzystywany jest w mailach z przypomnieniem o zakupach oraz zapytaniem o towar. Dostępne właściwości:

Code - kod towaru,
UPC - kod EAN towaru,
Id - numer id towaru,
DefaultGroup - grupa domyślna,
NameNoHtml - nazwa towaru bez znaczników HTML,
Link - link do strony produktu,
Url - link do produktu,

Obiekt używany w następujących mailach:

Przypomnienie o zakupach,
Powiadomienie o dostępności towaru,
Zapytanie o towar,
Powiadom znajomego o towarze,

cart

Obiekt cart posiada właściwości do porzuconych koszyków. Dostepne właściwości:

Url - link do porzuconego koszyka,
Id - numer id porzuconegeo koszyka,
Email - adres e-mail użytkownika, do którego należy porzucony koszyk,
Name - dane Klienta,
Name2 - drugie dane Klienta,
PhoneNo - numer telefonu Klienta,
Currency - waluta,
Date - data utworzenia koszyka,
Value - wartość koszyka,
Authenticated - czy użytkownik był zalogowany,
Products - lista produktów w koszyku, każdy element zawiera:
- Code - kod produktu,
- Quantity - ilość,
- SaleUnit - jednostka miary,
- Price - cena,
- Value - wartość,
- ImageId - numer id zdjęcia produktu,
- Image - informacje o zdjęciu, zawiera:
  - Id - numer id zdjęcia,
  - Link - link do zdjęcia,
  - ExternalUrl - link zewnętrzny,
- Id - numer Id produktu,
- DefaultGroup - grupa domyślna,
- NameNoHtml - nazwa produktu bez znaczników HTML,
- Link - link do strony towaru,
- Url - link do produktu,

Obiekt używany w następujących mailach:

Pierwsze przypomnienie o dokończeniu zamówienia,
Drugie przypomnienie o dokończeniu zamówienia,

inquiry

Obiekt inquiry wykorzystywany jest w przypadku zapytań ofertowych. Dostępne właściwości:

ConfirmationUrl - link potwierdzający,
Name - nazwa Klienta,
Email - adres e-mail Klienta,
PhoneNo - numer telefonu,
Hash -unikalny numer oznaczający ofertę,
Inquiry - czy zapytanie ofertowe,
ExpirationDate - data ważności oferty,
ProcessedDate - data realizacji zamówienia,
OneTimeOffer zezwolenie na wiele zamowień z oferty, lub nie,
Message - wiadomość do zapytania,
Answer - odpowiedź,
Products - produkty w zapytaniu, każdy element zawiera:
- Code - kod produktu,
- UPC - kod EAN produktu,
- Quantity - ilość,
- SaleUnit - jednostka (wybrana),
- BasicUnit - jednostka podstawowa,
- BasicUnitRatio - przelicznik jednostki,
- UnitPriceRatio - przelicznik ceny za jednostkę miary,
- UnitPriceUnit - możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.),
- VAT - podatek VAT,
- SubtotalValue - wartość netto,
- TotalValue - wartość brutto,
- TotalPrice - cena brutto,
- SubtotalPrice - cena netto,
- Attributes - atrybuty, każdy element zawiera:
  - Id - numer id,
  - Name - nazwa atrybutu,
  - ValueId - numer id wartości,
  - Value - wartość atrybutu,
- Description - opis,
- ExternalUrl - link zewnętrzny,
- Id - numer id,
- DefaultGroup - domyślna grupa,
- NameNoHtml - nazwa towaru bez znaczników HTML,
- Link - link do strony produktu,
- Url - link do towaru,
ItemsPerPage - maksymalna ilość przedmiotów na stronę,
PageCount - ilość stron,
PageNo - numer aktualnej strony,
TotalItems - ilość przedmiotów,
SubtotalValue - wartość oferty netto,
TotalValue - wartość oferty netto,
VatValue - wartość podatku VAT,
Currency - waluta,
Attachments - załączniki,
RelatedOrders - powiązane zamówienia,
RelatedOffers - powiązane oferty/zapytania ofertowe,
DeliveryTotalValue - koszt dostawy,
SelectedCountry - wybrany kraj,
SelectedDelivery - wybrany sposób dostawy,
SelectedPayment - wybrany sposób płatności,
Id - numer id oferty,
Date - data złożenia oferty,
Status - status oferty (liczba),
StatusText - status oferty (tekst),

Obiekt używany w następujących mailach:

Złożenie zapytania cenowego,
Powiadomienie o ofercie,

coupon

Obiekt coupon dotyczy kuponów rabatowych. Dostępne właściwości:

Code - kod rabatowy,
ProductsMinimumTotalValue - minimalna wartość zamówienia brutto,
DateFrom - początkowa data obowiązywania kuponu rabatowego,
DateTill - końcowa data obowiązywania kuponu rabatowego,
Type - typ kuponu rabatowego (liczba),
Discount - wartość rabatu,
Currency - waluta,
Groups - grupy towarów,
Countries - kraje,

Obiekt używany w następujących mailach:

Kupon rabatowy,
Kupon rabatowy na darmową dostawę,

discount

Obiekt discount związany jest z rabatami. Dostępny jest w mailu "Rabat dla stałego klienta". Dostępne właściwości:

Discount - wartość rabatu (w procentach),
DateFrom - poczatkowa data obowiązywania rabatu,
DateTill - końcowa data obowiązywania rabatu,

Obiekt używany w następujących mailach:

Rabat dla stałego klienta,

loyalty

Loyalty to obiekt wykorzystywany w mailu dotyczącym programu lojalnościowego. Dostępne właściwości:

Points - ilość punktów,
Message - wiadomość,

Obiekt używany w następujących mailach:

Program lojalnościowy,

subject

Subject jest obiektem nie posiadającym żadnych właściwości. Wykorzystywany jest jako temat wiadomości. Obiekt używany w następujących mailach:

Zapytanie ze strony kontakt,

message

Obiekt message wykorzystywany jest w mailu "Zapytanie o Towar", "Zapytanie ze strony kontakt" oraz "Powiadom znajomego o towarze". Obiekt ten jest treścią wiadomości wysyłaną przez Klienta. Nie posiada żadnych właściwości. Użycie obiektu to po prostu {{ message }}. Obiekt używany w następujących mailach:

Zapytanie ze strony kontakt,
Zapytanie o towar,
Powiadom znajomego o towarze,

userFields

Obiekt posiada tylko jedną właściwość o nazwie macro_field. Obiekt używany w następujących mailach:

Zapytanie ze strony kontakt,

friend

Obiekt friend stanowi informacje na temat "znajomego", któremu wysyłamy informację o towarze w mailu "Powiadom znajomego o towarze". Posiada następujące właściwości:

Email - adres e-mail znajomego,
Name - dane znajomego,
Name2 - drugie dane znajomego,
PhoneNo - numer telefonu znajomego,

Obiekt używany w następujących mailach:

Powiadom znajomego o towarze,

subscriber

Subscriber to obiekt wykorzystywany w wiadomościach e-mail związanych z newsletterem. Dostępne właściwości:

Email - adres e-mail,
ConfirmationUrl - link potwierdzający subskrypcję,

Obiekt używany w następujących mailach:

Zapis do newslettera,
Zapis do newslettera przez sklep,
Wypisanie z newslettera przez sklep,

Spis maili oraz obiektów w nich używanych

Spis dotyczy wersji sklepu 2021

L.P.	Nazwa maila	Używane obiekty
Zamówienia
1	Szablon (używany w każdym mailu)	config
2	Złożenie zamówienia	config, order
3	Zamówienie potwierdzone przez Klienta	config, order
4	Zmiana statusu zamówienia	config, order
5	Zamówienie zrealizowane	config, order
6	Zamówienie anulowane	config, order
7	Zamówienie zapłacone płatność online lub ratalna	config, order
8	Dodanie Listu przewozowego	config, order
9	Dodanie faktury	config, order
10	Informacja o zamówieniu do punktu odbioru osobistego	config, order
11	Potwierdzenie złożenia reklamacji	config, customer, complaint
12	Zmiana statusu reklamacji	config, customer, complaint
13	Zamówienie z ERP	config, order
14	Rozpoczęcie edycji	config, order
15	Zatwierdzenie zamówienia	config, order
16	Przypomnienie o zakupach	config, customer, product
17	Przypomnienie o dokończeniu płatności online	config, order
18	Przypomnienie o wystawieniu opinii za zakupiony towar	config, order
19	Podział zamówienia	config, order
20	Zamówienie wysłane	config, order
21	Pierwsze przypomnienie o dokończeniu zamówienia	config, cart
22	Drugie przypomnienie o dokończeniu zamówienia	config, cart
Zapytanie o koszt dostawy, Zapytanie o cenę towaru
1	Zapytanie o koszt dostawy zamówienie bez kosztów dostawy	config, order
2	Ustalenie kosztów dostawy	config, order
3	Złożenie zapytania cenowego	config, inquiry
4	Powiadomienie o ofercie	config, inquiry
5	Powiadomienie o dostępności towaru	config, customer, product
Rabaty
1	Kupon rabatowy	config, customer, coupon
2	Rabat dla stałego klienta	config, customer, discount
3	Kupon rabatowy na darmową dostawę	config, customer, coupon
Klienci
1	Założenie konta przez klienta	config, customer
2	Założenie konta przez sklep	config, customer
3	Konto potwierdzone	config, customer
4	Stan konta aktywne, zablokowane	config, customer
5	Zmiana adresu e-mail	config, customer
6	Program lojalnościowy	config, customer, loyalty
7	Przypomnienie hasła	config, customer
8	Reset hasła przez sklep	config, customer
Subskrybenci (newsletter)
1	Zapis do newslettera	config, subscriber
2	Zapis do newslettera przez sklep	config, subscriber
3	Wypisanie z newslettera przez sklep	config, subscriber
Kontakt
1	Zapytanie ze strony kontakt	config, customer, subject, message, userFields
2	Zapytanie o towar	config, customer, message, product
3	Powiadom znajomego o towarze	config, customer, message, product, friend

Konfigurator towaru

Spis treści

Wstęp

Kto może używać tej opcji

Przykład użycia

Więcej informacji

Wstęp

Konfigurator produktów powstał z myślą o firmach produkcyjnych, które w e-Sklepie internetowym chcą sprzedawać produkty na indywidualne zamówienie, uzależnione od ustalonych kryteriów. W celu odpowiedzi na potrzeby użytkowników e-Sklepu związane z obsługą tego rodzaju zamówień w Comarch e-Sklep został przygotowany mechanizm, za pomocą którego można we własnym zakresie zaimplementować funkcję umożliwiającą, na podstawie parametrów podanych przez obsługę sklepu, dodanie do koszyka spersonalizowanego towaru (towarów) z ceną wyliczoną poza sklepem ("na zewnątrz"). W ten sposób Klienci e-Sklepu w wersji B2B będą mogli w łatwy sposób składać indywidualne zamówienia poprzez przejrzystą prezentację oferty z wieloma kryteriami wyboru, które mogą być dowolnie łączone. Niewątpliwą korzyścią z tego rozwiązania jest również optymalizacja procesu sprzedaży. Klient samodzielnie personalizuje towar według ustalonych parametrów i nie wymaga obsługi sprzedawcy. Dzięki temu do e-Sklepu trafia gotowe do realizacji zamówienie.

Wskazówka

Implementacja konfiguratora towarów przeznaczona jest dla użytkowników zaawansowanych i przy jej konfiguracji niezbędna jest wiedza programistyczna.

Uwaga

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

Podstawowe różnice między konfiguratorem produktu a towarem zgrupowanym (tzw. fantomem) zostały przedstawione w tym artykule.

Kto może używać tej opcji

Aby korzystać z mechanizmu dodawania towaru do koszyka z ceną wyliczoną poza e-Sklepem niezbędne jest:

posiadanie Comarch e-Sklep B2B w wersji co najmniej 2020.3;
zainstalowanie dodatku Comarch e-Sklep Sync w wersji co najmniej 2020.3 i włączenie go w panelu e-Sklepu;
włączenie w panelu administracyjnym w menu Ustawienia/ Ustawienia sklepu/ Ogólne/ Comarch e-Sklep Sync opcji Konfigurator towarów;
oznaczenie w paneli administracyjnym na towarze, że jest to towar konfigurowalny,
zaimplementowanie* w usłudze Comarch e-Sklep Sync mechanizmu z obsługą kryteriów wyboru towaru (dodanie nowego workera). *opcja niedostępna w Comarch ERP Optima Chmura Standard;
zmodyfikowanie standardowego szablonu Szafir (lub własnego szablonu wyglądu e-Sklepu), tak, by w przypadku towaru konfigurowalnego, wyświetlać opcje wyboru i odpowiednią cenę.

W efekcie wprowadzonych zmian Klient będzie miał możliwość dodania do koszyka pozycji z ceną wyliczoną poza e-Sklepem na podstawie określonych przez obsługę sklepu kryteriów. W zależności od sposobu implementacji, mechanizm konfiguratora produktu pozwala na:

dodanie do koszyka jednej pozycji towarowej, gdzie w jej szczegółach będą wszystkie informacje o wybranych przez Klienta parametrach. Przykład użycia został przedstawiony poniżej;
dodanie do koszyka kilku pozycji towarowych, które łącznie spełniają parametry zamówienia złożonego przez Klienta.

Przykład użycia

Poniżej przedstawiono przykład wykorzystania opcji konfiguratora towarów w integracji e-Sklepu z Comarch ERP Optima (w przypadku korzystania z Comarch ERP Optima Chmura Standard brak możliwości implementacji własnych workerów Comarch e-Sklep Sync). Jest to najprostszy przypadek, kiedy do jednego towaru przypisujemy różne konfigurowalne elementy (w tym przykładzie w postaci atrybutów). Po stworzeniu w e-Sklepie indywidualnego projektu produktu, Klient w koszyku będzie miał widoczną jedną pozycję z ceną wyliczoną poza e-Sklepem (w naszym przykładzie jest ona pobrana bezpośrednio z pliku XML, który jest dodany do karty towaru w systemie ERP). Pobierz plik ze zmianami (dotyczą wersji 2020.4) niezbędnymi do implementacji poniższego przykładu.

W systemie Comarch ERP Optima przygotuj kartotekę towaru, który po przesłaniu do e-Sklepu będzie mógł być indywidualnie skonfigurowany przez Klienta podczas zakupu.
W panelu administracyjnym e-Sklepu w wersji B2B na szczegółach tego towaru zaznacz, że towar jest konfigurowalny, a następnie zmiany w ustawieniach towaru opublikuj (przycisk w górnym prawym rogu).
Do danego towaru w systemie ERP przypisz elementy konfigurowalne w postaci atrybutów o typie lista. Na liście dla każdego atrybutu dodaj wartości czyli warianty elementów, które klient może wybrać podczas zakupu. Do towaru konfigurowalnego można dodać dowolną ilość atrybutów z dowolną ilością wariantów. Ważne, żeby na towarze nie wskazywać konkretnych wartości (kolumna Wartość musi pozostać pusta), a wszystkie atrybuty były udostępnione do Comarch e-Sklep:

4. Przygotuj plik XML o odpowiedniej strukturze (do pobrania powyżej) , w którym wskażesz ceny netto, VAT oraz ceny brutto poszczególnych wariantów w konfigurowalnych elementach towaru:

5. Przygotowany plik dodaj do karty towaru w systemie ERP na zakładce Atrybuty w sekcji Załączniki. Dane o cenach zostaną pobrane z pliku XML przez usługę Comarch e-Sklep Sync, dlatego nie należy pliku XML udostępniać do e-Sklepu:

6. Do karty towaru konfigurowalnego w systemie ERP dodaj zdjęcie i udostępnij je do e-Sklepu (patrz: zrzut powyżej). Będzie ono wyświetlone na szczegółach produktu konfigurowalnego jako główne zdjęcie dla domyślnych wariantów towaru. 7. Zmodyfikuj* usługę Comarch e-Sklep Sync. W tym celu w pliku configWorkers.json dodaj nowy worker według instrukcji, który będzie wyliczał ostateczną cenę indywidualnego produktu w oparciu o ceny poszczególnych jego elementów. Przykład workera wraz z modyfikacjami usługi Comarch e-Sklep Sync dostępny do pobrania powyżej.(*opcja niedostępna w Comarch ERP Optima Chmura Standard) 8. Wprowadź zmiany w szablonie Szafir według instrukcji udostępnionej powyżej. Po przeprowadzeniu modyfikacji zapisz je, a następnie opublikuj. 9. Wykonaj synchronizację danych z systemu ERP. Wówczas do e-Sklepu zostaną przesłane dane o konfigurowalnych elementach towaru. Usługa Comarch e-Sklep Sync pobierze z pliku XML informację o cenach poszczególnych składowych produktu. 10. Powyższa instrukcja pozwala na przygotowanie na szczegółach produktu w szablonie Szafir w sklepie w wersji B2B następującego towaru konfigurowalnego. Podczas zakupu, Klient może samodzielnie dopasować warianty elementów, które są udostępnione przez sprzedawcę do samodzielnej konfiguracji:

Po wybraniu dostępnych opcji, należy kliknąć w Zapisz - wówczas usługa Comarch e-Sklep Sync pobierze z pliku XML (przypisanego do towaru w pkt. 4) informację o cenach poszczególnych składowych produktu i na tej podstawie zostanie wyliczona cena indywidualnego projektu Klienta. Obok ceny pojawi się opcja dodania towaru do koszyka. W koszyku będzie widoczna jedna pozycja wraz z informacją o wybranych elementach oraz całkowita cena produktu:

11. Sprzedawca w panelu administracyjnym na szczegółach zamówienia będzie miał widoczną również jedną pozycję towarową wraz z elementami wybranymi przez Klienta. Po synchronizacji do Comarch ERP Optima, na Rezerwacji Odbiorcy na szczegółach pozycji (po użyciu przycisku lupki) będzie dostępna informacja o szczegółach projektu Klienta:

Przenosi się ona również na dokumenty powiązane (Wydania zewnętrzne, Faktury Sprzedaży), co ułatwia szybką realizację indywidualnego zamówienia pochodzącego z e-Sklepu.

Wskazówka

Podczas minifikacji plików js może dojść do sytuacji, gdzie otrzymamy błąd informujący o zbyt dużym rozmiarze pliku. W takiej sytuacji proponujemy dodać plik init-ui3.js. Do tego pliku należy przekleić cały kod, który został dodany do init-ui2.js. Następnie na końcu pliku _layout.html proszę znaleźć następującą linijkę: <script src="js/init-ui2.js?v={{ lqTS }}"></script> Bezpośrednio pod tą linijką proszę wkleić następujący kod:<script src="js/init-ui3.js?v={{ lqTS }}"></script>

Więcej informacji

Przykład konfiguratora produktu - zobacz >> Kod źródłowy przykładu - pobierz >> Więcej informacji na temat konfiguracji usługi Sync można znaleźć w artykule Comarch e-Sklep Sync.

Jakie są możliwości zarządzania szablonami w e-Sklepie?

Spis treści

Jak wybrać szablon w panelu?

Co to są testy A/B w panelu e-Sklepu?

Jak można dodać ustawienia dla szablonu w panelu?

Gdzie można dodać bannery do szablonów?

Dodawanie szablonu

Lista plików szablonu
Dodawanie plików szablonu
Edycja plików szablonu

Lista obiektów lokalnych

Lista obiektów lokalnych
Dodawanie obiektów
Konfiguracja obiektu

Tłumaczenie w szablonie

Powiązanie stron z szablonem i obiektami

Import / Eksport szablonu

- Import z szablonu
- Eksport szablonu/banneru

Zabezpieczenie szablonu hasłem

Dedykowany szablon dla wersji mobilnej

Szablony w sklepie

W tym artykule dowiesz się o zaawansowanych możliwościach zarządzania sza

Jak wybrać szablon w panelu?

W obszarze Panel administracyjny/ Gotowe szablony Comarch możliwe jest wybranie szablonu z dostępnych szablonów domyślnych.

Jeżeli jesteśmy ciekawi jak dany szablon prezentuje się to po kliknięciu w link Zobacz demo zostaniemy przekierowani na stronę z wersją demonstracyjną danego szablonu. Edycja nazwy szablonu jest możliwa po wejściu do zakładki Szablon w Zaawansowanych ustawieniach: Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Szablon

Włączenie opcji Podgląd zmian wyglądu sklepu w czasie rzeczywistym (dla administratora) pozwala na bieżąco sprawdzać przez administratora zmiany wprowadzone w szablonach(wystarczy odświeżyć stronę).

Wskazówka

Pamiętaj, że zmiany wprowadzane w szablonach widoczne są w sklepie po ich opublikowaniu.

Co to są testy A/B w panelu e-Sklepu?

Administrator ma możliwość przeprowadzenia testów A/B. Aby móc je aktywować należy się udać do: Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane następnie wybieramy zakładkę Testy A/B.

Po zaznaczeniu funkcji Testy A/B należy aktywować przynajmniej dwa spośród wgranych szablonów.

Jak można dodać ustawienia dla szablonu w panelu?

Dodawanie ustawień dla szablonu dostępne jest w panelu administracyjnym sklepu w obszarze Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Ustawienia (JSON).

Ustawienia dla szablonu dostępne są w formacie JSON.

Zdefiniowane ustawienia dla obiektu dostępne są w szablonie poprzez obiekt globalny settings.

Obiekt globalny settings dostępny jest także w plikach arkuszy stylów (css).

Gdzie można dodać bannery do szablonów?

Dodawanie bannerów do szablonów Liquid odbywa się w obszarze Wygląd sklepu/ Ustawienia/ Bannery. Stworzone bannery przypisywane są do konkretnego szablonu. Więcej informacji o bannerach można znaleźć tutaj.

Dodawanie szablonu

Gdzie jest dostępna lista plików szablonu?

Lista plików szablonu dostępna jest w panelu administracyjnym sklepu w obszarze Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Edytuj HTML.

Jak można dodać plik szablonu?

Plik szablonu można dodać w panelu administracyjnym w menu Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Edytuj HTML za pomocą przycisku Dodaj:

Przed dodaniem pliku szablonu należy wybrać, dla którego szablonu oraz jakiego rodzaju interfejsu dodajemy szablon. Dostępne rodzaje to:

szablon wykorzystywany w sklepie,
szablon wykorzystywany w wersji mobilnej sklepu,
szablon wykorzystywany w sklepie na Facebook.

Edycja plików szablonu

Pliki szablonu mogą być edytowane bezpośrednio z listy plików szablonu. Wystarczy kliknąć na plik, który nas interesuje, aby pojawiło się okno z możliwością edycji.

Zapis zmian możliwy jest także poprzez skrót klawiaturowy Ctrl + S

Wskazówka

Od wersji 2020 w szablonie Topaz została dodana informacja na temat godziny wygenerowania szablonu w kreatorze. Z listy plików należy wybrać _layout.html. Informacje na temat modyfikacji, w tym godzina ostatniej modyfikacji, znajdują się nad oknem edycji pliku. Jeżeli plik nie był modyfikowany, wówczas godzina odpowiada godzinie wygenerowania szablonu w kreatorze.

Wskazówka

Od wersji 2022 w standardowych szablonach Comarch wprowadziliśmy optymalizacje widoków poszczególnych stron w oparciu o przeprowadzony audyt Grupy iCEA. Dodatkowo wprowadziliśmy usprawnienia do prowadzenia efektywnych działań pozycjonujących za pomocą panelu Comarch e-Sklep, dzięki czemu jest to obecnie stosunkowo wygodne narzędzie do zarządzania zawartością sklepu internetowego, a także do skutecznego pozycjonowania.

Dodawanie obiektów

Obiekty zwracają dane dostępne w sklepie, przykładowo:

informacje o towarach,
informacja o zalogowanym kontrahencie,
informacje o zamówieniach,
koszyk

Obiekt należy wykorzystać w szablonach w celu wyświetlenia tych informacji w sklepie.

Więcej informacji o obiektach i ich podziałach można znaleźć w artykule Obiekty w sklepie.

Lista obiektów lokalnych

Lista obiektów lokalnych dostępna jest w Panelu administracyjnym sklepu w obszarze Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Obiekty.

Kolumny na liście:

Nazwa – nazwa danego obiektu
Typ -Typ obiektu

Dodawanie obiektów

Obiekt należy dodać używając przycisku Dodaj. Na formularzu dodawania należy wybrać typ obiektu oraz wprowadzić jego nazwę, następnie nacisnąć przycisk Dodaj. Zostanie dodany obiekt z domyślna konfiguracją.

Nazwa obiektu wykorzystywana jest w szablonie do odwołania się do tego obiektu. Zmiana nazwy jest niedostępna.

Konfiguracja obiektu

Konfiguracja obiektu możliwa jest po kliknięciu w link JSON.

Zostaniemy przekierowani na stronę gdzie będziemy mogli:

Ustawić opcje konfiguracyjne obiektu
Wybrać strony, na których obiekt ma być aktywny

Zmiany możemy zapisać przyciskiem Zapisz znajdującym się w prawym górnym rogu.

Obiekty należy aktywować tylko na stronach, na których będą one wykorzystywane. Każdy aktywowany obiekt wpływa na szybkość ładowania i wyświetlania stron w sklepie.

Tłumaczenia w szablonie

Zmiany fraz i ich tłumaczenie odbywa się w obszarze Wygląd sklepu/ Ustawienia/ Tłumaczenia.

Aby dodać nowe tłumaczenie należy nacisnąć przycisk Dodaj. Istnieje możliwość dodawania tłumaczeń dla różnych języków.

Możemy również importować listę tłumaczeń z pliku XML. Służy do tego przycisk Import z pliku XML znajdujący się w rozwijanym menu w prawnym górnym rogu.

Powiązanie stron z szablonem i obiektami

Powiązanie stron z plikami szablonu oraz aktywnymi na tych stronach obiektami dostępne jest w Panelu administracyjnym sklepu w obszarze Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Strony.

Przed powiązaniem stron należy wybrać, dla którego oraz jakiego rodzaju interfejsu wykonujemy powiązanie. Dla każdej strony należy ustawić:

Plik szablonu, który będzie wykorzystany na stronie.
Obiekty, które mają być dostępne dla strony.

Ustawienie pliku szablonu. W polu Szablon należy wprowadzić nazwę pliku i zapisać zmiany przyciskiem Zapisz. Wybór obiektów dla wskazanej strony możliwy jest po naciśnięciu przycisku Obiekty. Należy wybrać obiekty, które mają być dostępne na danej stronie i zapisać zmiany przyciskiem Zapisz. Ponadto dla każdej strony można ustawić wstawkę szablonu, która będzie dołączona do pliku szablonu poprzez obiekt page(property TemplateInclude). W polu Include należy wprowadzić nazwę pliku i zapisać zmiany przyciskiem Zapisz.

Obiekty należy aktywować tylko na stronach, na których będą one wykorzystywane. Każdy aktywowany obiekt wpływa na szybkość ładowania i wyświetlania stron w sklepie.

Import / Eksport szablonu

Import, eksport oraz przywracanie domyślnego szablonu odbywa się w obszarze Wygląd sklepu / Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Import/Eksport z pliku XML.

Import z szablonu

W celu zaimportowania gotowego szablonu, należy za pomocą przycisku Wybierz plik XML wybrać plik z szablonem z dysku. Jeżeli importowany szablon posiada hasło, to należy je podać podczas importu. Jeżeli opcja Podmień istniejące bannery zostanie niezaznaczona, to podczas importu istniejące bannery nie zostaną nadpisane. Od wersji 2019.2 wprowadzono możliwość importu i eksportu bannerów bez sprawdzania limitu danych. Dzięki temu można przenosić dużą ilość bannerów bez obciążania szablonu. Opcja Importuj bannery zastępuje dotychczasowe bannery w e-Sklepie. Zmiany należy zatwierdzić opcją ‚Publikuj’ dostępną w menu rozwijanym Więcej . Zaimportowane bannery widoczne są w Wygląd sklepu/ Ustawienia/ Bannery.

Eksport szablonu/ banneru

Eksport do pliku odbywa się w zakładce Eksport do pliku XML. Eksportowany szablon można podpisać danymi autora, takimi jak jego nazwa, adres e-mail, telefon oraz adres www. W wersji 2019.2 została wprowadzona możliwość eksportu oraz importu szablonu bez bannerów. Dodatkowo można do e-Sklepu zaimportować oddzielnie bannery (bez sprawdzania limitu danych). Dzięki temu można przenosić szablony, do których dodano dużą ilość bannerów.

Uwaga

Maksymalny rozmiar importowanego oraz eksportowanego szablonu nie może przekraczać 8MB.

Zabezpieczenie szablonu hasłem

Istnieje możliwość zabezpieczenia tworzonego szablonu przed niepowołanym dostępem. Blokady można zdefiniować w obszarze Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Szablon. Na samym dole strony dostępna jest opcja Zmień hasło.

Dedykowany szablon dla wersji mobilnej

Darmowe szablony Comarch tworzone są w technologi RWD, co sprawia, że są one wyświetlane poprawnie zarówno na urządzeniach typu desktop, jak i na urządzeniach mobilnych. W takim przypadku aktywacja dodatkowej wersji mobilnej, bez modyfikacji plików szablonu, może powodować błędy w wyświetlaniu sklepu na urządzeniu mobilnym. W panelu administracyjnym Ustawienia/ Ustawienia sklepu/ Ogólne widoczny jest parametr "Dedykowany szablon dla wersji mobilnej", który znajduje zastosowanie dla specjalnie przygotowanych dedykowanych szablonów posiadających osobną wersję mobilną. Dodatkowo zablokowano możliwość aktywacji tej funkcji, jeżeli w e-Sklepie nie ma wymaganego szablonu.

Podczas aktualizacji e-Sklepu, w przypadku, gdy w sklepie nie utworzono specjalnego szablonu dla wersji mobilnej, następuje deaktywacja wersji mobilnej.

Obiekty w sklepie

W Comarch e-Sklep oddaliśmy do Państwa dyspozycji obiekty. Wyróżniamy dwa rodzaje obiektów, są to obiekty globalne oraz obiekty lokalne.

Wskazówka

Aktywacja obiektów w Comarch e-Sklep odbywa się w Panelu Administracyjnym, w sekcji Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane/ Obiekty.

Uwaga

Obiekty globalne nie wymagają aktywacji, są importowane wraz z szablonem. Obiekty tego typu są dostępne na każdej stronie sklepu.

Do obiektów globalnych zaliczamy:

config,
page,
customer,
currency,
usr,
__action,
__actionGET,
settings,
translations

Wskazówka

Więcej na temat obiektów globalnych mogą Państwo przeczytać w artykule o obiektach globalnych

Uwaga

Obiekty lokalne domyślnie nie są dostępne w sklepie. Obiekt należy dodać, oraz aktywować na wybranych stronach. Obiekty lokalne są importowane wraz z szablonem. Odwołania do obiektów przez Zmienne Lokalne. Nazwa zmiennej nadawana w momencie aktywacji obiektu. Obiekt udostępnia informacje o aktualnej stronie.

Przykładowe obiekty lokalne dostępne w Comarch e-Sklep to:

productnew,
manufacturersbrands,
productrecommended,
productlist,
cart,
productdetails,
blog,
customerprofile,
productcomparisontool,
productuserreviews,
productlastviewed

Wskazówka

Jest to przykładowa lista obiektów.Więcej na temat obiektów lokalnychmogą Państwo przeczytać w Obiekty lokalne

Akcje

W Comarch e-Sklep udostępniliśmy do Państwa dyspozycji Akcje - są to działania na stronie związane z interakcją użytkownika (kupującego jak i zarządzającego sklepem), takie jak np. dokonywanie zakupów, dodawanie produktów do koszyka czy zmiana waluty.

Lista dostępnych akcji znajduje się w Panelu Administracyjnym sklepu w następującej ścieżce: Panel administracyjny/Wygląd sklepu/Dokumentacja.

Spis treści

Związane z Klientem

Dotyczące zamówienia

Akcje GET

Produkty

Koszyk

Kontakt

Edycja zamówienia

External

Sync

Zapytania ofertowe

Sesja użytkownika

Związane z Klientem

Akcje te możemy określić jako powiązane z Klientem i jego działaniami na stronie. W skład tych akcji wchodzą:

CompanyChange	EmployeeUnlock
CompanyDefaultUpdate	EmployeeUpdate
ConsentAccept	LanguageChange
ConsentsLoginAccept	LanguageDefaultUpdate
ConsentWithdraw	Login
CurrencyChange	Logout
DeliveryAddressAdd	OldPasswordChange
DeliveryAddressDelete	PasswordChange
DeliveryAddressUpdate	PasswordRecover
EmailChange	Register
EmployeeAdd	ReviewAuthorUpdate
EmployeeDelete	Update
EmployeeLock

Dotyczące zamówienia

Akcje w tej grupie dotyczą składanych zamówień. W skład tych akcji wchodzą:

Accept	DeliveryCountryChange
Add	DeliveryDateChange
Cancel	EmailSet
AttachmentAdd	FastDeliveryCheck
AttachmentDelete	InvoiceAddressUpdate
AttributesSet	InvoiceChange
ComplaintAdd	NoteAdd
BuyerChange	PaymentMake
BuyerUpdate	PointsUse
ComplaintCancel	RestorePayment
Copy	ReturnAdd
CouponAdd	StatusGet
CouponDelete	TinUpdate
DeliveryAddressUpdate	StepNext
DeliveryChange	StepPrev
DeliveryCollectionPointChange

Akcja odpowiada za działanie związane z newsletterem. W skład tych akcji wchodzą:

Unsubscribe

Akcje GET

Akcje te umożliwiają pobieranie danych z serwera celem utworzenia np. breadcrumbs. W skład tych akcji wchodzą:

CollectionPointCities	SearchAdvanced
CollectionPoints	SearchAutocomplete
Groups	SearchFilters
Search	ProductId

Produkty

Akcje te odpowiadają za działania związane z produktami, takimi jak możliwość dodania opinii na temat produktu. W skład tych akcji wchodzą:

AskForPrice	ReviewAdd
CollectionPointsStockLevelsGet	StockLevelsGet
ComparisonToolAdd	WishListAdd
ComparisonToolDelete	WishListCheck
DeliveryCostGet	WishListDelete
FastDeliveryCheck	WishListUpdate
NotifyAboutProductAvailability

Koszyk

Akcje te odpowiadają za działania związane z koszykiem, np. dodaniem produktu do koszyka. W skład tych akcji wchodzą:

Add	NameSet
AttributesSet	PositionDelete
Change	QuantityChange
Create	Recalculate
Delete	SetAdd
ExternalAdd	SetExtAdd
ImportCSV

Kontakt

Akcje te odpowiadają za kontakt, np. w celu zapytania o dany produkt. W skład tych akcji wchodzą:

AskAboutProduct	TellFriendAboutProduct
Send

Edycja zamówienia

Akcje te związane są z edycją zamówienia. W skład tych akcji wchodzą:

Accept	PositionAttributesSet
AttributesSet	PositionDelete
Cancel	PositionQuantityChange
CartCreate	PositionUndo
CartMerge	Recalculate
Edit	Undo

External

Akcje te odpowiedzialne są za możliwość logowania się poprzez Facebook lub Google. W skład tych akcji wchodzą:

FbAccountLink	GoogleAccountLink
FbAccountUnlink	GoogleAccountUnlink
FbLogin	GoogleLogin

Sync

Akcje te odpowiadają za działania związane z pobieraniem danych z baz systemów. Więcej informacji można znaleźć klikając w odnośnik - Comarch e-Sklep Sync. W skład tych akcji wchodzą:

Exec

Zapytania ofertowe

Akcje te odpowiadają za działania związane ze składaniem zapytań ofertowych. W skład tych akcji wchodzą:

Add	Set
CartMerge

Sesja użytkownika

Akcje te odpowiadają za działania związane z utrzymywaniem sesji użytkownika. W skład tych akcji wchodzą:

Ping

Opis używanych akcji:

CompanyChange

Akcja odpowiada za zmianę firmy. Parametry:

id (int, pole obowiązkowe).

<form action="{{ page.Url }}{{ page.QueryString | H }}" method="post">
<input type="hidden" name="__action" value="Customer/CompanyChange"/>
<input type="hidden" name="id" value=""/>
</form>

CompanyDefaultUpdate

Akcja odpowiada za wczytanie domyślnych ustawień firmy. Parametry:

id (int, pole obowiązkowe).

<form action="{{ page.Url }}{{ page.QueryString | H }}" method="post">
<input type="hidden" name="__action" value="Customer/CompanyDefaultUpdate"/>
<input type="hidden" name="id" value=""/>
</form>

ConsentAccept

Akcja odpowiadająca za akceptację zgody, na przykład podczas składania zamówienia. Parametry:

tos (int lub null),
channelKey (string).

{% for tos in customer-profile.Consents -%}
   {% if tos.Checked == false -%}
     <div class="form-lq tos-ui">
     <div class="tos-name-ui">{{ tos.Text }}</div>
       {% assign channelsSize = tos.Channels | Size -%}
        {% if channelsSize > 0 -%}
         {% for channel in tos.Channels -%}
          <div class="channel-ui">
          <button class="agreements-in-profile-lq" data-action="Customer/ConsentAccept" data-key="{{ channel.Key }}">{{translations.Accept}}</button>
          <span class="channel-name-ui">{{channel.Name}}</span>
          </div>
         {% endfor -%}
         {% else -%}
          <div class="date-container-ui">
          <button class="agreements-in-profile-lq tos-lq" data-action="Customer/ConsentAccept" data-key="{{ tos.Id }}">{{translations.AcceptAgreement}}</button>
          </div>
         {% endif -%}
      </div>
    {% endif -%}
{% endfor -%}

ConsentsLoginAccept

Akcja odpowiadająca za akceptację zgody obowiązkowej podczas logowania. Parametry:

tos (int[]) - może zostac przekazane wielokrotnie w ramach jednej akcji (int),
channelKey (string[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (string).

<form method="POST">
<input type="hidden" name="__action" value="Customer/ConsentsLoginAccept"/>
{% for tos in __consents -%}
   {% if tos.Required and tos.Statement == false -%}
     {% assign requiredExists = true -%}
     {% break -%}
   {% endif -%}
{% endfor -%}
</form>

ConsentWithdraw

Akcja odpowiada za wycofanie zgody. Parametry:

tos (int lub null),
channelKey (string).

{% for tos in customer-profile.Consents -%}
   {% if tos.Checked -%}
     <div class="form-lq tos-ui">
     <div class="tos-name-ui">{{ tos.Text }}</div>
       {% assign channelsSize = tos.Channels | Size -%}
        {% if channelsSize > 0 -%}
         {% for channel in tos.Channels -%}
          <div class="channel-ui">
          {% if channel.Checked -%}
              <button class="agreements-in-profile-js btn-pure-ui f-left-ui" data-action="Customer/ConsentWithdraw" data-key="{{ channel.Key }}">{{translations.Withdraw}}</button>
              <span class="channel-name-with-date-ui">{{channel.Name}}</span>
              <span class="date-label-ui">{{translations.AcceptanceDate}}: </span>
              <span class="date-ui"> <strong>{{channel.Date | Date:dateFormat}}</strong></span>
	      {% assign checkedChannelsSize = checkedChannelsSize | Plus:1 -%}
	  {% endif -%}
          </div>
         {% endfor -%}
         {% else -%}
          <div class="date-container-ui">
		<button class="agreements-in-profile-js tos-js btn-pure-ui" data-action="Customer/ConsentWithDraw" data-key="{{ tos.Id }}">{{translations.WithdrawAgreement}}</button>
		<span class="date-label-ui">{{translations.AgreementAccepted}}: </span>
                <span class="date-ui"> <strong>{{tos.Date | Date:dateFormat}}</strong></span>
		{% if tos.Required -%}
		     <div class="withdraw-required-info-ui error-ui">{{translations.WithdrawRequiredInfo}}!</div>
		{% endif -%}
	  </div>
         {% endif -%}
      </div>
    {% endif -%}
{% endfor -%}

CurrencyChange

Akcja odpowiada za zmianę waluty. Parametry:

currency (string, pole obowiązkowe).

<form method="post">
<select name="currency" required>
{% for currency in config.Currencies -%}
<option value="{{ currency.Code }}">{{ currency.Code }}</option>
{% endfor -%}
</select>
<button type="submit">Zmień</button>
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" required />
<input type="hidden" name="__action" value="Customer/CurrencyChange" required />
</form>

DeliveryAddressAdd

Akcja odpowiada za dodanie adresu do dostawy. Parametry:

addresId (int lub null),
default (bool),
name (string, pole obowiązkowe) - maksymalna długość to 64 znaki,
name2 (string) - maksymalna długość to 64 znaki,
name3 (string) - maksymalna długość to 250 znaków,
countryCode (string, pole obowiązkowe) - maksymalna długość to 2 znaki,
zipCode (string)- maksymalna długość to 20 znaków,
city (string) - maksymalna długość to 50 znaków,
street (string) - maksymalna długość to 150 znaków,
streetNo (string) - maksymalna długość to 20 znaków,
unitNo (string) - maksymalna długość to 20 znaków,
state (string) - maksymalna długość to 50 znaków,
phoneNo (string) - maksymalna długość to 50 znaków.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/DeliveryAddressAdd" />
<input type="hidden" name="__template" value="customer/profile-data.html" />
{% include 'customer/profile-data-address.html' %}
<button>Zatwierdź</button>
</form>

DeliveryAddressDelete

Umożliwia usunięcie adresu dostawy. Parametry:

addressId (int, pole obowiązkowe).

{% assign address = customer.DeliveryAddresses[0] -%}
<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/DeliveryAddressDelete" />
<input type="hidden" name="addressId" value="{{ address.Id }}" />
</form>

DeliveryAddressUpdate

Akcja umożliwia edycję adresu. Parametry:

addresId (int lub null),
default (bool),
name (string, pole obowiązkowe) - maksymalna długość to 64 znaki,
name2 (string) - maksymalna długość to 64 znaki,
name3 (string) - maksymalna długość to 250 znaków,
countryCode (string, pole obowiązkowe) - maksymalna długość to 2 znaki,
zipCode (string) - maksymalna długość to 20 znaków,
city (string) - maksymalna długość to 50 znaków,
street (string) - maksymalna długość to 150 znaków,
streetNo (string) - maksymalna długość to 20 znaków,
unitNo (string) - maksymalna długość to 20 znaków,
state (string) - maksymalna długość to 50 znaków,
phoneNo (string) - maksymalna długość to 50 znaków.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/DeliveryAddressUpdate" />
<input type="hidden" name="__template" value="customer/profile-data.html" />
<input type="hidden" name="addressId" value="{{ address.Id }}" />
{% if address.Default %}
<input type="hidden" name="default" value="1" />
{% endif %}
<div>
{% if address.Street == "" %}
{% include 'customer/profile-data-address.html' with -1 %}
{% else %}
{% include 'customer/profile-data-address-pr.html' with address.Id %}
{% endif %}
</div>
<button>Zatwierdź</button>
{% if address.Default == false %}
<button data-id="{{ address.Id }}">{{ translations.Cst_RemoveDeliveryAddress}}</button>
{% endif %}
{% if address.Default == false %}
<button>Zatwierdź</button>
{% endif %}
</form>

EmailChange

Akcja odpowiadająca zmianie adresu e-mail. Parametry:

email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
emailRepeat (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
password (string, pole obowiązkowe),
doNotChangeCompanyEmail (bool) - występuje tylko w wersji enterprise.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/EmailChange" />
<input type="hidden" name="__template" value="customer/profile-account.html" />
<input type="email" name="email" placeholder="* {{ translations.Prf_NewEmail }}" required />
<input type="email" name="emailRepeat" placeholder="* {{ translations.Prf_RepeatEmail }}" required />
<input type="password" name="password" placeholder="* {{ translations.Com_Password }}"
required />
<button>Zmień</button>
</form>

EmployeeAdd

Akcja odpowiada za dodanie pracownika. Parametry:

email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="Customer/EmployeeAdd" />
<input type="email" name="email" placeholder="" required />
<button>Zatwierdź</button>
</form>

EmployeeDelete

Akcja odpowiada za usunięcie pracownika. Parametry:

id (int, pole obowiązkowe).

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="Customer/EmployeeDelete" />
<input type="number" name="id" placeholder="" required />
<button>Zatwierdź</button>
</form>

EmployeeLock

Akcja odpowiada za zablokowanie pracownika. Parametry:

id (int, pole obowiązkowe).

<form method="POST"> <input type="hidden" name="__csrf" value="{{ page.CSRF }}"/> 
<input type="hidden" name="__action" value="Customer/EmployeeLock" /> 
<input type="number" name="id" placeholder="" required /> 
<button>Zatwierdź</button> 
</form>

EmployeeUnlock>

Akcja odpowiada za odblokowanie pracownika. Parametry:

id (int, pole obowiązkowe).

<form method="POST"> <input type="hidden" name="__csrf" value="{{ page.CSRF }}"/> 
<input type="hidden" name="__action" value="Customer/EmployeeUnock" /> 
<input type="number" name="id" placeholder="" required /> 
<button>Zatwierdź</button> 
</form>

EmployeeUpdate

Akcja ta odpowiada za aktualizację danych pracowników w profilu. Parametry:

name (string) - maksymalna długość to 50 znaków,
name2 (string) - maksymalna długość to 50 znaków,
phoneNo (string) - maksymalna długość to 50 znaków,
languageId (short lub null).

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="Customer/EmployeeUpdate" />
<input type="text" name="name" placeholder=" "/>
<input type="text" name="name2" placeholder=" " />
<input type="tel" name="phoneNo" placeholder=" " />
<button>Zatwierdź</button>
</form>

LanguageChange

Odpowiada za wybór i zmianę języka w sklepie. Parametry:

languageId (short, pole obowiązkowe).

{% assign lngCount = config.Languages | Size -%}
{% if lngCount > 1 -%}
<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/LanguageChange" />
<select name="languageId">
{% for lng in config.Languages -%}
<option value="{{ lng.Id }}" {% if page.LanguageId == lng.Id -%} selected {% endif -%}>{{ lng.Name }}</option>
{% endfor -%}
</select>
{% endif -%}
</form>

LanguageDefaultUpdate

Odpowiada za ustawienie domyślnego języka. Parametry:

languageId (short, pole obowiązkowe).

{% assign lngCount = config.Languages | Size -%}
{% if lngCount > 1 -%}
<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/LanguageDefaultUpdate" />
<select name="languageId">
{% for lng in config.Languages -%}
<option value="{{ lng.Id }}" {% if page.LanguageId == lng.Id -%} selected {% endif -%}>{{ lng.Name }}</option>
{% endfor -%}
</select>
{% endif -%}
</form>

Login

Akcja odpowiadająca za logowanie. Parametry:

email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
password (string, pole obowiązkowe),
remember (bool).

<form method="POST">
<input type="hidden" name="__action" value="Customer/Login" />
<input type="email" name="email" value="{{ customer.Email }}"
{% if customer.Email == blank %} placeholder="* {{ translations.Com_EmailAddress }} "
{% endif %}
required autofocus />
<input type="password" name="password" placeholder="* {{ translations.Com_Password }}"
required />
<a href="{{ config.DefinedPages.PasswordReminder.Url }}" class="remind">{{ translations.Lgn_DontRememberPassword }}</a>
<button>Login</button>
</form>

Logout

Akcja ta odpowiada za wylogowanie zalogowanego użytkownika (Klienta).

<form action="{{ page.Url }}{{ page.QueryString | H}}" method="post">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/Logout" />
<button>Wyloguj</button>
</form>

OldPasswordChange

Akcja odpowiadająca za zmianę hasła. Parametry:

oldPassword (string, pole obowiązkowe),
password (string, pole obowiązkowe),
passwordRepeat (string, pole obowiązkowe).

<form method="POST">
<input type="hidden" name="__action" value="Customer/OldPasswordChange" />
<input type="hidden" name="__template" value="customer/profile-account.html" />
<input type="password" name="oldPassword" placeholder="" required />
<input type="password" name="password" placeholder=" " required />
<input type="password" name="passwordRepeat" placeholder=" " required />
<button>Zatwierdź</button>
</form>

PasswordChange

Akcja odpowiadająca za zmianę hasła (np. przy pomocy formularza ,,zapomniałem hasła"). Parametry:

password (string, pole obowiązkowe),
passwordRepeat (string, pole obowiązkowe),
hash (string, pole obowiązkowe).

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/PasswordChange" />
<input type="hidden" name="hash" value="{{ page.GET['hash'] }}" >
<input type="password" name="password" value="" required/>
<input type="password" name="passwordRepeat" value="" required/>
<button>Zatwierdź</button>
</form>

PasswordRecover

Akcja której zadaniem jest odzyskanie hasła. Parametry:

email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/PasswordRecover" />
<input type="email" name="email" value="{{ customer.Email }}" required/>
<button>Zatwierdź</button>
</form>

Register

Akcja ta odpowiada za rejestrację użytkownika. Parametry:

company (bool),
email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
password (string, pole obowiązkowe),
passwordRepeat (string),
phoneNo (string) - maksymalna długość to 50 znaków,
name (string) - maksymalna długość to 64 znaki,
name2 (string) - maksymalna długość to 64 znaki,
name3 (string) - maksymalna długość to 250 znaków,
countryCode (string) - maksymalna długość to 2 znaki,
zipCode (string) - maksymalna długość to 20 znaków,
city (string) - maksymalna długość to 50 znaków,
street (string) - maksymalna długość to 150 znaków,
streetNo (string) - maksymalna długość to 20 znaków,
unitNo (string) - maksymalna długość to 20 znaków,
state (string) - maksymalna długość to 50 znaków,
tin (string) - maksymalna długość to 20 znaków,
ssn (string) - maksymalna długość to 20 znaków,
tos (int[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (int),
channelKey (string[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (string),
vateu (string) - występuje tylko w wersji Enterprise, maksymalna długość to 2 znaki.

Uwaga

W przypadku użytkowników nie będących firmami pola obowiązkowe to jedynie mail oraz password, przykładowy kod dla takiego rozwiązania zawierałby jedynie te dwa pola.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/Register" />
<input type="hidden" name="company" value="{% if registerCompany %}1{% endif %}" />
{% if registerCompany == 0 %}
    <input type="email" name="email" value="{{ customer.Email }}" {% if customer.Email == blank %} placeholder=" " {% endif %} required autofocus />
    <input type="password" name="password" placeholder="* {{ translations.Com_Password }}" required />
    {% if registerCompany %}
        {% if config.ENTERPRISE %}
        <select name="vateu" class="small">
        {% for v in config.VATEU %}
            <option value="{{ v.Value }}">{{ v.Name }}</option>
        {% endfor %}
        </select>
    {% endif %}
    <input type="text" name="tin" class="small nm" placeholder=" " />
{% endif %}
{% if registerConf.AddressVisible %}
    <input type="text" name="name" placeholder=" " {% if customerAddressRequired %} required {% endif %} />
    <input type="text" name="name2" />
    <select name="countryCode" placeholder=" " {% if customerAddressRequired %} required {% endif %} >
    {% for c in config.Countries %}
        <option {% if config.DefaultCountry == c.ISOCode %} selected {% endif %} value="{{ c.ISOCode }}">{{ c.Name }}</option>
    {% endfor %}
    </select>
    <input type="text" name="street" placeholder=" " {% if customerAddressRequired %} required {% endif %} />
    <input type="text" name="streetNo" placeholder=" " {% if customerAddressRequired %} required {% endif %} />
    <input type="text" name="unitNo" placeholder=" " />
    <input type="text" name="zipCode" placeholder=" " {% if customerAddressRequired %} required {% endif %} />
    <input type="text" name="city" placeholder=" " {% if customerAddressRequired %} required {% endif %} />
    {% comment %}
    <input type="text" name="state" placeholder=" " {% if customerAddressRequired %} required {% endif %} />
    {% endcomment %}
{% endif %}
{% if registerConf.PhoneVisible %}
    <input type="tel" name="phoneNo" placeholder=" " {% if registerConf.PhoneRequired %} required {% endif %} />
{% endif %}
<div class="switch">
    {% for tos in config.TOS.Consents.Registration -%}
        {% if tos.Statement %}
            <label>{{tos.Text}}</label>
        {% else %}
            <input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required %} required {% endif %} />
            <label for="tos{{ tos.Id }}">{% if tos.Required %}*{% endif %} {{tos.Text}}</label>
        {% endif %}
    {% endfor -%}
</div>
<a href="{{ config.DefinedPages.Login.Url }}">{{ translations.Lgn_LoginB }}</a>
</form>

ReviewAuthorUpdate

Odpowiada za dodanie nicku dla użytkownika który dodaje opinie o produkcie. Parametry:

author (string, pole obowiązkowe) - maksymalna długość to 50 znaków.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/ReviewAuthorUpdate" />
<input type="hidden" name="__template" value="customer/profile-account.html" />
<input type="text" name="author" value="{{ customer.ReviewAuthor }}"
placeholder=" " required />
<button>Zatwierdź</button>
</form>

Update

Akcja odpowiadająca za zmianę danych konta. Parametry:

email (string, wyrażenie regularne) - maksymalna długość to 192 znaki,
company (bool),
name (string, pole obowiązkowe) - maksymalna długość to 64 znaki,
name2 (string) - maksymalna długość to 64 znaki,
name3 (string) - maksymalna długość to 250 znaków,
countryCode (string, pole obowiązkowe) - maksymalna długość to 2 znaki,
zipCode (string) - maksymalna długość to 20 znaków,
city (string) - maksymalna długość to 50 znaków,
street (string) - maksymalna długość to 150 znaków,
streetNo (string) - maksymalna długość to 20 znaków,
unitNo (string) - maksymalna długość to 20 znaków,
state (string) - maksymalna długość to 50 znaków,
phoneNo (string) - maksymalna długość to 50 znaków,
tin (string) - maksymalna długość to 20 znaków,
ssn (string) - maksymalna długość to 20 znaków,
invoice (bool),
vateu (string) - występuje tylko w wersji Enterprise, maksymalna długość to 2 znaki,
subtotalPrices (bool) - występuje tylko w wersji enterprise.

<form action="{{ page.Url }}{{ page.QueryString | H}}" method="post" novalidate>
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Customer/Update" />
<input type="hidden" name="__template" value="customer/profile-data.html" />
<input type="hidden" name="company" value="{% if customer.Company %}1{% endif %}" />
<input type="hidden" name="invoice" value="{% if customer.Invoice %}1{% endif %}" />
<div>
{% if customer.Address.Street <> "" %}
{% include 'customer/profile-data-address-pr.html' with -1 %}
{% if customer.Company %}
{% include 'customer/profile-data-compaddr-pr.html'%}
{% endif %}
{% else %}
{% include 'customer/profile-data-address.html' with -1 %}
{% if customer.Company %}
{% include 'customer/profile-data-compaddr.html'%}
{% endif %}
{% endif %}
</div>
<button>Zatwierdź</button>
{% if customer.Address.Street <> "" %}<button>Zatwierdź</button>{% endif %}<div>
{{ translations.Prf_AccountFor }}: {% if customer.Company == false %}{{ translations.Prf_RetailCustomer }}{%else%}{{ translations.Prf_Company }}{%endif%}
</div>
</form>

Accept

Umożliwia akceptację zamówienia w sytuacji, gdy mamy do czynienia z np. negocjowalnym kosztem transportu. Parametry:

id (int, pole obowiązkowe),
hash (string).

<div class="form-js no-message-lq">
    <input type="hidden" name="__action" value="Order/Accept" />
    <input type="hidden" name="id" value="{{ order.Id }}" />
    <input type="hidden" name="hash" value="{{ order.Hash }}" />
    <button class="post-lq parent-container-reload-js">
        {{ translations.OrderAccept }}
    </button>
</div>

Add

Odpowiada za dodanie zamówienia. Parametry:

tos (int[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (int),
channelKey (string[]) - może zotać przekazane wielokrotnie w ramach jednej akcji (string).

<div class="form-js adding-order-form-js tos-form-ui {% if settings.cartVersion == 'comfortable' -%} comfortable-tos-ui {% endif -%}">
    <input  aria-label="action-order-add" type="hidden" name="__action" value="Order/Add" />
    {% for tos in config.TOS.Consents.Order -%}
        {% assign channelsSize = tos.Channels | Size -%}
        {% if channelsSize > 0 -%}
            {% assign onlyEmail = false -%}
            {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
                {% assign onlyEmail = true -%}
            {% endif -%}
            {% if onlyEmail == false -%}
                <span class="error-ui validation-info-js validation-channel-js hidden-js">{{ translations.ChooseOption }}</span>
            {% endif -%}
        {% endif -%}
        <div class="tos-container-js {% if tos.Statement -%} statement-ui statement-lq {% endif -%}" >
            {% if tos.Statement -%}
                {% unless channelsSize == 1 -%}
                    {% if tos.Required-%}<span class="required-ui">* </span>{% endif -%} {{tos.Text | Remove: '.' }} {{translations.Consents_InTheFormOf}}:
                {% endunless -%}
            {% else -%}
            <label class="checkbox-ui tos-js">
            {% if channelsSize == 1 -%}
                <input aria-label="tos" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
            {% elsif channelsSize > 0 -%}
                <input aria-label="tos" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
                <span>{% if tos.Required-%}<span class="required-ui">* </span>{% endif -%} {{tos.Text | Remove: '.' }} {{translations.Consents_InTheFormOf}}:</span>
                {% if tos.Required -%}
                    <span class="error-ui validation-info-js validation-required-js hidden-js">{{ translations.RequiredField }}</span>
                {% endif -%}
            {% else -%}
                <input  aria-label="tos" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
                <span class="label-ui">{% if tos.Required -%}<span class="required-ui">*</span> {% endif -%}{{ tos.Text }}</span>
                {% if tos.Required -%}
                    <span class="error-ui validation-info-js validation-required-js hidden-js">{{ translations.RequiredField }}</span>
                {% endif -%}
            {% endif -%}
            </label>
            {% endif -%}
            {% if channelsSize > 0 -%}
                {% if onlyEmail == false -%}
                    <span class="error-ui validation-info-js validation-channel-js hidden-js">{{ translations.ChooseOption }}</span>
                {% endif -%}
            {% endif -%}
            {% for channel in tos.Channels -%}
                <label class="checkbox-ui channel-ui {% if channelsSize > 0 -%} channel-js {% endif -%}">
                {% if tos.Statement -%}
                    {% if channelsSize == 1 -%}
                        <input aria-label="channelKey" type="hidden" name="channelKey" value="{{ channel.Key }}" checked />
                        <input aria-label="channelKey" type="checkbox" checked disabled />
                        <span class="statementLabel-ui">{% if tos.Required-%}<span class="required-ui">* </span>{% endif -%} {{tos.Text | Remove: '.' }} {{translations.Consents_InTheFormOf}} {% unless channel.Name == "SMS" -%} {{ channel.Name | Downcase }}. {% else -%} {{ channel.Name }}. {% endunless -%}</span>
                    {% elsif channelsSize > 0 -%}
                        <input aria-label="channelKey" type="checkbox" name="channelKey" value="{{ channel.Key }}" checked />
                        <span class="statementLabel-ui" >{{ channel.Name }}</span>
                    {% endif -%}
                {% else -%}
                    {% if channelsSize == 1 -%}
                        <input  aria-label="channelKey" type="checkbox" name="channelKey" value="{{ channel.Key }}" />
                        <span class="label-ui" style="margin-left: 0 !important;">{% if tos.Required-%}<span class="required-ui">* </span>{% endif -%} {{tos.Text | Remove: '.' }} {{translations.Consents_InTheFormOf}} {% unless channel.Name == "SMS" -%} {{ channel.Name | Downcase }}. {% else -%} {{ channel.Name }}. {% endunless -%}</span>
                    {% elsif channelsSize > 0 -%}
                        <input  aria-label="channelKey" type="checkbox" name="channelKey" value="{{ channel.Key }}" />
                        <span class="label-ui">{{ channel.Name }}</span>
                    {% endif -%}
                {% endif -%}
                </label>
            {% endfor -%}
        </div>
    {% endfor -%}
    <small class="mb10-ui block-ui"><span class="required-ui">*</span> {{ translations.RequiredFields }}</small>
    <div class="order-validation-lq hidden-js message-bar-ui warning-bar-ui">{{translations.ConfirmAll}}</div>
        {% if customer.CreditLimit and creditStatus == 2 -%}
            <div class="order-validation-lq credit-limit-error-ui message-bar-ui error-bar-ui">{{ translations.CreditLimitStatus_2 }}</div>
        {% elsif customer.CreditLimit and creditStatus == 1 -%}
            <div class="order-validation-lq credit-limit-error-ui message-bar-ui warning-bar-ui">{{ translations.CreditLimitStatus_1 }}</div>
        {% endif -%}
        {% if usr.Authenticated or notAuthWithData -%}
            <div class="summary-with-btn-js summary-with-btn-ui" {% if settings.cartVersion == "comfortable" -%} style="display: none;" {% endif -%}>
            <div class="clear-after-ui box-ui">
                <div class="f-left-ui half-ui total-amount-label-ui"><strong>{{ translations.AmountDue }}</strong></div>
                <div class="f-right-ui half-ui total-amount-ui">{{ order.OrderTotalValue | ToPrice }} {{ order.CurrencyExt }}</div>
            </div>
            <button aria-label="order-recalculate" class="order-button-ui parent-container-reload-js {% if creditStatus != 2 -%} add-order-lq {% endif -%}" {% if creditStatus == 2 -%}disabled{% endif -%}>
                {{translations.PayAndOrder}}
            </button>
    </div>
{% endif -%}
</div>

Cancel

Akcja ta odpowiada za anulowanie zamówienia. Parametry:

id (int, pole obowiązkowe),
hash (string).

<div class="form-js form-into-data-lq" data-success="{{ translations.OrderCanceled }}">
    <input type="hidden" name="__action" value="Order/Cancel" />
    <input type="hidden" name="id" value="{{ order.Id }}" />
    <input type="hidden" name="hash" value="{{ order.Hash }}" />
    <button class="btn-gray-ui parent-container-reload-js cancel-order-lq">
        {{ translations.OrderCancel }}
    </button>
</div>

AttachmentAdd

Akcja odpowiada za dodawanie załącznika do zamówienia. Parametry:

file - pole do wczytywania plików.

function processFilesList(fileInput, fileList) {
    var file = fileList.pop();
    if (file) {
        var fd = new FormData();
        fd.append('__csrf',__CSRF);
        fd.append('__action','Order/AttachmentAdd');
        fd.append('__template','order/attachements.html');
        fd.append('file', file);
        $.ajax({data: fd, processData: false, contentType: false, type: 'POST',
            success: function(data){
                fileInput.val('');
                if(data.action.Result){
                    $('.attachements-lq').html(data.template);
                } else {
                    if(window.AttachementsNotAdded == undefined){
                        window.AttachementsNotAdded = [];
                    }
                    var attachement = '<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+data.action.Message+'</div>';
                    window.AttachementsNotAdded.push(attachement);
                }
                processFilesList(fileInput, fileList);
            }
        });

AttachmentDelete

Akcja odpowiada za usuwanie załącznika do zamówienia. Parametry:

id (guid, pole obowiązkowe).

function removeAttachementInOrder(e) {
    $.post('', {__csrf: __CSRF, __action: 'Order/AttachmentDelete', id: $(e.currentTarget).data('id')}, function(result) {
        $(e.currentTarget).parents('.file-container-lq').remove();
    });
};

AttributesSet

Akcja odpowiada za ustawienie atrybutów zamówienia. Parametry:

attribute (string[]) - może zotać przekazane wielokrotnie w ramach jednej akcji (string), maksymalna długość to 1000 znaków.

{% assign headerSize = config.Orders.AttributesCart.Header | Size -%}
    {% if headerSize > 0 and settings.cartVersion != "comfortable" -%}
        <div class="form-js header-attributes-set-form-js">
            <input  aria-label="action-order-attributesset" type="hidden" name="__action" value="Order/AttributesSet" />
            <div class="box-ui mt20-ui clear-after-ui address-ui">
                {% for headerAttr in config.Orders.AttributesCart.Header -%}
                    <div class="header-attribute-cart-ui">
                        <label>
                            {{ headerAttr.Name }}
                            {% if headerAttr.Required -%}
                                <span class="required-ui">*</span>
                            {% endif -%}
                        </label>
                        {% case headerAttr.Format -%}
                            {% when 1 -%}
                                <input  aria-label="attribute" type="text" name="attribute" value="" maxlength="50" {% if headerAttr.Required -%} required {% endif -%} {% if positionAttr.Editable -%} data-editable="true" {% endif -%} />
                            {% when 2 -%}
                                <input  aria-label="attribute" type="number" name="attribute" value="" maxlength="50" {% if headerAttr.Required -%} required {% endif -%} {% if positionAttr.Editable -%} data-editable="true" {% endif -%} />
                            {% when 3 -%}
                                <span class="select-background-ui">
                                    <select aria-label="attribute" name="attribute" {% if positionAttr.Editable -%} data-editable="true" {% endif -%}>
                                        {% for val in headerAttr.Values %}
                                            <option {% if val.ValueId == headerAttr.Values[0].ValueId -%} selected="selected" {% endif -%} value="{{ val.ValueId }}">{{ val.Value }}</option>
                                        {% endfor -%}
                                    </select>
                                </span>
                                <i class="ti-angle-down select-arrow-ui"></i>
                            {% when 4 -%}
                                <input aria-label="attribute" type="date" name="attribute" value="" placeholder="rrrr-mm-dd" {% if headerAttr.Required -%} required {% endif -%} {% if positionAttr.Editable -%} data-editable="true" {% endif -%} />
                        {% endcase -%}
                        <div class="error-ui validation-info-js validation-required-js hidden-js">
                            {{ translations.FillAttributeValue }}
                        </div>
                    </div>
                {% endfor -%}
            </div>
        </div>
    {% endif -%}

ComplaintAdd

Akcja odpowiada za dodanie reklamacji. Parametry:

orderId (int, pole obowiązkowe),
no (int, pole obowiązkowe),
quantity (decimal) - może przyjąć wartość od 0.01 do 99999,
message (string) - maksymalna długość to 1000 znaków,
accountNumber (string) - maksymalna długość to 50 znaków,
defectId (int lub null),
requestId (int lub null),
defectDate (string, pole obowiązkowe, wyrażenie regularne),
files - pole do wczytywania plików.

<form method="POST">
    <input type="text" name="quantity" min="1" placeholder="{{translations.Com_Quantity}}" />
    {% if config.Complaints.Defects <> null -%}
        {% assign defectsSize = config.Complaints.Defects | Size -%}
        <select name="defectId">
        {% if defectsSize > 1 -%}
            <option value="">{% if defectsSize > 1 -%}* {% endif -%} {{translations.Prf_Defect}}</option>
        {% endif -%}
        {% for def in config.Complaints.Defects -%}
            <option value="{{def.Id}}">{{def.Name}}</option>
        {% endfor -%}
        </select>
    {% endif -%}
    <input type="date" name="defectDate" placeholder="RRRR-MM-DD" data-placeholder="year-month-day" value="{{config.Now | Date: "yyyy-MM-dd"}}" max="{{config.Now | Date: "yyyy-MM-dd"}}" min="{{order.Date | Date: "yyyy-MM-dd"}}"/>
    <textarea name="message" placeholder="{{translations.Com_AditionalInfo}}"></textarea>
    {% if config.Complaints.Requests <> null -%}{% assign requestsSize = config.Complaints.Requests | Size -%}
        <select name="requestId">
       {% if requestsSize > 1 -%}
           <option value="">{% if requestsSize > 1 -%}* {% endif %} {{translations.Prf_ComplainRequest}}</option>
       {% endif %}
       {% for req in config.Complaints.Requests -%}
           <option value="{{req.Id}}">{{req.Name}}</option>
       {% endfor -%}
       </select>
    {% endif -%}
    <input type="text" name="accountNumber" placeholder="{{translations.Crt_BankAccountNumber}}" />send
    <button>{{translations.Prf_SubmitAComplaint}}</button>
    <input type="hidden" name="no" value="{{ product.No }}"/>
    <input type="hidden" name="orderId" value="{{ order.Id }}"/>
    <input type="hidden" name="__action" value="Order/ComplaintAdd" />
    <input type="hidden" name="__CSRF" value="{{page.CSRF}}"/>
</form>

BuyerChange

Akcja odpowiedzialna za zmianę nabywcy. Parametry:

buyer (bool).

{% if order.Customer.Buyer == null -%}
    <script>
        $.post('', {__action: 'Order/BuyerChange', buyer: true, __csrf: __CSRF});
    </script>
{% endif -%}

BuyerUpdate

Akcja odpowiedzialna za aktualizację danych nabywcy. Parametry:

name (string, pole obowiązkowe) - maksymalna długość to 64 znaki,
name2 (string) - maksymalna długość to 64 znaki,
name3 (string) - maksymalna długość to 250 znaków,
countryCode (string, pole obowiązkowe) - maksymalna długość to 2 znaki,
zipCode (string) - maksymalna długość to 20 znaków,
city (string) - maksymalna długość to 50 znaków,
street (string) - maksymalna długość to 150 znaków,
streetNo (string) - maksymalna długość to 20 znaków,
unitNo (string) - maksymalna długość to 20 znaków,
state (string) - maksymalna długość to 50 znaków,
phoneNo (string) - maksymalna długość to 50 znaków,
vateu (string) - maksymalna długość to 2 znaki,
tin (string),
ssn (string) - maksymalna długość to 20 znaków,
invoice (bool),
company (bool).

<form method="POST">  
   <input type="text" name="name" value="{% if customerDeliveryAddress.Name != "" -%}{{ customerDeliveryAddress.Name | H }}{% else -%}{{ customerAddress.Name | H }}{% endif -%}" required/> 
   <input type="text" name="street" value="{% if customerDeliveryAddress.Street != "" -%}{{ customerDeliveryAddress.Street | H }}{% else -%}{{ customerAddress.Street | H }}{% endif -%}" required/> 
   <input type="text" name="streetNo" value="{% if customerDeliveryAddress.StreetNo != "" -%}{{ customerDeliveryAddress.StreetNo }}{% else -%}{{ customerAddress.StreetNo }}{% endif -%}" required/> 
   <input type="text" name="countryCode" value="{% if customerDeliveryAddress.CountryCode != "" -%}{{ customerDeliveryAddress.CountryCode }}{% else -%}{{ customerAddress.CountryCode }}{% endif -%}" required/>
   <input type="text" name="unitNo" value="{% if customerDeliveryAddress.UnitNo != "" -%}{{ customerDeliveryAddress.UnitNo }}{% else -%}{{ customerAddress.UnitNo }}{% endif -%}"/> 
   <input type="text" name="zipCode" value="{% if customerDeliveryAddress.ZipCode != "" -%}{{ customerDeliveryAddress.ZipCode }}{% else -%}{{ customerAddress.ZipCode }}{% endif -%}" required/> 
   <input type="text" name="city" value="{% if customerDeliveryAddress.City != "" -%}{{ customerDeliveryAddress.City | H }}{% else -%}{{ customerAddress.City | H }}{% endif -%}" required/> 
   <input type="hidden" name="__csrf" value="{{ page.CSRF }}" /> 
   <input type="hidden" name="__action" value="Order/BuyerUpdate" /> 
</form>

ComplaintCancel

Akcja ta odpowiada za anulowanie reklamacji. Parametry:

complaintId (int, pole obowiązkowe).

<div class="form-js form-into-data-lq">
	<input type="hidden" name="__action" value="Order/ComplaintCancel" />
	<input type="hidden" name="complaintId" value="{{ complaint.ComplaintId }}" />
	<button class="btn-gray-ui parent-container-reload-js cancel-complaint-lq">
   		{{ cancel }}
	</button>
</div>

Copy

Akcja odpowiadająca za kopiowanie zamówienia. Parametry:

orderId (int, pole obowiązkowe),
hash (string).

async function copyToCart(trigger, changeToInquiry){
    document.getElementsByClassName('during-ajax-modal-js')[0].classList.remove('hidden-js');
    if(trigger.classList == undefined){
        var trigger = this;
    }
    const id = trigger.dataset.id;
    const hash = trigger.dataset.hash;
    const data = {
        orderId: id,
        hash: hash,
        __action: 'Order/Copy'
    };
    const result = await js.post(data);

CouponAdd

Akcja pozwalająca na dodanie kuponu. Parametry:

code (string, pole obowiązkowe) - maksymalna długość to 40 znaków,
email (string, wyrażenie regularne) - maksymalna długość to 192 znaki.

<div class="form-js form-into-data-lq block-ui clear-after-ui {% if settings.cartVersion == 'comfortable' -%} comfortable-coupon-container-ui {% endif -%}">
    <input aria-label="action-order-couponadd" type="hidden" name="__action" value="Order/CouponAdd" />
    <div class="inputs-wrapper-ui clear-after-ui f-left-ui">
        <input aria-label="email" type="hidden" name="email" value="{{ customer.Email }}" />
        <div class="f-left-ui input-wrapper-ui full-ui">
            <span class="f-left-ui">{{ translations.DiscountCode }}</span>
            <input aria-label="code" type="text" class="f-left-ui no-email-ui" name="code" maxlength="50"/>
            <div class="error-ui validation-info-js validation-required-js hidden-js">{{ translations.FillDiscountCode }}</div>
        </div>
    </div>
    <button aria-label="add-coupon" class="add-coupon-lq enter-key-trigger-lq parent-container-reload-js add-coupon-ui f-right-ui">{{ translations.Calculate }}</button>
</div>

CouponDelete

Akcja umożliwiająca usunięcie kuponu.

<div class="form" id="coupon-delete">
    <button aria-label="deleteCouponButton" type="submit" class="coupon-delete-post"><span class="glyphicon glyphicon-remove"></span> {{translations.Crt_CouponDelete}}</button>
    <p>{{cart.Coupon}}</p>
    <input aria-label="action" type="hidden" name="__action" value="Order/CouponDelete"/>
</div>

DeliveryAddressUpdate

Akcja odpowiada za uaktualnienie adresu dostawy. Parametry:

email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
name (string, pole obowiązkowe) - maksymalna długość to 64 znaki,
name2 (string) - maksymalna długość to 64 znaki,
name3 (string) - maksymalna długość to 250 znaków,
zipCode (string) - maksymalna długość to 20 znaków,
city (string) - maksymalna długość to 50 znaków,
street (string) - maksymalna długość to 150 znaków,
streetNo (string) - maksymalna długość to 20 znaków,
unitNo (string) - maksymalna długość to 20 znaków,
state (string) - maksymalna długość to 50 znaków,
phoneNo (string) - maksymalna długość to 50 znaków.

<form method="POST">
    <input type="email" name="email" value="{% if cart.Customer.Email != "" -%}{{ cart.Customer.Email }}{% else -%}{{ customer.Email }}{% endif -%}" required/>
    <input type="text" name="name" value="{% if customerDeliveryAddress.Name != "" -%}{{ customerDeliveryAddress.Name | H }}{% else -%}{{ customerAddress.Name | H }}{% endif -%}" required/>
    <input type="text" name="name2" value="{% if customerDeliveryAddress.Name != "" -%}{{ customerDeliveryAddress.Name2 | H }}{% else -%}{{ customerAddress.Name2 | H }}{% endif -%}"/>
    <input type="text" name="name3" value="{% if customerDeliveryAddress.Name != "" -%}{{ customerDeliveryAddress.Name3 | H }}{% else -%}{{ customerAddress.Name3 | H }}{% endif -%}"/>
    <input type="text" name="street" value="{% if customerDeliveryAddress.Street != "" -%}{{ customerDeliveryAddress.Street | H }}{% else -%}{{ customerAddress.Street | H }}{% endif -%}" required/>
    <input type="text" name="streetNo" value="{% if customerDeliveryAddress.StreetNo != "" -%}{{ customerDeliveryAddress.StreetNo }}{% else -%}{{ customerAddress.StreetNo }}{% endif -%}" required/>
    <input type="text" name="unitNo" value="{% if customerDeliveryAddress.UnitNo != "" -%}{{ customerDeliveryAddress.UnitNo }}{% else -%}{{ customerAddress.UnitNo }}{% endif -%}"/>
    <input type="text" name="zipCode" value="{% if customerDeliveryAddress.ZipCode != "" -%}{{ customerDeliveryAddress.ZipCode }}{% else -%}{{ customerAddress.ZipCode }}{% endif -%}" required/>
    <input type="text" name="city" value="{% if customerDeliveryAddress.City != "" -%}{{ customerDeliveryAddress.City | H }}{% else -%}{{ customerAddress.City | H }}{% endif -%}" required/>
    <input type="text" name="countryCode" value="{{ config.Countries[customerDeliveryAddress.Country].Name }}" readonly/>
    <input type="tel" name="phoneNo" value="{% if customerDeliveryAddress.PhoneNo != "" -%}{{ customerDeliveryAddress.PhoneNo }}{% else -%}{{ customerAddress.PhoneNo }}{% endif -%}" {% if cart.SelectedDelivery.PhoneRequired -%} required {% endif -%}/>
    <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
    <input type="hidden" name="__action" value="Order/DeliveryAddressUpdate" />
</form>

DeliveryChange

Akcja odpowiedzialna za zmianę metody dostawy towaru. Parametry:

id (int, pole obowiązkowe),
channel (string).

<div class="form-js no-message-lq delivery-form-js">
    <input aria-label="action-order-deliverychange" type="hidden" name="__action" value="Order/DeliveryChange" />
    <input aria-label="id" type="hidden" name="id" data-type="{{ order.SelectedDelivery.CollectionPointTypeId }}" value="{{order.SelectedDeliveryPaymentId}}" />
</div>

DeliveryCollectionPointChange

Pozwala na wybranie miejsca odbioru paczki (np. przy korzystaniu z paczkomatów). Parametry:

id (int, pole obowiązkowe),
data (string).

function chooseCollectionPointOnList(e) {
    var id = $(e.currentTarget).data('id');
    $.post(null, {__csrf: __CSRF, __action: 'order/DeliveryCollectionPointChange', id: id});
    window.choosenCollectionPointId = true;
    window.pointChoosen = true;
    $('.choose-collection-point-lq').removeClass('grey-ui');
    $(e.currentTarget).addClass('grey-ui');
    app.replaceTemplate(e);
}

DeliveryCountryChange

Akcja odpowiedzialna za zmianę kraju dostawy. Parametry:

countryCode (string).

<div class="{% if settings.cartVersion != 'comfortable' -%} f-left-ui golden-big-ui {% else -%} comfortable-country-ui {% endif -%} country-ui">
    <div class="form-js no-message-lq half-ui-with-space-ui choose-country-in-cart-ui">
    {% if settings.cartVersion == "comfortable" -%}
        <label class="label-ui">{{ translations.DelivCountry }}</label>
        <div>
    {% else -%}
        <span>{{ translations.DelivCountryInfo }}:</span>
        <span>
    {% endif -%}
    {% assign countriesSize = config.Countries | Size -%}
    {% if countriesSize > 1 -%}
        <span class="select-background-ui">
        <select  aria-label="change-delivery-country" class="change-delivery-country-lq parent-container-reload-js" name="countryCode">
            {% if order.Customer.DeliveryAddress.Country != '' -%}
                {% assign countryCode = order.Customer.DeliveryAddress.Country -%}
            {% elseif customer.Address.Country != '' -%}
                {% assign countryCode = customer.Address.Country -%}
            {% else -%}
                {% assign countryCode = config.DefaultCountry -%}
            {% endif -%}

            {% for country in config.Countries -%}
                <option class="parent-container-reload-js" {% if country.ISOCode == countryCode -%} selected="selected" {% endif -%} value="{{ country.ISOCode }}">
                    {{ config.Countries[country.ISOCode].Name }}
                </option>
            {% endfor -%}
        </select>
        </span>
        <i class="ti-angle-down select-arrow-ui"></i>
    {% else -%}
        {{ config.Countries[0].Name }}
        <input type="hidden" name="countryCode" value="{{config.Countries[0].ISOCode}}">
    {% endif -%}
    {% if settings.cartVersion == "comfortable" -%}
        </div>
    {% else -%}
        </span>
    {% endif -%}
    <input  aria-label="action-order-deliverycountrychange" type="hidden" name="__action" value="Order/DeliveryCountryChange" />
    </div>
</div>

DeliveryDateChange

Akcja odpowiada za zmianę terminu dostawy. Parametry:

date (string, wyrażenie regularne).

<label class="mt20-ui labeui">{{ translations.ScheduledDeliveryDate }}</label>
<div class="form-lq delivery-date-change-form-lq">
  <input type="hidden" name="__action" value="Order/DeliveryDateChange" />
  <input type="{{type}}" name="date" min="{{minDate}}" max="{{maxDate}}" value="{{dateValue}}" />
 </div>
{% elseif order.SelectedDelivery.DateText != "" -%}
<label class="mt20ui labelui">{{ translations.ScheduledDeliveryDate }}</label>
    {{ order.SelectedDelivery.DateText }}
{% endif -%}

EmailSet

Akcja odpowiada za ustawienie adresu email. Parametry:

email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki.

<form method="POST">
    <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
    <input type="hidden" name="__action" value="Order/EmailSet" />
    <input id="email" type="text" name="email" />
    <button>Zatwierdź</button>
</form>

FastDeliveryCheck

Akcja ta odpowiada za sprawdzenie możliwości szybszej dostawy kurierskiej. Parametry:

zipCode (string) - maksymalna długość to 50 znaków.

<div class="info-ui">
    <div class="mb30-ui">{{ translations.DeligooTextInCart }}</div>
    <div class="mb30-ui form-js form-js check-deligoo-availability-form-js">
        <label>{{ translations.ZipCode }} <span class="required-ui">*</span></label>
        <input aria-label="zipCode" type="text" name="zipCode" value="{{ order.Customer.DeliveryAddress.ZipCode }}" required maxlength="20" {% if order.Customer.DeliveryAddress.ZipCode != '' -%} readonly {% endif -%}/>
        <input aria-label="countryCode" type="hidden" name="countryCode" value="" data-zip-regex="^\d{2}-\d{3}$"/>
        <input aria-label="action" type="hidden" name="__action" value="Order/FastDeliveryCheck"/>
        <button class="check-deligoo-availability-ui check-deligoo-availability-js {% if deligooSelected and order.Customer.DeliveryAddress.ZipCode != '' -%} check-deligoo-when-enter-cart-js {% endif -%} {% if order.Customer.DeliveryAddress.ZipCode != '' -%} hidden-js {% endif -%}">{{ translations.Check }}</button>
        <i class="va-mid-ui ti-check deligoo-success-icon-ui deligoo-success-icon-js hidden-js"></i>
        <i class="va-mid-ui ti-close deligoo-error-icon-ui deligoo-error-icon-js hidden-js"></i>
        <div class="validation-info-js validation-required-js hidden-js register-login-validation-error-text-ui small-input-error-ui small-input-error-ui">
            {{ translations.FillZipCode }}
        </div>
        <div class="validation-info-js validation-zip-code-lq hidden-js register-login-validation-error-text-ui small-input-error-ui">
            {{ translations.FillProperZipCode }} XX-XXX
        </div>
    </div>
    <div class="deligoo-success-js hidden-js">{{ translations.DeligooSuccessInCart }}</div>
    <div class="deligoo-error-js hidden-js">{{ translations.DeligooErrorInCart }}</div>
</div>

InvoiceAddressUpdate

Akcja ta odpowiada za zmianę danych faktury. Parametry:

name (string, pole obowiązkowe) - maksymalna długość to 64 znaki,
name2 (string) - maksymalna długość to 64 znaki,
name3 (string) - maksymalna długość to 250 znaków,
countryCode (string, pole obowiązkowe) - maksymalna długość to 2 znaki,
zipCode (string) - maksymalna długość to 20 znaków,
city (string) - maksymalna długość to 50 znaków,
street (string) - maksymalna długość to 150 znaków,
streetNo (string) - maksymalna długość to 20 znaków,
unitNo (string) - maksymalna długość to 20 znaków,
state (string) - maksymalna długość to 50 znaków,
phoneNo (string) - maksymalna długość to 50 znaków,
tin (string),
ssn (string) - maksymalna długość to 20 znaków,
invoice (bool),
company (bool),
vateu (string) - występuje tylko w wersji Enterprise, maksymalna długość to 2 znaki.

<form id="invoice-address-data">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Order/InvoiceAddressUpdate" />
<input type="hidden" name="company-or-not" value="{% if customer.Company -%}company{% endif -%}" />
<input type="checkbox" name="invoice" {% if cart.Customer.Invoice == true -%}checked{% endif -%}/>
<input id="company" type="checkbox" name="company" {% if cart.Customer.Company -%} checked {% endif -%} />
<input type="hidden" name="company-change" />
<input type="text" name="tin" value="{{ cart.Customer.TIN }}" {% if cart.Customer.Company == false -%} class="hidden" required {% endif -%}/>
<input type="text" name="name" value="{{ cart.Customer.InvoiceAddress.Name | H }}" required/>
<input type="text" name="street" value="{{ cart.Customer.InvoiceAddress.Street | H }}" required/>
<input type="text" name="streetNo" value="{{ cart.Customer.InvoiceAddress.StreetNo }}" required/>
<input type="text" name="unitNo" value="{{ cart.Customer.InvoiceAddress.UnitNo }}"/>
<input type="text" name="zipCode" value="{{ cart.Customer.InvoiceAddress.ZipCode }}" required/>
<input type="text" name="city" value="{{ cart.Customer.InvoiceAddress.City | H }}" required/>
<input type="hidden" name="countryCode" value="{{ country.ISOCode }}" required/>
<select id="select-country">
{% for country in config.Countries -%}
{% if country.ISOCode == customerDeliveryAddress.Country -%}
<option selected="selected" name="countryCode" value="{{ country.ISOCode }}">{{ config.Countries[country.ISOCode].Name }}</option>
{% else -%}
<option name="countryCode" value="{{ country.ISOCode }}">{{ config.Countries[country.ISOCode].Name }}
</option>
{% endif -%}
{% endfor -%}
</select>
<button>Zatwierdź</button>
</form>

InvoiceChange

Akcja odpowiada za wybranie opcji wystawienia faktury. Parametry:

invoice (bool).

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Order/InvoiceChange" />
<input type="checkbox" name="invoice"/>
</form>

NoteAdd

Akcja odpowiada za dodanie wiadomości do zamówienia. Parametry:

note (string) - maksymalna długość to 500 znaków.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Order/NoteAdd" />
<textarea name="note"></textarea>
</form>

PaymentMake

Akcja odpowiada za dokonywanie płatności. Parametry:

id (int, pole obowiązkowe),
hash (string, pole obowiązkowe).

<form method="POST">
    <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
    <input type="hidden" name="__action" value="Order/PaymentMake" />
    <input type="hidden" name="id" value="{{ order.Id }}" />
    <input type="hidden" name="hash" value="{{ customer-profile.Order.Hash }}" />
</form>

PointsUse

Akcja odpowiada za płacenie punktami.

<div class="flex-ui vertically-centered-ui">
   <p class="f-left-ui">{{translations.WantToUsePoints}}</p>
 <div class="form-lq no-message-lq block-ui">
<input type="hidden" name="__action" value="Order/PointsUse" />
<button class="post-lq parent-container-reload-lq f-right-ui wider-button-ui"><i class="ti-cup"></i> {{ translations.PayViaLoyaltyPoints }}</button>
 </div>
 </div>

RestorePayment

Akcja odpowiada za możliwość opłacenia zamówienia gdy wcześniej się to nie udało (np. w wyniku awarii internetu). Parametry:

id (int, pole obowiązkowe),
hash (string).

<div class="form-lq form-into-data-lq">
    <input type="hidden" name="__action" value="Order/RestorePayment" />
    <input type="hidden" name="id" value="{{ order.Id }}" />
    <input type="hidden" name="hash" value="{{ order.Hash }}" />
    <button class="post-lq parent-container-reload-lq" data-url="{{ page.Url }}?{{ orderString | H }}={{ order.Id }}{% if tab -%}&tab={{tab}}{% endif -%}">
        {{ translations.Pay }}
    </button>
</div>

ReturnAdd

Akcja odpowiedzialna za zwrot. Parametry:

orderID (int, pole obowiązkowe),
no (int, pole obowiązkowe),
quantity (decimal) - może przyjąć wartość od 0.01 do 99999,
message (string) - maksymalna długość to 1000 znaków,
accountNumber (string) - maksymalna długość to 50 znaków,
returnId (int lub null),
files - pole do wczytywania plików.

<form method="POST">
<input type="text" name="quantity" min="1" placeholder="{{translations.Com_Quantity}}"/> <span class="unit"></span>
{% assign returnTyppes = config.Complaints.Returns | Size -%}
{% if returnTyppes > 1 -%}
<select name="returnId" placeholder="{{ translations.Prf_ChooseReturn }}">
<option value="">* {{ translations.Prf_ChooseReturn }}</option>
{% for ret in config.Complaints.Returns -%}
<option value="{{ret.Id}}">{{ret.Name}}</option>
{% endfor -%}
</select>
<span class="cs-validation" data-field="returnId" data-validator="required">{{translations.Com_RequiredField}}</span>
{% endif -%}
<textarea name="message" placeholder="{{translations.Com_AditionalInfo}}"></textarea>
<span data-field="message" data-validator="maxLength" data-value="1000">{{translations.Com_MaxLenghtExceeded}}: 1000</span>
<input type="text" name="accountNumber" placeholder="{{translations.Crt_BankAccountNumber}}" />
<span data-field="accountNumber" data-validator="maxLength" data-value="50">{{translations.Com_MaxLenghtExceeded}}: 50</span>
<button>Zatwierdź</button>
<input type="hidden" name="no" value=""/>
<input type="hidden" name="orderId" value=""/>
<input type="hidden" name="__action" value="Order/ReturnAdd" />
<input type="hidden" name="__CSRF" value="{{page.CSRF}}"/>
</form>

StatusGet

Akcja odpowiedzialna za pobranie statusu zamówienia. Parametry:

id (int, pole obowiązkowe),
email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki.

<form>
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Order/StatusGet" />
<input type="hidden" name="id" value="{{ customer-profile.Order.Id }}" />
<input type="email" name="email" placeholder="" required />
<button>Zatwierdź</button>
</form>

TinUpdate

Akcja odpowiedzialna za aktualizację numeru TIN. Parametry:

vateu (string) - maksymalna długość to 2 znaki,
tin (string),
ssn (string) - maksymalna długość to 20 znaków.

<form> 
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Order/TinUpdate" /> 
<input type="email" name="tin" value="{{ config.Shop.TIN }}"/>
<button>Zatwierdź</button> 
</form>

StepNext

Akcja odpowiedzialna za kolejny krok w przypadku składania zamówienia.

<div class="no-message-lq">
	<input type="hidden" name="__action" value="Order/StepNext" />
    <button class="post-lq parent-container-reload-lq">
        <i class="fa fa-angle-right"></i>
    </button>
</div>

StepPrev

Akcja odpowiedzialna za powrót do poprzedniego kroku podczas składania zamówienia.

<div class="no-message-lq">
	<input type="hidden" name="__action" value="Order/StepPrev" />
    <button class="post-lq parent-container-reload-lq">
        <i class="fa fa-angle-left"></i>
    </button>
</div>

Subscribe

Kod odpowiadający za subskrypcję do newslettera. Parametry:

email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
tos (int[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (int),
channelKey (string[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (string).

<form id="NewsletterSubscribeForm" action="{{ page.Url }}{{ page.QueryString | H}}" method="post" novalidate>
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Newsletter/Subscribe" />
<input type="email" name="email" value="{{ customer.Email }}"
{% if customer.Email == blank -%} placeholder="* {{ translations.Com_EmailAddress }}" {% endif -%} required />
<button title="{{ translations.Nls_NewsletterSubscribeTooltip }}">+</button>
<div class="switch ">
{% for tos in config.TOS.Consents.Newsletter -%}
{% if tos.Statement -%}
<label>{{tos.Text}}</label>
{% else -%}
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
{% endif -%}
{% endfor -%}
</div>
<span class="legend">* {{ translations.Reg_RequiredFieldsExp }} </span>
</form>

{% for channel in tos.Channels -%}
<label class="checkbox-ui channel-ui {% if onlyEmail == false -%} channel-lq {% endif -%} {% if tos.Statement == false -%} disabled-channel-lq {% endif -%}">
{% if onlyEmail == false -%}
<input type="checkbox" name="channelKey" value="{{ channel.Key }}" {% if tos.Statement == false -%} disabled {% endif -%} />
{% else -%}
<input type="hidden" name="channelKey" value="{{ channel.Key }}" checked />
<input type="checkbox" checked disabled />
{% endif -%}
<span class="label-ui">{{ channel.Name }}</span></label>
{% endfor -%}

Unsubscribe

Kod odpowiedzialny za wypisanie się z subskrypcji mailowej.

<form id="NewsletterUnsubscribeForm" action="{{ page.Url }}{{ page.QueryString | H}}" method="post">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Newsletter/Unsubscribe" />
<input type="hidden" name="__template" value="customer/profile-account.html" />
<p>{{ customer.Email }}</p>
<button>Anuluj subskrypcję</button>
</form>

CollectionPointCities

Akcja odpowiada za pobranie miast, w których znajdują się punkty odbioru. Parametry:

country (string) - maksymalna długość to 2 znaki,
typeId (short),
all (bool),
stockLevels (bool).

     $.get('', {__csrf:__CSRF, __action:'Get/CollectionPointCities', stockLevels: true}, function(res){
            window.CitiesWithPOO = res.action.Object;
            $('.show-shops-infos-lq').html('');
            var size = window.CitiesWithPOO.length;
            for(i=0; i<size; i++){
                $('.show-shops-infos-lq').append(''+window.CitiesWithPOO[i]+'');
            }
        });

CollectionPoints

Akcja odpowiada za pobranie punktów odbioru towarów. Parametry:

country (string) - maksymalna długość to 2 znaki,
city (string) - maksymalna długość to 50 znaków,
typeId (short),
all (bool),
stockLevels (bool).

<div class="box-ui clear-after-ui"/>
{% if order.SelectedDelivery.CollectionPoint -%}
    <div class="f-left-ui cart-option-ui address-ui half-ui-with-space-ui collection-point-info-lq"/>
        <p/>
            {% if order.SelectedDelivery.CollectionPointTypeId == 2 -%}
                {{ translations.ChoosenInpostMachine }}
            {% else -%}
                {{ translations.ChoosenCollectionPoint }}
            {% endif -%}
        <p/>
        <div class="right-corner-ui">
            <button class="btn-pure-ui other-address-ui show-map-in-order-lq">
                  <i class="va-mid-ui ti-pencil"></i>
                  <span class="va-mid-ui line-height-1-ui"/<{{translations.Change}}</span>
             </button>
         </div >
         <div class="box-ui clear-after-ui">
  {% assign cp = order.SelectedDelivery.CollectionPoint -%}
            {% assign name = cp.Address | Split:',' | Last | Split:'(' | First -%}
            {% if name == '' or name == ' ' or name == '  ' -%}
                {% assign name = cp.Address | Split:'(' | Last | Remove:')' -%}
                {% capture name -%}{{name}}{% endcapture -%}
            {% endif -%}
<p><strong>{{name}}</strong></p>
<p>{{cp.Street}} {{cp.StreetNo}}{% if cp.UnitNo != null and cp.UnitNo != '' -%}/{{cp.UnitNo}}{% endif -%}</p>
<p>{{cp.ZipCode}} {{cp.City}}</p>
<p>{{cp.Country}}</p>

Groups

Pobiera grupy podrzędne dla wskazanej grupy. Akcja ta umożliwia zbudowanie dynamicznego menu czy breadcrumbs. Parametry:

groupId (int),
languageId (short),
levels (int).

<script type="text/javascript">
 (function () {
$(function () {
 $('nav.breadcrumbs>ol>li').hover( 
 function () { 
 var t = $(this), gId = ('' + t.data('id')).split(',')[1]; 
 if (gId && t.find('ol').length == 0) { 
 $.get(null, { __action: 'Get/Groups', groupId: gId, languageId: __lngId }, function (d) { 
 var obj = d.action.Object; 
 if (obj.length) { 
 var ol = $('<ol></ol>'); 
 t.append(ol); 
 $.each(obj, function (i, el) { 
 var a = $('<a></a>').attr('href', el.Url).text(el.Title); 
 ol.append(a); 
 a.wrap('<li></li>') 
});
}
});
}
 else t.find('ol').show(); 
},
 function () { 
 $(this).find('ol').hide(); 
}
);
});
 })(jQuery); 
</script>

Search

Akcja odpowiada za wyszukiwarkę. Parametry:

search (string, pole obowiązkowe) - maksymalna długość to 100 znaków.

<div class="form-js input-field-search-ui {{ noSearchOnMobile }} quick-search-form-js {% if settings.autofill == 'yes' %} autocomplete-form-js {% endif -%}">
    <input type="hidden" name="__action" aria-label="get/search-action" value="Get/Search" />
    <input placeholder="{{ translations.SearchArticleDots }}" aria-label="search" type="search" class="search-ui" value="" name="search" maxlength="100" {% if settings.autofill == 'yes' %} autocomplete="off" data-max-autocomplete-products="{{settings.autofillQuantity}}" {% endif -%} />
    <button class="ti-search search-btn-ui quick-search-js enter-key-trigger-lq" title="{{ translations.Search }}"></button>
</div>

SearchAdvanced

Akcja odpowiada za zaawansowaną wyszukiwarkę. Parametry:

search (string) - maksymalna długość to 100 znaków,
searchAll (string) - maksymalna długość to 100 znaków,
searchAny (string) - maksymalna długość to 100 znaków,
searchWild (string) - maksymalna długość to 100 znaków,
fields (int) - przyjmuje jedną z podanych niżej wartości:

1. - 2 – szukaj w opisie,
  - 4 – szukaj w atrybutach,
  - 8 – szukaj w kodzie produktu,
  - 128 – szukaj w symbolu,
  - 256 – szukaj w EAN,
  - 512 – szukaj w kodzie u producenta.

flags (int) - przyjmuje jedną z podanych niżej wartości:

1. - 1 – ma zdjęcie,
  - 2 – nowość,
  - 4 – promocja,
  - 8 – produkt z gazetki,
  - 16 – produkt polecany,
  - 32 – wyprzedaż,
  - 64 – super jakość,
  - 128 – super cena,
  - 256 – najlepiej oceniany,
  - 512 – rekomendacja sprzedawcy.
  - 1024 – towar za punkty.

priceFrom (long lub null),
priceTo (long lub null),
groupId (int lub null),
manufactureId (int lub null),
brandId (int lub null).

Wskazówka

Flagi można sumować — wartość wpisana do metody to suma wartości poszczególnych flag. Jeżeli suma będzie równa np. 14, wyszukanie nastąpi po flagach:

nowość,
promocja,
produkt z gazetki.

<div class='element-attached-lq search-inputs-ui'>
    <input aria-label="action-searchAdvanced" type='hidden' name='__action' value='Get/SearchAdvanced' />
	<input aria-label="search" type='search' name='search' class='attach-on-mobile-lq advanced-search-input-ui advanced-search-input-lq' placeholder="{{translations.SearchPhrase}}" maxlength="100" />
	<select aria-label="groupId" name="groupId" class='groupId'>
		<option value="" >{{translations.AllCategories}}</option>
        {% for category in page.GroupNodes -%}
            {% assign t = category.Id | Split:',' %}
			<option value="{{ t[1] }}">{{category.Name}}</option>
		{% endfor -%}
	</select>
	<i class="ti-angle-down select-arrow-ui"></i>	   
	<button aria-label="advanced-search-button" class="attach-on-mobile-lq post-lq advanced-search-button-ui">
		<span>{{ translations.Search }}</span>
		<i class="ti-search"></i>
	</button>
</div>
<div class="categories-adv-search-mobile-ui">{{ translations.SearchIn }}</div>
<div class='price-and-phrase-container'>
	<label class="checkbox-ui control-ui control-radio-ui">
        <input aria-label="tos-search" name="tos" type="radio" class='search-radio-ui search-radio-lq' value='search' checked>
            {{translations.WithSequence}}
        <span class="control-indicator-ui"></span>
    </label>
    <label class="checkbox-ui control-ui control-radio-ui">
        <input aria-label="tos-searchall" name="tos" type="radio" class='search-radio-ui search-radio-lq' value="searchAll">
            {{ translations.WithAllWords }}
		<span class="control-indicator-ui"></span>
    </label>
	<label class="checkbox-ui control-ui control-radio-ui" >
        <input aria-label="tos-searchany" name="tos" type="radio" class='search-radio-ui search-radio-lq' value="searchAny">
            {{ translations.WithAnyWord }}
		<span class="control-indicator-ui"></span>
    </label>
	<label class="checkbox-ui control-ui control-radio-ui">
        <input aria-label="tos-searchwild" name="tos" type="radio" class='search-radio-ui search-radio-lq' value="searchWild" >
            {{ translations.WithPartOfWord }}
     	<span class="control-indicator-ui"></span>
    </label>
</div>

SearchAutocomplete

Akcja odpowiada za wyświetlanie podpowiedzi 5 towarów w trakcie wyszukiwania. Parametry:

search (string, pole obowiązkowe) - maksymalna długość to 100 znaków.

function autocomplete(e) {
    let phrase = e.target.value.replace(/[*]*/gi, '');
    const maxAutocompleteProducts = e.target.dataset.maxAutocompleteProducts;
    if (phrase != '' && phrase.length > 1) {
        $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (res) {
            if($(window).width() > 1279){
                var right = 'right: 50px';
            } else if($(window).width() > 680){
                var right = '';
            } else {
                var right = 'right: 61px';
            }
            var loader = '';
            $('.quick-search-form-js.autocomplete-form-js').append(loader);
            var url = res.action.Redirect302;
            $.get(url, {__collection:'products.Products|page.BaseHref|currencyExt.Symbol|config.Products.ShowCode'}, function(res) {
                $('.autocomplete-js').remove();
                var list = res.collection['products.Products'];
                var showCode = res.collection['config.Products.ShowCode'];
                if (list.length > 0){
                    if (list.length > maxAutocompleteProducts) {
                        var size = maxAutocompleteProducts;
                    } else {
                        var size = list.length;
                    }
                    var baseHref = res.collection['page.BaseHref'];
                    var currency = res.collection['currencyExt.Symbol'];

SearchFilters

Akcja odpowiada za zastosowanie filtrów wyszukiwania. Parametry:

__skipParameter (string[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (string).

<input type="hidden" name="__action" value="Get/SearchFilters">

<button class="selected-filter-item-ui selected-filter-item-js" data-field="all">
    <i class="ti-close filter-delete-ui"></i>
    <span>{{translations.ResetFilters}}</span>
</button>

{% unless customer.HidePrices -%}
    {% if products.FilteringOptions.PriceFrom != null and products.FilteringOptions.PriceFrom > 0 -%}
        <button class="selected-filter-item-ui selected-filter-item-js" data-field="$minPrice">
            <i class="ti-close filter-delete-ui"></i>
            <span>{{translations.PriceFrom}} <strong>{{products.FilteringOptions.PriceFrom}}</strong> {{customer.CurrencyExt}}</span>
        </button>
        <input aria-label="minPrice" name="$minPrice" type="hidden" value="{{products.FilteringOptions.PriceFrom}}" maxlength="12">
    {% endif -%}

    {% if products.FilteringOptions.PriceTo != null -%}
        <button class="selected-filter-item-ui selected-filter-item-js" data-field="$maxPrice">
            <i class="ti-close filter-delete-ui"></i>
            <span>{{translations.PriceTo}} <strong>{{products.FilteringOptions.PriceTo}}</strong> {{customer.CurrencyExt}}</span>
        </button>
        <input aria-label="maxPrice" name="$maxPrice" type="hidden" value="{{products.FilteringOptions.PriceTo}}" maxlength="12">
    {% endif -%}
{% endunless -%}

ProductId

Akcja ta pozwala na zwrócenie wartości ID towaru znajdującego się w bazie e-Sklepu na podstawie ID towaru w bazie systemu ERP (GIDNumber). Może być przydatna podczas pisania własnych dodatków dla Comarch e-Sklep Sync. Parametry:

gidNumbers (int[], pole obowiązkowe).

<script type="text/javascript">
function getProductID(...gidNumbers) {
	jQuery.get(null, jQuery.param(
		{__action:'Get/ProductId', gidNumbers: gidNumbers}, true), 
		res => res.action.Object
	);
},
</script>

Uwaga

Akcja dostępna jest w sklepach B2B od wersji 2021.2.

AskForPrice

Akcja odpowiada za złożenie zapytania o cenę produktu. Parametry:

productId (int, pole obowiązkowe),
email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
phoneNo (string) - maksymalna długość to 20 znaków,
quantity (decimal, pole obowiązkowe) - może przyjąć wartość od 0.01 do 99999,
unitId (int lub null),
message (string) - maksymalna długość to 500 znaków.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Product/AskForPrice" />
<input type="hidden" name="productId" value="{{ product.Id }}" />
<input type="email" name="email" value="{{ customer.Email }}" required />
<input type="tel" name="phoneNo" value="{{ customer.Address.PhoneNo }}"/>
<input type="button" value="-" />
<input type="text" name="quantity" value="1" min="1" max="99999"/>
<input type="button" value="+" field='quantity'/>
{% if product.Units[1] -%}
{% for unit in product.Units -%}
<input type="button" value="{{ unit.Name }}"/>
<input type="hidden" value="{{ unit.Id }}" data-ratio="{{ unit.Ratio }}"/>
{% endfor -%}
{% endif -%}
{% for unit in product.Units -%}
{% if unit.Default == true or unit.Id == null -%}
<input name="unitId" type="hidden" value="{{ unit.Id }}"/>
{% endif -%}
{% endfor -%}
<textarea type="text" name="message" required></textarea>
<button>Zatwierdź</button>
</form>

CollectionPointsStockLevelsGet

Akcja odpowiada za pobieranie stanów magazynowych w salonach danego towaru. Parametry:

products (string, pole obowiązkowe),
country (string) - maksymalna długość to 2 znaki,
city (string) - maksymalna długość to 50 znaków,
pointTypeId (short),
pointId (int lub null).

function showShopsInfos(e) {
    var city = $(e.currentTarget).val();
    if(city != ''){
        var productType = $('[name=productType]').val();
        if (productType == 'batch'){
            var productId = $('[data-product-id]').data('product-id');
            var supplyId = $('[data-supply-id].active-lq').data('supply-id');
        } else if (productType == 'clip'){
            var productId = $('[data-supply-id].active-lq').data('supply-id');
        } else {
            var productId = $('[data-product-id]').data('product-id');
        }
        var downloaded = false;
        var index = '';
        if(window.productsWithPOO){
            var size = window.productsWithPOO.length;
            for(i=0; i<size; i++){
                index = i;
                if(window.productsWithPOO[i].name == city+'-'+productId+'-'+supplyId){
                    downloaded = true;
                    index = i;
                    break;
                }
            }
            if(!downloaded){
                window.productsWithPOO.push({name: city+'-'+productId+'-'+supplyId});
                index = index + 1;
            }
        } else {
            window.productsWithPOO = [];
            window.productsWithPOO.push({name: city+'-'+productId+'-'+supplyId});
            index = 0;
        }
        if(!downloaded){
            $('.during-ajax-modal-lq').removeClass('hidden-lq');
            $.post(null, {__csrf:__CSRF, __action:'Product/CollectionPointsStockLevelsGet',city:city ,products:JSON.stringify([{ProductId:productId, SupplyId:supplyId}])},function(res){
                if(window.productsWithPOO[index].name == city+'-'+productId+'-'+supplyId){
                    window.productsWithPOO[index].shops = res.action.Object;
                    appendShopsInfos(window.productsWithPOO[index].shops);
                    $('.during-ajax-modal-lq').addClass('hidden-lq');
                }
            });
        } else {
            appendShopsInfos(window.productsWithPOO[index].shops);
        }
    }
};

Wskazówka

Jeżeli chcesz pokazać w e-Sklepie ilości towaru w podziale na magazyny (e-Sklepu i hurtowni), to można je pobrać akcją 'Product/StockLevelsGet'.

ComparisonToolAdd

Akcja odpowiadająca za dodanie produktu do porównania z innym produktem. Parametry:

productId (int, pole obowiązkowe).

<form action="{{ page.Url }}{{ page.QueryString | H }}" method="post">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="Product/ComparisonToolAdd" />
<input type="hidden" name="productId" value="{{ productD.Id }}"/>
<input type="hidden" name="url" value="{{ page.BaseHref }}{{ config.DefinedPages.ProductComparisonTool.Url }}"/>
</form>

ComparisonToolDelete

Akcja odpowiada za usunięcie przedmiotu z porównania. Parametry:

productId (int, pole obowiązkowe).

{% for product in comparer.Products -%}
<form action="{{ page.Url }}{{ page.QueryString | H }}" method="post">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="Product/ComparisonToolDelete" />
<input type="hidden" name="productId" value="{{ product.Id }}"/>
<button>Zatwierdź</button>
</form>
{% endfor -%}

DeliveryCostGet

Akcja odpowiada za pobranie najniższej ceny dostawy dla danego towaru. Parametry:

id (int, pole obowiązkowe),
unitId (int lub null, pole obowiązkowe).

<p class="delivery hidden">{{translations.Com_DeliveryFrom}}: {{currency}}</p>
<script>
    Number.prototype.format = function(n, x, s, c) {
       var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
       num = this.toFixed(Math.max(0, ~~n));
       return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
    };
    Number.prototype.toPrice = function () {
       var decimalPlaces = __decimalPlacesPrice || 2;
       return this.format(decimalPlaces, 3, __decThoSep, __decSep);
    }
    $.get('', {__action:'Product/DeliveryCostGet', id: '{{_pd.Id}}' },function(res){
       if(res.action.Object.Cost > 0){
           $('.delivery').removeClass('hidden');
           $('.delivery-cost').text(res.action.Object.Cost.toPrice());
       }
    });
</script>

FastDeliveryCheck

Akcja odpowiadająca za sprawdzenie dostępności usługi szybkiej dostawy w podanej lokalizacji. Parametry:

products (string, pole obowiązkowe),
country (string) - maksymalna długość to 2 znaki,
zipCode (string) - maksymalna długość to 50 znaków.

<form action="{{ page.Url }}{{ page.QueryString | H }}" method="post">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input aria-label="action" type="hidden" name="__action" value="Product/FastDeliveryCheck" />
<input aria-label="zipCode" type="text" name="zipCode" value="{{ customer.Address.ZipCode }}" maxlength="50"/>
<input aria-label="country" type="hidden" name="country" value="" />
<input aria-label="products" type="hidden" name="products" value='[{"ProductId":{{ product.Id }}}]' />
<button>Zatwierdź</button>
</form>

NotifyAboutProductAvailability

Akcja odpowiadająca za złożenie zapytania odnośnie poinformowania użytkownika o ponownej dostępności towaru. Parametry:

productId (int, pole obowiązkowe),
name (string, pole obowiązkowe) - maksymalna długość to 50 znaków,
email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
phoneNo (string) - maksymalna długość to 20 znaków.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Product/NotifyAboutProductAvailability" />
<input type="hidden" name="productId" value="{{ product.Id }}" />
<input type="email" name="email" value="{{ customer.Email }}" required />
<input type="text" name="name" value="{{ customer.Address.Name }}" required />
<input type="tel" name="phoneNo" value="{{ customer.Address.PhoneNo }}"/>
<button>Zatwierdź</button>
</form>

ReviewAdd

Akcja odpowiadająca za dodanie opinii na temat produktu. Parametry:

rating (short, pole obowiązkowe) - może przyjąć wartość od 1 do 5,
comment (string, pole obowiązkowe) - maksymalna długość to 4000 znaków,
author (string, pole obowiązkowe) - maksymalna długość to 50 znaków,
productId (int, pole obowiązkowe),
orderHash (string).

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="Product/ReviewAdd" />
<input type="text" name="author" {% if customer.Authenticated == true -%}{% if customer.ReviewAuthor != "" -%} value="{{ customer.ReviewAuthor | H }}" {% else -%} value="{{ customer.Address.Name | H }}" {% endif -%}{% endif -%} required />
<textarea type="text" name="comment" required></textarea>
<input type="hidden" name="rating" value="5"/>
<input type="hidden" name="productId" value="{{ product.Id }}"/>
<input type="hidden" name="orderHash" value=""/>
<button>Zatwierdź</button>
</form>

StockLevelsGet

Akcja odpowiada za pobieranie stanów magazynowych z podziałem na magazyny (e-Sklepu i hurtowni). Parametry:

id (int lub int[], pole obowiązkowe).

const productsId = [13, 27, 31]; 
$.get(null, {__action:'Product/StockLevelsGet', id: productsId}, function(res) { 
      if(res.action.Object) { 
          console.log(res.action.Object); 
      } 
});

Dla powyższej akcji zostanie zwrócony ten sam obiekt Stock (jak np. na szczegółach towaru), ale z dwoma dodatkowymi właściwościami: > WarehouseId, > WarehouseName. Właściwości mogą być puste (null) - jeśli jest to stan z ERP, a nie z hurtowni.

WishListAdd

Akcja odpowiedzialna za dodanie produktu do listy życzeń. Parametry:

productId (int, pole obowiązkowe),
quantity (decimal) - może przyjąć wartość od 1 do 99999,
note (string) - maksymalna długość to 500 znaków.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="product/WishListAdd" />
<input type="hidden" name="productId" value="{{ product.Id }}" required />
<input type="text" name="quantity" value="1"/>
<input type="button" value="+" field="quantity"/>
<textarea name="note"></textarea>
<button>Zatwierdź</button>
</form>

WishListCheck

Akcja odpowiedzialna za sprawdzenie czy produkt należy do listy życzeń. Parametry:

products (int[]).

$.get(null, { __action: 'Product/WishListCheck', products: JSON.stringify([parseInt(productId)]) }, function (result) {
                if (result.action.Object != '') {
                    //Product in wishlist
                    if (!($('.productDetails-buttons--wishList').hasClass('wishListPopup-js'))) {
                        $('input[aria-label="wishListAdd"]').val('Product/WishListDelete');
                        $('.productDetails-buttons--wishList__removeProduct').removeClass('hidden');
                        $('.productDetails-buttons--wishList__addProduct').addClass('hidden');
                        $('.productDetails-buttons--wishList__svgIcon').html('<use xlink:href="css/img/icons-sprite.svg#heart-solid"></use>');
                        $('.productDetails-buttons--wishList').removeClass('productWishListAdd-js').addClass('productWishListRemove-js');
                    }
                } else {
                    //Product not in wishlist
                    if (!($('.productDetails-buttons--wishList').hasClass('wishListPopup-js'))) {
                        $('input[aria-label="wishListAdd"]').val('Product/WishListAdd');
                        $('.productDetails-buttons--wishList__removeProduct').addClass('hidden');
                        $('.productDetails-buttons--wishList__addProduct').removeClass('hidden');
                        $('.productDetails-buttons--wishList__svgIcon').html('<use xlink:href="css/img/icons-sprite.svg#heart-light"></use>');
                        $('.productDetails-buttons--wishList').removeClass('productWishListRemove-js').addClass('productWishListAdd-js');
                    }
                }
            });

WishListDelete

Akcja odpowiadająca za usuwanie przedmiotu z listy życzeń. Parametry:

productId (int lub null).

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="product/WishListDelete" />
<input type="hidden" name="productId" value="{{ product.Id }}" required />
<button>Zatwierdź</button>
</form>

WishListUpdate

Akcja odpowiada za ustawienie/zmianę daty na liście życzeń. Parametry:

productId (int),
note (string) - maksymalna długość to 500 znaków,
notify (bool),
notifyDate (string, wyrażenie regularne).

function updateReminderDate(e) {
    var container = $('.after-adding-to-wishlist-popup-lq .after-adding-to-cart-popup-container-lq');
    var message = $(e.currentTarget).data('success');
    var productId = $(e.currentTarget).data('id');
    var inputVal = $(e.currentTarget).val();
    var data = {
        productId: productId,
        __csrf: __CSRF,
        __action: 'Product/WishListUpdate'
    };
    if(inputVal != ""){
        var date = inputVal + ' 06:00:00';
        data.notify = true;
        data.notifyDate = date;
    } else {
        data.notify = false;
    }
    $.post(null, data);
};

Add

Odpowiada za dodanie produktów do koszyka. Parametry:

productId (int, pole obowiązkowe),
quantity (decimal) - może przyjąć wartość od 0.01 do 99999,
unitId (int lub null),
attributeId (long[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (long),
attributeEditable (string[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (string),
supplyId (int lub null),
cartId (int lub null).

<form method="POST">
<input type="number" name="quantity" value="1" required/>
<input type="hidden" name="productId" value="{{productdetails.Product.Id}}" />
<input type="hidden" name="__CSRF" value="{{page.CSRF}}" />
<input type="hidden" name="__action" value="Cart/Add" />
<button type="submit">Dodaj do koszyka</button>
</form>

AttributesSet

Akcja odpowiada za ustawianie atrybutów na koszyku. Parametry:

no (int lub null),
attribute (string[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (string), maksymalna długość to 1000 znaków.

<form method="POST">
{% if page.PageId == config.DefinedPages.Order.Id -%}
        {% assign attributes = config.Orders.AttributesCart.Position -%}
	{% assign positionAttrSize = attributes | Size -%}
	{% assign showInCart = true -%}
	{% assign action = 'Cart/AttributesSet' -%}
{% endif %}
	<input type="hidden" name="__action" value="{{ action }}" />
	<input type="hidden" name="no" value="{{ product.No }}" />
</form>

Change

Akcja odpowiada za zmianę koszyka. Parametry:

id (int, pole obowiązkowe).

<form method="POST">
{% if customer.Carts[1] -%}
            <input type="hidden" name="__action" value="Cart/Change" />
            <input type="hidden" name="id" />
            <ul>
                {% for cart in customer.Carts -%}
                    <li class="choose-cart-lq" data-id="{{ cart.Id }}" data-name="{{ cart.Name | H }}">{{ translations.Cart }} {{ cart.Name }}</li>
                {% endfor -%}
            </ul>
{% endif -%}
</form>

Create

Akcja odpowiada za utworzenie nowego koszyka. Parametry:

inquiry (bool).

if(parameters && !validationError){
            var obj = {
                parameters: JSON.stringify(parameters),
                loadParent: loadParent,
                e: e,
                form: form
            };
            var activeInquiryId = window.app.getCookie('activeInquiryId');
            if((activeInquiryId == -1 || activeInquiryId == '') && $(e.currentTarget).hasClass('add-to-inquiry-lq')){
                $.post('', {__action: 'Cart/Create', inquiry: true, __csrf: __CSRF}, function(result) {
                    var inquiryId = result.action.Object.CartId;
                    for(var i=0; i<parameters.length; i++){
                        parameters[i].cartId = inquiryId;
                    }
                    obj.parameters = JSON.stringify(parameters);
                    js.addManyProductsToCart(obj, e);
                });
            } else {
                js.addManyProductsToCart(obj, e);
            }
        }

Delete

Akcja ta umożliwia usunięcie wszystkich produktów z koszyka.

<form method="POST">
<input type="hidden" name="__CSRF" value="{{page.CSRF}}" />
<input type="hidden" name="__action" value="Cart/Delete" />
<button type="submit">USUŃ</button>
</form>

ExternalAdd

Akcja dla konfiguratora produktów. Dodaje do koszyka zawartość zwróconą z sync. Parametry:

id (int, pole obowiązkowe),
type (int).

if(a.Result && e.hasClass('sendCart-lq')){ 
                $('.set-price-lq').html('');
                $.post(null, {__CSRF:__CSRF, __action:'cart/externalAdd', id:a.Object.Id}, result => {
                    var cartId = window.app.getCookie('lastCartId');
                    $.get('', {__collection: 'customer.Cart.Count|customer.Cart.Value|customer.Cart.EditedOrderId|customer.CurrencyExt.Symbol'}, function (result) {
                        var cartCount = result.collection['customer.Cart.Count'];
                        var cartValue = result.collection['customer.Cart.Value'].toPrice();
                        var editedOrderId = result.collection['customer.Cart.EditedOrderId'];
                        if(editedOrderId != null && activeInquiryId == -1){
                            window.app.setCookie('lastCartId', -1);
                        }
                        $('.carts-change-popup-lq .selected-cart-ui').removeClass('selected-cart-ui');
                        $('.change-cart-link-js[data-id='+cartId+']').parent().addClass('selected-cart-ui');
                        $('.cart-count-lq').text(cartCount);
                        $('.counter-bg-lq').removeClass('hidden-js');
                        $('.cart-value-lq').text(cartValue);
                        $('.cart-value-with-currency-lq').text(cartValue+' '+result.collection['customer.CurrencyExt.Symbol']);
                        $('.load-cart-lq[data-cart-id]').attr('data-cart-id', cartId);
                    });

                    app.afterAddingToCart(e, result.action.message, null, result.template);
                }); 
            }

ImportCSV

Akcja odpowiada za importowanie koszyka z pliku. Parametry:

file - pole do wczytywania plików,
separator (char lub null),
decimalSeparator (char lub null).

importCSV: function(e){
        $('.during-ajax-modal-lq').removeClass('hidden-lq');
        var file = $(e.currentTarget);
        file.addClass('prevent-double-change-lq');
        var fd = new FormData();
        fd.append('__csrf',__CSRF);
        fd.append('__action','Cart/ImportCSV');
        fd.append('file', e.currentTarget.files[0]);
        $.ajax({data: fd, processData: false, contentType: false, type: 'POST',
            success: function(data){
                file.val('');
                if(data.action.Multiple){
                    var results = data.action.Results;
                    var imported = true;
                    var validationArr = [];
                    for(var i=0; i<results.length; i++){
                        if(!results[i].Result){
                            imported = false;
                            var name = results[i].Object.NameNoHtml;
                            var message = results[i].Message
                            if(results[i].Description != null){
                                message += ' ' + results[i].Description;
                            }
                            validationArr.push({name:name, message:message});
                        }
                    }
                } else {
                    if(data.action.Result){
                        var imported = true;
                    } else {
                        var imported = false;
                    }
                }

NameSet

Akcja odpowiada za ustawienie nazwy wybranego koszyka. Parametry:

id (int, pole obowiązkowe),
name (string) - maksymalna długość to 30 znaków.

$('body').on('change','.carts-change-popup-lq input',function(e){
        $.post(null,{__csrf:__CSRF,__action:'Cart/NameSet',id:$(this).data('id'),name:$(this).val()},function(){location.reload();});
    });

PositionDelete

Odpowiada za usuwanie danej pozycji z koszyka. Parametry:

no (int, pole obowiązkowe),
position (bool).

<div class="form-js flr-ui no-message-lq">
    <input type="hidden" name="__action" value="Cart/PositionDelete" />
    <input type="hidden" name="no" value="{{ product.No }}" />
    {% if product.IsSetElement -%}
	<input type="hidden" name="position" value="true" />
    {% endif -%}
    <button class="remove-product-from-cart-lq parent-container-reload-js btn-pure-ui ti-trash {% if productsSize == 1 -%} last-product-lq {% endif -%}" title="{{ translations.Delete }}"></button>
    <span class="remove-product-from-cart-lq parent-container-reload-js mobile-ui {% if productsSize == 1 -%} last-product-lq {% endif -%}">{{ translations.Delete }}</span>
</div>

QuantityChange

Akcja powoduje zmianę ilości przedmiotu w koszyku. Parametry:

quantity (decimal, pole obowiązkowe) - może przyjąć wartość od 0.01 do 99999,
no (int, pole obowiązkowe).

<form method="POST">
Produkt: {{cart.Products[forloop.index0].NameNoHtml}}<br/>
Ilość: {{cart.Products[forloop.index0].Quantity}}<br/>
<button>Zwiększ ilość o 1</button>
<input type="hidden" name="quantity" value="{{cart.Products[forloop.index0].Quantity | ToInt | Plus: 1}}"/>
<input type="hidden" name="no" value="{{cart.Products[forloop.index0].No}}"/>
<input type="hidden" name="__CSRF" value="{{page.CSRF}}" />
<input type="hidden" name="__action" value="cart/QuantityChange" />
</form>

Recalculate

Odpowiada za ponowne przeliczenie koszyka.

<form method="post">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="cart/Recalculate" />
<input type="hidden" name="__template" value="order/cart.html" />
<input type="hidden" name="__collection" value="customer.Cart.Value" />
</form>

SetAdd

Akcja obsługuje dodawanie zestawu produktów. Parametry:

productId (int, pole obowiązkowe),
setId (int, pole obowiązkowe),
quantity (int) - może przyjąć wartość od 1 do 99,
attributeId (int[]) - może zotać przekazane wielokrotnie w ramach jednej akcji (int),
supplyId (int[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (int).

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}"/>
<input type="hidden" name="__action" value="cart/SetAdd" />
<input type="hidden" name="productId" value="{{ product.Id }}" />
<input type="text" name="productId" value="{{set.SetId }}" required/>
<input type="text" name="setId" value="1"/>
<button>Zatwierdź</button>
</form>

SetExtAdd

Akcja obsługuje dodawanie nowego zestawu produktów. Parametry:

setId (int, pole obowiązkowe),
quantity (int) - może przyjąć wartość od 1 do 99,
products (Object[], pole obowiązkowe) - jako argument przyjmuje tablicę obiektów zawierających dane produktów z zestawu.

if(form.hasClass('add-set-to-cart-lq')){
	var set = {setId:Number($(e.currentTarget).data('set-id')), quantity:1, products:[]};
    var setProducts = form.find('.set-product-lq');
    setProducts.each(function () {
		var setProduct = {
			setElementId: Number($(this).data('set-element-id')),
			setProductId: Number($(this).data('set-product-id'))
		};
		if($(this).find('[name=attributePolyvalent]').length > 0){
			var attributesPolyvalent = [];
			$(this).find('[name=attributePolyvalent]').each(function(){
				var attribute = {
					id: Number($(this).data('id')),
					valueId:  Number($(this).val())
				};
				attributesPolyvalent.push(attribute);
			});
			setProduct.attributesPolyvalent = attributesPolyvalent;
		}
		if($(this).find('[name=attributeEditable]').length > 0){
			var attributesEditable = [];
			$(this).find('[name=attributeEditable]').each(function(){
				var attribute = {
					id: Number($(this).data('id')),
					value:  $(this).val()
				};
				attributesEditable.push(attribute);
			});
			setProduct.attributesEditable = attributesEditable;
		}
		set.products.push(setProduct);
    });
	var data = [
		{name: "__csrf", value: __CSRF}, 
		{name: "__action", value: 'Cart/SetExtAdd'}, 
		{name: "set", value: JSON.stringify(set)}
	];
}

AskAboutProduct

Akcja pozwalająca na złożenie zapytania o produkt. Parametry:

productId (int, pole obowiązkowe),
email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
phoneNo (string) - maksymalna długość to 20 znaków,
name (string, pole obowiązkowe) - maksymalna długość to 50 znaków,
message (string, pole obowiązkowe) - maksymalna długość to 500 znaków,
copy (bool).

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Contact/AskAboutProduct" />
<input type="hidden" name="productId" value="{{ product.Id }}" />
<input type="email" name="email" value="{{ customer.Email }}" required />
<input type="text" name="name" value="{{ customer.Address.Name }}" required />
<input type="tel" name="phoneNo" value="{{ customer.Address.PhoneNo }}"/>
<textarea type="text" name="message" required></textarea>
<input type="checkbox" name="copy"/>
<button>Zatwierdź</button>
</form>

Send

Akcja odpowiadająca za wysłanie zawartości formularza kontaktowego. Parametry:

email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
name (string) - maksymalna długość to 50 znaków,
phoneNo (string) - maksymalna długość to 20 znaków,
subject (string, pole obowiązkowe) - maksymalna długość to 50 znaków,
message (string, pole obowiązkowe) - maksymalna długość to 500 znaków,
copy (bool),
contactId (int lub null),
files - pole do wczytywania plików. Maksymalna ilość załączników jest określona w obiekcie config.Contact.AttachmentsMaxCount,
macro_xx (string) - pole zdefiniowane przez użytkownika. Może występować wiele razy. Napis xx jest edytowalny, ale przedrostek musi pozostać taki sam. Przykładem poprawnej nazwy jest: macro_Pole1.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Contact/Send" />
<input type="hidden" name="copy" value="1" />
<input type="email" name="email" value="{{ customer.Email }}"
{% if customer.Email == blank -%} placeholder="* {{ translations.Com_EmailAddress }}" {% endif -%}
required />
<input type="tel" name="phoneNo" value="{{ customer.Address.PhoneNo }}"
placeholder="{{ translations.Prf_Telephone }}" />
<input type="text" name="subject" placeholder="* {{ translations.Cfm_Subject }}" required autofocus />
<textarea type="text" name="message" placeholder="* {{ translations.Pps_Message }}" required /></textarea>
<input 
	type="file" 
	name="resume" 
	id="resume"  
	required 
	accept="{{ config.Contact.AttachmentExtensions }}" 
	data-file-size="{{ config.Contact.AttachmentMaxSize }}" 
	data-size-exceeded="{{ translations.Com_FileSizeExceeded | Format: maxSize }}"
	data-invalid-file="{{ translations.Com_InvalidFile | Format: config.Contact.AttachmentExtensions }}"
	data-not-added-info="{{translations.AttachementsNotAdded}}"
>
<button>Zatwierdź</button>
</form>

Przykład modyfikacji w szablonie Bursztyn z użytymi polami macro_xx:

<div class="contact-form {% if settings.googleMapsKey != '' and config.Shop.Address.Latitude != 0 and config.Shop.Address.Longitude != 0 -%} col-md-4 {% endif%} col-sm-12 col-xs-12">
			<div class="row">
				<div class="content form-content">
					<div class="title">{{ translations.Cff_WriteEmail }}</div>
					<form class="reg-form"
					id="ContactSendForm" action="{{ page.Url }}{{ page.QueryString | H}}" method="post">
						<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
						<input type="hidden" name="__action" value="Contact/Send" />
						<input type="hidden" name="copy" value="1" />

						<input type="email" name="email" value="{{ customer.Email }}" 
						{% if customer.Email == blank -%} placeholder="* {{ translations.Com_EmailAddress }}" {% endif -%} 
						required />	
						<input type="tel" name="phoneNo"  value="{{ customer.Address.PhoneNo }}" 
						placeholder="{{ translations.Prf_Telephone }}" />
						<input type="text" name="subject" placeholder="* {{ translations.Cfm_Subject }}" required autofocus />
						<textarea type="text" name="message" placeholder="* {{ translations.Pps_Message }}" required /></textarea>

						<input type="text" name="macro_Pole1" placeholder="* Pole1" required />
						<input type="text" name="macro_Pole2" placeholder="* Pole2" required />

						<span class="legend">* {{ translations.Reg_RequiredFieldsExp }} </span>
						<button class="primary-action">{{ translations.Com_Send }}</button>
					</form>
				</div>
			</div>
		</div>
		
		{% if settings.googleMapsKey != '' and config.Shop.Address.Latitude != 0 and config.Shop.Address.Longitude != 0 -%}
			<div id="map-canvas" class="col-md-8 col-xs-12"></div>
		{% endif %}
	</div>

Aby pola użytkownika były widoczne w mailu ze strony kontakt należy należy dodać w ich treści zdefiniowane pola. Przykład dodania takich pól poniżej:

<div style="padding: 20px; margin: 20px; font-family: Arial, Helvetica, sans-serif; text-align: left; border: 1px solid #cc6600; font-size: 12pt;"><h2 style="color: #cc6600;">ZAPYTANIE ZE STRONY INTERNETOWEJ</h2><br />
<p>Nadawca: <a href="mailto:{{ customer.Email }}"><b>{{ customer.Email }}</b></a><br />Temat: <b>{{ subject }}</b></p>
<p>Treść wiadomości:<br /> {{ message }}</p> 

<pre>
  Pole 1 {{userFields.macro_Pole1}}
  Pole 2 {{userFields.macro_Pole2}}
</pre>

</div>

Tworzymy pomocniczą tablice zawierającą ścieżki do plików. Przykład:

 addAttachementInResume: function(e) {
        window.attachementsInResume = [];
        var filesArr = $(e.currentTarget).parents('.inputs-container-js').find('.addAttachementInResume-js');
        filesArr.each(function () {
            if(this.files.length > 0){
                var maxSize = $(this).data('file-size');
                if(this.files[0].size > maxSize){
                    var message = $('[data-not-added-info]').data('not-added-info') + '.

' + this.files[0].name + '

: ' + $(this).data('size-exceeded');
                    app.showTemporaryPopup(message, 'error', '', 8000);
                    $(this).val('');
                    $(this).next().hide();
                } else {
                    window.attachementsInResume.push(this.files[0]);
                    $(e.currentTarget).siblings('.fileInfo-js').html(this.files[0].name);
                }
            }
        });
    }

W celu przesłania ciała akcji najlepiej użyć FormData (JavaScript API), do której przekażemy kolejne pola. Pliki przekazujemy jako file0, file1, .. fileN. Przykład poniżej:

postResume: function(e) {
        if(app.validationBeforePost(e) != 'error'){
            var form = $(e.currentTarget).parents('.inputs-container-js');
            var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
            var fileList = window.attachementsInResume;
            if(fileList != undefined){
                var filesSize = fileList.length;
            }
            var fd = new FormData();
            fd.append('__csrf', __CSRF);
            for(var i=0; i<dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize > 0) {
                window.AttachementsErrors = 0;
                function addAttachementError(file, message) {
                    if(window.AttachementsNotAdded == undefined){
                        window.AttachementsNotAdded = [];
                    }
                    var attachement = ' '+file.name+': '+message+' ';
                    window.AttachementsNotAdded.push(attachement);
                    window.AttachementsErrors += 1;
                };
                var input = form.find('[type=file]').eq(0);
                var extensions = input.attr('accept').split(', ');
                var fileSize = input.data('file-size');
                for (var i=0; i<filesSize; i++) {
                    var file = fileList.pop();
                    if(file.size < fileSize){
                        var extensionArr = file.name.split('.');
                        var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase();
                        var wrongExtension = true;
                        for(var j=0; j<extensions.length; j++){
                            if(extension == extensions[j]){
                               fd.append('file'+i, file);
                               var wrongExtension = false;
                            }
                        }
                        if(wrongExtension){
                           var message = input.data('invalid-file');
                           addAttachementError(file, message); 
                        }
                    } else {
                        var message = input.data('size-exceeded');
                        addAttachementError(file, message);
                    }
                }
                if(window.AttachementsNotAdded){
                    var message = $('[data-not-added-info]').data('not-added-info') + window.AttachementsNotAdded.join('');
                    app.showTemporaryPopup(message, 'error', '', 8000);
                    window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined;
                }
            }
            $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) {
                $('.addAttachementInResume-js').val('');
                if (data.action.Result) {
                    var message = form.data('success-info');
                    app.showTemporaryPopup(message, 'success', '', 8000);
                    $('.clearFileInput-js').hide();
                    app.hidePopup(e);
                } else {
                    app.showTemporaryPopup(data.action.Description, 'error', '', 8000);
                }
            }};
            $('.fileInfo-js').html('');
        }
},

TellFriendAboutProduct

Akcja odpowiedzialna za wysłanie powiadomienia odnośnie danego produktu do innej osoby poprzez e-mail. Parametry:

productId (int, pole obowiązkowe),
email (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
name (string) - maksymalna długość to 50 znaków,
message (string, pole obowiązkowe) - maksymalna długość to 500 znaków,
copy (bool),
friendEmail (string, pole obowiązkowe, wyrażenie regularne) - maksymalna długość to 192 znaki,
friendName (string) - maksymalna długość to 50 znaków.

<form method="POST">
<input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
<input type="hidden" name="__action" value="Contact/TellFriendAboutProduct" />
<input type="hidden" name="productId" value="{{ product.Id }}" />
<input type="email" name="email" value="{{ customer.Email }}" required />
<input type="text" name="name" value="{{ customer.Address.Name }}" />
<input type="email" name="friendEmail" required />
<input type="text" name="friendName" />
<textarea type="text" name="message" required></textarea>
<button>Zatwierdź</button>
</form>

Accept

Akcja odpowiedzialna za wysłanie żądania o zastosowanie wszystkich zmian. Parametry:

orderId (int, pole obowiązkowe).

 this.accept = function (aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/Accept',
                    __csrf: __CSRF,
                    orderId: this.orderId,
                    __template: this.orderTemplateUrl,
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;
                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    window.UIFeatures.pureReplaceTemplate(thisRef.orderTemplateContainer, null, null, res.template, thisRef.orderRequestUrl);
                    if (!res.action.Result) {
                        $('.during-ajax-modal-lq').addClass('hidden-lq');
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action, 'warning'));
                    }
                    thisRef.recalculationRequired = false;
                    window.app.setCookie('lastCartId', -1);
                });
            }

AttributesSet

Akcja odpowiedzialna za edycję atrybutów odnoszących się bezpośrednio do zamówienia. Parametry:

- orderId (int, pole obowiązkowe),
- attribute (string[]) - może zostać przekazane wielokrotnie w ramach jednej akcji (string), maksymalna długość to 1000 znaków.

<div class="remarks-ui">
    <div class="form-js header-attributes-set-form-js">
        <input type="hidden" name="__action" value="OrderEdit/AttributesSet" />
        <input type="hidden" name="orderId" value="{{ order.Id }}" />
        {% assign i = 0 -%}
        {% for headerAttr in config.Orders.AttributesEdit.Header -%}
            {% assign intId = headerAttr.Id | ToInt -%}
            {% unless headerAttr.Editable == false and order.Attributes[intId].Value == null -%}
                {% assign i = i | Plus: 1 -%}
                {% assign modulo = i | Modulo: 3 -%}
                {% if modulo == 1 -%}
                    <div class="order-info-row-ui">
                {% endif -%}
                <div class="order-info-item-ui">
                    <div class="name-ui">
                        {{ headerAttr.Name }}
                        {% if headerAttr.Required -%}
                            <span class="required-ui">*</span>
                        {% endif -%}
                    </div>
                    <div class="content-ui">
                        {% if headerAttr.Editable -%}
                            {% case headerAttr.Format -%}
                                {% when 1 -%}
                                    <input type="text" name="attribute" value="{{ order.Attributes[intId].Value }}" maxlength="50" {% if headerAttr.Required -%} required {% endif -%} />
                                {% when 2 -%}
                                    <input type="number" name="attribute" value="{{ order.Attributes[intId].Value }}" maxlength="50" {% if headerAttr.Required -%} required {% endif -%} />
                                {% when 3 -%}
                                    <span class="select-background-ui">
                                        <select name="attribute">
                                            {% for val in headerAttr.Values %}
                                                <option {% if val.ValueId == headerAttr.Values[0].ValueId or val.ValueId == order.Attributes[intId].ValueId -%} selected="selected" {% endif -%} value="{{ val.ValueId }}">{{ val.Value }}</option>
                                            {% endfor -%}
                                        </select>
                                    </span>
                                    <i class="ti-angle-down select-arrow-ui"></i>
                                    {% when 4 -%}
                                        <input type="date" name="attribute" value="{{ order.Attributes[intId].Value | Date:dateFormat }}" {% if headerAttr.Required -%} required {% endif -%} />
                            {% endcase -%}
                            <div class="error-ui validation-info-js validation-required-js hidden-js">
                                {{ translations.FillAttributeValue }}
                            </div>
                        {% else -%}
                            {{ order.Attributes[intId].Value }}
                        {% endif -%}
                    </div>
                </div>
                {% if modulo == 0 or i == ordAttrSize -%}
		    </div>
		{% endif -%}
	    {% endunless -%}
	{% endfor -%}
    </div>
    <div class="mt20-ui small-text-ui"><span class="required-ui">*</span> {{ translations.RequiredFields }}</div>
</div>

Cancel

Akcja odpowiedzialna za wysłanie żądania o anulowaniu wszystkich zmian. Parametry:

- orderId (int, pole obowiązkowe).

    this.cancel = function (aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/Cancel',
                    __csrf: __CSRF,
                    orderId: this.orderId,
                    __template: this.orderTemplateUrl,
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;
                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    window.UIFeatures.pureReplaceTemplate(thisRef.orderTemplateContainer, null, null, res.template, thisRef.orderRequestUrl);
                    if (!res.action.Result) {
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action, 'warning'));
                    }
                    thisRef.recalculationRequired = false;
                    window.app.setCookie('lastCartId', -1);
                    if($('.escape-editing-lq').length > 0 ){
                        $('.escape-editing-lq').trigger('click');
                    }
                });
            }

CartCreate

Akcja odpowiedzialna za wysłanie żądania o utworzenie koszyka do edycji zamówienia.

- orderId (int, pole obowiązkowe).

  this.cartCreate = function (aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/CartCreate',
                    __csrf: __CSRF,
                    orderId: this.orderId,
                    __template: this.orderTemplateUrl,
                    __collection: 'config.DefinedPages.Home.Url|customer-profile.OrderQueryGET'
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;
                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    // check if cartId avalible, and put in cookies
                    if (!res.action.Result) {
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action, 'warning'));
                    } else {
                        window.app.setCookie('OrderQueryGET', res.collection['customer-profile.OrderQueryGET']);
                        window.app.newUrl(res.collection['config.DefinedPages.Home.Url']);
                    }
                });
            }

CartMerge

Akcja odpowiedzialna za wysłanie żądania o połączenie koszyka z edytowanym zamówieniem. Parametry:

- orderId (int lub null).

    this.cartMerge = function (messagesContainerSelector, aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/CartMerge',
                    __csrf: __CSRF,
                    __collection: 'config.DefinedPages.CustomerProfile.Url'
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;
                return window.UIFeatures.makePostRequest(data, null, function (res) {
                    if (res.action.Result) {
                        //temp order url - to change in future (when profile routing will be implemented)
                        var orderQueryGET = window.app.getCookie('OrderQueryGET');
                        window.app.setCookie('OrderQueryGET', '', -1);
                        if(orderQueryGET.indexOf('&tab=order-details') === -1){
                            window.app.newUrl(res.collection + '?' + orderQueryGET + '=' + thisRef.orderId + '&tab=order-details');
                        } else {
                            window.app.newUrl(res.collection + '?' + orderQueryGET + '=' + thisRef.orderId);
                        }
                    } else {
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action));
                    }
                });
            }

Edit

Akcja odpowiedzialna za wysłanie żądania o rozpoczęcie procesu edycji.

- orderId (int, pole obowiązkowe).

       this.edit = function (aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/Edit',
                    __csrf: __CSRF,
                    orderId: this.orderId,
                    __template: this.orderTemplateUrl,
                    __collection: 'customer-profile.Order.RecalculationRequired'
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;
                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    window.UIFeatures.pureReplaceTemplate(thisRef.orderTemplateContainer, null, null, res.template, thisRef.orderRequestUrl);
                    if (!res.action.Result) {
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action, 'warning'));
                    }
                    thisRef.recalculationRequired = res.collection;
                });
            }

PositionAttributesSet

Akcja odpowiedzialna za edycję atrybutów poszczególnych towarów w zamówieniu. Parametry:

- orderId (int, pole obowiązkowe),
- no (int, pole obowiązkowe),
- attribute (string[]) - może zostać przekazane wielokrotnie w ramach jednej akcji, maksymalna długość to 1000 znaków.

<div class="form-js position-attributes-set-form-js">
    <input type="hidden" name="__action" value="OrderEdit/PositionAttributesSet" />
    <input type="hidden" name="no" value="{{ product.No }}" />
    {% if showInCustomerProfile -%}
	<input type="hidden" name="orderId" value="{{ order.Id }}" />
    {% endif -%}
    {% for positionAttr in attributes -%}
	{% assign intId = positionAttr.Id | ToInt -%}
	{% if nullAttributes != '' -%}
		{% assign isNull = false -%}
		{% for nullAttribute in nullAttributes -%}
			{% if nullAttribute == positionAttr.Id -%}
			        {% assign isNull = true -%}
				{% break -%}
			{% endif -%}
		{% endfor -%}
	{% else -%}
		{% assign isNull = false -%}
	{% endif -%}
	{% if isNull == false -%}
		{% assign mod = i | Modulo:5 -%}
		{% if mod == 0 -%}
			{% assign pageNo = pageNo | Plus:1 -%}
		{% endif -%}
  		<div class="div-table-cell-ui attributes-view-cell-ui {% if order.EditingAllowed -%} order-edit-active-ui {% endif -%} attributes-view-lq hidden-js page{{pageNo}}-lq">
			{% if positionAttr.Editable -%}
				<label class="mobile-ui">{{ positionAttr.Name }} {% if positionAttr.Required -%} <span class="required-ui"> *</span>{% endif -%}</label>
	  			{% case positionAttr.Format -%}
					{% when 1 -%}
		    	  			<input type="text" name="attribute" value="{{ product.Attributes[intId].Value }}" maxlength="50" {% if positionAttr.Required -%} required {% endif -%} />
					{% when 2 -%}
						<input type="number" name="attribute" value="{{ product.Attributes[intId].Value }}" maxlength="50" {% if positionAttr.Required -%} required {% endif -%} />
					{% when 3 -%}
				    		<span class="select-background-ui">
							<select name="attribute">
								{% for val in positionAttr.Values %}
									<option {% if val.ValueId == positionAttr.Values[0].ValueId or val.ValueId == product.Attributes[intId].ValueId -%} selected="selected" {% endif -%} value="{{ val.ValueId }}">{{ val.Value }}</option>
								{% endfor -%}
							</select>
				        	</span>
				        	<i class="ti-angle-down select-arrow-ui"></i>
					{% when 4 -%}
						<input type="date" name="attribute" value="{{ product.Attributes[intId].Value | Date:'yyyy-MM-dd' }}" placeholder="rrrr-mm-dd" {% if positionAttr.Required -%} required {% endif -%} />
				{% endcase -%}
				<div class="error-ui validation-info-js validation-required-js hidden-js">
			    		{{ translations.FillAttributeValue }}
				</div>
			{% else -%}
				{{ product.Attributes[intId].Value }}
			{% endif -%}
    		</div>
    		{% assign i = i | Plus:1 -%}
    	{% endif -%}
    {% endfor -%}
    {% assign mod = i | Modulo:5 -%}
    {% if mod != 0 -%}
    	{% for obj in (mod..4) -%}
		<div class="div-table-cell-ui attributes-view-cell-ui {% if order.EditingAllowed -%} order-edit-active-ui {% endif -%} attributes-view-lq hidden-js page{{pageNo}}-lq"></div>
	{% endfor -%}
    {% endif -%}
</div>

PositionDelete

Akcja odpowiedzialna za wysłanie żądania o usunięcie pozycji. Parametry:

- orderId (int, pole obowiązkowe),
- no (int, pole obowiązkowe).

  this.positionDelete = function (posNo, aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/PositionDelete',
                    __csrf: __CSRF,
                    no: posNo,
                    orderId: this.orderId,
                    __template: this.orderTemplateUrl,
                    __collection: 'customer-profile.Order.RecalculationRequired'
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;
                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    window.UIFeatures.pureReplaceTemplate(thisRef.orderTemplateContainer, null, null, res.template, thisRef.orderRequestUrl);
                    if (!res.action.Result) {
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action, 'warning'));
                    }
                    thisRef.recalculationRequired = res.collection;
                });
            }

PositionQuantityChange

Akcja odpowiedzialna za wysłanie żądania o zmianę ilości danej pozycji. Parametry:

- orderId (int, pole obowiązkowe),
- no (int, pole obowiązkowe),
- quantity (decimal, pole obowiązkowe) - może przyjąć wartość od 0.01 do 99999.

this.positionQuantityChange = function (posNo, quantity, messagesContainerSelector, aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/PositionQuantityChange',
                    __csrf: __CSRF,
                    no: posNo,
                    orderId: this.orderId,
                    quantity: quantity,
                    __template: this.orderTemplateUrl,
                    __collection: 'customer-profile.Order.RecalculationRequired'
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;
                if(aditionalRequestData.orderDetPageId && thisRef.orderRequestUrl.indexOf('orderDetPageId='+aditionalRequestData.orderDetPageId) === -1){
                    if(thisRef.orderRequestUrl.indexOf('orderDetPageId') !== -1){
                        thisRef.orderRequestUrl = thisRef.orderRequestUrl.substring(0, thisRef.orderRequestUrl.indexOf('&orderDetPageId')) + '&orderDetPageId=' + aditionalRequestData.orderDetPageId;
                    } else {
                        thisRef.orderRequestUrl = thisRef.orderRequestUrl + '&orderDetPageId=' + aditionalRequestData.orderDetPageId;
                    }
                }

                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    window.UIFeatures.pureReplaceTemplate(thisRef.orderTemplateContainer, null, null, res.template, thisRef.orderRequestUrl);
                    if (!res.action.Result) {
                        var container = $(messagesContainerSelector);
                        container.find('.error-msg-lq').remove();
                        var messageContainer = '<div class="quantity-error-ui error-msg-lq">'+res.action.Description+'</div>';
                        container.append(messageContainer);
                        container.find('.error-msg-lq').delay(3000).fadeOut(300, function(){
                            $(this).remove();
                        });
                    }
                    thisRef.recalculationRequired = res.collection;
                });
            }

PositionUndo

Akcja odpowiedzialna za wysłanie żądania o cofnięcie wszystkich zmian danej pozycji w zamówieniu. Parametry:

- orderId (int, pole obowiązkowe),
- no (int, pole obowiązkowe).

 this.undo = function (aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/Undo',
                    __csrf: __CSRF,
                    orderId: this.orderId,
                    __template: this.orderTemplateUrl,
                    __collection: 'customer-profile.Order.RecalculationRequired'
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;

                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    window.UIFeatures.pureReplaceTemplate(thisRef.orderTemplateContainer, null, null, res.template, thisRef.orderRequestUrl);
                    if (!res.action.Result) {
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action, 'warning'));
                    }
                    thisRef.recalculationRequired = res.collection;
                });
            }

Recalculate

Akcja odpowiedzialna za wysłanie żądania o przeliczenie zamówienia. Parametry:

orderId (int, pole obowiązkowe).

     this.recalculate = function(aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/Recalculate',
                    __csrf: __CSRF,
                    orderId: this.orderId,
                    __template: this.orderTemplateUrl,
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;
                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    window.UIFeatures.pureReplaceTemplate(thisRef.orderTemplateContainer, null, null, res.template, thisRef.orderRequestUrl);
                    if (!res.action.Result) {
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action, 'warning'));
                    }
                    thisRef.recalculationRequired = false;
                });
            }

Undo

Akcja odpowiedzialna za wysłanie żądania o cofnięcie wszystkich zmian w zamówieniu. Parametry:

- orderId (int, pole obowiązkowe).

     this.undo = function (aditionalRequestData) {
                var data = {
                    __action: 'OrderEdit/Undo',
                    __csrf: __CSRF,
                    orderId: this.orderId,
                    __template: this.orderTemplateUrl,
                    __collection: 'customer-profile.Order.RecalculationRequired'
                };

                if (aditionalRequestData) {
                    data = $.extend(data, aditionalRequestData);
                }

                var thisRef = this;

                return window.UIFeatures.makePostRequest(data, thisRef.orderRequestUrl, function (res) {
                    window.UIFeatures.pureReplaceTemplate(thisRef.orderTemplateContainer, null, null, res.template, thisRef.orderRequestUrl);
                    if (!res.action.Result) {
                        var messagesContainer = $(messagesContainerSelector);
                        window.app.temporaryMessage(messagesContainer, window.UIFeatures.makeMessageHtml(res.action, 'warning'));
                    }
                    thisRef.recalculationRequired = res.collection;
                });
            }

FbAccountLink

Akcja odpowiedzialna za połączenie konta w sklepie z kontem na Facebooku. Parametry:

userID (int).

    function connectFb(e) {
    if (fbLoginStatus.status === 'connected') {
        var userIdNum = fbLoginStatus.authResponse.userID;
        var data = {
            __csrf: __CSRF,
            __action: 'External/FbAccountLink',
            userID: userIdNum
        };
        $.post(null, data, function (result) {
            if (result.action.Result) {
                location.reload();
            } else {
                application.createMessage(result.action);
            }
        });
    } else {
        var loginMessage = $(e.currentTarget).data('error-msg');
        application.createMessage(loginMessage);
    }
}

FbAccountUnlink

Akcja odpowiedzialna za rozłączenie konta w sklepie z kontem na Facebooku.

function disconnectFb() {
    var data = {
        __csrf: __CSRF,
        __action: 'External/FbAccountUnlink'
    };
    $.post(null, data, function (result) {
        if (result.action.Result) {
            location.reload();
        } else {
            application.createMessage(result.action);
        }
    });
}

FbLogin

Akcja odpowiedzialna za zalogowanie. Parametry:

- response (string, pole obowiązkowe).

function connectToFb(response) {
    FB.api('/me', {
        fields: 'email,name'
    }, function (u) {
        response.user = u;
        $.post(null, {
            __csrf: __CSRF,
            __action: 'external/fblogin',
            response: JSON.stringify(response)
        }, function (result) {
            if (result.action.Result) {
                window.location.replace('');
            } else if (result.action.Code != 100) {
                application.createMessage(result.action);
            }
        });
    });
}

GoogleAccountLink

Akcja odpowiedzialna za połączenie konta w sklepie z kontem Google. Parametry:

- userID (int).

  $('#linkGoogleAccount').off().click(function(){
                bodyTag.style.cursor = 'wait';
                au.signIn().then(function(googleUser){
                    return googleUser.getBasicProfile().getId();
                }).then(function (value) {
                    setTimeout(function() {
                        $.post(null,{ __action: 'External/GoogleAccountLink', __csrf: __CSRF, userID: value },function(result){
                            if (result.action.Result) {
                                location.reload();
                            } else {
                                createMessage(result);
                                bodyTag.style.cursor = 'default';
                            }
                        });
                    }, 1000);
                });
            });

GoogleAccountUnlink

Akcja odpowiedzialna za rozłączenie konta w sklepie z kontem Google.

 $('#unlinkGoogleAccount').off().click(function(){
                $.post(null,{ __action: 'External/GoogleAccountUnlink', __csrf: __CSRF },function(result){
                    if (result.action.Result) {
                        location.reload();
                    } else {
                        createMessage(result);
                        bodyTag.style.cursor = 'default';
                    }
                });
            });

GoogleLogin

Akcja odpowiedzialna za zalogowanie. Parametry:

id_token (int, pole obowiązkowe).

   $('#google-signin').off().click(function(){
                bodyTag.style.cursor = 'wait';
                au.signIn().then(function(googleUser){
                    return googleUser.getAuthResponse().id_token;
                }).then(function (value) {
                    setTimeout(function() {
                        $.post(null,{ __action: 'External/GoogleLogin', __csrf: __CSRF, id_token: value },function(result){
                            if (result.action.Result) {
                                window.location.replace('');
                            } else if (result.action.Code === 108) {
                                var errMsg = document.querySelector('#google-signin').dataset.errorMsg;
                                application.createMessage(errMsg);
                                bodyTag.style.cursor = 'default';
                            } else {
                                createMessage(result);
                                bodyTag.style.cursor = 'default';
                            }
                        });
                    }, 4000);
                });
            });

Exec

Akcja odpowiedzialna za pobieranie danych bezpośrednio z ERP. Parametry:

message (string, pole obowiązkowe),
worker (string) - maksymalna długość to 32 znaki.

  var data = {
    __action: 'sync/exec',
    __CSRF: __CSRF,
    worker: 'erpData',
    message: JSON.stringify({
        command: 'CDN.eShop_GetOrders',
        parameters: { 
            DateFrom: '2019-01-01', 
            DateTo: '2019-12-31', 
            LanguageId: __lngId, 
            PageNo: '1'
       }
    }) 
};

function getData() {
  $.post(null, data, function (d) {
	 if (!d.action.Result) {  
		console.log(JSON.stringify(d));
		return;
	 } else {
		console.log(JSON.stringify(d));

		var res = d.action.Object[0];
		console.log(JSON.stringify(res));

		var res2 = d.action.Object[1];
		console.log(JSON.stringify(res2));

		var res3 = d.action.Object[2];
		console.log(JSON.stringify(res3));
	 }
  });
}

Add

Akcja odpowiedzialna za dodawanie zapytań ofertowych. Parametry:

email (string, pole obowiązkowe) - maksymalna długość to 192 znaki,
phoneNo (string) - maksymalna długość to 20 znaków,
name (string, pole obowiązkowe) - maksymalna długość to 128 znaków,
message (string) - maksymalna długość to 2000 znaków,
tos (int),
channelKey (string).

<input aria-label="action-inquiry-add" type="hidden" name="__action" value="Inquiry/Add" />
{% for tos in config.TOS.Consents.Inquiries -%}
    <div class="tos-container-js {% if tos.Statement -%} statement-ui statement-lq {% endif -%}" >
        {% if tos.Statement -%}
            {{ tos.Text }}
        {% else -%}
            <label class="checkbox-ui tos-js">
                <input aria-label="tos" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
                <span class="label-ui">{% if tos.Required -%}<span class="required-ui">*</span> {% endif -%}{{ tos.Text }}</span>
                {% if tos.Required -%}
                    <span class="error-ui validation-info-js validation-required-js hidden-js">{{ translations.RequiredField }}</span>
                {% endif -%}
            </label>
        {% endif -%}
        {% assign channelsSize = tos.Channels | Size -%}
        {% if channelsSize > 0 -%}
            {% assign onlyEmail = false -%}
            {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
                {% assign onlyEmail = true -%}
            {% endif -%}
            {% if onlyEmail == false -%}
                <span class="error-ui validation-info-js validation-channel-js hidden-js">{{ translations.ChooseOption }}</span>
            {% endif -%}
        {% endif -%}
        {% for channel in tos.Channels -%}
            <label class="checkbox-ui channel-ui {% if onlyEmail == false -%} channel-js {% endif -%} {% if tos.Statement == false -%} disabled-channel-js {% endif -%}">
                {% if onlyEmail == false -%}
                    <input aria-label="channelKey" type="checkbox" name="channelKey" value="{{ channel.Key }}" {% if tos.Statement == false -%} disabled {% endif -%} />
                {% else -%}
                    <input aria-label="channelKey" type="hidden" name="channelKey" value="{{ channel.Key }}" checked />
                    <input aria-label="channelKey" type="checkbox" checked disabled />
                {% endif -%}
                <span class="label-ui">{{ channel.Name }}</span>
            </label>
        {% endfor -%}
    </div>
{% endfor -%}
<small class="mb10-ui block-ui"><span class="required-ui">*</span> {{ translations.RequiredFields }}</small>
<button aria-label="inquiry-recalculate" class="order-button-ui parent-container-reload-js add-inquiry-js" data-products-quantity="{{order.Products | Size}}" data-date="{{config.Now | Date:dateFormat}}">
    {{translations.AddInquiry}}
</button>

CartMerge

Akcja odpowiedzialna za dodanie koszyka do zapytania ofertowego. Parametry:

inquiryId (int, pole obowiązkowe).

function produceOffer(e) {
    var id = $(e.currentTarget).data('id');
    var url = $(e.currentTarget).data('redirect-url');
    var data = {
        __action: 'Inquiry/CartMerge',
        __csrf: __CSRF,
        inquiryId: id
    }
    $.post('', data, function(result) {
        if (result.action.Result) {
            app.replace(url);
        }
    });
};

Set

Akcja odpowiedzialna za ustawienie koszyka jako zapytanie. Parametry:

inquiry (bool),
cartId (int lub null).

toggleCartType: async function() {
    const trigger = this;
    if(trigger.classList.contains('change-into-cart-js')){
        var inquiry = false;
        if(document.getElementsByClassName('last-inquiry-js').length > 0){
            window.app.setCookie('lastCartId', window.app.getCookie('activeInquiryId'));
            window.app.setCookie('activeInquiryId', -1);
        }
    } else {
        var inquiry = true;
        if(document.getElementsByClassName('last-cart-js').length > 0){
            window.app.setCookie('activeInquiryId', window.app.getCookie('lastCartId'));
            window.app.setCookie('lastCartId', -1);
        }
    }
    const message = trigger.dataset.message;
    const result = await js.post({__action: 'Inquiry/Set', inquiry: inquiry});
    document.body.innerHTML += '<div class="toggle-cart-type-succeed-js message-popup-background-ui">'+
                                    '<div class="message-popup-ui box-ui">'+
                                        '<div class="box-ui" style="padding: 50px">'+
                                            '<i class="va-mid-ui ti-check" style="margin-right: 10px; font-size: 30px; color: #7fba00"></i>'+
                                            '<span class="va-mid-ui line-height-1-ui" style="font-weight: 500; font-size: 18px">'+message+'</span>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'
},

Ping

Akcja odpowiada za podtrzymanie sesji użytkownika korzystającego z e-Sklepu. Domyślnie czas bezczynności sesji użytkownika wynosi 15 minut, po upływie których jest usuwana, zaś w szablonach Comarch sesja ta jest podtrzymywana. Poniżej znajduje się przykładowy skrypt, który należy odpowiednio zaimplementować w swoim szablonie, w jednym z plików js. Przykład implementacji akcji Ping w szablonach Comarch znajduje się w artykule: Podtrzymanie sesji użytkownika.

setInterval(() => fetch(document.baseURI + 'xhr?__action=svc/ping'), 600000);

Kompilacja i minifikacja plików

Wskazówka

Kompilacja i minifikacja plików

W standardowych szablonach style napisane są za pomocą preprocesora języka CSS jakim jest Sass. W efekcie style są umieszczane w plikach .scss. Niestety, przeglądarki nie potrafią ich odczytać, dlatego należy je przekompilować do plików .css, które już mogą zostać przez nie zidentyfikowane. Minifikacja plików to inaczej kompresja pliku, dzięki temu zmniejszamy wagę pliku. Zastosowanie minifikacji spowoduje, że strona internetowa będzie działać szybciej. Minifikację można przeprowadzić ręcznie, jednak jest to praca żmudna i mało wydajna. W tym artykule dowiesz się, jak automatycznie kompilować i minifikować pliki. Podczas tych operacji będziesz pracować na plikach lokalnych. Z pomocą przyjdzie Ci narzędzie Liquid Sync.

1. Node.js

Na początku musisz zainstalować Node.js. Instalator dostępny jest tutaj. W efekcie otrzymasz środowisko do dalszej pracy z plikami.

2. Folder nodejs

Po instalacji Node.js, należy dodać specjalny folder w plikach szablonu o nazwie nodejs. W tym folderze będą znajdować się wszystkie pliki wymagane do uruchomienia minifikacji.

Wskazówka

Pracuj na plikach lokalnych na swoim komputerze, a nie na tych znajdujących się w panelu administracyjnym.

3. Gulp

Gulp to narzędzie, które za Ciebie wykona automatyczną kompilację i minifikację plików. W nowym folderze (nodejs) dodaj plik gulpfile.js o zawartości jak poniżej: var gulp = require('gulp'); var gulpsass = require('gulp-sass')(require('sass')); var uglify = require('gulp-uglify-es').default; var rename = require('gulp-rename'); var minify = require('gulp-minify'); var chokidar = require('chokidar'); function sass() { return gulp.src('../scss/**/*.scss') .pipe(gulpsass()) .pipe(gulp.dest('../css')) }; function watch() { gulp.watch('../scss/**/*.scss', sass); }; function css(){ return gulp.src('../scss/**/*.scss') .pipe(rename({suffix: '.min'})) .pipe(gulpsass({outputStyle: 'compressed'})) .pipe(gulp.dest('../css')) }; function js(){ return gulp.src('../js/**/*.js') .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('../js')) }; const watchSapphireScssFilesDependencies = { "_collection-points.scss": "../scss/collection-points.scss", "_globals1.scss": "../scss/desktop1.scss", "_header.scss": "../scss/desktop1.scss", "_country-flags.scss": "../scss/desktop1.scss", "_tooltip.scss": "../scss/desktop1.scss", "_stepper.scss": "../scss/desktop1.scss", "_pagination.scss": "../scss/desktop1.scss", "_sliders.scss": "../scss/desktop1.scss", "_categories-navigation.scss": "../scss/desktop1.scss", "_home.scss": "../scss/desktop1.scss", "_product-list.scss": "../scss/desktop1.scss", "_categories-map.scss": "../scss/desktop1.scss", "_order.scss": "../scss/desktop1.scss", "_globals2.scss": "../scss/desktop2.scss", "_globals-m.scss": "../scss/mobile.scss", "_offline.scss": "../scss/offline.scss" }; const watchSapphireJsFiles = ['../js/init.js', '../js/init-ui1.js', '../js/init-ui2.js', '../js/js.js']; function watchTopazRelease() { chokidar.watch('../scss/**/*.scss').on('change', (path) => { console.log(`File '${path}' changed.`) return gulp.src('../scss/layout*.scss') .pipe(gulpsass({outputStyle: 'compressed'})) .pipe(gulp.dest('../css/')) }); chokidar.watch('../js/layout!(*.min).js').on('change', (path) => { console.log(`File '${path}' changed.`) return gulp.src(path) .pipe(minify({ mangle: false, compress: false, noSource: true, ext: { min: ".min.js" } })) .pipe(gulp.dest('../js/')) }); }; function watchSapphireRelease() { chokidar.watch(['../js/layout!(*.min).js', ...watchSapphireJsFiles]).on('change', (path) => { console.log(`File '${path}' changed.`) return gulp.src(path) .pipe(minify({ mangle: false, compress: false, noSource: true, ext: { min: ".min.js" } })) .pipe(gulp.dest('../js/')) }); chokidar.watch('../scss/**/*.scss').on('change', (path) => { console.log(`File '${path}' changed.`) let stringsOfRelativePathParts = []; if(path.includes('/')) stringsOfRelativePathParts = path.split("/"); else stringsOfRelativePathParts = path.split("\\"); let fileName = stringsOfRelativePathParts[stringsOfRelativePathParts.length-1]; if(watchSapphireScssFilesDependencies[fileName] !== undefined) { path = watchSapphireScssFilesDependencies[fileName]; stringsOfRelativePathParts = watchSapphireScssFilesDependencies[fileName].split("/"); return gulp.src(path) .pipe(gulpsass({outputStyle: 'compressed'})) .pipe(gulp.dest('../css/')); } else if (path.includes('static-elements') || path.includes('elements') || path.includes('partials')) { return gulp.src('../scss/layout*.scss') .pipe(gulpsass({outputStyle: 'compressed'})) .pipe(gulp.dest('../css/')) } else if(!fileName.includes('global-variables') ) { return gulp.src(path) .pipe(gulpsass({outputStyle: 'compressed'})) .pipe(gulp.dest('../css/')) } }); }; exports.sass = sass; exports.watch = watch; exports.css = css; exports.js = js; exports.minify = gulp.parallel(js, css); exports.watchTopazRelease = watchTopazRelease; exports.watchSapphireRelease = watchSapphireRelease;

4. NPM

Ostatni krok, to dodanie NPMa (Node Package Manager). Do tej operacji potrzebny jest terminal. Jeśli nie posiadasz programu do edycji kodu, który udostępniałby taki terminal, to nic nie szkodzi. Wystarczy uruchomić terminal, który jest dostępny w systemie w następujący sposób:

Wskazówka

Jeśli używasz narzędzia Liquid Sync to upewnij się, że jest ono wyłączone przed wykonaniem następnego kroku.

Otwórz folder nodejs, wciśnij i przytrzymaj na klawiaturze lewy Shift, a następnie kliknij prawym przyciskiem myszy w dowolne pole tego otwartego folderu,
Otworzy się lista opcji, na której wybierz: Otwórz okno polecenia tutaj (w systemie Windows 10 opcja ta nazywa się: Otwórz tutaj okno programu PowerShell),
Teraz możesz zainstalować NPM w swoim projekcie. Wystarczy, że wpiszesz komendę: npm init, a następnie zatwierdzisz ją klawiszem ENTER,
Podczas instalacji pojawią się pola z informacjami do uzupełnienia (m.in. package name, version, description, entry point, test command, git repository, keywords, author, license) oraz pytanie o poprawność wprowadzonych danych. Informacji tych nie trzeba uzupełniać (z wyjątkiem pierwszej, gdzie wystarczy wpisać cokolwiek), można je pomijać klawiszem ENTER,
Gdy operacja się zakończy, wpisz kolejną komendę:
- npm install –save-dev gulp@4.0.0 chokidar@3.6.0 sass@1.74.1 gulp-minify@3.1.0 gulp-rename@2.0.0 gulp-uglify-es@3.0.0 gulp-sass@5.1.0
Powyższa komenda zainstaluje paczki, które umożliwią poprawne działanie funkcji z pliku gulpfile.js. Komendę najlepiej przekopiować do okna polecenia. Jeśli jednak wpisujesz ją ręcznie, to zwróć uwagę, że przed słowem save są dwa myślniki, a nie jeden.

Wskazówka

Jeśli używasz narzędzia Liquid Sync to teraz należy zmienić nazwę folderu z nodejs na .nodejs. Dzięki dodaniu tej kropki na początku nazwy folderu, będzie on pomijany przy synchronizacji plików.

Komendy do kompilacji i minifikacji Po wykonaniu powyższych kroków, możesz już przystąpić do kompilacji i minifikacji. W pliku gulpfile.js jest zdefiniowanych kilka funkcji. Poniżej krótki opis funkcji oraz sposób ich wywołania:

Kompilacja plików .scss do .css: (Agat, Bursztyn, Opal)

Komenda gulp sass spowoduje przekompilowanie plików .scss do plików .css. Dzięki temu będziesz mógł edytować style w plikach .scss.

Automatyczna kompilacja plików .scss do .css: (Agat, Bursztyn, Opal)

Jeśli komenda gulp sass przypadła Ci do gustu, to ta spodoba Ci się jeszcze bardziej. Komenda gulp watch spowoduje, że automatycznie po każdej zmianie w dowolnym pliku .scss zostanie uruchomiona kompilacja do pliku .css.

Minifikacja plików .css: (Agat, Bursztyn, Opal)

Otrzymane pliki .css możemy zminifikować. Odpowiada za to komenda gulp css. Po jej uruchomieniu wszystkie pliki .scss zostaną przekompilowane do plików .min.css. Taki plik będzie dużo mniejszy od zwykłego pliku .css.

Minifikacja plików .js: (Agat, Bursztyn, Opal)

Nie tylko pliki ze stylami mogą być zminifikowane. Warto zminifikować również pliki .js. Zrobisz to komendą gulp js. Tworzy ona kopie z dopiskiem .min w nazwie dla wszystkich plików .js (z folderu JS znajdującego się w Twoim szablonie).

Minifikacja plików: (Agat, Bursztyn, Opal)

Ostatnia komenda to gulp minify. Minifikuje jednocześnie pliki .css i pliki .js.

Automatyczna minifikacja wszystkich plików: (Topaz)

Komenda gulp watchTopazRelease spowoduje, że automatycznie po każdej zmianie w dowolnym pliku .scss oraz .js zostanie utworzona jego zminifikowana wersja.

Automatyczna minifikacja wszystkich plików: (Szafir)

Komenda gulp watchSapphireRelease ma takie same działanie jak powyższa.

Obsługa akcji Product/DeliveryCostGet

Spis treści

Obsługa akcji Product/DeliveryCostGet

Topaz

Agat

Bursztyn i Opal

Wskazówka

Obsługa akcji Product/DeliveryCostGet

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsłużyć akcję Product/DeliveryCostGet, w zamian za pole o nazwie DeliveryCost na obiekcie ze szczegółami towarów.

Dla kogo przeznaczona jest poniższa instrukcja i kiedy warto z niej skorzystać?

Akcja Product/DeliveryCostGet informuje o minimalnych kosztach dostawy dla wybranego towaru. W standardowych szablonach Comarch informacja ta prezentowana jest na szczegółach towaru.

Jeżeli chcesz prezentować informacje na temat minimalnych kosztów dostawy dla swoich towarów to zaktualizuj swój szablon do najnowszej wersji (zalecane) lub skorzystaj z poniższej instrukcji i dokonaj jego samodzielnej modyfikacji.

Topaz

W zależności od wybranego widoku szczegółów towaru instrukcja będzie się lekko różnić. Wspólnym dla wszystkich widoków jest: Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HML.

Obiekt product-details-1

Krok 2.W pliku elements/productDetails/product-details-1/html.js znajdź warunek {% if product.DeliveryCost != null and product.DeliveryCost > 0 -%} i usuń go wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:

Obiekt product-details-2

Krok 2.W pliku elements/productDetails/product-details-2/html.js znajdź warunek {% if product.DeliveryCost != null and product.DeliveryCost > 0 -%} i usuń go wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:

Obiekt product-details-3

Krok 2.W pliku elements/productDetails/product-details-3/html.js znajdź warunek {% if product.DeliveryCost != null and product.DeliveryCost > 0 -%} i usuń go wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:

Agat

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HML. Krok 2.W pliku partials/product/product-popup.html znajdź klasę info-container i usuń kontener z tą klasą wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:

{% if product.StockLevel.Control -%} {% if product.StockLevel.Type != 4 and product.StockLevel.Text == '' -%} {% assign noText = true -%} {% endif -%}

{% endif -%}

Bursztyn i Opal

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HML. Krok 2.W pliku productdetails.html znajdź warunek {% if _pd.DeliveryCost > 0 -%} i usuń go wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:

Wskazówka

Po wprowadzeniu zmian pamiętaj o ich zapisaniu oraz publikacji.

Dodanie konfigurowalności strony głównej w szablonie Szafir

W tym artykule dowiesz się jak zmodyfikować szablon Szafir, aby strona główna była konfigurowalna.

Wskazówka

Instrukcja przeznaczona jest dla sklepów od wersji 2022.4, które posiadają starsze szablony. Artykuł przeprowadzi Cię przez proces modyfikacji plików js oraz scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Krok 1.

W panelu administracyjnym przejdź do sekcji Wygląd sklepu/Ustawienia. Następnie, mając wybrany szablon Szafir, w prawym górnym rogu wybierz więcej, po czym przejdź do Edytuj ustawienia zaawansowane/więcej/edytuj HTML.

Krok 2.

Odnajdź plik settings.liquid. Następnie w drugiej linijce dodaj poniższy kod: {% assign homepage = "Strona główna" -%} {% assign elementsAtHomepage = "Lista elementów na stronie głównej sklepu" -%} {% assign name = "Nazwa" -%} {% assign parameters = "Parametry" -%} {% assign mainBanner = "Baner główny" -%} {% assign mainBannerLink = "Przejdź do edycji tego bannera" -%} {% assign newsSection = "Sekcja Nowości" -%} {% assign newsSectionLink = "Przejdź do edycji zawartości tej sekcji" -%} {% assign newsletter = "Newsletter" -%} {% assign manufacturersSlider = "Slider Producenci" -%} {% assign news = "Aktualności" -%} {% assign newsLink = "Przejdź do listy artykułów bloga" -%} {% assign infographicBanner = "Banner infografika" -%} {% assign infographicBannerLink = "Przejdź do edycji tego bannera" -%} {% assign animationOnHover = "Animacja na hoverze" -%} {% assign brandsSlider = "Slider Marki" -%} Następnie wyszukaj linijkę border-bottom: 1px solid #ddd; i pod nią dodaj display: flex;. Parę linijek niżej znajduje się kod: `#lg-settings-content .row::after { display: block; clear: both; content: ''; } #lg-settings-content .cell { border-left: 1px solid #ddd; display: inline-block; vertical-align: middle; width: calc((100% - 308px)/4); min-height: 20px; padding: 10px; float: left; }` Usuń go, a następnie wklej następujący kod: `#lg-settings-content .cell { border-left: 1px solid #ddd; width: calc((100% - 308px)/4); padding: 10px; } #lg-settings-content .elements-at-homepage .cell.name{ width: 130px; } #lg-settings-content .elements-at-homepage .cell.translation{ width: 160px; } #lg-settings-content .elements-at-homepage .cell.parameters{ width: calc(100% - 515px); } #lg-settings-content .elements-at-homepage .cell.goto{ width: 100%; }` Wyszukaj frazę {{navigationBarSettings}} i zamień ją na {{homepage}}. Następnie odszukaj frazę {{newsletter}} i usuń całą sekcję fieldset w której się ona znajduje. To samo zrób w przypadku fraz {{homepageBannerTranslation}}, {{blogOnHomepage}} oraz {{categoryMenu}}. Kilka linijek niżej znajdziesz id="tab1Content". Pod tą linijką dodaj poniższy fragment: `{{navigationBarSettings}}` Następnie znajdź frazę id="tab2Content" i dwie linijki wyżej wklej następujący kod: {{categoryMenu}} {{categoryMenuInfo}} {{big}} {{medium}} {{small}} {{elementsAtHomepage}} {{available}} {{number}} {{name}} {{translationId}} {{parameters}} {{mainBanner}} {{animationTypeTranslation}} {{animationTypeSlide}} {{animationTypeFade}} {{slideTimeTranslation}} {{mainBannerLink}} {{newsSection}} NewProducts {{animationOnHover}} {{yesTranslation}} {{noTranslation}} {{newsSectionLink}} {{newsletter}} NewsletterAndNewsAdd {{manufacturersSlider}} {{animationOnHover}} {{yesTranslation}} {{noTranslation}} {{slideTimeTranslation}} {{brandsSlider}} {{animationOnHover}} {{yesTranslation}} {{noTranslation}} {{slideTimeTranslation}} {{news}} BlogNews {{blogPresentationOnHomepage}} {{extended}} {{compact}} {{animationOnHover}} {{yesTranslation}} {{noTranslation}} {{newsLink}} {{infographicBanner}} {{animationOnHover}} {{yesTranslation}} {{noTranslation}} {{slideTimeTranslation}} {{infographicBannerLink}} Teraz wyszukaj funkcję SaveLiquidSettings i linijkę wyżej wklej poniższy kod: `$('.pa-translation-link').each(function(){ var id = $(this).text(); var url = $(this).attr('href').replaceAll('ID', id); $(this).attr('href', url); }); $('.pa-link').each(function(){ var id = $(this).data('id'); var url = $(this).attr('href').replaceAll('ID', id); $(this).attr('href', url); });`

Krok 3.

Następnie w pliku home.html w pierwszych linijkach znajdziesz taki fragment kodu: `{% include 'common/banner.html' -%} {{translations.NewProducts}} {% if customer.HidePrices -%} {% include 'product/hidden-prices-msg.html' -%} {% endif -%} {% include 'product/minibox-grid.html' -%} {% unless customer.NewsletterSubscriber or settings.newsletter == 'no' -%}`
Usuń go i w jego miejsce wklej ten kod: `{% if settings.mainBanner -%} {% include 'common/banner.html' -%} {% endif -%} {% if settings.newsSection -%} {{translations.NewProducts}} {% if customer.HidePrices -%} {% include 'product/hidden-prices-msg.html' -%} {% endif -%} {% include 'product/minibox-grid.html' -%} {% endif -%} {% if settings.newsletter -%} {% unless customer.NewsletterSubscriber or settings.newsletter == 'no' -%}`
Teraz znajdź frazę assign manufacturersSliderSize. W obszareze tej linijki znajdziesz następujący fragment kodu: `{% assign manufacturersSliderSize = manufacturer-brand.Manufacturers | Size -%} {% if manufacturersSliderSize > 0 -%}`
`{% for manufacturer in manufacturer-brand.Manufacturers -%} {% if manufacturer.Image -%} {% if manufacturer.Url != empty -%} {% endif -%}`
Usuń go, a w jego miejsce wklej poniższy kod: `{% endif -%} {% assign manufacturersSliderSize = manufacturer-brand.Manufacturers | Size -%} {% if manufacturersSliderSize > 0 and settings.manufacturersSlider -%}`
`{% for manufacturer in manufacturer-brand.Manufacturers -%} {% if manufacturer.Image -%} {% if manufacturer.Url != empty -%} {% endif -%}`
Kilka linijek niżej znajdziesz taki fragment kodu: `{% assign blogPostsSize = blog.LatestPosts | Size -%} {% if blogPostsSize > 0 -%}{{translations.BlogNews}} {% include 'blog/blog-news-partial.html' -%} {% endif -%} {% assign homepageSmallSliderSize = config.Banners['homepage-small'].Images | Size -%} {% if homepageSmallSliderSize > 0 -%}`
`{% for slide in config.Banners['homepage-small'].Images -%} {% if slide.Link != empty -%} {% endif -%}`
Usuń go i wklej w jego miejsce ten kod: `{% assign brandsSliderSize = manufacturer-brand.Brands | Size -%} {% if brandsSliderSize > 0 and settings.brandsSlider -%}`{% for brand in manufacturer-brand.Brands -%} {% if brand.Image -%} {% if brand.Url != empty -%} {% endif -%} {% if brand.Heading != null -%} {% assign title = {{brand.Heading | H}} -%} {% else -%} {% assign title = {{brand.Name | H}} -%} {% endif -%} {{brand|Img2:'medium'}} {% if brand.Url != empty -%} {% endif -%} {% endif -%} {% endfor -%} {% endif -%} {% assign blogPostsSize = blog.LatestPosts | Size -%} {% if blogPostsSize > 0 and settings.news -%} {{translations.BlogNews}} {% include 'blog/blog-news-partial.html' -%} {% endif -%} {% assign homepageSmallSliderSize = config.Banners['homepage-small'].Images | Size -%} {% if homepageSmallSliderSize > 0 and settings.infographicBanner -%}
`{% for slide in config.Banners['homepage-small'].Images -%} {% if slide.Link != empty -%} {% endif -%}`

Krok 4.
Teraz w pliku common/banner.html znajdź class="lazyslider-container-lq homepage-slider-ui" i po spacji dopisz style="order: {{ settings.mainBannerNo }}". Dwie linijki niżej znajdziesz settings.autoplaySpeed. Zamień to na settings.mainBannerAutoplaySpeed.
Krok 5.
Następnie w pliku product/minibox-product.html w jednej z pierwszych linijek znajdziesz frazę {{isLarge}}. Za wskazaną frazą, po spacji, dopisz następującą: {% if settings.newsSectionAnimationOnHover == 'yes' -%} with-animation-on-hover-ui {% endif -%}.
Krok 6.
Podobnie w pliku blog/blog-news-partial.html - znajdź blog-home-ui i po spacji dopisz {% if settings.newsAnimationOnHover == 'yes' -%} with-animation-on-hover-ui {% endif -%}.
Krok 7.
Teraz w pliku js/init-ui1.js wyszukaj frazę //lookbook slider i linijkę wyżej wklej poniższy kod: `//brands slider if ($('.brands-slider-lq').length > 0) { window.UIFeatures.initSlider('.brands-slider-lq', { autoplay: true, slidesToShow: 5, slidesToScroll: 1, arrows: false, dots: false, responsive: [ { breakpoint: 1600, settings: { slidesToShow: 4 } }, { breakpoint: 1024, settings: { slidesToShow: 3 } }, { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 550, settings: { slidesToShow: 1 } } ] }); }`
Krok 8.
Następnie w pliku scss/partials/_home.scss w drugiej linijce wklej poniższy kod: `display: flex; flex-direction: column;` Na koniec w pliku scss/globals/_globals2.scss na samym końcu dodaj poniższy kod: `.with-animation-on-hover-ui{ transition:box-shadow $short-animations-time; &:hover { box-shadow: 0 3px 12px 0 $gridAndListHoverShadowColor; } }`
Jak wykonać kopię bezpieczeństwa mojego szablonu?
Jak wykonać kopię bezpieczeństwa mojego szablonu?
Oprawa wizualna sklepu jest bardzo ważnym elementem podczas prowadzenia sprzedaży w sieci. Narzędzie Kreator Wyglądu Comarch e-Sklep umożliwia stworzenie własnych, niepowtarzalnych szablonów wedle preferencji i potrzeb użytkowników. W intuicyjnym narzędziu jakim jest Kreator, będziesz w stanie zaprojektować wszelkie niezbędne funkcje, takie jak stronę główną, listę towarów, szczegóły towaru oraz koszyk. Jeśli Twój projekt szablonu został zaimportowany do e-Sklepu oraz skonfigurowany wedle Twoich preferencji (dodanie grafik do bannerów, modyfikacje kolorystyczne) masz możliwość jego zapisania, co będzie stanowić kopię bezpieczeństwa. Kopia bezpieczeństwa to dane, które w każdej chwili można odtworzyć w przypadku ich utracenia (np. poprzez przypadkowe usunięcie) lub częstego wprowadzania zmian. Dane, jakie może zawierać kopia bezpieczeństwa to szablon, który wcześniej został przez nas wygenerowany wraz z bannerami. Zaleca się wykonywanie kopii zapasowych oraz zabezpieczenie ich hasłem. Każda wykonana kopia zapasowa powinna zostać zapisana w bezpiecznym i dogodnym dla Użytkownika miejscu.
Jak wykonać kopię bezpieczeństwa?
W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu. W pustych polach znajdujących się w zakładce Eksport szablonu, opcjonalnie przed eksportem możesz uzupełnić powyższe dane, tj. Autora szablonu, e-mail, telefon i stronę WWW sklepu. Aby wyeksportować szablon, kliknij Eksportuj szablon. Wyeksportowany plik jest w formacie XML, a jego nazwa zawiera szablon oraz wersję, co znacznie ułatwia zarządzanie kopiami bezpieczeństwa w przypadku wykonywania ich regularnie.
Jak wyeksportować bannery?
Bannery, które znajdują się w Twoim sklepie możesz również wyeksportować tworząc kopię bezpieczeństwa. W tym celu także musisz przejść do Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie do zakładki Eksport szablonu. Obok przycisku Eksportuj szablon, znajduje się przycisk Eksportuj bannery, który musisz kliknąć aby bannery, które posiadasz w e-Sklepie zostały weksportowane. Kopia bezpieczeństwa jest również zapisywana w formacie XML, a nazwa pliku wskazuje na szablon, wersję i zawartość bannerów.
Jak zabezpieczyć hasłem swój szablon?
Jeśli chcesz, aby Twój szablon został zabezpieczony hasłem, a znajomość hasła była niezbędna podczas zaimportowania tego szablonu do e-Sklepu, musisz w tym celu przejść w Panelu Administracyjnym do sekcji Wygląd sklepu/ Ustawienia/ Ustawienia zaawansowane, następnie do zakładki Szablon. W tym miejscu nadasz hasło dla swojego szablonu. Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno:

Składać się z minimum 8 znaków,

Zawierać dużą literę,

Zawierać małą literę,

Zawierać cyfrę 0-9,

Zawierać znak specjalny – ‘!.+?;^]=-(&_)#=

Gotowe! Teraz Twój szablon został zabezpieczony hasłem. Jeśli wyeksportujesz szablon, który zabezpieczyłeś hasłem – podczas importu tego szablonu, będziesz musiał podać nadane wcześniej hasło. Jego brak uniemożliwi import szablonu, a podanie błędnego hasła spowoduje nieprawidłowe działanie szablonu po imporcie. Więcej informacji znajdziesz:

Kreator Wyglądu Comarch e-Sklep w nowym interfejsie

Gotowe szablony Comarch

Kreator szablonu Szafir B2B

Kreator Wyglądu Topaz B2C

Obiekty lokalne
Niniejszy artykuł przedstawia wykaz obiektów lokalnych dostępnych w sklepie. Obiekty mogą być wykorzystywane w szablonach graficznych sklepu. Odwołanie do obiektu w szablonie następuje poprzez jego nazwę zmiennej nadaną w momencie dodania obiektu do szablonu. Dla każgdego obiektu opisano:

opcje konfiguracyjne

strony, na których może być użyty

właściwości obiektu

Wskazówka
Obiekty lokalne domyślnie nie są dostępne w sklepie. Obiekt należy dodać, oraz aktywować na wybranych stronach. Obiekty lokalne są importowane wraz z szablonem. Obiekt udostępnia informacje o aktualnej stronie.

Spis treści

Nowości i promocje

Siatka towarów

Lista towarów

Prezentacja towaru

Nagłówek

Menu producentów i marek

Tekst

Opinie

Porównywarka towarów

Profil Klienta

Blog

Zamówienie

Dodatkowe właściwości dla wersji Enterprise

Nowości i promocje
Obiekt zwraca listę towarów wg właściwości, np. nowości, promocje, itd.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

Pokaż towary tylko ze zdjęciem

Zawężaj do wybranej grupy

Ilość

Typ

Pokaż towary tylko ze zdjęciem – Towary tylko ze zdjęciem. Wartość domyślna: true. Zawężaj do wybranej grupy – Zawęża wyświetlane towary wg wybranego typu tylko do tych towarów, które należą do tej samej grupy co przeglądany towar na stronie szczegóły towaru. Wartość domyślna: true. Ilość – Liczba towarów. Wartość minimalna: 1. Wartość maksymalna: 50. Wartość domyślna: 12. Typ – Towary wg właściwości. Wartość domyślna: 1 – Promocja. Dostępne wartości:

Promocja

Nowość

Najczęściej oglądane

Najczęściej kupowane

Cross-Selling

Towar z gazetki

Towar polecany

Wyprzedaż

Superjakość

Supercena

Najlepiej oceniany

Rekomendacja sprzedawcy

Dostępność–Zapowiedź

Towary sugerowane (sugerowane do sprzedaży z ERP)

Nagroda

Dostępny na stronach
Obiekt może być dodany na wszystkich dostępnych stronach w sklepie. Obiekt może być dodany wielokrotnie na stronie.

Obiekt posiada właściwość productnew.Products, czyli tablicę z listą towarów.
Wskazówka
Nazwa obiektu jest przykładowa.
Tablica productnew.Products posiada z kolei następujące właściwości:

productnew.Products.AskForPrice productnew.Products.Manufacturer

productnew.Products.Availability productnew.Products.MinPrice

productnew.Products.BasicUnitMinQuantity productnew.Products.Name

productnew.Products.Brand productnew.Products.NameNoHtml

productnew.Products.Code productnew.Products.NoDiscount

productnew.Products.DecimalPlacesPrice productnew.Products.PreviousPrice

productnew.Products.DecimalUnit productnew.Products.Price

productnew.Products.DefaultGroup productnew.Products.Rating

productnew.Products.Flags productnew.Products.RatingCount

productnew.Products.GIDNumber productnew.Products.RegularPrice

productnew.Products.HasAttributes productnew.Products.SaleUnit

productnew.Products.HasOtherUnits productnew.Products.Type

productnew.Products.Id productnew.Products.UPC

productnew.Products.Image productnew.Products.UnitPriceRatio

productnew.Products.ImageId productnew.Products.UnitPriceUnit

productnew.Products.Images productnew.Products.Url

productnew.Products.Link productnew.Products.Weight

Siatka towarów
Obiekt zwraca listę towarów wg wybranego kryterium źródła danych.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

Pokaż towary tylko ze zdjęciem

Ilość

Typ

Wartość

Pokaż towary tylko ze zdjęciem – Towary tylko ze zdjęciem. Wartość domyślna: true. Ilość – Liczba towarów. Wartość minimalna: 1. Wartość maksymalna: 50. Wartość domyślna: 12. Typ – Towary wg źródła. Wartość domyślna: 1 – Wybór ręczny. Dostępne wartości:

Ręczny

Grupa towarowa

Producent

Marka

Ostatnio oglądane

Wartość – W zależności od wartości parametru Typ przyjmuje wartości:

Id towarów oddzielone przecinkiem

Id grupy

Id producenta

Id marki

Wartość domyślna: Pusty ciąg znaków.
Dostępny na stronach
Obiekt może być dodany na wszystkich dostępnych stronach w sklepie. Obiekt może być dodany wielokrotnie na stronie.

Obiekt posiada właściwość Products.
Wskazówka
Nazwa obiektu jest przykładowa.
W jej skład wchodzą następujące właściwości:

productlastviewed.Products.AskForPrice productlastviewed.Products.Manufacturer

productlastviewed.Products.Availability productlastviewed.Products.MinPrice

productlastviewed.Products.BasicUnitMinQuantity productlastviewed.Products.Name

productlastviewed.Products.Brand productlastviewed.Products.NameNoHtml

productlastviewed.Products.Code productlastviewed.Products.NoDiscount

productlastviewed.Products.DecimalPlacesPrice productlastviewed.Products.PreviousPrice

productlastviewed.Products.DecimalUnit productlastviewed.Products.Price

productlastviewed.Products.DefaultGroup productlastviewed.Products.Rating

productlastviewed.Products.Flags productlastviewed.Products.RatingCount

productlastviewed.Products.GIDNumber productlastviewed.Products.RegularPrice

productlastviewed.Products.HasAttributes productlastviewed.Products.SaleUnit

productlastviewed.Products.HasOtherUnits productlastviewed.Products.Type

productlastviewed.Products.Id productlastviewed.Products.UPC

productlastviewed.Products.Image productlastviewed.Products.UnitPriceRatio

productlastviewed.Products.ImageId productlastviewed.Products.UnitPriceUnit

productlastviewed.Products.Images productlastviewed.Products.Url

productlastviewed.Products.Link productlastviewed.Products.Weight

Lista towarów
Obiekt zwraca listę towarów dla wybranej kategorii lub kryterium wyszukiwania.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

Ilość

Sortuj według

pageId

sort

Ilość – Liczba towarów. Wartość minimalna: 1. Wartość maksymalna: 50. Wartość domyślna: 12. Sortuj według – Domyślne sortowanie listy towarów. Wartość domyślna: Nazwa (A-Z). Dostępne wartości:

Najczęściej kupowane

Najczęściej oglądane

Nazwa (A-Z)

Nazwa (Z-A)

Cena rosnąco

Cena malejąco

Producent (A-Z)

Kod towaru (A-Z)

Kod towaru (Z-A)

Najlepiej ocenianie

Domyślnie

Ostatnio dodane

Ostatnio zmodyfikowane

pageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę (paginacja). Wartość domyślna: pageId. sort – Nazwa parametru w query string odpowiedzialna za sortowanie. Wartość domyślna: sort.
Dostępny na stronach
Obiekt może być dodany tylko na stronach

która pełni funkcję strony z listą towarów

która pełni funkcję strony ze szczegółami towaru.

Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt posiada następujące właściwości:
Wskazówka
Nazwa obiektu jest przykładowa.

productlist.FilteringOptions productlist.Search

productlist.HeaderData productlist.SelectedSorting

productlist.ItemsPerPage productlist.SortingOptions

productlist.PageCount productlist.SortingQueryGET

productlist.PageNo productlist.Supervisor

productlist.PageQueryGET productlist.TotalItems

productlist.Products.[nr produktu]

Prezentacja towaru
Obiekt zwraca szczegółowe informacje o wybranym towarze.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

Zawężaj do wybranej grupy

Zawężaj do wybranej grupy – Zawęża wyświetlane towary wybranego producenta oraz wybranej marki tylko do tych towarów, które należą do tej samej grupy co przeglądany towar na stronie szczegóły towaru. Wartość domyślna: true.
Dostępny na stronach
Obiekt może być dodany tylko na stronie, która pełni funkcję strony ze szczegółami towaru. Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt posiada właściwość Product w której skład wchodzą następujące właściwości:
Wskazówka
Nazwa obiektu jest przykładowa.

productdetails.Product.Accessories productdetails.Product.MetaTitle

productdetails.Product.AddedDate productdetails.Product.ModifiedDate

productdetails.Product.Archival productdetails.Product.MoreInfoUrl

productdetails.Product.AskForPrice productdetails.Product.Name

productdetails.Product.Attachments productdetails.Product.Name1

productdetails.Product.Attributes productdetails.Product.NameNoHtml

productdetails.Product.AttributesEditable productdetails.Product.NetWeight

productdetails.Product.AttributesList productdetails.Product.NoDiscount

productdetails.Product.AttributesPolyvalent productdetails.Product.OrdersCount

productdetails.Product.Availability productdetails.Product.ParentId

productdetails.Product.BasicUnit productdetails.Product.Points

productdetails.Product.BasicUnitMinQuantity productdetails.Product.PointsPrice

productdetails.Product.BasicUnitRatio productdetails.Product.PreviousPrice

productdetails.Product.Batch productdetails.Product.Price

productdetails.Product.Brand productdetails.Product.Rating

productdetails.Product.BrandProducts productdetails.Product.RatingCount

productdetails.Product.CN productdetails.Product.RegularPrice

productdetails.Product.Clip productdetails.Product.Related

productdetails.Product.Code productdetails.Product.RelatedProducts

productdetails.Product.ControlStock productdetails.Product.SaleUnit

productdetails.Product.DecimalPlacesPrice productdetails.Product.Sets

productdetails.Product.DecimalUnit productdetails.Product.ShortDescription

productdetails.Product.DefaultGroup productdetails.Product.Sold

productdetails.Product.DeliveryCostType productdetails.Product

productdetails.Product.Dimensions productdetails.Product.StockLevel

productdetails.Product.Flags productdetails.Product.SubtotalMinPrice

productdetails.Product.GIDNumber productdetails.Product.SubtotalPreviousPrice

productdetails.Product.HasAttributes productdetails.Product.SubtotalPrice

productdetails.Product.HasDefaultUnit productdetails.Product.SubtotalRegularPrice

productdetails.Product.HasOtherUnits productdetails.Product.Supervisor

productdetails.Product.Hits productdetails.Product.Supplies

productdetails.Product.Id productdetails.Product.Symbol

productdetails.Product.Image productdetails.Product.TotalMinPrice

productdetails.Product.ImageId productdetails.Product.TotalPreviousPrice

productdetails.Product.Images productdetails.Product.TotalPrice

productdetails.Product.Link productdetails.Product.TotalRegularPrice

productdetails.Product.Manufacturer productdetails.Product.Type

productdetails.Product.ManufacturerCode productdetails.Product.UPC

productdetails.Product.ManufacturerProducts productdetails.Product.UnitPriceRatio

productdetails.Product.MinPrice productdetails.Product.UnitPriceUnit

productdetails.Product.MetaDescription productdetails.Product.Units

productdetails.Product.MetaKeywords productdetails.Product.Url

productdetails.Product.VAT productdetails.Product.WasteMgmtCost

productdetails.Product.Weight productdetails.Product.YouTubeVideos

Nagłówek
Obiekt zwraca menu kategorii i stron.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

Poziom rozwinięcia

Ilość poziomów

Typ

Poziom rozwinięcia – Głębokość do jakiej maksymalnie może rozwinąć się menu. Wartość minimalna: 0 Wartość maksymalna: 10 Wartość domyślna: 0. Ilość poziomów – ilość poziomów na temat których obiekt przetrzymuje dane. Typ – Grupy wg wyboru. Wartość domyślna: Grupy najwyższego poziomu. Dostępne wartości:

Grupy najwyższego poziomu

Podgrupy począwszy od

Wybrane

Zawężaj menu do wybranej grupy

Dostępny na stronach
Obiekt może być dodany na wszystkich dostępnych stronach w sklepie. Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt posiada właściwość Nodes w której skład wchodzą następujące właściwości:
Wskazówka
Nazwa obiektu jest przykładowa.

header.Nodes.Count header.Nodes.ImageId

header.Nodes.Groups header.Nodes.Name

header.Nodes.Heading header.Nodes.Product

header.Nodes.Id header.Nodes.Url

header.Nodes.Image

Menu producentów i marek
Obiekt zwraca listę producentów oraz marek.

Konfiguracja

Konfiguracja
Obiekt nie posiada opcji konfiguracyjnych.
Dostępny na stronach
Obiekt może być dodany na wszystkich dostępnych stronach w sklepie. Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt posiada następujące właściwości:
Wskazówka
Nazwa obiektu jest przykładowa.

manufacturersbrands.Brands manufacturersbrands.Manufacturers

Tekst
Obiekt zwraca tekst wpisany w panelu administracyjnym.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

Język

Treść

Język – Dla jakiego języka będzie wyświetlany wpisany poniżej tekst. Treść – Treść wyświetlana przez obiekt dla danego języka.
Dostępny na stronach
Obiekt może być dodany na wszystkich dostępnych stronach w sklepie. Obiekt może być dodany wielokrotnie na stronie.

Obiekt posiada tylko jedną właściwość:
Wskazówka
Nazwa obiektu jest przykładowa.

text.Content

Opinie
Obiekt zwraca oceny, opinie dla wybranego towaru.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

pageId

pageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę(paginacja). Wartość domyślna: rvPageId.
Dostępny na stronach
Obiekt może być dodany tylko na stronie, która pełni funkcję strony ze szczegółami towaru. Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt posiada następujące właściwości:
Wskazówka
Nazwa obiektu jest przykładowa.

productuserreviews.ItemsPerPage productuserreviews.PageQueryGET

productuserreviews.PageCount productuserreviews.Reviews

productuserreviews.PageNo productuserreviews.TotalItems

Porównywarka towarów
Obiekt zwraca listę towarów dodanych do porównania.

Konfiguracja

Konfiguracja
Obiekt nie posiada opcji konfiguracyjnych.
Dostępny na stronach
Obiekt może być dodany tylko na stronie, która pełni funkcję strony z porównywarką towarów. Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt ten przetrzymuje informacje na temat porównywanych produktów.
Wskazówka
Nazwa obiektu (comparison-tool) jest przykładowa.

comparison-tool.Attributes comparison-tool.Products

Profil klienta
Obiekt zwraca szczegółowe informacje o zalogowanym kliencie.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

orderPageId

orderId

reviewPageId

reviewAwaitingPageId

historyPageId

complaintsPageId

complaintId

loyaltyPageId

orderPageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę (paginacja). Wartość domyślna: ordPageId. orderId – Nazwa parametru w query string odpowiedzialna za wyświetlanie szczegółów zamówienia. Wartość domyślna: orderId. reviewPageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę (paginacja). Wartość domyślna: rvPageId. reviewAwaitingPageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę (paginacja). Wartość domyślna: rvAwPageId. historyPageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę (paginacja). Wartość domyślna: hsPageId. complaintsPageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę (paginacja). Wartość domyślna:complaintsPageId. complaintId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę. Wartość domyślna: complaintId. loyaltyPageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę (paginacja). Wartość domyślna: ltyPageId.
Dostępny na stronach
Obiekt może być dodany tylko na stronie, która pełni funkcję strony z profilem klienta. Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt ten przetrzymuje następujące właściwości:
Wskazówka
Nazwa obiektu jest przykładowa.

customerprofile.Complaint customerprofile.LoyaltyHistory

customerprofile.ComplaintQueryGET customerprofile.Newsletter

customerprofile.ComplaintsActive customerprofile.Offer

customerprofile.ComplaintsExecuted customerprofile.OfferDetPageQueryGET

customerprofile.Consents customerprofile.OfferQueryGET

customerprofile.DiscountDetPageQueryGET customerprofile.Offers

customerprofile.DiscountERPDetails customerprofile.OffersPageQueryGet

customerprofile.DiscountQueryGET customerprofile.Order

customerprofile.Discounts customerprofile.OrderDetPageQueryGET

customerprofile.DiscountsERP customerprofile.OrderQueryGET

customerprofile.DiscountsEshop customerprofile.Orders

customerprofile.DiscountsPageQueryGet customerprofile.OrdersActive

customerprofile.Employees customerprofile.OrdersExecuted

customerprofile.History customerprofile.ProductsToRate

customerprofile.Inquiries customerprofile.Reviews

customerprofile.InquiriesPageQueryGet customerprofile.WishList

customerprofile.LinkedAccounts

Blog
Obiekt zwraca wpisy z bloga.

Konfiguracja

Konfiguracja
Dostępne opcje konfiguracyjne:

pageId

pageId – Nazwa parametru w query string odpowiedzialna za wyświetlaną stronę (paginacja). Wartość domyślna: pageId.
Dostępny na stronach
Obiekt może być dodany na wszystkich dostępnych stronach w sklepie. Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt posiada następujące właściwości:
Wskazówka
Nazwa obiektu jest przykładowa.

blog.LatestPosts blog.PostList

blog.PostDetails

Uwaga
Obiekt zwraca właściwość LatestPosts zawsze. Aby móc skorzystać z tej właściwości, należy ją obsłużyć w ramach własnej modyfikacji szablonu. Właściwość PostList aktywuje się na stronie, która pełni funkcję listy wpisów na blogu, na pozostałych stronach właściwość zwraca null. Właściwość PostDetails aktywuje się na stronie, która pełni funkcję szczegółów wpisu na blogu, na pozostałych stronach właściwość zwraca null.

Zamówienie
Obiekt zwraca dane o zamówieniu oraz informacje niezbędne do złożenia zamówienia (np. sposoby dostawy i płatności).

Konfiguracja

Konfiguracja
Obiekt nie posiada opcji konfiguracyjnych.
Dostępny na stronach
Obiekt może być dodany tylko na stronie, która pełni funkcję strony gdzie składa się zamówienie. Obiekt może być dodany tylko jednokrotnie na stronie.

Obiekt ten przetrzymuje następujące właściwości:
Wskazówka
Nazwa obiektu jest przykładowa.

cart.Attachments cart.PlacedOrder

cart.Attributes cart.Points

cart.AuthenticationRequired cart.PointsForValue

cart.CartEmpty cart.PointsPaid

cart.Changes cart.PointsPrice

cart.CollectionPointMapUrl cart.PointsPriceTotalValue

cart.CompanyOnly cart.PreOrder

cart.Coupon cart.Products

cart.Currency cart.ProductsMinimumTotalValue

cart.CurrencyExt cart.ProductsSubtotalValue

cart.Customer cart.ProductsSubtotalValueBeforeDiscount

cart.DeliveryMethods cart.ProductsTotalValue

cart.Demo cart.ProductsTotalValueBeforeDiscount

cart.Discount cart.ProductsValue

cart.EditedOrderId cart.ProductsValueBeforeDiscount

cart.GratisItems cart.SelectedDelivery

cart.NotDeterminedDeliveryCost cart.SelectedDeliveryPaymentChannelKey

cart.NotDeterminedProductsDeliveryCost cart.SelectedDeliveryPaymentId

cart.Note cart.SplitPayment

cart.OSS cart.SubtotalPrices

cart.OrderStep cart.ThirdPartyHTML

cart.OrderTotalValue cart.ThirdPartyScripts

cart.OrderValueDiscounts cart.VATValue

Dodatkowe właściwości dla wersji Enterprise
Właściwości obiektów dostępne tylko w sklepach w wersji Enterprise.
Towary
Właściwości:

Batch

TotalPreviousPrice

SubtotalPreviousPrice

TotalPrice

SubtotalPrice

TotalRegularPrice

SubtotalRegularPrice

Zamówienie, koszyk
Właściwości:

ProductsSubtotalValue

ProductsTotalValueBeforeDiscount

ProductsSubtotalValueBeforeDiscount

SubtotalPrices

ProductsTotalValue

Reklamacje, zwroty
Właściwości:

SubtotalPrice

TotalPrice

SubtotalPrices

TotalValue

SubtotalValue

Kontrahenci
Właściwości:

VATEU

Config
Właściwości:

VATEU

Config.Currencies
Dla wersji Enterpise zwraca listę walut przesłanych z systemu ERP. Dla pozostałych wersji zwraca domyślną walutę. Obiekt zwraca szczegółowe informacje o wybranym towarze.

Opis używanych obiektów lokalnych:

productnew.Products.AskForPrice

Zawiera informacje czy włączono opcję zapytaj o cenę.

productnew.Products.Availability

Zawiera informacje na temat dostępności.Właściwości:

Date – służy do wyświetlenia informacji na temat ustawionej daty dla danego towaru (np. przy zapowiedzi produktu),

ImageUrl – url obrazu,

Status – Id statusu dostępności,

Text – opis tekstowy dla danego statusu,

Type – wyświetla typ dostępności,

productnew.Products.BasicUnitMinQuantity

Informacja o minimalnej ilości zakupu w jednostce podstawowej towaru.

productnew.Products.Brand

Informacje na temat marki.Właściwości:

Heading – tytuł,

Id – numer Id,

Image - informacja o obrazie, zawiera:

ExternalUrl - link zewnętrzny do obrazu,

Id - numer id obrazu,

Link - link do obrazu,

ImageId – id obrazu,

Name – nazwa,

Url – adres Url,

UrlWithManufacturer – adres do produktów danego producenta,

productnew.Products.Code

Zawiera informacje o kodzie produktu.

productnew.Products.DecimalPlacesPrice

Liczba miejsc po przecinku do wyświetlania ceny.

productnew.Products.DecimalUnit

Informacja czy jednostki mogą być liczbami niecałkowitymi.

productnew.Products.DefaultGroup

Informacja o grupie domyślnej.

productnew.Products.Flags

Zwraca informacje o flagach (np. nowość, wyprzedaż).

productnew.Products.GIDNumber

Numer Id produktu z bazy systemu ERP.

productnew.Products.HasAttributes

Informacja czy produkt posiada atrybuty.

productnew.Products.HasOtherUnits

Informacja czy przedmiot ma inne jednostki sprzedażowe (np. para, pojedynczy produkt).

productnew.Products.Id

Numer Id produktu.

productnew.Products.Image

Informacja o zdjęciu produktu.Właściwości:

ExternalUrl - link zewnętrzny do zdjęcia,

Id - numer Id zdjęcia,

Link - link do zdjęcia,

productnew.Products.ImageId

Numer Id obrazu produktu.

productnew.Products.Images

Informacje o zdjęciach produktu. Dla każdego ze zdjęć posiada te same pola, co właściwość productnew.Products.Image.

productnew.Products.Link

Link do produktu.

productnew.Products.Manufacturer

W skład tej właściwości wchodzą Name, Id, Heading, Image, ImageId, Url, Website.

productnew.Products.MinPrice

Cena minimalna z ostatnich 30 dni.

productnew.Products.Name

Nazwa produktu.

productnew.Products.NameNoHtml

Nazwa produktu bez znaczników HTML.

productnew.Products.NoDiscount

Informacja czy produkt może być objęty zniżką.

productnew.Products.PreviousPrice

Poprzednia cena produktu.

productnew.Products.Price

Cena produktu.

productnew.Products.Rating

Średnia ocena produktu.

productnew.Products.RatingCount

Ilość ocen produktu.

productnew.Products.RegularPrice

Cena normalna produktu.

productnew.Products.SaleUnit

Jednostka sprzedażowa (np. para).

productnew.Products.Type

Typ towaru.

productnew.Products.UPC

Kod EAN z ERP.

productnew.Products.UnitPriceRatio

Przelicznik ceny za jednostkę miary.

productnew.Products.UnitPriceUnit

Możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.). Jeżeli wartość jest nullem nie wyświetlamy ceny jednostkowej.

productnew.Products.Url

Adres URL produktu.

productnew.Products.Weight

Waga produktu.

productlastviewed.Products.AskForPrice

Informacja czy włączono opcję zapytaj o cenę.

productlastviewed.Products.Availability

Informacje na temat dostępności.Właściwości:

Date - zwraca datę kiedy produkt będzie dostępny (np. jeżeli produkt jest zapowiedzią),

ImageUrl - adres url dla obrazka,

Status - status,

Text - wartość tekstowa (np. "od ręki"),

Type - typ,

productlastviewed.Products.BasicUnitMinQuantity

Informacja o minimalnej ilości zakupu w jednostce podstawowej towaru.

productlastviewed.Products.Brand

Informacje o marce produktu.Właściwości:

Heading - tytuł,

Id - numer Id,

Image - informacja o obrazie, zawiera:

ExternalUrl - link zewnętrzny do obrazu,

Id - numer id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Name - nazwa,

Url - adres url,

UrlWithManufacturer - adres URL do strony producenta,

productlastviewed.Products.Code

Zwraca kod produktu.

productlastviewed.Products.DecimalPlacesPrice

Liczba miejsc po przecinku do wyświetlania ceny.

productlastviewed.Products.DecimalUnit

Informacja czy jednostki mogą być liczbami niecałkowitymi.

productlastviewed.Products.DefaultGroup

Informacja o domyślnej grupie.

productlastviewed.Products.Flags

Zwraca flagi dla produktów (np. promocja, nowość itd.).

productlastviewed.Products.GIDNumber

Numer Id produktu z bazy systemu ERP.

productlastviewed.Products.HasAttributes

Informacja czy produkt posiada atrybuty.

productlastviewed.Products.HasOtherUnits

Informacja czy przedmiot ma inne jednostki sprzedażowe (np. para, pojedynczy produkt).

productlastviewed.Products.Id

Id produktu.

productlastviewed.Products.Image

Informacja o zdjęciu produktu.Właściwości:

ExternalUrl - link zewnętrzny do zdjęcia,

Id - numer Id zdjęcia,

Link - link do zdjęcia,

productlastviewed.Products.ImageId

Zwraca Id obrazka.

productlastviewed.Products.Images

Informacje o zdjęciach produktu. Dla każdego ze zdjęć posiada te same pola, co właściwość productlastviewed.Products.Image.

productlastviewed.Products.Link

Link do strony produktu.

productlastviewed.Products.Manufacturer

Informacje na temat producenta.Właściwości:

Heading - tytuł,

Id - id,

Image - informacja o obrazie, zawiera:

ExternalUrl - link zewnętrzny do obrazu,

Id - numer id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Name - nazwa,

Url - adres url,

Website - adres strony

productlastviewed.Products.MinPrice

Cena minimalna produktu z ostatnich 30 dni.

productlastviewed.Products.Name

Nazwa produktu.

productlastviewed.Products.NameNoHtml

Nazwa produktu (pozbawiona znaczników HTML).

productlastviewed.Products.NoDiscount

Informacja czy produkt może być objęty zniżką.

productlastviewed.Products.PreviousPrice

Poprzednia cena produktu.

productlastviewed.Products.Price

Cena produktu.

productlastviewed.Products.Rating

Średnia ocena produktu.

productlastviewed.Products.RatingCount

Liczba wszystkich ocen produktu.

productlastviewed.Products.RegularPrice

Cena normalna produktu.

productlastviewed.Products.SaleUnit

Jednostka sprzedażowa (np. para).

productlastviewed.Products.Type

Typ towaru.

productlastviewed.Products.UPC

Kod EAN z ERP.

productlastviewed.Products.UnitPriceRatio

Przelicznik ceny za jednostke miary.

productlastviewed.Products.UnitPriceUnit

Możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.). Jeżeli wartość jest nullem nie wyświetlamy ceny jednostkowej.

productlastviewed.Products.Url

Adres strony produktu (dokładniejszy niż w przypadku Link).

productlastviewed.Products.Weight

Waga produktu.

productlist.FilteringOptions

Właściwość odpowiada za opcje filtracji przedmiotów.Właściwości:

Filters - odpowiada za opcje filtracji, zawiera:

Field - nazwa dla danego filtru,

Heading - tytuł danego filtru (np. Producent),

Values - wartości dla konkretnych filtrów, zawiera:

Count - liczba przedmiotów spełniających dany warunek,

Field - nazwa (zazwyczaj tożsama z polem field elementu nadrzędnego),

Selected - czy opcja została wybrana,

Text - nazwa danego pola,

TotalCount - całkowita liczba przedmiotów tego typu na liście,

Value - wartość pola,

Wskazówka
Aby dostać się do powyższych właściwości productlist.FilteringOptions.Filters.[numer].Nazwa należy użyć nr produktu w tablicy. Przykładowo, aby dostać się do pierwszego przedmiotu w nawiasie kwadratowym należy wpisać właściwą cyfrę. Należy pamiętać, że tablice numerowane są od 0.

Groups - odpowiada za opcje filtracji po kategoriach, zawiera:

Group - opis kategorii, zawiera:

Heading - alternatywna nazwa kategorii,

Id - id kategorii,

Image - informacje o obrazie (zawiera ExternalUrl, Id, Link),

ImageId - id obrazka,

Name - nazwa kategorii,

Url - url kategorii,

Nodes - lista podkategorii, zawiera:

Count - ilość towarów,

Group - opis kategorii (zawiera Heading, Id, Image, ImageId, Name, Url),

Parent - opis kategorii nadrzędnej (zawiera Heading, Id, Image, ImageId, Name, Url),

Wskazówka
Aby dostać się do powyższych właściwości productlist.FilteringOptions.Groups.[numer].Nazwa należy użyć nr produktu w tablicy. Przykładowo, aby dostać się do pierwszego przedmiotu w nawiasie kwadratowym należy wpisać właściwą cyfrę. Należy pamiętać, że tablice numerowane są od 0.

MaxPrice - najwyższa cena produktów z danej listy,

MinPrice - najniższa cena produktów z danej listy,

PriceFrom - cena od (wpisana przez użytkownika),

PriceTo - cena do (wpisana przez użytkownika),

Results - czy są wyniki filtrowania, czy zwykła lista,

SearchGroups - grupy na podstawie filtrowania,

productlist.HeaderData

Informacje na temat nagłówka danej kategorii (np. jej tytuł, opis).Właściwości:

Description - opis,

Heading - tytuł,

Image - informacja o obrazie, zawiera:

ExternalUrl - link zewnętrzny do obrazu,

Id - numer Id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

MetaDescription - opis meta,

MetaKeywords - meta słowa kluczowe,

MetaTitle - tytuł meta,

ShortDescription - krótki opis,

productlist.ItemsPerPage

Określa liczbę produktów na stronie.

productlist.PageCount

Liczba stron.

productlist.PageNo

Numer strony.

productlist.PageQueryGET

Zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId).

productlist.Products.[nr produktu]

Informacje o produkcie.Właściwości:

AskForPrice - czy włączono opcję zapytaj o cenę,

AttributesList - lista atrybutów, zawiera:

Attributes - atrbuty, zawiera:

Id - numer id,

Format - liczbę określającą format,

Name - nazwa,

Values - wartości, zawiera:

Object - obiekt,

Value - wartość,

ValueId - numer id wartości,

AttributesEditable - atrybuty edytowalne,

AttributesPolyvalent - atrybuty wielowartościowe,

Clip - informuje, czy towar jest fantomem,

Availability – dostępność, zawiera:

Date - służy do wyświetlenia informacji na temat ustawionej daty dla danego towaru (np. przy zapowiedzi produktu),

ImageUrl - adres obrazu

Status - Id statusu dostępności,

Text - opis tekstowy dla danego statusu,

Type - wyświetla typ dostępności,

BasicUnitMinQuantity - informacja o minimalnej ilości zakupu w jednostce podstawowej towaru,

Brand - informacje na temat marki, zawiera:

Heading - tytuł,

Id - numer Id,

Image - informacje o obrazie (zawiera ExternalUrl, Id, Link),

ImageId - id obrazu,

Name - nazwa,

Url - adres Url,

UrlWithManufacturer - adres do produktów danego producenta,

Code - kod,

DecimalPlacesPrice - liczba miejsc po przecinku do wyświetlania ceny,

DecimalUnit - czy jednostki mogą być liczbami niecałkowitymi,

DefaultGroup - domyślna grupa,

Flags - zwraca flagi dla produktu (np. promocja, nowość itd.),

GIDNumber - numer Id produktu z bazy systemu ERP,

HasAttributes - czy posiada atrybuty,

HasOtherUnits - czy przedmiot ma inne jednostki sprzedażowe (np. para, pojedynczy produkt),

Id - id,

ImageId - id obrazu,

Image - informacje o obrazie, zawiera:

ExternalUrl - link zewnętrzny,

Id - id obrazu,

Link - link do obrazu,

Images - informacje o obrazach, zawiera:

ExternalUrl - link zewnętrzny,

Id - id obrazu,

Link - link do obrazu,

Link - link,

Manufacturer – informacje na temat producenta, zawiera:

Heading - tytuł,

Id - numer Id,

Image - informacje o obrazie (zawiera ExternalUrl, Id, Link),

ImageId - id obrazu,

Name - nazwa,

Url - adres url,

Website - adres strony,

MinPrice - cena minimalna z ostatnich 30 dni,

Name - nazwa,

NameNoHtml - nazwa bez znacznikow HTML,

NoDiscount - informacja czy produkt może być objęty zniżką,

PreviousPrice - poprzednia cena,

Price - cena,

Rating - średnia ocena,

RatingCount - liczba wszystkich ocen,

RegularPrice - cena normalna,

SaleUnit - jednostka sprzedażowa (np. para),

ShortDescription - krótki opis,

StockLevel - informacja o stanie magazynowym, zawiera:

Control - informuje czy kontrola jest włączona,

ImageUrl - adres grafiki obrazującej stan,

QuantityControl - informuje czy kontrola ilości jest włączona,

Text - tekst informujący o stanie magazynowym,

Type - wyświetla typ dostepności stanu magazynowego,

Value - dostępna ilość produktu,

Type - typ towaru,

UPC - kod EAN z ERP,

UnitPriceRatio - przelicznik ceny za jednostkę miary,

UnitPriceUnit - możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.). Jeżeli wartość jest nullem nie wyświetlamy ceny jednostkowej,

Url - adres Url,

Weight - waga

Wskazówka
Aby dostać się do powyższych właściwości productlist.Products[nr produktu].Nazwa należy użyć nr produktu w tablicy. Przykładowo, aby dostać się do pierwszego przedmiotu w nawiasie kwadratowym należy wpisać właściwą cyfrę. Należy pamiętać, że tablice numerowane są od 0.

productlist.Search

Zwraca informacje na temat wyniku wyszukiwania.Właściwości:

Brand - marka,

Group - zwraca string z nazwą kategorii,

GroupId - Id grupy,

Manufacturer - producent,

PriceFrom - cena od,

PriceTo - cena do,

Search - wartość pola wpisanego w wyszukiwarkę,

SearchAll - wartość pola wpisanego w wyszukiwarkę,

SearchAny - wyszukiwanie którejkolwiek z fraz,

SearchId - numer id wyszukiwania,

SearchWild - wyszukiwanie losowe (odpowiednik ,,szczęśliwego trafu"),

TotalItems - liczba przedmiotów spełniająca podane kryterium,

Url - adres Url,

productlist.SelectedSorting

Wybrany sposób sortowania.

productlist.SortingOptions

Opcje sortowania.Właściwości:

Text - wartość tekstowa danej właściwości wyszukiwania,

Value - wartość,

productlist.SortingQueryGET

Podobnie jak w przypadku SortingQueryGET zwraca string ustawiony z poziomu Panelu administratora (np. PageId).

productlist.Supervisor

Opiekun towaru.

productlist.TotalItems

Łączna liczba przedmiotów.

productdetails.Product.Accessories

Akcesoria produktu.

productdetails.Product.AddedDate

Data dodania produktu.

productdetails.Product.Archival

Informacja, czy produkt jest produktem archiwalnym.

productdetails.Product.AskForPrice

Informacja czy włączono opcję zapytaj o cenę.

productdetails.Product.Attachments

Lista załączników dodanych do produktu.

productdetails.Product.Attributes

Atrybuty produktu.Właściwości:

Format - format atrybutu: tekst, liczba, data itp.,

Id - Id danej właściwości,

Name - nazwa właściwości (np. materiał),

Object - właściwy obiekt dla atrbutu, zgodnie z Format,

Value - wartość danej właściwości (np. tworzywo sztuczne)

productdetails.Product.AttributesEditable

Pole edytowalne (przykładowo treść graweru na biżuterii).

productdetails.Product.AttributesList

Lista atrybutów produktu.

productdetails.Product.AttributesPolyvalent

W skład tej właściwości wchodzą: Format, Id, Name oraz Values (Values może posiadać Object, ValueId oraz Value).

productdetails.Product.Availability

Informacja o dostępności produktu.Właściwości:

Date - ustawienie daty kiedy towar będzie dostępny,

ImageUrl - adres URL obrazu,

Status - status,

Text - opis tekstowy,

Type - typ,

productdetails.Product.BasicUnit

Domyślna jednostka sprzedaży (np. sztuka).

productdetails.Product.BasicUnitMinQuantity

Minimalna ilość towaru do zakupu w jednostce podstawowej.

productdetails.Product.BasicUnitRatio

Przelicznik jednostki produktu.

productdetails.Product.Batch

Cechy towaru, (zwraca true jeżeli towar posiada konfigurację jednak nie jest ona odrębnym towarem).

productdetails.Product.Brand

Marka produktu.Właściwości:

Heading - nazwa,

Id - numer Id,

Image - informacje o obrazie (zawiera ExternalUrl, Id, Link),

ImageId - id obrazu,

Name - nazwa,

Url - adres Url,

UrlWithManufacturer - adres url Producenta,

productdetails.Product.BrandProducts

Towary danej marki.Właściwości:

AskForPrice - czy włączono opcję zapytaj o cenę,

Availability - dostępność. W skład tej właściwości wchodzą: Text, Type, Status, Date, ImageUrl

BasicUnitMinQuantity - minimalna ilość towaru do zakupu w jednostce podstawowej,

Brand - marka. W skład tej właściwości wchodzą: Name, Id, Heading, Image, ImageId, Url, UrlWithManufacturer

Code - kod produktu,

DecimalPlacesPrice - liczba miejsc po przecinku do wyświetlania ceny,

DecimalUnit - określa, czy jednostki mogą być liczbami niecałkowitymi,

DefaultGroup - grupa domyślna,

Flags - zwraca flagi (np. nowość, wyprzedaż),

GIDNumber - numer Id produktu z bazy systemu ERP,

HasAttributes - czy posiada atrybuty,

HasOtherUnits - czy przedmiot ma inne jednostki sprzedażowe (np. para, pojedynczy produkt),

Id - numer Id,

Image - zawiera informacje o obrazie. W skład tej właściwości wchodzą:

ExternalUrl - link zewnętrzny,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Images - zawiera informacje o zdjęciach. W skład tej właściwości wchodzą:

ExternalUrl - link zewnętrzny,

Id - id zdjęcia,

Link - link do zdjęcia,

Link - link,

Manufacturer - producent. W skład tej właściwości wchodzą Name, Id, Heading, Image, ImageId, Url, Website,

MinPrice - cena minimalna z ostatnich 30 dni,

Name - nazwa,

NameNoHtml - nazwa bez znaczników HTML,

NoDiscount - informacja czy produkt może być objęty zniżką,

PreviousPrice - poprzednia cena,

Price - cena,

Rating - średnia ocen,

RatingCount - liczba ocen,

RegularPrice - cena normalna,

SaleUnit - jednostka sprzedażowa,

Type - typ,

UPC - kod EAN z ERP,

UnitPriceRatio - przelicznik ceny za jednostkę miary,

UnitPriceUnit - możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.). Jeżeli wartość jest nullem nie wyświetlamy ceny jednostkowej,

Url - adres URL,

Weight - waga,

productdetails.Product.CN

productdetails.Product.Clip

Właściwość informująca, czy jest to fantom.

productdetails.Product.Code

Kod produktu.

productdetails.Product.ControlStock

Pokazuje czy stany magazynowe zostały włączone.

productdetails.Product.DecimalPlacesPrice

Liczba miejsc po przecinku do wyświetlania ceny.

productdetails.Product.DecimalUnit

Informacja czy jednostki mogą być liczbami niecałkowitymi.

productdetails.Product.DefaultGroup

Informacja czy produkt posiada grupę domyślną.

productdetails.Product.DeliveryCostType

Typ kosztu dostawy (np. gdy towar jest bardzo duży).

productdetails.Product.Dimensions

Informuje o wymiarach, zawiera właściwości: Length (długość), Width (szerokość) i Height (wysokość).

productdetails.Product.Flags

Wyświetla informacje o flagach dla danego produktu (np. promocja, nowość) - zawiera pole text (nazwa, np. Nagroda) oraz type (typ, np. Reward).

productdetails.Product.GIDNumber

Numer Id produktu z bazy systemu ERP.

productdetails.Product.HasAttributes

Informacja czy produkt posiada atrybuty.

productdetails.Product.HasDefaultUnit

Informacja czy produkt posiada domyślną jednostkę.

productdetails.Product.HasOtherUnits

Informacja czy przedmiot ma inne jednostki sprzedażowe (np. para, pojedynczy produkt).

productdetails.Product.Hits

Ilość wyświetleń danego towaru.

productdetails.Product.Id

Numer Id produktu.

productdetails.Product.Image

Informacje o obrazie produktu.Właściwości:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

productdetails.Product.ImageId

Id obrazu produktu.

productdetails.Product.Images

Informacje na temat obrazków dołączonych do produktu.Właściwości:

Alt - alternatywny tekst, który wyświetli się zamiast obrazka,

ExternalUrl - zewnętrzny link,

Id - id obrazu,

Link - link obrazu,

Name - nazwa,

NoFollow - czy wykorzystywany jest atrybut nofollow,

Title - tytuł,

Wskazówka
Aby dostać się do powyższych właściwości productdetails.Product.Images[numer].Nazwa należy użyć nr zdjęcia w tablicy. Przykładowo, aby dostać się do pierwszego przedmiotu w nawiasie kwadratowym należy wpisać właściwą cyfrę. Należy pamiętać, że tablice numerowane są od 0.

productdetails.Product.Link

Link do produktu.

productdetails.Product.Manufacturer

Producent. W skład tej właściwości wchodzą Heading, Id, Image, ImageId, Name, Url, Website.

productdetails.Product.ManufacturerCode

Kod Producenta.

productdetails.Product.ManufacturerProducts

Towary danego producenta. Cechy tej właściwości są tożsame z w.w. właściwością BrandProducts.

productdetails.Product.MinPrice

Najniższa cena towaru lub usługi, jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki.

productdetails.Product.MetaDescription

Opis Meta.

productdetails.Product.MetaKeywords

Słowa kluczowe Meta.

productdetails.Product.MetaTitle

Tytuł Meta.

productdetails.Product.ModifiedDate

Data ostatniej modyfikacji produktu.

productdetails.Product.MoreInfoUrl

Adres Url z większą ilością informacji.

productdetails.Product.Name

Nazwa produktu.

productdetails.Product.Name1

Nazwa produktu.

productdetails.Product.NameNoHtml

Nazwa produktu bez znaczników HTML.

productdetails.Product.NetWeight

Waga netto produktu.

productdetails.Product.NoDiscount

Informacja czy produkt może być objęty zniżką.

productdetails.Product.OrdersCount

Ilość osób (unikalnych klientów), które zakupiły dany produkt.

productdetails.Product.ParentId

Numer Id rodzica produktu.

productdetails.Product.Points

Liczba punktów lojalnościowych, które klient otrzyma za zakup tego towaru.

productdetails.Product.PointsPrice

Koszt towaru podany w punktach lojalnościowych.

productdetails.Product.PreviousPrice

Poprzednia cena produktu.

productdetails.Product.Price

Cena produktu.

productdetails.Product.Rating

Średnia ocen produktu.

productdetails.Product.RatingCount

Ilość ocen produktu.

productdetails.Product.RegularPrice

Cena standardowa produktu.

productdetails.Product.Related

Wyświetla produkty powiązane z obecnie oglądanym.Właściwości:

AskForPrice - czy włączono opcję zapytaj o cenę,

Availability - w skład tej właściwości wchodzą: Text, Type, Status, Date, ImageUrl

BasicUnitMinQuantity - minimalna ilość towaru do zakupu w jednostce podstawowej,

Brand - marka, w skład tej właściwości wchodzą: Name, Id, Heading, ImageId, Url, UrlWithManufacturer

Code - kod produktu,

DecimalPlacesPrice - liczba miejsc po przecinku do wyświetlania ceny,

DecimalUnit - czy jednostki mogą być liczbami niecałkowitymi,

DefaultGroup - grupa domyślna,

Flags - zwraca flagi (np. nowość, wyprzedaż),

GIDNumber - numer Id produktu z bazy systemu ERP,

HasAttributes - czy posiada atrybuty,

HasOtherUnits - czy przedmiot ma inne jednostki sprzedażowe (np. para, pojedynczy produkt),

Id - numer Id,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Images - obrazy, zawiera właściwości ExternalUrl, Id oraz Link,

Link - link,

Manufacturer - w skład tej właściwości wchodzą Name, Id, Heading, ImageId, Url, Website,

MinPrice - cena minimalna z ostatnich 30 dni,

Name - nazwa,

NameNoHtml - nazwa bez znaczników HTML,

NoDiscount - informacja czy produkt może być objęty zniżką,

PreviousPrice - poprzednia cena,

Price - cena,

Rating - średnia ocen,

RatingCount - liczba ocen,

RegularPrice - cena normalna,

SaleUnit - jednostka sprzedażowa,

Type - typ,

UPC - kod EAN z ERP,

UnitPriceRatio - przelicznik ceny za jednostkę miary,

UnitPriceUnit - możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.). Jeżeli wartość jest nullem nie wyświetlamy ceny jednostkowej,

Url - adres Url,

Weight - waga

productdetails.Product.RelatedProducts

Wyświetla inne produkty powiązane z obecnie oglądanym (np. akcesoria do danego produktu).Właściwości:

AIProductsRecommendations - towary podobne do przeglądanego, rekomendowane przez dodatek Sztucznej inteligencji (AI),

Accessories - akcesoria do danego produktu,

Crossselling - produkty powiązane z przeglądanym,

Custom - dodatkowy typ ustawiany w systemie ERP,

Substitutes - produkty zastępcze do przeglądanego produktu,

Suggested - produkty sugerowane.

Wskazówka
Wyżej wymienione właściwości posiadają:

AskForPrice - czy włączono opcję zapytaj o cenę,

Availability - w skład tej właściwości wchodzą: Text, Type, Status, Date, ImageUrl

BasicUnitMinQuantity - minimalna ilość towaru do zakupu w jednostce podstawowej,

Brand - marka, w skład tej właściwości wchodzą: Name, Id, Heading, ImageId, Url, UrlWithManufacturer

Code - kod produktu,

DecimalPlacesPrice - liczba miejsc po przecinku do wyświetlania ceny,

DecimalUnit - czy jednostki mogą być liczbami niecałkowitymi,

DefaultGroup - grupa domyślna,

Flags - zwraca flagi (np. nowość, wyprzedaż),

GIDNumber - numer Id produktu z bazy systemu ERP,

HasAttributes - czy posiada atrybuty,

HasOtherUnits - czy przedmiot ma inne jednostki sprzedażowe (np. para, pojedynczy produkt),

Id - numer Id,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Images - obrazy, zawiera właściwości ExternalUrl, Id oraz Link,

Link - link,

Manufacturer - w skład tej właściwości wchodzą Name, Id, Heading, ImageId, Url, Website,

MinPrice - cena minimalna z ostatnich 30 dni,

Name - nazwa,

NameNoHtml - nazwa bez znaczników HTML,

NoDiscount - informacja czy produkt może być objęty zniżką,

PreviousPrice - poprzednia cena,

Price - cena,

Rating - średnia ocen,

RatingCount - liczba ocen,

RegularPrice - cena normalna,

SaleUnit - jednostka sprzedażowa,

Type - typ,

UPC - kod EAN z ERP,

UnitPriceRatio - przelicznik ceny za jednostkę miary,

UnitPriceUnit - możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.). Jeżeli wartość jest nullem nie wyświetlamy ceny jednostkowej,

Url - adres Url,

Weight - waga

productdetails.Product.SaleUnit

Jednostka sprzedażowa produktu.

productdetails.Product.Sets

Informacje o zestawach.Właściwości:

PreviousPrice - wcześniejsza cena,

Price - cena,

Products - lista produktów wchodzących w skład zestawu,

SetId - id zestawu,

SetName - nazwa zestawu,

productdetails.Product.ShortDescription

Krótki opis produktu.

productdetails.Product.Sold

Ilość sprzedanych sztuk towaru.

productdetails.Product.SplitPayment

Podział płatności.

productdetails.Product.StockLevel

Stany magazynowe produktu.Właściwości:

Control - czy włączone są stany magazynowe,

ImageUrl - adres URL obrazu,

QuantityControl - kontrola ilości towaru,

Text - opis dla stanu,

Type - typ,

Value - wartość,

productdetails.Product.SubtotalMinPrice

Najniższa cena netto towaru lub usługi, jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki (dotyczy sklepów Enterprise i B2B).

productdetails.Product.SubtotalPreviousPrice

Cena bez VAT produktu przed obniżką.

productdetails.Product.SubtotalPrice

Cena produktu bez VAT.

productdetails.Product.SubtotalRegularPrice

Cena produktu netto.

productdetails.Product.Supervisor

Opiekun produktu.

productdetails.Product.Supplies

Właściwości fantoma.Właściwości:

AttributeNames - zawiera nazwy poszczególnych fantomów (tj. opcji danego towaru, takich jak np. kolor), w skład tej właściwości wchodzi Id oraz Name (nazwa danej opcji)

Key - lista Id kolejnych właściwości prowadząca do opcji która jest nadrzędna

Supplies - informacje na temat opcji, zawiera:

Format - format atrybutu: tekst, liczba data itp.,

Object - obiekt właściwy dla atrbutu, zgodny z Format,

Supplies - właściwości fantoma - analogicznie właściwości jak w obecnie opisywanej właściwości Supplies,

Value - wartość danej właściwości towaru (np. rozmiar "M"/"L"),

ValueId - Id wartości,

productdetails.Product.Symbol

Symbol (w formie stringa).

productdetails.Product.TotalMinPrice

Najniższa cena brutto towaru lub usługi, jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki (dotyczy sklepów Enterprise i B2B).

productdetails.Product.TotalPreviousPrice

Poprzednia cena towaru brutto.

productdetails.Product.TotalPrice

Cena z podatkiem VAT.

productdetails.Product.TotalRegularPrice

Cena produktu brutto.

productdetails.Product.Type

Typ towaru.

productdetails.Product.UPC

Zwraca kod EAN z ERP.

productdetails.Product.UnitPriceRatio

Przelicznik ceny za jednostkę miary.

productdetails.Product.UnitPriceUnit

Możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.). Jeżeli wartość to null, to nie wyświetlamy ceny jednostkowej.

productdetails.Product.Units

Jednostka sprzedażowa produktu.Właściwości:

Default - czy jest to wartość domyślna,

Dimensions - wymiary, zawiera Length (długość), Width (szerokość), Height (wysokość),

Id - Id danej jednostki,

Name - nazwa jednostki (np. para),

Ratio - przelicznik ceny przy zmianie jednostki,

productdetails.Product.Url

Adres Url produktu.

productdetails.Product.VAT

Stawka VAT.

productdetails.Product.WasteMgmtCost

Koszt gospodarowania odpadami.

productdetails.Product.Weight

Waga produktu.

productdetails.Product.YouTubeVideos

Załączone pliki video Youtube.

header.Nodes.Count

Liczba przedmiotów dostępna w danej kategorii menu.

header.Nodes.Groups

Jeżeli zawiera podmenu, to wyświetla pola wymienione w tym punkcie (Count, Heading, Id, Image, ImageId, Name, Nodes, Url oraz dodatkowe pole HasChildren)

header.Nodes.Heading

Nazwa dostępna po najechaniu kursorem.

header.Nodes.Id

Numer Id.

header.Nodes.Image

Informacje o obrazie.Właściwości:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

header.Nodes.ImageId

Id obrazu.

header.Nodes.Name

Wyświetlana nazwa.

header.Nodes.Product

Wyświetla informacje dotyczące produktów (productdetails).

header.Nodes.Url

Adres Url.

manufacturersbrands.Brands

Marka.Właściwości:

Heading - tytuł,

Id - Id,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazka,

Name - nazwa,

Url - adres Url,

UrlWithManufacturer - adres Url,

manufacturersbrands.Manufacturers

Producenci.Właściwości:

Brands - tablica z markami danego producenta,

Heading - tytuł,

Id - Id,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazka,

Name - nazwa,

Url - adres Url,

Website - adres Url,

text.Content

Treść wpisana w panelu administracyjnym

productuserreviews.ItemsPerPage

Dopuszczalna liczba opinii na każdej stronie.

productuserreviews.PageCount

Liczba stron.

productuserreviews.PageNo

Numer strony na której obecnie się znajdujemy.

productuserreviews.PageQueryGET

Zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId).

productuserreviews.Reviews

Przetrzymuje recenzje danego produktu.Właściwości:

CreatedDate - kiedy recenzja została napisana,

Rating - ocena (w formie graficznej gwiazdek),

Author - autor recenzji,

Comment - komentarz/opis oceny,

RegisteredAuthor - czy autor recenzji był zalogowany

productuserreviews.TotalItems

Łączna liczba opinii.

comparison-tool.Attributes

Lista atrybutów.

comparison-tool.Products

Obiekt z produktami do porównania.Właściwości:

AddedDate - data dodania produktu,

AskForPrice - zapytaj o cenę,

Attributes - atrybuty,

AttributesList - listę atrybutów,

Availability - dostępność, zawiera:

Date - data,

ImageUrl - adres URL zdjęcia,

Status - status,

Text - opis słowny,

Type - numer oznaczający dostępność,

BasicUnit - domyślna jednostka sprzedaży (np. sztuka),

BasicUnitMinQuantity - minimalna ilość towaru do zakupu w jednostce podstawowej,

BasicUnitRatio - przelicznik jednostki,

Brand - marka, zawiera:

Heading - tytuł,

Id - numer id,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Name - nazwa,

Url - adres URL,

UrlWithManufacturer - adres url producenta,

Code - kod produktu,

ControlStock - pokazuje, czy stany magazynowe zostały włączone,

DecimalPlacesPrice - liczba miejsc po przecinku do wyświetlania ceny,

DecimalUnit - czy jednostki moga być liczbami niecałkowitymi,

DefaultGroup - czy posiada grupę domyślną,

Flags - wyświetla informacje o flagach dla danego produktu, np. promocja, nowość. zawiera pole text - nazwa oraz typ,

GIDNumber - numer Id produktu z bazy systemu ERP,

HasAttributes - czy posiada atrybuty,

HasDefaultUnit - czy posiada domyślną jednostkę,

HasOtherUnits - czy posiada inne jednostki sprzedażowe,

Hits - ilość wyświetleń danego towaru,

Id - numer id,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Images - zdjęcia produktu, dla każdego z nich posiada:

ExternalUrl - zewnętrzny link,

Id - id zdjęcia,

Link - link do zdjęcia,

Link - link,

Manufacturer - producent, zawiera:

Heading - nazwa,

Id - numer id,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Name - nazwa,

Url - adres URL,

Website - adres URL,

ManufacturerCode - kod producenta,

MetaDescription - opis (metadane),

MetaKeywords - słowa kluczowe (metadane),

MetaTitle - tytuł (metadane),

MinPrice - cena minimalna z ostatnich 30 dni,

ModifiedDate - data modyfikacji,

MoreInfoUrl - adres URL z większą ilością informacji,

Name - nazwa,

Name1 - nazwa,

NameNoHtml - nazwe bez znaczników HTML,

NetWeight - waga netto,

NoDiscount - informacja czy produkt może być objęty zniżką,

OrdersCount - ilość osób (unikalnych klientów), które zakupiły dany produkt,

ParentId - numer id rodzica,

Points - liczba punktów lojalnościowych przyznawana za zakup tego towaru,

PointsPrice - koszt towaru podany w punktach lojalnościowych,

PreviousPrice - cena poprzednia,

Price - cena,

Rating - średnia ocen,

RatingCount - ilość ocen,

RegularPrice - cena standardowa,

SaleUnit - jednostka sprzedażowa,

ShortDescription - krótki opis,

Sold - informacja o liczbie sprzedanych sztuk danego towaru,

StockLevel - stany magazynowe,

SubtotalMinPrice - cena minimalna netto z ostatnich 30 dni od daty wprowadzenia promocji,

SubtotalPreviousPrice - cena poprzednia bez VAT,

SubtotalPrice - cena bez VAT,

SubtotalRegularPrice - cena netto,

Symbol - symbol (w formie stringa),

TotalMinPrice - cena minimalna brutto z ostatnich 30 dni od daty wprowadzenia promocji,

TotalPreviousPrice - cena poprzednia brutto,

TotalPrice - cena z podatkiem VAT,

TotalRegularPrice - cena produktu brutto,

Type - typ towaru,

UPC - zwraca kod EAN z ERP,

UnitPriceRatio - przelicznik ceny za jednostkę miary,

UnitPriceUnit - możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itp.). Jeżeli wartość wynosi null, to nie wyświetlamy ceny jednostkowej,

Url - adres URL produktu,

VAT - stawka VAT,

WasteMgmtCost - koszt gospodarowania odpadami,

Weight - waga,

customerprofile.Complaint

Przetrzymuje szczegóły na temat reklamacji.

customerprofile.ComplaintQueryGET

Zwraca string ComplaintQueryGET ustawiony z poziomu Panelu administratora (np.PageId).

customerprofile.ComplaintsActive

Lista z trwającymi właśnie reklamacjami i zwrotami.Właściwości:

Complaints - zawiera informacje o reklamacjach i zwrotach. W jego skład wchodzą właściwości:

ComplaintId - id reklamacji/zwrotu,

CreatedDate - data utworzenia reklamacji/zwrotu,

Currency - waluta,

Informacje o walucie. Zawiera:

Code - waluta przesłana z systemu ERP,

Symbol - symbol wprowadzony w panelu administracyjnym,

DecimalPlacesPrice - liczba miejsc po przecinku do wyświetlania ceny,

DefaultGroup - grupa domyślna produktu,

Description - opis reklamacji/zwrotu,

Id - id produktu,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id zdjęcia produktu,

Link - link do produktu,

NameNoHtml - nazwa produktu,

OrderId - numer zamówienia,

Price - cena,

Quantity - ilość,

Status - numer określający aktualny status reklamacji/zwrotu,

StatusText - tekst określający aktualny status reklamacji/zwrotu,

SubtotalPrice - cena netto,

SubtotalPrices - czy wyświetlane ceny są cenami netto,

SubtotalValue - wartość netto,

TotalPrice - cena brutto,

TotalValue - wartość brutto,

Type - numer określający typ (reklamacja czy zwrot),

TypeText - tekst określający typ (reklamacja czy zwrot),

Unit - jednostka,

Url - adres strony z produktem,

Value - wartość,

ItemsPerPage - ilość przedmiotów które mają być wyświetlane na stronie,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGET - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId),

TotalItems - łącznie przedmiotów

customerprofile.ComplaintsExecuted

Informacje na temat rozstrzygniętych reklamacji i zwrotów, zawiera pola analogicznie jak ComplaintsActive.

customerprofile.Consents

Informacje o zgodach Klienta.Właściwości:

Channels - kanały,

Checked - czy zgoda została zaakceptowana,

Contents - treści regulaminów przypisane do konkretnej zgody,

Date - data wyrażenia zgody,

Id - numer id zgody,

PublishedDate - data publikacji zgody,

Required - czy zgoda jest wymagana,

Statement - czy jest to forma oświadczenia,

Text - treść zgody,

Type - numer oznaczający typ zgody,

Updated - kiedy była aktualizacja tresci,

customerprofile.DiscountDetPageQueryGET

Zwraca string DiscountDetPageQueryGet ustawiony z poziomu Panelu Administratora.

customerprofile.DiscountERPDetails

Informacje nt. zniżki z systemu ERP.

customerprofile.DiscountQueryGET

Zwraca string DiscountQueryGET ustawiony z poziomu Panelu Administratora.

customerprofile.Discounts

Informacje na temat zniżek przysługujących Klientowi.Właściwości:

CustomerGroups - ulubione kategorie danego Klienta,

CustomerProducts - ulubione produkty danego Klienta,

FirstOrder - jeśli zwraca true to jest to pierwsze zamówienie Klienta zaś w Panelu Administracyjnym znajduje się obniżka dla pierwszych zamówień,

Groups - zniżka grupowa (dotyczy danej grupy produktów, np. obuwia damskiego). Zawiera Currency, DateTill, Discount, DiscountType, Treshold oraz Group, które zawiera Count, HasChildren, Heading, Id, Image, ImageId, Name oraz Url,

OrderValue - wartość zamówienia (po przeliczeniu zniżki),

Products - produkty, na które klient ma zniżkę,

Regular - standardowa obniżka (jeżeli została taka przypisana w Panelu Administracyjnym),

customerprofile.DiscountsERP

Informacje na temat zniżek z systemu ERP.Właściwości:

Discounts - lista produktów ze zniżkami, zawiera:

Code - kod,

DateFrom - data, początek ważności zniżki,

DateTill - data, koniec ważności zniżki,

Description - opis,

Id - numer id,

Name - nazwa produktu ze zniżką,

Type - typ zniżki,

ItemsPerPage- ilość produktów na stronie,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGET - zwraca string PageQueryGET ustawiony z poziomu Panelu Administratora,

TotalItems - łączna ilość towarów ze zniżkami (odpowiada ilości produktów w tym obiekcie we właściwości Discounts,

customerprofile.DiscountsEshop

Zniżki z e-Sklepu.Właściwości:

FirstOrder - jeśli zwraca true to jest to pierwsze zamówienie Klienta zaś w Panelu Administracyjnym znajduje się obniżka dla pierwszych zamówień,

OrderValue - rabat od wartości zamówienia,

Regular - rabat dla stałego klienta,

customerprofile.DiscountsPageQueryGet

Zwraca string DiscountsPageQueryGet ustawiony z poziomu Panelu Administratora.

customerprofile.Employees

Lista pracowników jakich posiada sklep, wraz z ich danymi.Właściwości:

Active - czy pracownik ma status aktywnego,

Email - adres email pracownika,

ExportedToERP - czy pracownik został wyeksportowany do systemu ERP,

Id - id pracownika,

LanguageId - id języka,

Name - nazwa pracownika,

Name2 - nazwa pracownika,

Owner - czy jest właścicielem,

PhoneNo - numer telefonu pracownika,

customerprofile.History

Zawiera informacje na temat działań na koncie, np. logowań (i nieudanych prób logowania) czy zmiany danych.Właściwości:

Items - zawiera następujące informacje:

Category - rodzaj wykonanej akcji (np. Logowanie),

Date - data wykonania akcji,

Event - opis akcji (np. Logowanie poprawne),

User - kto wykonał akcję,

UserType - typ użytkownika, który wykonał akcję

ItemsPerPage - ilość akcji wyświetlanych na jednej stronie,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGet - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId),

TotalItems - łączna liczba akcji,

customerprofile.Inquiries

Zawiera informacje odnośnie zapytań ofertowych.Właściwości:

ItemsPerPage - maksymalna ilość zapytań wyświetlana na jednej stronie,

List - lista zapytań, zawiera:

Date - data złożenia zapytania,

Id - id zapytania,

Status - numer określający status zapytania,

StatusText - tekst opisujący status zapytania,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGET - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId),

TotalItems - ilość zapytań ofertowych,

customerprofile.InquiriesPageQueryGet

Zwraca string InquiriesPageQueryGet ustawiony z poziomu Panelu administratora.

customerprofile.LinkedAccounts

Powiązane konta.

customerprofile.LoyaltyHistory

Historia wydawanych i zdobywanych punktów lojalnościowych.Właściwości:

Items - informacje odnośnie płatności punktami lojalnościowymi, zawiera:

Date - data,

Event - numer oznaczający zdarzenie,

EventText - tekst opisujący zdarzenie,

Id - numer id,

Points - ilość punktów,

User - typ użytkownika (słownie),

UserType - numer określający typ użytkownika,

ItemsPerPage - ilość akcji wyświetlanych na jednej stronie,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGET - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId),

TotalItems - łączna liczba akcji,

customerprofile.Newsletter

Informacje o subskrypcji newslettera oraz Id języka.Właściwości:

LanguageId - id języka, w jakim newsletter ma się wyświetlać,

Subscriber - czy użytkownik jest subskrybentem newslettera,

customerprofile.Offer

customerprofile.OfferDetPageQueryGET

Zwraca string OfferDetPageQueryGET ustawiony z poziomu Panelu administratora.

customerprofile.OfferQueryGET

Zwraca string OfferQueryGET ustawiony z poziomu Panelu administratora.

customerprofile.Offers

Lista ofert.Właściwości:

ItemsPerPage - ilość ofert na stronie,

List - lista ofert, zawiera:

Date - data utworzenia oferty,

Id - numer id oferty,

Status - numer określający status oferty,

StatusText - tekst opisujący aktualny status oferty,

PageCount - ilość stron,

PageNo - aktualna strona,

PageQueryGET - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora,

TotalItems - ilość ofert,

customerprofile.OffersPageQueryGet

Zwraca string OffersPageQueryGet ustawiony z poziomu Panelu administratora.

customerprofile.Order

Zawiera informacje na temat złożonego zamówienia.Właściwości:

Attachments - załączniki,

Attributes – atrybuty nagłówkowe zamówienia,

CanAccept - czy zamówienie może być zaakceptowane,

CanCancel - czy zamówienie może być anulowane,

CanCopy - czy zamówienie może zostać skopiowane,

CanEdit – czy zamówienie można edytować,

CanRestorePayment - jeżeli wartość true, to umożliwia to umożliwia ponowne opłacenie towaru (np. w przypadku awarii Banku, nieudanej płatności itp.),

Currency - zwraca walutę,

Customer- zwraca informacje dotyczące Klienta:

Buyer - trzecie dane klienta,

Company - czy Klient jest firmą,

DeliveryAddress- zwraca informacje na temat adresu dostawy:

City - miasto,

Country - kraj,

Name - dane kupującego,

Name2 - dane kupującego,

Name3 - dane kupującego,

PhoneNo - numer telefonu,

State - województwo,

Street - ulica,

StreetNo - numer domu,

UnitNo - numer mieszkania,

ZipCode - kod pocztowy,

Email - zwraca adres mailowy,

Employee- zwraca informacje na temat pracownika, zawiera:

Email - adres mailowy,

LanguageId - id języka,

Name - nazwa,

Name2 - dodatkowe pole nazwa,

PhoneNo - numer telefonu

Invoice - czy wybrano fakturę,

InvoiceAddress - zawiera dane adresowe na jakie ma być wystawiona faktura. Zawiera te same pola co DeliveryAddress oraz dodatkowo pole Email wskazujące na adres mailowy,

RegisteredUser - czy użytkownik jest zarejestrowany,

SSN - numer PESEL,

TIN - numer NIP,

VATEU - zwraca kraj właściwy dla VAT,

Date - data złożenia zamówienia,

Delivery - wybrany sposób dostawy, zawiera:

CollectionPoint - punkt odbioru,

CollectionPointAddress - dane adresowe punktu odbioru,

CollectionPointId - numer id punktu odbioru,

CollectionPointTypeId - numer id oznaczający typ punktu odbioru,

DateText - data,

Description - opis,

MethodId - numer id sposobu dostawy,

Name - nazwa sposobu dostawy,

PackageCount - ilość paczek,

Status - status dostawy (numer),

StatusText - status dostawy (tekst),

SubtotalValue - wartość bez podatku VAT,

TotalValue - wartość zamówienia,

Waybill - list przewozowy,

Waybills - informacje o listach przewozowych,

DeliveryDate - zawiera liczbę (zazwyczaj dni) w ciągu których towar zostanie dostarczony,

Discount - zniżka,

Documents - załączone dokumenty/pliki,

ERPOrderNumber – numer zamówienia z ERPa,

EditingAllowed – jeśli true to zamówienie jest w trakcie edycji,

ExpectedDate - dzień dostarczenia towaru ,

ExpirationDate - dzień do którego towar zostanie dostarczony,

Hash - unikalny numer oznaczający zamówienie,

Id - numer Id,

IsEdited – jeśli true to zamówienie zostało wyedytowane,

ItemsPerPage – ilość towarów na stronie na szczegółach zamówienia,

LanguageId - Id języka,

NotDeterminedDeliveryCost - wyświetla informacje czy koszt dostawy został zdefiniowany,

Note - dodatkowe informacje,

OrderTotalValue - łączna wartość zamowienia,

PageCount – ilość stron z towarami na szczegółach zamówienia,

PageNo – numer strony z towarami na szczegółach zamówienia,

Payment - informacje odnośnie płatności, zawiera:

Description - opis,

DueDateText - określa termin/moment płatności,

MethodId - Id danej metody,

MethodIdText - opis danego Id,

MethodType - typ metody,

Name - nazwa,

OnlineNumber - Id transakcji z platności online,

Status - status płatności (numer),

StatusText - status płatności (tekst),

SubtotalValue - koszt płatności bez podatku VAT,

TotalValue - łączny koszt płatności,

Points – punkty lojalnościowe otrzymane za złożenie zamówienia,

PointsPaid – punkty lojalnościowe wydane w tym zamówieniu,

ProcessedDate - data wysłania,

Products - informacje o produktach w zamówieniu, zawiera:

Attributes – atrybuty elementu zamówienia,

CanComplain - czy można złożyć reklamację,

CanReturn - czy można zwrócić towar,

Code - kod produktu,,

DefaultGroup - grupa domyślna produktu,

Description - pole opis (np. rozmiar buta),

Id - numer Id,

Image - obraz,

ImageId - Id obrazu,

IsDeleted – czy usunięty,

IsEdited – czy wyedytowany,

IsModified – czy modyfikowany,

IsSetElement - czy jest częścią zestawu,

IsSetParent - czy przedmiot jest przedmiotem głównym,

Link - link,

NameNoHtml - nazwa bez tagów HTML,

No - numer,

Price - cena,

Quantity - ilość zakupionego towaru,

ReturnedQuantity - ilość zwróconego towaru,

SetName - nazwa zestawu,

SubtotalPrice - cena bez VAT,

SubtotalValue - cena całkowita (cena * ilość) bez VAT,

TotalPrice - cena z podatkiem VAT,

TotalValue - całkowita wartość zamówienia,

UPC - zwraca kod EAN z ERP,

Unit - jednostka sprzedażowa (np. para),

Url - adres URL,

VAT - wartość podatku VAT,

Value - wartość brutto towaru,

WasteMgmtCost - koszty gospodarowania odpadami,

ProductsSubtotalValue - cena towarów bez podatku VAT,

ProductsTotalValue - łączna cena towarów w koszyku,

ProductsValue - wartość towarów,

ProductsValueBeforeDiscount – wartość towarów przed zniżką,

ProductsVatValue - wartość podatku VAT (w złotówkach),

RecalculationRequired – czy wymagane przeliczenie zamówienia,

RelatedOffers - powiązane oferty sprzedaży,

RelatedOrders - powiązane zamówienia,

ReportUrl - wygenerowany link do raportu,

SelectedDeliveryDate – wybrana przez klienta data dostawy,

Source - źródło,

SplitPayment - podział płatności,

Status - status,

StatusText - opis tekstowy statusu,

SubtotalPrices - czy wyświetlane ceny są cenami netto,

TotalItems – ilość wszystkich towarów z zamówienia,

Url - adres URL do zamówienia, zawiera hash,

Weight - waga,

customerprofile.OrderDetPageQueryGET

Zwraca string OrderDetPageQueryGET ustawiony w panelu administracyjnym.

customerprofile.OrderQueryGET

Zwraca string OrderQueryGET ustawiony z poziomu Panelu administratora (np.PageId).

customerprofile.Orders

Połączenie danych z customerprofile.Active i customerprofile.Executed.Właściwości:

ItemsPerPage - maksymalna ilość na jednej stronie,

Orders - zawiera informacje o zamówieniach, posiada właściwości:

Currency - waluta,

CurrencyExt - informacje o walucie. Zawiera Code i Symbol,

Date - data złożenia zamówienia,

DeliveryStatus - status zamówienia (numer),

DeliveryStatusText - status zamówienia (tekst),

Email - adres email,

OrderId - numer id zamówienia,

PaymentStatus - status płatności (numer),

PaymentStatusText - status płatności (tekst),

Status - status zamówienia (numer),

StatusText - status zamówienia (tekst),

SubtotalValue - wartość zamówienia bez podatku VAT,

TotalValue - wartość zamówienia z podatkiem VAT,

Value - wartość zamówienia,

PageCount - ilość stron,

PageNo - aktualny numer strony,

PageQueryGET - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora,

TotalItems - łączna ilość zamówień,

customerprofile.OrdersActive

Informacje na temat aktywnych zamówień.Właściwości:

ItemsPerPage - ilość przedmiotów wyświetlanych na jednej stronie,

Orders - lista aktywnych zamówień zawiera następujące informacje:

Currency - waluta,

CurrencyExt - informacje o walucie. Zawiera Code i Symbol,

Date - data złożenia zamówienia,

DeliveryStatus - status zamówienia (numer),

DeliveryStatusText - status zamówienia (tekst),

Email - adres email,

OrderId - numer id zamówienia,

PaymentStatus - status płatności (numer),

PaymentStatusText - status płatności (tekst),

Status - status zamówienia (numer),

StatusText - status zamówienia (tekst),

SubtotalValue - wartość zamówienia bez podatku VAT,

TotalValue - wartość zamówienia z podatkiem VAT,

Value - wartość zamówienia,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGet - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId),

TotalItems - łączna liczba aktywnych zamówień,

customerprofile.OrdersExecuted

Zamówienia zrealizowane.Właściwości:

ItemsPerPage - ilość przedmiotów wyświetlanych na jednej stronie,

Orders - lista aktywnych zamówień zawiera następujące informacje:

Currency - waluta,

CurrencyExt - informacje o walucie. Zawiera Code i Symbol,

Date - data złożenia zamówienia,

DeliveryStatus - status zamówienia (numer),

DeliveryStatusText - status zamówienia (tekst),

Email - adres email,

OrderId - numer id zamówienia,

PaymentStatus - status płatności (numer),

PaymentStatusText - status płatności (tekst),

Status - status zamówienia (numer),

StatusText - status zamówienia (tekst),

SubtotalValue - wartość zamówienia bez podatku VAT,

TotalValue - wartość zamówienia z podatkiem VAT,

Value - wartość zamówienia,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGet - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId),

TotalItems - łączna liczba zrealizowanych zamówień,

customerprofile.ProductsToRate

Produkty zakupione ale jeszcze nie ocenione.Właściwości:

ItemsPerPage - maksymalna ilość przedmiotów na stronie,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGet - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora,

Products - informacje o produktach, zawiera:

OrderDate - data złożenia zamówienia,

OrderId - id zamówienia,

Product - informacja o produkcie, zawiera:

DefaultGroup - domyślna grupa,

Id - id produktu,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id zdjęcia,

Link - link do produktu,

NameNoHtml - nazwa produktu bez znaczników HTML,

Url - adres URL produktu,

TotalItems - łączna ilość produktów do oceny,

customerprofile.Reviews

Zawiera informacje na temat opinii napisanych przez użytkownika.Właściwości:

AverageRating - średnia ocen,

ItemsPerPage - ilość przedmiotów na stronie,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGET - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora,

Reviews - opinie. Zawiera:

Active - czy opinia jest aktywna,

Comment - treść opinii,

CreatedDate - data utworzenia,

OrderId - id zamówienia,

Product - informacje o produkcie. Zawiera:

DefaultGroup - domyślna grupa,

Id - id produktu,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - id obrazka,

Link - link,

NameNoHtml - nazwa (bez znaczników html),

Url - adres strony produktu,

Rating - ocena,

TotalItems - łączna ilość opinii,

customerprofile.WishList

Lista towarów znajdujących się na liście życzeń/przechowalni.Właściwości:

Note - uwagi,

Notify - powiadomienie,

NofifyDate - data powiadomienia,

Product - informacje o produkcie, zawiera:

AskForPrice - zapytaj o cenę,

Availability - dostępność, zawiera:

Date - data,

ImageUrl - adres URL zdjęcia,

Status - status dostępności (numer),

Text - status dostępności (tekst),

Type - typ,

BasicUnitMinQuantity - informacja o minimalnej ilości zakupu w jednostce podstawowej towaru,

Brand - marka, zawiera:

Heading - tytuł,

Id - id marki,

Image - informacje o obrazie, zawiera:

ExternalUrl - zewnetrzny link,

Id - id obrazu,

Link - link do obrazu,

ImageId - numer id obrazu,

Name - nazwa marki,

Url - adres url marki,

UrlWithManufacturer - adres do produktów danego producenta,

Code - kod,

DecimalPlacesPrice - liczba miejsc po przecinku do wyświetlania ceny,

DecimalUnit - czy jednostki mogą być liczbami niecałkowitymi,

DefaultGroup - domyślna grupa,

Flags - flagi (np. nowość, wyprzedaż),

GIDNumber - numer Id produktu z bazy systemu ERP,

HasAttributes - czy posiada atrybuty,

HasOtherUnits - czy posiada inne jednostki sprzedażowe,

Id - numer id,

Image - zdjęcie, zawiera:

ExternalUrl - zewnętrzny link,

Id - numer id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Images - zdjęcia, zawiera:

ExternalUrl - zewnętrzny link,

Id - numer id obrazu,

Link - link do obrazu,

Link - link do produktu,

Manufacturer - producent, zawiera:

Heading - tytuł,

Id - numer id producenta,

Image - zdjęcie, zawiera:

ExternalUrl - zewnętrzny link,

Id - numer id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

Name - nazwa,

Url - adres URL,

Website - strona WWW producenta,

MinPrice – cena minimalna z ostatnich 30 dni,

Name - nazwa produktu,

NameNoHtml - nazwa produktu bez znaczników HTML,

NoDiscount - informacja, czy produkt może być objęty zniżką,

PreviousPrice - cena poprzednia,

Price - cena,

Rating - średnia ocena,

RatingCount - ilość ocen,

RegularPrice - cena normalna,

SaleUnit - jednostka sprzedażowa (np. para),

Type - typ,

UPC – kod EAN z ERP,

UnitPriceRatio - przelicznik ceny za jednostkę miary,

UnitPriceUnit - możliwa jednostka przeliczniowa (np. litry na mililitry, gramy na kilogramy itd.),

Url - adres url,

Weigth - waga,

Quantity - ilość,

blog.LatestPosts

Zwraca informacje na temat ostatnich postów.Właściwości:

Content - zawartość wpisu (jego treść),

Heading - tytuł,

Id - numer Id,

ImageUrl - URL obrazu,

PublishedDate - data publikacji,

Url - adres URL,

Tags - tagi, zawiera właściwości:

Text - tekst,

Url - adres URL,

Weight - waga,

blog.PostDetails

Informacje o szczegółach posta.Właściwości:

Content - treść,

Heading - nagłówek,

Id - id,

ImageUrl - url obrazka,

MetaDescription - meta opis,

MetaKeywords - meta słowa kluczowe,

MetaTitle - meta tytuł,

Next - informacje o następnym poście, zawiera:

Heading - nagłówek,

Id - id,

PublishedDate - data publikacji,

Url - url,

Previous - informacje o poprzednim poście (analogicznie do Next),

PublishedDate - data publikacji,

Tags - informacje o tagach, zawiera:

Text - nazwa taga,

Url - url do listy postów z danym tagiem,

Weight - waga,

Url - url,

blog.PostList

Informacje o liście postów.Właściwości:

ItemsPerPage - ilość wpisów wyświetlanych na jednej stronie,

PageCount - ilość stron,

PageNo - numer strony,

PageQueryGET - zwraca string PageQueryGET ustawiony z poziomu Panelu administratora (np. PageId),

TotalItems - łączna liczba postów ,

Posts - zawiera informacje na temat wpisów na stronie. Właściwość ta zawiera dokładnie te same elementy co LatestPosts,

Search - informacje o wyszukaniu. Zawiera element Url,

cart.Attachments

Załączniki dodane do zamówienia.

cart.Attributes

Atrybuty nagłówkowe zamówienia.

cart.AuthenticationRequired

Informacja czy wymagane jest aby użytkownik był zalogowany.

cart.CartEmpty

Informacja czy koszyk jest pusty.

cart.Changes

Zwraca true jeśli dokonano zmiany w koszyku (np. dodanie produktu jako użytkownik zalogowany, wylogowanie i ponowne dodanie produktu jako zalogowany użytkownik).

cart.CollectionPointMapUrl

Link do mapy z punktami odbioru.

cart.CompanyOnly

Jeśli true to zamówienie można złożyć tylko jako firma.

cart.Coupon

Zwraca użyty kod rabatowy.

cart.Currency

Waluta w koszyku.

cart.CurrencyExt

Informacje o walucie w koszyku. Zawiera Code i Symbol).

cart.Customer

Informacje na temat Klienta.Właściwości:

Buyer - trzecie dane klienta,

Company - czy Klient jest firmą,

CustomerDetailsEditable - czy można edytować dane,

DeliveryAddress- właściwość odpowiada za możliwość zmiany adresu dostawy, składa się z:

City - miasto,

Country - kraj,

Name - dane odbiorcy,

Name2 - dane odbiorcy,

Name3 - dane odbiorcy,

PhoneNo - numer telefonu,

State - województwo,

Street - ulica,

StreetNo - numer domu,

UnitNo - numer mieszkania,

ZipCode - kod pocztowy,

Email - adres e-mail,

Id - numer Id,

Invoice - czy Klient chce aby wystawiona została faktura,

InvoiceAddress - właściwość odpowiada za możliwość wybrania danych do faktury, takich jak:

City - miasto,

Country - kraj,

Name - dane odbiorcy faktury,

Name2 - dane odbiorcy faktury,

Name3 - dane odbiorcy faktury,

PhoneNo - numer telefonu,

State - województwo,

Street - ulica,

StreetNo - numer domu,

UnitNo - numer mieszkania,

ZipCode - kod pocztowy,

SSN - numer PESEL,

TIN - numer NIP,

VATEU - numer VATEU,

cart.DeliveryMethods

Informacje na temat sposobów dostawy.Właściwości:

CalculationId - id kalkulacji,

CollectionPointTypeId - numer id oznaczający typ punktu odbioru,

DateText - opis sposobu dostawy,

Description - opis,

FastDelivery - czy obsługuje opcję szybkiej dostawy,

FreeDeliveryFrom - opcja darmowej dostawy od określonej kwoty,

ImageUrl - url do obrazu,

Name - nazwa,

NotDeterminedDeliveryCost - zwraca true jeżeli koszt dostawy zostanie ustalony przez obsługę sklepu,

Payments - informacje na temat sposobu płatności dostępnego dla wybranego sposobu dostawy. Zawiera:

AdditionalDataHTML - dodatkowo przekazany HTML,

COD - płatność za pobraniem,

Channels - kanały płatności,

Description - opis,

DueDateText - określa termin płatności,

FreePaymentFrom - darmowa płatność od (kwota),

Id - numer Id,

ImageUrl - adres URL obrazu,

MethodId - numer id metody płatności,

Name - Nazwa,

TotalValue - kwota,

TotalValue - wartość sposobu dostawy (cena),

cart.Demo

Gdy true, nie można składać zamówień.

cart.Discount

Wartość rabatu wyrażona w procentach.

cart.EditedOrderId

Id wyedytowanego zamówienia.

cart.GratisItems

Informuje o przysługujących produktach promocyjnych. Właściwości:

Attributes - atrybuty produktu, zawiera:

Format – format atrybutu: tekst, liczba, data itp.,

Id – Id danej właściwości,

Name – nazwa właściwości (np. materiał),

Object – właściwy obiekt dla atrbutu, zgodnie z Format,

Value – wartość danej właściwości (np. tworzywo sztuczne)

AttributesEditable - pole z atrybutami edytowalnymi (przykładowo treść graweru na biżuterii),

AttributesPolyvalent - lista atrybutów produktu,

DiscountId - numer Id rabatu,

DiscountType - typ przyznanego rabatu,

DiscountValue - wartość przyznanego rabatu,

ElementId - numer Id produktu promocyjnego,

HasAttributes - informacja czy produkt posiada atrybuty,

Image - informacje o obrazie produktu, zawiera:

ExternalUrl - zewnętrzny link,

Id - numer id obrazu,

Link - link do obrazu,

IsNetPrice - informacja czy cena jest wartością netto,

Name - nazwa rabatu,

NameNoHtml - nazwa produktu,

ProductGroupId - numer Id grupy rabatowej do której należy produkt,

ProductId - numer Id produktu,

Quantity - ilość danego przedmiotu na którą naliczany jest towar po cenie promocyjnej,

SaleUnit - jednostka sprzedażowa,

Url - adres URL,

Value - wartość produktu promocyjnego,

cart.NotDeterminedDeliveryCost

Zwraca true jeżeli koszt dostawy zostanie ustalony przez obsługę sklepu.

cart.NotDeterminedProductsDeliveryCost

cart.Note

Informacje/uwagi dodatkowe wpisane przez Klienta.

cart.OSS

Informacja o obsłudze szczególnej procedury rozliczania VAT dla e-Commerce.

cart.OrderStep

Nazwa kroku w zamówieniu.

cart.OrderTotalValue

Łączna wartość do zapłaty.

cart.OrderValueDiscounts

Łączna wartość zniżek.

cart.PlacedOrder

Wszystkie dane odnośnie danego zamówienia.

cart.Points

Punkty lojalnościowe, które klient otrzyma za złożenie tego zamówienia.

cart.PointsForValue

Ilość punktów lojalnościowych za wartość zamówienia.

cart.PointsPaid

Punkty lojalnościowe wydane przy składaniu tego zamówienia.

cart.PointsPrice

Cena zamówienia (netto lub brutto w zależności od rodzaju klienta – prywatny lub firma) przy użyciu punktów lojalnościowych.

cart.PointsPriceTotalValue

Cena brutto zamówienia przy użyciu punktów lojalnościowych.

cart.PreOrder

Informacja czy produkt jest zapowiedzią (nie jest jeszcze dostępny).

cart.Products

Informacje o produkcie/produktach w koszyku.Właściwości:

AskForPrice - czy włączono opcję zapytaj o cenę,

AskForPriceId - numer id zapytania o cenę,

Attributes - atrybuty,

BasicUnit - podstawowa jednostka,

BasicUnitRatio - przelicznik jednostki,

CanChangeQuantity - czy można zmienić ilość,

CanDelete - czy można usunąć,

Changed - jeśli wartość zwraca true należy dokonać ponownego przeliczenia koszyka,

Code - kod produktu,

DecimalPlacesPrice - liczba miejsc po przecinku do wyświetlania ceny,

DecimalUnit - czy jednostka może być liczbą niecałkowitą,

DefaultGroup - do jakiej grupy domyślnej przedmiot należy,

Description - opis przedmiotu (np. rozmiar buta),

Discount - zniżka,

GIDNumber - numer Id produktu z bazy systemu ERP,

Id - numer Id,

Image - zdjęcie, zawiera:

ExternalUrl - zewnętrzny link,

Id - numer id obrazu,

Link - link do obrazu,

ImageId - id obrazu,

IsSetElement - czy należy do zestawu,

IsSetParent - czy przedmiot jest główną częścią np. zestawu,

Link - link,

MinPrice - cena minimalna z ostatnich 30 dni,

NameNoHtml - nazwa bez znaczników HTML,

No - numer przedmiotu w koszyku,

NoDiscount - czy nie ma zniżki,

Points - punkty,

PointsForValue - ilość punktów lojalnościowych za wartość produktu,

PointsPrice – cena towaru po użyciu punktów lojalnościowych,

Price - cena,

Quanity - ilość danego przedmiotu w koszyku,

SaleUnit - jednostka sprzedażowa,

SetName - nazwa zestawu,

SplitPayment - podział płatności,

Status- zawiera:

Date - jeżeli produkt jest zapowiedzią, to w tym miejscu znajduje się data kiedy stanie się on dostępny,

ImageUrl - adres URL obrazu,

Status - status,

Text - opis tekstowy,

Type - typ,

SubtotalPrice - cena bez VAT,

SubtotalValue - wartość bez VAT (produkt * ilość),

SubtotalValueBeforeDiscount - wartość bez VAT (produkt * ilość) przed obniżką,

TotalPrice - cena z podatkiem VAT,

TotalValue - cena za towary (cena * ilość),

TotalValueBeforeDiscount - cena za towary przed obniżką,

UPC - kod EAN towaru,

UnitPriceRatio - przelicznik ceny za jednostkę miary,

UnitPriceUnit - możliwa jednostka przeliczeniowa (np. litry na mililitry, gramy na kilogramy itd.). Jeżeli wartość jest nullem nie wyświetlamy ceny jednostkowej,

Url - adres URL,

VAT - stawka VAT,

Value - suma zamówienia brutto,

ValueBeforeDiscount - wartość przed rabatem,

WasteMgmCost -koszty gospodarowania odpadami,

Weight - waga,

cart.ProductsMinimumTotalValue

Minimalna cena zamówienia.

cart.ProductsSubtotalValue

Cena towarów (produkt * ilość) bez podatku VAT.

cart.ProductsSubtotalValueBeforeDiscount

Cena towarów (produkt * ilość) bez podatku VAT przed rabatem.

cart.ProductsTotalValue

Łączna cena towarów w koszyku.

cart.ProductsTotalValueBeforeDiscount

Łączna cena towarów bez rabatu.

cart.ProductsValue

Wartość towarów.

cart.ProductsValueBeforeDiscount

Cena towarów przed rabatem.

cart.SelectedDelivery

Wybrany sposób dostawy.Właściwości:

CalculationId - id kalkulacji,

CollectionPoint – dane wybranego punktu odbioru wprowadzone w panelu administracyjnym (np. adres, nazwa, godziny otwarcia),

CollectionPointId – numer Id punktu dostawy,

CollectionPointMapData - informacje o punktach dostawy,

CollectionPointMapUrl - adres do mapy punktów dostawy,

CollectionPointTypeId – numer Id typu punktu dostawy,

CollectionPointTypeText – opis tekstowy typu punktu odbioru (np. "Personal"),

DateText – opis,

Description – opis danej metody dostawy (jeżeli opis został uzupełniony w Panelu Administratora),

FastDelivery - czy obsługuje opcję szybkiej dostawy,

FreeDeliveryFrom – darmowa dostawa (od określonej kwoty),

ImageUrl - adres URL zdjęcia,

MethodId – numer Id metody dostawy,

Name - nazwa sposobu dostawy,

NotDeterminedDeliveryCost - brak ustalonych kosztów dostawy,

Payment - informacje odnośnie płatności, zawiera:

AdditionalDataHTML – dodatkowo przekazany HTML,

COD - płatność za pobraniem,

Channel,

Description – opis danej metody płatności (jeżeli opis został uzupełniony w Panelu Administratora),

DueDateText – opis (np. w formie tekstu lub liczby) terminu płatności,

Id – numer Id,

ImageUrl – url obrazka,

MethodId – Id danej metody,

MethodIdText - nazwa dla danego ID,

MethodType – typ metody dostawy,

Name – nazwa,

SubtotalValue – całkowity koszt netto płatności,

TotalValue – koszt całkowity płatności (np. dodatkowa opłata związana z przedpłatą),

VAT - stawka podatku VAT,

PhoneRequired – czy wymagane jest podanie numeru telefonu,

SelectedDate – data dostawy wybrana przez klienta,

SubtotalValue – całkowita cena netto kosztu dostawy,

Time – ilość dni, którą należy dodać do dzisiejszej daty, aby uzyskać najwcześniejszą możliwą do wyboru datę dostawy,

TotalValue – cen całkowita kosztu dostawy,

VAT - stawka podatku VAT,

cart.SelectedDeliveryPaymentChannelKey

Wybrany kanał płatności.

cart.SelectedDeliveryPaymentId

Id wybranej metody płatności.

cart.SplitPayment

Podział płatności.

cart.SubtotalPrices

Informacja czy ceny w koszyku pokazywane są z podatkiem VAT.

cart.ThirdPartyHTML

Zawiera kod wywoływanego skryptu, jeśli została wprowadzona odpowiednia konfiguracja w Panelu administracyjnym związana z obsługą Wiarygodne Opinie - Opineo.pl, Zaufane Opinie, Program Ochrony Kupujących - Ceneo.pl, lub Wiarygodne Opinie - Okazje.info.

cart.ThirdPartyScripts

Zawiera kod wywoływanego skryptu, jeśli została wprowadzona odpowiednia konfiguracja w Panelu administracyjnym związana z obsługą Wiarygodne Opinie - Opineo.pl, Zaufane Opinie, Program Ochrony Kupujących - Ceneo.pl, lub Wiarygodne Opinie - Okazje.info.

cart.VATValue

Wartość podatku VAT w koszyku.

Dostępne filtry

Spis treści

Tablice

Tekstowe

Liczbowe, Matematyczne

Data i czas

Cena

HTML

Pozostałe

Tablice
W skład tych filtrów wchodzą:

First Randomize

Last Join

Skip Map

Take Size

Sort Uniq

Reverse

Tekstowe
W skład tych filtrów wchodzą:

Format Size

Append Slice

Prepend Split

Capitalize StripHtml

Downcase StripNewlines

Upcase NewlineToBr

Remove Truncate

RemoveFirst TruncateWords

Replace Times

ReplaceFirst

Liczbowe, Matematyczne
W skład tych filtrów wchodzą:

Plus Normalize

Minus Floor

Times Ceil

DividedBy Abs

Modulo Round

Data i czas
W skład tych filtrów wchodzą:

Date

Cena
W skład tych filtrów wchodzą:

ToPrice

HTML
Filtry, które po zastosowaniu zwracają gotowe fragmenty kodów HTML do wykorzystania na stronie. W skład tych filtrów wchodzą:

A Img2

Img

Pozostałe
W skład tych filtrów wchodzą:

H ToInt

Escape ToNum

EscapeUri ToTimeSpan

UnEscapeUri DEBUG

ToString

Opis dostępnych filtrów:

First

Pobiera pierwszy element z tablicy. Zwracany typ: zależny co przechowuje tablica. `{{ product-details.Product.Images |First |Img }}`

Last

Pobiera ostatni element z tablicy. Zwracany typ: zależny co przechowuje tablica. `{{ product-details.Product.Images |Last |Img }}`

Skip

Zwraca tablicę, która nie zawiera początkowych elementów z tablicy wejściowej. Omija określoną liczbę elementów. Liczba elementów do ominięcia jest przekazywana w parametrze. Parametry: int. Zwracany typ: tablica elementów typu zdefiniowanego w tablicy wejściowej. `{% assign koloryTekst = 'biały, czarny, zielony, czerwony, niebieski, żółty' %} {% assign kolory = koloryTekst |Split: ',' %}`Wszystkie elementy {% for kolor in kolory -%} {{ kolor }} {% endfor -%} Pomiń 3 pierwsze elementy {% assign kolory = kolory |Skip: 3 %} {% for kolor in kolory -%} {{ kolor }} {% endfor -%} Powyższy przykład zwróci: `Wszystkie elementy biały czarny zielony czerwony niebieski żółty`Pomiń 3 pierwsze elementy czerwony niebieski żółty

Take

Zwraca tablicę, która zawiera tylko określoną liczbę początkowych elementów z tablicy wejściowej. Parametry: int. Zwracany typ: tablica elementów typu zdefiniowanego w tablicy wejściowej. `{% assign koloryTekst = 'biały, czarny, zielony, czerwony, niebieski, żółty' %} {% assign kolory = koloryTekst |Split: ',' %}`Wszystkie elementy {% for kolor in kolory -%} {{ kolor }} {% endfor -%} Pobierz tylko 3 pierwsze elementy {% assign kolory = kolory |Take: 3 %} {% for kolor in kolory -%} {{ kolor }} {% endfor -%} Powyższy przykład zwróci: `Wszystkie elementy biały czarny zielony czerwony niebieski żółty`Pobierz tylko 3 pierwsze elementy biały czarny zielony

Sort

Sortuje elementy w tablicy według przekazanego argumentu. Argument powinien być właściwością kolekcji elementów tablicy wejściowej. Parametry: string. Zwracany typ: tablica elementów typu zdefiniowanego w tablicy wejściowej. `{% assign sortedFlags = product-details.Product.Flags |Sort: 'Text' %} {% for flag in sortedFlags -%} Nazwa: {{ flag.Text}} {% endfor -%}`

Reverse

Odwraca kolejność elementów w tablicy. Zwracany typ: tablica elementów typu zdefiniowanego w tablicy wejściowej. `{% assign koloryTekst = 'biały, czarny, zielony, czerwony, niebieski, żółty' %} {% assign kolory = koloryTekst |Split: ', ' %} {% assign kolory = kolory |Reverse %}` Wszystkie elementy w odwróconej kolejności {% for kolor in kolory -%} {{ kolor }} {% endfor -%} Powyższy przykład zwróci: `Wszystkie elementy w odwróconej kolejności żółty niebieski czerwony zielony czarny biały`

Randomize

Zwraca tablicę, w której kolejność elementów jest ustawiona w sposób losowy. Zwracany typ: tablica elementów typu zdefiniowanego w tablicy wejściowej. `{% assign koloryTekst = 'biały, czarny, zielony, czerwony, niebieski, żółty' %} {% assign kolory = koloryTekst |Split: ', ' %} {% assign kolory = kolory |Randomize %}` Wszystkie elementy w losowej kolejności {% for kolor in kolory -%} {{ kolor }} {% endfor -%} Powyższy przykład może zwrócić: `czerwony niebieski biały żółty czarny zielony` Kolejny przykład `{% assign losowyObrazek = productdetails.Product.Images |Randomize %}` Pierwszy losowy obrazek na towarze {{losowyObrazek |First |Img }}

Join

Łączy elementy tablicy w ciąg znaków wstawiając pomiędzy elementy przekazany parametr. Parametry: string. Zwracany typ: string. `{% assign koloryTekst = 'biały, czarny, zielony, czerwony, niebieski, żółty' %} {% assign tablicaKolorow = koloryTekst |Split: ', ' %} {{tablicaKolorow |Join: '. ' }}` Powyższy przykład zwróci: `biały. czarny. zielony. czerwony. niebieski. żółty`

Map

Zwraca tablicę składającą się z wartości elementów kolekcji wejściowej dla wskazanej właściwości przez przekazany argument. Parametry: string. Zwracany typ: tablica elementów typu wskazanej właściwości. `{% assign typyFlag = product-details.Product.Flags |Map: 'Text' %} {% for typFlagi in typyFlag -%} {{typFlagi}} {% endfor -%}` Powyższy przykład może zwrócić: `Promocja Najlepiej oceniany` Kolejny przykład `{{ config.Languages |Map: 'Name' |Join: ', ' }}` Powyższy przykład może zwrócić: `polski, Deutsch, français`

Size

Zwraca liczbę elementów w tablicy. Zwracany typ: int. `Liczba obrazków dla towaru {{ product-details.Product.Images |Size }}`

Uniq

Zwraca tablicę unikatowych elementów. Tablica ta nie zawiera duplikatów. Zwracany typ: tablica elementów typu zdefiniowanego w tablicy wejściowej. `{% assign kolory = "czarny,biały,niebieski,czarny,niebieski" | Split: ',' -%} {% assign unikatoweKolory = kolory | Uniq -%} {% for kolor in unikatoweKolory -%} {{kolor}} {% endfor -%}` Powyższy przykład zwróci: `czarny biały niebieski`

Format

Formatuje tekst zgodnie z wartościami przekazanymi w poszczególnych parametrach. Parametry: object p1, object p2 = null, object p3 = null, object p4 = null, object p5 = null, object p6 = null, object p7 = null, object p8 = null, object p9 = null, object p10 = null. Zwracany typ: string. `{% assign cenaWaluta = 'Cena: {0}, waluta {1}' -%} {{ cenaWaluta | Format:'25.00', 'PLN' }}` Powyższy przykład zwróci: `Cena: 25.00, waluta PLN`

Append

Dodaje tekst przekazany przez argument na koniec tekstu wejściowego. Jeżeli tekst wejściowy == null to filtr zwróci null. Parametry: string. Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' %} {% assign tekst2 = 'Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.' %} {{ tekst1 |Append: tekst2 }}` Powyższy przykład zwróci: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.`

Prepend

Dodaje tekst przekazany przez argument na początek tekstu wejściowego. Jeżeli tekst wejściowy == null to filtr zwróci null. Parametry: string. Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' %} {% assign tekst2 = 'Litwo! Ojczyzno moja! Ty jesteś jak zdrowie. ' %} {{ tekst1 |Prepend: tekst2 }}` Powyższy przykład zwróci: `Litwo! Ojczyzno moja! Ty jesteś jak zdrowie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.`

Capitalize

Konwertuje tekst tak, aby każde słowo w tekście zaczynało się z dużej litery.Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' %} {{ tekst1 |Capitalize }}`

Downcase

Konwertuje tekst tak, aby cały tekst (każda litera) był napisany małymi literami. Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' %} {{ tekst1 | Downcase }}`

Upcase

Konwertuje tekst tak, aby cały tekst (każda litera) był napisany wielkimi literami.Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' %} {{ tekst1 |Upcase}}`

Remove

Usuwa z tekstu wejściowego fragment tekstu przekazanego przez parametr. Parametry: string. Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' %} {{ tekst1 |Remove: 'ip' }}`

RemoveFirst

Usuwa z tekstu wejściowego pierwsze wystąpienie fragmentu tekstu przekazanego przez parametr. Parametry: string. Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' %} {{ tekst1 |RemoveFirst: 'ip' }}`

Replace

Zamienia w tekście wejściowym szukany fragment tekstu innym tekstem (tekst zamienny). Szukany fragment tekstu oraz tekst zamienny przekazywane są przez parametry. Parametry przyjmują wyrażenia regularne. Jeśli chcemy wyszukać znak specjalny i użyć go jak znaku, a nie części wyrażenia regularnego, należy go poprzedzić ukośnikiem \.Parametry: string, string = "". Zwracany typ: string. `{% assign tekst2 = 'Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.' %} {{ tekst2 |Replace:'!','.' }} {% assign waga = '31.53kg' %} {{ waga |Replace:'\.',',' }} {% assign spacje = ' Litwo! Ojczyzno moja! Ty jesteś jak zdrowie. ' %} {{ spacje |Replace:'^\s+|\s+$','' }}`

ReplaceFirst

Zamienia w tekście wejściowym pierwsze wystąpienie szukanego fragmentu tekstu innym tekstem (tekst zamienny). Szukany fragment tekstu oraz tekst zamienny przekazywane są przez parametry. Parametry przyjmują wyrażenia regularne. Jeśli chcemy wyszukać znak specjalny i użyć go jak znaku, a nie części wyrażenia regularnego, należy go poprzedzić ukośnikiem \.Parametry: string, string = "". Zwracany typ: string. `{% assign tekst2 = 'Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.' %} {{ tekst2 |ReplaceFirst:'!','.' }}`

Size

Zwraca długość tekstu - liczba znaków w tekście. Zwracany typ: int. `Długość opisu towaru {{ productdetails.Product.Description |Size }}` Kolejny przykład `Liczba znaków w cenie towaru {{ productdetails.Product.Price |ToString |Size }}`

Slice

Zwraca fragment z tekstu wejściowego dla podanej pozycji początkowej oraz długości. Pozycja początkowa oraz długość przekazywane są przez parametry. W przypadku, gdy parametr z pozycją początkową jest ujemny to pozycja początkowa liczona jest od od końca tekstu.
Uwaga
Znaki w tekście numerowane są od 0. Należy uwzględnić to przy określaniu pozycji początkowej.
Parametry: int, int = 1. Zwracany typ: string. `{% assign tekst2 = 'Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.' %} {{ tekst2 |Slice:0 }} {{ tekst2 |Slice:1 }} {{ tekst2 |Slice:0,20 }} {{ tekst2 |Slice: - 1 }} {{ tekst2 |Slice: - 20,10 }}` Powyższy przykład zwróci: `L i Litwo! Ojczyzno moja . jesteś jak`

Split

Tworzy z tekstu wejściowego tablicę, w której każdy element stanowi fragment tekstu rozdzielony przez podany wzorzec. Wzorzec przekazany przez parametr. Parametry: string. Zwracany typ: string[]. `{% assign koloryTekst = 'biały, czarny, zielony, czerwony, niebieski, żółty' %} {% assign kolory = koloryTekst |Split: ', ' %}`Pierwszy element {{ kolory[0] }} Wszystkie elementy {% for kolor in kolory - %} {{ kolor }} {% endfor - %} Powyższy przykład zwróci: `Pierwszy element biały`Wszystkie elementy biały czarny zielony czerwony niebieski żółty

StripHtml

Usuwa wszystkie tagi HTML z tekstu wejściowego. Zwracany typ: string. `{{ productdetails.Product.Description |StripHtml }}`

StripNewlines

Usuwa wszystkie znaki nowej linii (podziały wiersza) z tekstu wejściowego. Zwracany typ: string. `{{ productdetails.Product.Description |StripNewlines }}`

NewlineToBr

Wstawia tag HTML przed każdym znakiem nowej linii w tekście wejściowym. Zwracany typ: string. `{{ productdetails.Product.Description |NewlineToBr }}`

Truncate

Obcina tekst wejściowy do podanej liczby znaków dodając na końcu tekst obcinający. Liczba znaków oraz tekst obcinający przekazywane są przez parametry. Tekst obcinający wliczony jest w liczbę znaków. Parametry: int = 50, string = "...". Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' %} {% assign tekst2 = 'Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.' %} {{ tekst1 |Truncate }} {{ tekst2 |Truncate: 25, '(...)' }}` Powyższy przykład zwróci: `Lorem ipsum dolor sit amet, consectetur adipisc... Litwo! Ojczyzno moja(...)`

TruncateWords

Obcina tekst wejściowy do podanej liczby wyrazów dodając na końcu tekst obcinający. Liczba wyrazów oraz tekst obcinający przekazywane są przez parametry. Parametry: int 15, string = "..." Zwracany typ: string. `{% assign tekst1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' %} {% assign tekst2 = 'Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.' %} {{ tekst1 |TruncateWords }} {{ tekst2 |TruncateWords: 3,'(...)' }}` Powyższy przykład zwróci: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Litwo! Ojczyzno moja!(...)`

Times

Powtarza tekst wielokrotnie. Liczba powtórzeń przekazywana przez parametr. Parametry: int. Zwracany typ: string. `{% assign kropka = '.' %} {% assign liczbaPowtorzen = 3 %} Przykładowy tekst zakończony kropkami{{ kropka|Times: liczbaPowtorzen }}`

Plus

Dodawanie. Parametry: int/decimal. Zwracany typ: taki sam jak element wejściowy, na którym wywołany jest filtr. `{% assign liczba1 = 9 %} {% assign liczba2 = 2 %} Wynik: {{ liczba1 | Plus: liczba2 }}`
Uwaga
Jeśli filtr Plus wywołany zostanie na elemencie wejściowym typu string to działanie będzie podobne do użycia filtru Append.

Minus

Odejmowanie. Parametry: int/decimal. Zwracany typ: taki sam jak element wejściowy, na którym wywołany jest filtr. `{% assign liczba1 = 9 %} {% assign liczba2 = 3 %} Wynik: {{ liczba1 |Minus: liczba2 }}`

Times

Mnożenie. Parametry: int/decimal. Zwracany typ: taki sam jak element wejściowy, na którym wywołany jest filtr. `{% assign liczba1 = 9.01 %} {% assign liczba2 = 2 %} Wynik: {{ liczba1 |Times: liczba2 }}`

DividedBy

Dzielenie. Parametry: int/decimal. Zwracany typ: taki sam jak element wejściowy, na którym wywołany jest filtr. `{% assign liczba1 = 9 %} {% assign liczba2 = 3 %} Wynik:{{ liczba1 |DividedBy: liczba2 }}`

Modulo

Reszta z dzielenia. Parametry: int/decimal. Zwracany typ: taki sam jak element wejściowy, na którym wywołany jest filtr. `{% assign liczba1 = 9.01 %} {% assign liczba2 = 2 %} Wynik:{{ liczba1 |Modulo: liczba2 }}`

Normalize

Formatuje liczbę wejściową usuwając jej „zbędne” zera w części ułamkowej. Typ liczby wejściowej: decimal. Zwracany typ: decimal. `Cena: {{ productdetails.Product.Price }} Cena: {{ productdetails.Product.Price |Normalize }}` Powyższy przykład może zwrócić: `Cena: 10,00 Cena: 10`

Floor

Zwraca największą liczbę całkowitą, która jest mniejsza lub równa wejściowej. Typ liczby wejściowej: decimal. Zwracany typ: int. `{% assign liczba = 6.05 %} Wynik:{{ liczba |Floor }}` Powyższy przykład zwróci: `Wynik:6`

Ceil

Zwraca najmniejszą liczbę całkowitą, która jest większa lub równa wejściowej.Typ liczby wejściowej: decimal. Zwracany typ: int. `{% assign liczba = 6.05 %} Wynik:{{ liczba |Ceil }}` Powyższy przykład zwróci: `Wynik:7`

Abs

Zwraca wartość bezwzględną z liczby. `{% assign liczba = -6.05 %} Wynik:{{ liczba |Abs }}` Powyższy przykład może zwrócić: `Wynik:6.05`

Round

Zaokrągla liczbę wejściową do określonej ilości miejsc po przecinku. Zwracany typ: taki sam jak element wejściowy, na którym wywołany jest filtr. `{% assign liczba = 6.05687 %} Wynik:{{ liczba |Round: 4 }}` Powyższy przykład zwróci: `Wynik:6.0569`

Date

Formatuje datę i czas. Zwraca datę i czas zgodnie z formatem przekazanym w parametrze.
Wskazówka
Filtr Date w sklepie korzysta z domyślnych ustawień dla DotLiquid. Należy korzystać z formatu daty zgodnego z konwencją .NET dostępnym pod linkiem: https://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.100).aspx
Parametry: string. Zwracany typ: string. `Data i czas "teraz" {{ config.Now }} Data {{ config.Now |Date:'yyyy-MM-dd' }} Czas {{ config.Now |Date:'HH:mm:ss' }}` Powyższy przykład może zwrócić: `Data i czas "teraz" 13.10.2022 10:32:39 Data 2022-10-13 Czas 10:32:39`

ToPrice

Formatuje cenę do formatu wyświetlania zgodnego z kulturą dla ustawionej lokalizacji sklepu (grupowanie tysięcy, kropka czy przecinek, itd.). Lokalizacja sklepu określa, czy sklep został zainstalowany domyślnie na rynek polski, niemiecki, itd. Zwracany typ: string. `Cena: {{ product-details.Product.Price }} Cena: {{ product-details.Product.Price |ToPrice }}` Powyższy przykład może zwrócić: `Cena: 2348,68 Cena: 2 348,68 (lokalizacja na rynek polski)`

A

Tworzy tag <a>wraz z atrybutami. Wartości dla atrybutów tagu pobierane są z elementu wejściowego. Typ elementu wejściowego: obiekt Liquid. Zwracany typ: string. Filtr ma zastosowanie dla obiektów:

Strona

Grupa towarowa

Towar

Blog

Tagi

Przykład użycia filtra A dla obiektów: Strona `Strony {{ config.DefinedPages.Home |A |H }} {{ config.Pages['6'] |A |H }} {% comment %} Strona o id = 6 {% endcomment %} {{ page.CurrentSiteNode |A |H }} {{ page.GroupNodes[0] |A |H }} {{ page.Breadcrumbs[0] |A |H }}` Powyższy przykład może zwrócić: `Strony <a href="./">Strona główna</a> <a href="profil-klienta,6">Profil klienta</a> <a href="produkty/owoce-1/banany-555,2,1024703">Banany</a> <a href="produkty/owoce-1,2,76">Owoce</a> <a href="./">Strona główna</a>` Przykład użycia filtra A dla obiektów: Towar `Towary {{ product-new.Products[0] |A |H }} {{ product-list.Products[1] |A |H }} {{ product-details.Product |A |H }}` Powyższy przykład może zwrócić: `Towary <a href="banany,3,1024703,81">Banany</a> <a href="minibanany-odrobina-wystarczy,3,1024703,82">Minibanany odrobina wystarczy</a> <a href="minibanany-odrobina-wystarczy,3,1024703,82">Minibanany odrobina wystarczy</a>` Przykład użycia filtra A dla obiektów: Blog, Tags `Blog {{ blog.PostList.Posts[0] |A |H }} {{ blog.PostDetails |A |H }} Tags {{ config.Tags.Blog[0] |A |H }}` Powyższy przykład może zwrócić: `Blog <a href="blog-wpis-podstawowy,24,1">Blog wpis podstawowy</a> <a href="blog-wpis-podstawowy,24,1">Blog wpis podstawowy</a> Tags <a rel="tag" href="blog,23?seaBlog=Informacje">Informacje</a>`

Img

Tworzy tag <img>wraz z atrybutami. Wartości dla atrybutów tagu pobierane są z elementu wejściowego lub mogą być przekazywane przez parametry.
Uwaga
Tag <img> domyślnie ustawiony ma link do obrazka w atrybucie data-src. Należy zastosować funkcję skryptową, która przepisze wartość z atrybutu data-src do atrybutu src (lazy load).
Typ elementu wejściowego: obiekt Liquid, string. Parametry: string size = "small", string alt = null, string title = null. Zwracany typ: string. Dostępne wartości dla parametru size:

Parametr size Rozmiar zdjęcia (dłuższa krawędź) w px

img 0

pico 16

icon 32

thumb 50

small 100

compact 160

medium 240

large 480

grande 600

master 1920

Filtr ma zastosowanie dla obiektów:

Towar

Zdjęcia towaru (na szczegółach towaru)

Producent

Marka

Blog (w obiekcie blog pomijany jest parametr size. Obrazki zwracane są zawsze w rozmiarze rzeczywistym).

Przykład użycia filtra Img dla obiektów: Towar, Zdjęcia towaru `Lista towarów {{ product-list.Products[1] |Img |H }} {{ produc-tlist.Products[1] |Img: 'medium','Świeże banany, Kraków' |H }}` Towar (szczegóły) {{ product-details.Product |Img:'large' |H }} {{ product-details.Product.StockLevel.ImageUrl |Img |H }} { % comment % } Tekst z linkiem {% endcomment %} {{ product-details.Product.Images[0] |Img |H }} Powyższy przykład może zwrócić: `Lista towarów <img alt="Minibanany odrobina wystarczy" src="usr/alo.gif" data-src="img/small/59/minibanany.jpg"/> <img alt="Świeże banany, Kraków" src="usr/alo.gif" data-src="img/medium/59/minibanany.jpg"/>` Towar (szczegóły) <img alt="Minibanany odrobina wystarczy" src="usr/alo.gif" data-src="img/large/59/minibanany.jpg"/> <img src="usr/alo.gif" data-src="Ima.ashx?t=wrs&Id=1"/> <img alt="" src="usr/alo.gif" data-src="img/small/59/.jpg"/> Przykład użycia filtra Img dla obiektów: Producent, Marka `Producent, Marka {{ manufacturers-brands.Manufacturers[2] |Img |H }} {{ manufacturers-brands.Manufacturers[2] |Img: 'thumb','Comarch globalny dostawca IT.' |H }} {{ manufacturers-brands.Brands[3] |Img |H }}` Powyższy przykład może zwrócić: `Producent, Marka <img alt="Comarch" src="usr/alo.gif" data-src="img/small/160/Comarch.jpg"/> <img alt="Comarch globalny dostawca IT." src="usr/alo.gif" data-src="img/thumb/160/Comarch.jpg"/> <img alt="Comarch ALTUM" src="usr/alo.gif" data-src="img/small/92/Comarch%20ALTUM.jpg"/>` Przykład użycia filtra Img dla obiektów: Blog `Blog {{ blog.LatestPosts[0] |Img |H }} {{ blog.PostList.Posts[0] |Img: 'compact','Blog dla Partnera','Informacje dla Partnerów na blogu sklepu' |H }} {{ blog.PostDetails |Img |H }}` Powyższy przykład może zwrócić: `Blog <img alt="Blog wpis podstawowy" src="usr/alo.gif" data-src="Ima.ashx?t=blg&id=1"/> <img alt="Blog dla Partnera" title="Blog dla Partnera,'Informacje dla Partnerów na blogu sklepu" src="usr/alo.gif" data-src="Ima.ashx?t=blg&id=1"/> <img alt="Blog wpis podstawowy" src="usr/alo.gif" data-src="Ima.ashx?t=blg&id=1"/>` Przykład użycia filtra Img dla tekstu z linkiem do obrazka `Tekst z linkiem do obrazka {{ productdetails.Product.StockLevel.ImageUrl |Img |H }} { % comment % } Tekst z linkiem {% endcomment %} {{ 'https://www.domena.pl/file/banner.jpg' |Img:'','atrybut alt','atrybut title' |H }}` Powyższy przykład może zwrócić `Tekst z linkiem do obrazka <img src="usr/alo.gif" data-src="Ima.ashx?t=wrs&Id=1"/> <img alt="atrybut alt" title="atrybut title"src="usr/alo.gif" data-src="https://www.domena.pl/file/banner.jpg"/>`

Img2

Filtr Img2 zachowuje się w podobny sposób jak wyżej opisany filtr Img. Różnicą jest to, że utworzony tag <img> ma link do obrazka nie w atrybucie data-src, lecz w atrybucie data-lazy. Dodatkowo filtr Img2 pozwala na dodanie czwartego parametru raw, w którym można wpisać wszystko, np. class="example_class" i znajdzie się to wewnątrz tagu <img>.Typ elementu wejściowego: obiekt Liquid, string. Parametry: string size = "small", string raw = null, string alt = null, string title = null. Zwracany typ: string.Przykład użycia filtra Img2 na szczegółach towaru: `{{product.Images[0] |Img2 :'large', '', 'pasek', 'obrazek' }} {{product.Images[0] |Img2: 'large', 'class="open-gallery"', 'pasek', 'obrazek' }}` Powyższy przykład może zwrócić: `<img src="img/large/27/.jpg" alt="pasek" title="obrazek" style="opacity: 1;"> <img src="img/large/27/.jpg" alt="pasek" title="obrazek" class="open-gallery" style="opacity: 1;">`

H

Zamienia znaki specjalne na encje HTML (HTMLEncode).Zwracany typ: string. `{% assign tekst2HTML = '<p>Litwo! <b>Ojczyzno moja!</b> Ty jesteś jak zdrowie.</p>' %} Tekst z encjami HTML {{ tekst2HTML |H }}` Powyższy przykład zwróci: `Tekst z encjami HTML <p>Litwo! <b>Ojczyzno moja!</b> Ty jesteś jak zdrowie.</p>`

Escape

Alias dla filtra H.

EscapeUri

Zamienia znaki spoza zakresu ASCII na format zgodny z ASCII. Zwracany typ: string. `{% assign tekst2 = 'Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.' %} Link użytkownika {{ '<'|H }}a href="/?tekst={{ tekst2 | EscapeUri }}" (...)` Powyższy przykład zwróci: `Link użytkownika <a href="/?tekst=Litwo!%20Ojczyzno%20moja!%20Ty%20jeste%C5%9B%20jak%20zdrowie." (...)`

UnEscapeUri

Filtr przeciwstawny do filtra EscapeUri. Zwracany typ: string.

ToString

Konwertuje element wejściowy do typu string. Zwracany typ: string. `{% assign tekst2 = ' Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.' %} {% assign liczba = 3 %} Liczba i tekst: {{ liczba |ToString |Append: tekst2 }}` Powyższy przykład zwróci: `Liczba i tekst: 3 Litwo! Ojczyzno moja! Ty jesteś jak zdrowie.`

ToInt

Konwertuje element wejściowy do typu int. Zwracany typ: int. `{% assign tekstLiczba1 = '9' %} {% assign liczba1 = tekstLiczba1 |ToInt %} ToInt: {{ liczba1 }} | {{ liczba1 |Minus: 4 }}` Powyższy przykład zwróci: `ToInt: 9 | 5`

ToNum

Konwertuje element wejściowy zgodnie z formatem dla kultury Invariant (zapewnia zawsze taki sam format). Liczby oraz daty wyświetlane są zgodnie z kulturą dla lokalizacji sklepu. Zwracany typ: string. `liczba: {{ 1239,01 }} liczba (Invariant) : {{ 1239,01 |ToNum }} data: {{config.Now }} data (Invariant) {{config.Now |ToNum }}` Powyższy przykład może zwrócić: `liczba: 1239,01 liczba (Invariant) : 1239.01 data: 29.04.2016 14:45:24 data (Invariant) 04/29/2016 14:45:24`

ToTimeSpan

Konwertuje tekst do typu TimeSpan zgodnie z formatem dla kultury Invariant. Zwracany typ: TimeSpan. `TimeSpan: {{ '509.07:01:01' |ToTimeSpan }}`

DEBUG

Wyświetla obiekty globalne i lokalne wraz z jego właściwościami oraz odpowiadającymi im wartościami. Przykład wyświetlenia obiektu customer z filtrem DEBUG `<fieldset> <legend>DEBUG customer</legend> <code>{{ customer | DEBUG }}</code> </fieldset> </fieldset>` Powyższy przykład może zwrócić: `{ "NewsletterSubscriber" : false, "Authenticated" : false, "CustomerDetailsEditable" : true, "Currency" : "PLN", "CurrencyExt" : { "Code" : "PLN", "Symbol" : "zł" },(...)`
Uwaga
Tryb debug dla obiektów dostępny jest tylko, gdy włączony jest parametr Podgląd stron w czasie rzeczywistym

Co to jest Liquid?
Liquid to silnik szablonów graficznych wykorzystywany w Comarch e-Sklep. Szablony graficzne w technologii Liquid umożliwiają swobodną modyfikację wyglądu sklepu. Modyfikacji można dokonywać samodzielnie w ustawianiach szablonu, tym samym łatwo wgrywać nowe bannery, czy dostosować kolorystykę. Posiadając większą wiedzę z zakresu HTML, JS, CSS i Liquid, można głębiej ingerować w wygląd sklepu. W przypadku nie posiadania dostatecznej wiedzy, można zlecić wykonanie szablonu Partnerowi bądź firmie wdrażającej.
Jak skonfigurować dodatek Comarch Liquid Sync?

Spis treści

Jak działa Comarch Liquid Sync?

Jak uruchomić Comarch Liquid Sync?

Jak skonfigurować Comarch Liquid Sync?

Synchronizacja

Praca z plikami

Rozwiązywanie konfliktów

Jak zmodyfikować plik w panelu administracyjnym e-Sklep?

Jak zmodyfikować plik lokalny, kiedy aplikacja Comarch Liquid Sync była wyłączona?

Jak działa Comarch Liquid Sync?
Liquid Sync synchronizuje pliki umieszczone na komputerze użytkownika z plikami szablonu Liquid. Pilnuje zgodności danych wykrywając modyfikacje w plikach lokalnych lub w plikach szablonu Liquid, a następnie podmienia nieaktualny plik na jego nowszą wersje. Dzięki aplikacji Liquid Sync nie trzeba używać edytorów kodu dostępnych w panelu administracyjnym e-Sklep. Każdy użytkownik może korzystać z dowolnego środowiska programistycznego, a Liquid Sync zadba o zgodność utworzonego lokalnie projektu z plikami w panelu administracyjnym.
Jak uruchomić Comarch Liquid Sync?

Aplikacja dostępna dla sklepów Comarch.
Liquid Sync można pobrać ze strony Liquid Sync. Rozpakowany folder będzie zawierać między innymi:

Katalog pl – zawiera XML z ustawieniami. Nie należy go usuwać.

Katalog logs – zawiera logi operacji.

COMARCHeShopLiquidSync – aplikacja Liquid Sync.
Aplikację należy uruchomić z prawami administratora. Po uruchomieniu zostaną otwarte dwa okna: okno konsolowe oraz okno przeglądarki z interfejsem aplikacji. Obydwa okna powinny pozostać włączone.
Jak skonfigurować Comarch Liquid Sync?
Liquid Sync potrzebuje danych logowania do sklepu. Przy pierwszym uruchomieniu widoczny będzie formularz, w którym należy wpisać:

Nazwę sklepu – dowolna nazwa, po której będzie można rozpoznać sklep na liście sklepów

Url – adres url istniejącego sklepu

Login – login użytkownika, na którego aplikacja ma się zalogować do panelu e-Sklepu. Należy wykorzystać login webmaster, którego konfiguracja dostępna jest w panelu administracyjnym.

Hasło – hasło wskazanego użytkownika

Wskazówka
Comarch e-Sklep Liquid Sync do połączenia wymaga SSL
Wskazówka
Zaloguj się do panelu administracyjnego e-Sklepu przejdź do zakładki Integracje > Dodaj integrację. Na filtrze Typ wybierz Dodatki. Następnie wybierz dodatek Comarch Liquid Sync, naciśnij Dodaj, a w kolejnym kroku Konfiguruj.
Po kliknięciu Zaloguj się sklep zostanie dodany do listy po lewej stronie. W prawym oknie pojawi się lista dostępnych szablonów. Od teraz będzie to ekran startowy aplikacji. Aby dodać kolejny sklep trzeba będzie nacisnąć przycisk Dodaj sklep. Po zalogowaniu w rozpakowanym katalogu COMARCHeShopLiquidSync zostanie utworzony katalog o podanej w formularzu nazwie. Katalog będzie zawierał:

Katalog logs – zawiera logi operacji danego e-Sklepu

Katalog sync – zawiera plik z ustawieniami

Katalog templates – w tym miejscu będą tworzyć się podkatalogi z plikami dla dostępnych szablonów

Katalogi z plikami szablonu nie mogą zostać przeniesione.

Synchronizacja

Praca z plikami
Aby wybrać, który z szablonów aplikacja powinna synchronizować, wystarczy wybrać odpowiednią pozycję na liście dostępnych szablonów. Jeżeli synchronizacja dotyczy szablonu, który jest zabezpieczony hasłem, Liquid Sync również będzie potrzebował hasła. Po wybraniu szablonu otworzy się okno synchronizacji. Lewa kolumna o nazwie Log będzie zawierać logi synchronizacji, natomiast prawa o nazwie Pliki będzie informować o konfliktach do rozwiązania. Przy pierwszej synchronizacji szablonu, wewnątrz katalogu templates, zostanie utworzony odpowiadający mu katalog. Nazwami katalogów są id szablonów. Jeżeli w panelu administracyjnym e-Sklep nie zostały wcześniej dodane żadne pliki dla danego szablonu, to wewnątrz powyższego folderu należy samodzielnie utworzyć katalog o nazwie 0 (zero). W katalogu 0 należy umieszczać wszystkie pliki wymagające synchronizacji. Jeżeli szablon zawierał już jakiekolwiek pliki, katalog utworzy się automatycznie, a wewnątrz niego znajdować się będą pliki pobrane z panelu. Każdy nowy plik umieszczony w katalogu 0 automatycznie pojawi się w plikach szablonu Liquid w panelu administracyjnym e-Sklep. Aplikacja Liquid Sync wyświetli również odpowiedni log. Plik lokalny zostanie również wysłany do sklepu po każdym zapisie, a jego usunięcie spowoduje usunięcie odpowiadającego pliku z szablonu Liquid.
Rozwiązywanie konfliktów
Zdarza się, że pliki lokalne nie są zgodne z plikami szablonu Liquid. W takiej sytuacji, w kolumnie Pliki, Liquid Sync wyświetli odpowiedni komunikat. Komunikat zapyta użytkownika, w jaki sposób aplikacja powinna rozwiązać konflikt. Poniżej opisane zostaną przyczyny konfliktów oraz sposoby ich rozwiązania.
Jak zmodyfikować plik w panelu administracyjnym e-Sklep?
Modyfikacja plików po stronie panelu administracyjnego, w przeciwieństwie do modyfikacji plików lokalnych, jest traktowana jako konflikt. Komunikat konfliktu, w przypadku modyfikacji istniejących plików, będzie proponował dwa rozwiązania: pobrać plik szablonu do projektu lokalnego lub wysłać lokalny plik do panelu administracyjnego. Jeżeli zmiana zostanie wykonana w podczas aktywnej synchronizacji, należy kliknąć przycisk Odśwież, aby zobaczyć komunikat. Usunięcie pliku po stronie panelu administracyjnego będzie wymagało podjęcia decyzji: usunąć plik z lokalnego systemu plików, czy wysłać istniejący lokalnie plik do panelu administracyjnego e-Sklep. Dodanie nowego pliku w panelu administracyjnym również wyświetli stosowny komunikat. Liquid Sync zaproponuje wtedy pobranie nowego pliku z panelu do projektu lokalnego lub usunięcie nowego pliku z szablonu Liquid.
Jak zmodyfikować plik lokalny, kiedy aplikacja Comarch Liquid Sync była wyłączona?
Liquid Sync nie miał okazji zaktualizować pliku lokalnego po jego modyfikacji, więc wystąpiła niezgodność. W przypadku istniejących plików aplikacja wyświetli komunikat z rozwiązaniami: pobrać plik szablonu do projektu lokalnego lub wysłać plik lokalny do sklepu. Jeżeli plik lokalny zostanie usunięty, komunikat będzie zawierał opcję pobrania odpowiadającego pliku ze sklepu lub jego usunięcie. Gdy nowy plik zostanie dodany, rozwiązać konflikt można poprzez wysłanie nowego pliku do sklepu lub usunięcie go.
Wskazówka
Należy pamiętać, aby w panelu administracyjnym włączyć podgląd zmian w czasie rzeczywistym.

Spełnij kryteria WCAG 2.1/2.2. Przewodnik dla programistów oraz Partnerów Comarch.

Spis treści

Wstęp

Najlepsze praktyki dostępności

Podsumowanie

Wstęp
Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.
Wskazówka
Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami
Niniejszy artykuł przedstawia fundamentalne zasady i techniczne wytyczne, których wdrożenie przyczyni się do zwiększenia dostępności witryny internetowej. Ma on na celu ma na celu pomóc programistom Liquid w tworzeniu dostępnych cyfrowo aplikacji i stron internetowych.
Najlepsze praktyki dostępności
Dostępność stron internetowych jest obecnie kluczowym aspektem ich projektowania, mającym na celu zapewnienie równego dostępu do treści dla wszystkich użytkowników, niezależnie od ich indywidualnych potrzeb czy ograniczeń. Przestrzeganie najlepszych praktyk w zakresie dostępności nie tylko wspiera osoby korzystające z technologii asystujących, ale również poprawia ogólną użyteczność i funkcjonalność serwisu. W tym artykule przedstawiamy najlepsze praktyki dotyczące dostępności, które powinny być stosowane w kodzie HTML i CSS. Każdy z tych elementów odgrywa istotną rolę w budowaniu przyjaznego i dostępnego środowiska cyfrowego. Omówione zagadnienia obejmują:

Stosowanie semantycznych znaczników HTML,

Zapewnienie odpowiedniego kontrastu kolorystycznego,

Właściwe oznaczanie grafik poprzez teksty alternatywne,

Dostosowanie mechanizmów nawigacyjnych dla użytkowników korzystających z klawiatury.

Wskazówka
Ten artykuł przeznaczony jest dla osób z zaawansowaną wiedzą dotyczącą modyfikacji kodu szablonu. Jeśli nie jesteś programistą i nie dokonujesz zmian w kodzie, to przejdź do artykułów ogólnych:

Posiadam własny szablon. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Posiadam szablon Bursztyn, Opal lub Agat, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Zasady ogólne

Semantyczne znaczniki HTML Używaj odpowiednich znaczników HTML, takich jak <header>, <nav>, <main>, <footer>, aby struktura strony była logiczna i zrozumiała. Jeśli w szablonie znajdują się niestandardowe struktury lub elementy, upewnij się, że są one odpowiednio oznaczone i dostępne dla czytników ekranu, np. za pomocą landmarków ARIA Landmarks.

Kolory i kontrast Zapewnij odpowiedni kontrast między tekstem, a tłem. Używaj narzędzi do sprawdzania kontrastu, aby upewnić się, że spełniasz standardy WCAG. Wykorzystaj devtools do sprawdzania kontrastu kolorów, takie jak np. WebAIM Contrast Checker, lub skorzystaj z narzędzia WAVE dostępnego jako rozszerzenie do przeglądarki.

Tekst alternatywny Zawsze dodawaj tekst alternatywny do obrazów, aby osoby korzystające z czytników ekranu mogły zrozumieć ich zawartość. W większości przypadków wykorzystanie filtra Liquid Img automatycznie zapewni odpowiednie atrybuty alt, natomiast jeśli używasz niestandardowych obrazów, upewnij się, że dodajesz alt lub aria-label do elementu <img>.

Nawigacja klawiaturą Zagwarantuj opcję poruszania się po stronie przy użyciu klawiatury, jednocześnie dbając o dostępność wszystkich interaktywnych elementów. Pamiętaj o zdefiniowaniu stylu swojego :focus oraz :focus-visible, aby użytkownicy mogli łatwo zidentyfikować, który element jest aktualnie aktywny. Niektóre znaczniki HTML5 są domyślnie dostępne dla nawigacji klawiaturą, takie jak <button>, <a>, <input>, ale jeśli używasz niestandardowych elementów, takich jak <div> lub <span>, upewnij się, że dodajesz tabindex=”0″ i odpowiednie role ARIA.

Czytelność Używaj prostego i zrozumiałego języka. Unikaj skomplikowanych zdań i terminologii, która może być trudna do zrozumienia dla niektórych użytkowników.

Elementy interaktywne

Formularze Używaj odpowiednich znaczników formularzy, takich jak <input>, <select>, <textarea>. Zapewnij, że są one poprawnie oznaczone. Używaj aria-label lub aria-labelledby, jeśli etykiety nie są widoczne. Jeśli natomiast w szablonie wykorzystywane są customowe pola formularzy, np. przy użyciu wykorzystania elementów <div> lub <span> to upewnij się, że są one dostępne dla czytników ekranu i użytkowników korzystających z klawiatury, np. poprzez dodanie role=”checkbox” lub role=”button” oraz odpowiednich atrybutów ARIA.

Przyciski Używaj <button> zamiast <div> lub <span> do tworzenia przycisków. Jeśli używasz ikon jako przycisków, dodaj aria-label lub title, aby opisać ich funkcję. Ikony, które nie mają znaczenia informacyjnego, powinny mieć aria-hidden=”true” lub role=”presentation”, aby nie były odczytywane przez czytniki ekranu.

Linki Używaj <a> do tworzenia linków. Tekst linku powinien jasno opisywać jego cel. Unikaj używania ogólnych fraz, takich jak „kliknij tutaj”. Jeśli chcesz dostarczyć dodatkowe informacje, użyj aria-label np. w przypadku linków do pobrania plików, np. <a href=”plik.pdf” aria-label=”Pobierz plik PDF”>Pobierz</a>.

Role ARIA Używaj ról ARIA, aby poprawić dostępność elementów, które nie mają semantycznego znaczenia w HTML. Na przykład, jeśli używasz <div> jako przycisku, dodaj role=”button” i zapewnij odpowiednie atrybuty ARIA, takie jak aria-pressed dla przycisków przełączających. Dodaj tłumaczenia do szablonu, aby zapewnić tłumaczenie tekstów używanych w atrybutach ARIA, takich jak aria-label, aria-labelledby i aria-describedby, aby były dostępne w różnych językach. np. aria-label=”{{translations.DownloadFile}}”.

Struktura treści

Nagłówki Używaj nagłówków od <h1> do <h6> w logicznej hierarchii. Nagłówek <h1> powinien być używany tylko raz na stronie, a kolejne nagłówki powinny być używane zgodnie z hierarchią.

Listy Używaj <ul> dla list nieuporządkowanych i <ol> dla list uporządkowanych. Unikaj używania <div> lub <span> do tworzenia list.

Tabele Używaj tabel do prezentacji danych. Dodaj <caption> opisujący tabelę i używaj nagłówków <th> z atrybutem scope=”col” lub scope=”row” dla kolumn i wierszy, aby poprawić dostępność.

Animacje i ruch Unikaj automatycznych animacji, które mogą być dezorientujące dla użytkowników. Jeśli musisz użyć animacji, zapewnij możliwość ich wyłączenia lub ograniczenia. Używaj prefers-reduced-motion w CSS, aby dostosować animacje do preferencji użytkownika.

Wideo i audio Zapewnij napisy i transkrypcje dla materiałów wideo i audio. Używaj znaczników <video> i <audio> z odpowiednimi atrybutami, takimi jak controls, aby umożliwić użytkownikom interakcję z multimediami.

Dynamiczne treści Jeśli używasz JavaScript do dynamicznego aktualizowania treści, upewnij się, że zmiany są ogłaszane dla czytników ekranu. Używaj aria-live i aria-atomic, aby kontrolować, jak zmiany są komunikowane użytkownikom korzystającym z technologii asystujących.

Testowanie dostępności Regularnie testuj swoją stronę pod kątem dostępności, używając narzędzi, takich jak Lighthouse, Axe lub WAVE. Te narzędzia pomogą zidentyfikować problemy z dostępnością i zasugerują poprawki. Ręczne testowanie dostępności jest również ważne. Używaj czytników ekranu, takich jak NVDA lub VoiceOver, aby sprawdzić, jak Twoja strona jest odczytywana przez użytkowników korzystających z technologii asystujących. Testuj na różnych urządzeniach i przeglądarkach, aby upewnić się, że dostępność jest zachowana we wszystkich warunkach. Testuj również z użytkownikami korzystającymi z technologii asystujących, aby uzyskać rzeczywiste opinie na temat dostępności Twojej strony.

Wskazówka
Szczegółowy zakres wymagań związanych z przepisami, znajdziesz w:

Przepisach ustawy,

Wymogach standardu WCAG 2.1/2.2,

oraz w udostępnionej przez oficjalną stronę rządową liście kontrolnej do badania dostępności cyfrowej strony internetowej.

Podsumowanie
Dostępność jest kluczowym aspektem tworzenia stron internetowych i aplikacji. Stosowanie się do najlepszych praktyk dostępności pomoże zapewnić, że Twoje treści są dostępne dla wszystkich użytkowników, niezależnie od ich zdolności. Pamiętaj, że dostępność to proces ciągły, a regularne testowanie i aktualizowanie treści jest niezbędne, aby utrzymać wysokie standardy dostępności.

Przykładowe modyfikacje

Integracja z edrone - dostosowanie szablonu

Wskazówka

Ustawiamy swój App ID z edrone w panelu administracyjnym (Ustawienia/Ustawienia Sklepu/Ogólne/Integracja z edrone)
W głównym folderze szablonu tworzymy folder edrone, w którym umieszczamy pliki, których zawartość znajduje się w kolejnych punktach
W pliku html, na końcu sekcji head includujemy plik edrone/head.html (dodajemy {% include ‘edrone/head.html’ -%} ) {% if config.External.Edrone.AppId != '' -%} <script type="text/javascript"> (function (srcjs) { window._edrone = window._edrone || {}; _edrone.app_id = '{{ config.External.Edrone.AppId }}'; _edrone.version = '1.0.0'; _edrone.platform_version = '{{ config.Version }}'; _edrone.platform = 'comarch'; _edrone.shop_lang = '{{ page.Language }}';{% if page.PageId != config.DefinedPages.Order.Id -%} _edrone.action_type = 'other'; {% if usr.Authenticated -%} {% if customer.Address.Name != '' -%} {% assign FullName = customer.Address.Name -%} {% if FullName contains ' ' -%} {% assign HalfName = FullName | Split:' ' -%} {% endif %} _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}'; {% if HalfName[1] -%} _edrone.last_name = '{{ HalfName[1] }}'; {% endif %} {% endif -%} {% if customer.Address.Country != '' -%} _edrone.country = '{{ customer.Address.Country }}'; {% endif -%} {% if customer.Address.City != '' -%} _edrone.city = '{{ customer.Address.City }}'; {% endif -%} {% if customer.Address.Phone != '' -%} _edrone.phone = '{{ customer.Address.PhoneNo }}'; {% endif -%} _edrone.email = '{{ customer.Email }}'; {% endif -%} {% endif -%}var doc = document.createElement('script'); doc.type = 'text/javascript'; doc.async = true; doc.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + srcjs; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(doc, s); })("//d3bo67muzbfgtl.cloudfront.net/edrone_2_0.js"); </script> {% endif -%}
W pliku html, na końcu sekcji body includujemy pliki edrone/product-presentation.html oraz edrone/subscribe.html
- product-presentation.html
{% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%} <script type="text/javascript"> {% if productdetails -%} {% assign product-presentation = productdetails -%} {% elseif product-details -%} {% assign product-presentation = product-details -%} {% endif -%} window._edrone = window._edrone || {}; _edrone.action_type = 'product_view'; _edrone.product_ids = '{{ product-presentation.Product.Id }}'; _edrone.product_titles = '{{ product-presentation.Product.Name }}'; {% if product-presentation.Product.ImageId > 0 -%} _edrone.product_images = 'http:{{ page.BaseHref }}img/large/{{ product-presentation.Product.ImageId }}/{% if product-presentation.Product.Images[0].Name != "" -%}{{ product-presentation.Product.Images[0].Name }}{% else %}.jpg{% endif %}'; {% endif -%} {% if product-presentation.Product.Code != '' -%} _edrone.product_skus = '{{ product-presentation.Product.Code }}'; {% endif -%} _edrone.product_urls = '{{ page.CanonicalLink }}'; _edrone.product_category_ids = '{{ page.GroupId }}'; _edrone.product_category_names = '{{ page.CurrentSiteNode.Name }}'; </script> {% endif %}
Wskazówka
Jeżeli w swoim szablonie obiekt ze szczegółami produktu ma inną nazwę, to należy zmodyfikować warunek.
- subscribe.html
{% if config.External.Edrone.AppId != '' -%} {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.CustomerProfile.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Newsletter/Subscribe' || d.action.Action == 'newsletter/subscribe') && d.action.Result){ var queryString = c.data.split('&'); for(i=0; i<queryString.length; i++){ if(queryString[i].indexOf('email') != -1){ var email = queryString[i].split('=')[1].replace('%40','@'); } } _edrone.customer_tags = 'From Newsletter Subscribe'; _edrone.email = email; _edrone.subscriber_status = '1'; _edrone.action_type = 'subscribe'; _edrone.init(); } }); </script> {% endif %} {% if page.PageId == config.DefinedPages.CustomerProfile.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Newsletter/Unsubscribe' || d.action.Action == 'newsletter/unsubscribe') && d.action.Result){ var queryString = c.data.split('&'); for(i=0; i<queryString.length; i++){ if(queryString[i].indexOf('email') != -1){ var email = queryString[i].split('=')[1].replace('%40','@'); } } _edrone.customer_tags = 'From Newsletter Subscribe'; _edrone.email = email; _edrone.subscriber_status = '0'; _edrone.action_type = 'subscribe'; _edrone.init(); } }); </script> {% endif %} {% endif %}
Wskazówka
Jeżeli w swoim szablonie umożliwiasz zapis do newslettera z innych stron niż strona główna i profil klienta oraz pozwalasz na wypisanie poza profilem klienta, to należy zmodyfikować powyższy plik.

Uwaga
W wersji 2018.7 z domyślnych szablonów Comarch usunięto akcję dotyczącą zapisu i wypisu z newslettera, ponieważ dane przekazywane są przez Comarch e-Sklep w tle.
W szablonach Agat, Bursztyn i Opal, w tym samym miejscu includujemy również plik edrone/add-to-cart.html {% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){ _edrone.action_type = 'add_to_cart'; _edrone.init(); } }); </script> {% endif %}
Wskazówka
Plik należy dodać do wszystkich szablonów, które nie są oparte o najnowszą wersję szablonu Szafir (w tym szablonie dodawanie do koszyka w edrone obsłużone jest bezpośrednio w funkcjach szablonu – spowodowane jest to możliwością dodawania kilku towarów jednocześnie czego inne szablony nie posiadają).
W szablonie Bursztyn, w tym samym miejscu includujemy również plik edrone/add-to-cart-with-data.html {% if config.External.Edrone.AppId != '' -%} {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.ProductList.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){ window._edrone = window._edrone || {};var products = d.collection["customer.Cart"].Products; var size = products.length; var product = products[size-1];_edrone.product_ids = product.Id; _edrone.product_titles = product.NameNoHtml; if(product.ImageId > 0){ _edrone.product_images = 'http:{{ page.BaseHref }}img/large/'+product.ImageId+'/.jpg'; } if(product.Code != ''){ _edrone.product_skus = product.Code; } _edrone.product_urls = 'http:{{ page.BaseHref }}'+product.Url; _edrone.product_category_ids = product.DefaultGroup; _edrone.action_type = 'add_to_cart'; _edrone.init(); } }); </script> {% endif %} {% endif %}
Wskazówka
Kod działa dla dodawania do koszyka ze strony głównej i listy towarów. Jeżeli pozwalasz na dodawanie do koszyka z innych stron, należy go zmodyfikować.
W pliku z podziękowaniami za zakup (Agat – partials/cart/summary.html, Bursztyn i Opal – order/thank-you.html, Szafir – order/thx.html), na końcu pliku (tuż pod includem rich-snippetów), includujemy plik edrone/order.html {% if config.External.Edrone.AppId != '' -%} <script type="text/javascript"> _edrone.action_type = 'order';{% if cart -%} {% assign order = cart -%} {% endif -%}{% assign FullName = order.Customer.DeliveryAddress.Name -%} {% if FullName contains ' ' -%} {% assign HalfName = FullName | Split:' ' -%} {% endif %} _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}'; {% if HalfName[1] -%} _edrone.last_name = '{{ HalfName[1] }}'; {% endif %} _edrone.country = '{{ order.Customer.DeliveryAddress.Country }}'; {% if order.Customer.DeliveryAddress.City != '' -%} _edrone.city = '{{ order.Customer.DeliveryAddress.City }}'; {% endif %} {% if order.Customer.DeliveryAddress.PhoneNo != '' -%} _edrone.phone = '{{ order.Customer.DeliveryAddress.PhoneNo }}'; {% endif %} _edrone.email = '{{ order.Customer.Email }}'; {% assign size = order.PlacedOrder.Products | Size -%} var ids = ''; var titles = ''; var images = ''; var skus = ''; var urls = ''; var categoryIds = ''; var counts = ''; {% for product in order.PlacedOrder.Products -%} ids += '{{ product.Id }}{% if forloop.index != size -%}|{% endif -%}'; titles += '{{ product.NameNoHtml }}{% if forloop.index != size -%}|{% endif -%}'; images += '{% if product.ImageId > 0 -%}http:{{ page.BaseHref }}img/large/{{ product.ImageId }}/.jpg{% endif -%}{% if forloop.index != size -%}|{% endif -%}'; skus += '{{ product.Code }}{% if forloop.index != size -%}|{% endif -%}'; urls += 'http:{{ page.BaseHref }}{{ product.Url }}{% if forloop.index != size -%}|{% endif -%}'; categoryIds += '{{ product.DefaultGroup }}{% if forloop.index != size -%}|{% endif -%}'; counts += '{{ product.Quantity | Normalize }}{% if forloop.index != size -%}|{% endif -%}'; {% endfor -%} _edrone.product_ids = ids; _edrone.product_titles = titles; _edrone.product_images = images; _edrone.product_skus = skus; _edrone.product_urls = urls; _edrone.product_category_ids = categoryIds; _edrone.product_counts = counts; _edrone.order_id = '{{ order.PlacedOrder.Id }}'; _edrone.base_currency = '{{ order.Currency }}'; _edrone.order_currency = '{{ order.Currency }}'; _edrone.base_payment_value = '{{ order.OrderTotalValue | ToString | Replace:",","." }}'; _edrone.order_payment_value = '{{ order.OrderTotalValue | ToString | Replace:",","." }}'; _edrone.init(); </script> {% endif -%}
Wskazówka
Jeżeli w swoim szablonie używasz dla koszyka innej nazwy obiektu niż cart lub order, to powyższy kod należy zmodyfikować.

Edrone i dodawanie towarów w szablonie Szafir:

Plik js/init-ui1.js

Funkcja serialAddingToCart

Na samym początku funkcji znajduje się pętla “each”, a w niej instrukcja warunkowa „if (quantity > 0)”. Na końcu tej instrukcji warunkowej wklejamy poniższy kod:

if(typeof _edrone !== 'undefined') {
var product = form.parents('.product-item-lq');
var base = $('[data-base]').data('base');

if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}

Funkcja addManyProducts

if(parameters && !validationError && products[i].supply != undefined && typeof _edrone !== 'undefined'){
if(first){
_edrone.product_ids = products[i].supply;
_edrone.product_images = products[i].img;
_edrone.product_skus = products[i].code;
var name = _edrone.product_titles;
var url = _edrone.product_urls;
var categoryId = _edrone.product_category_ids;
var categoryName = _edrone.product_category_names;
first = false;
} else {
_edrone.product_ids += '|' + products[i].supply;
_edrone.product_images += '|' + products[i].img;
_edrone.product_skus += '|' + products[i].code;
_edrone.product_titles += '|' + name;
_edrone.product_urls += '|' + url;
_edrone.product_category_ids += '|' + categoryId;
_edrone.product_category_names += '|' + categoryName;
}
}

Kilkanaście linijek niżej (w tej samej funkcji) jest “$.post”. Na samym jego początku należy dodać poniższy kod:

if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}

Dodanie funkcji simpleAddToCartSuccess

Na końcu pliku js/init-ui1.js należy dodać poniższy kod:

function simpleAddToCartSuccess(e){
updateClientArea();
if(typeof _edrone !== 'undefined') {
if ($('.add-from-presentation-lq').index() == -1) {
var product = $(e.currentTarget).parents('.product-item-lq');
var base = product.parents('[data-base]').data('base');
_edrone.product_ids = product.data('product-id');
_edrone.product_titles = product.find('.product-name-lq').text();
_edrone.product_images = base + product.find('img').attr('src');
_edrone.product_skus = product.find('.product-code-lq').text();
_edrone.product_urls = base + product.find('a').attr('href');
_edrone.product_category_ids = product.parents('[data-group-id]').data('group-id');
_edrone.product_category_names = product.parents('[data-group-name]').data('group-name');
}
_edrone.action_type = 'add_to_cart';
_edrone.init();
}
}

$('body').on('click', '.add-to-cart-update-client-area-lq', function(e) {
app.post(e, simpleAddToCartSuccess, e);
});

Plik js/init-ui2.js

Funkcja serialAddingFromWishlist

if(typeof _edrone !== 'undefined') {
if (first) {
_edrone.product_ids = productId;
_edrone.product_titles = productContainer.find('.product-name-lq').text();
_edrone.product_images = base + productContainer.find('img').attr('src');
_edrone.product_skus = productContainer.find('.product-code-lq').text();
_edrone.product_urls = base + productContainer.find('a').attr('href');
_edrone.product_category_ids = categoryId;
first = false;
} else {
_edrone.product_ids += '|' + productId;
_edrone.product_titles += '|' + productContainer.find('.product-name-lq').text();
_edrone.product_images += '|' + base + productContainer.find('img').attr('src');
_edrone.product_skus += '|' + productContainer.find('.product-code-lq').text();
_edrone.product_urls += '|' + base + productContainer.find('a').attr('href');
_edrone.product_category_ids += '|' + categoryId;
}
}

Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod:

if(typeof _edrone !== 'undefined') {
_edrone.action_type = 'add_to_cart';
_edrone.init();
}

Nowe Inpost API - aktualizacja paczkomatów i punktów odbioru osobistego w szablonach

Wskazówka

Spis treści

Szablon Szafir

Szablon Agat

Szablon Opal

Szablon Bursztyn

Szablon Szafir

Wskazówka

Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki

Wrzuć pliki „collection-points-scripts.html” i „collection-points-styles.html” do głównego folderu z szablonem (tam gdzie „__layout.html”).
Wrzuć plik „collection-points.js” do folderu „js”.
Wrzuć plik “collection-points.css” do folderu “css”.
Podmień plik “collection-points.html”, który znajduje się w folderze „order/delivery-partials”.
W pliku „__layout.html”, na końcu sekcji „<head>” dodaj poniższą linijkę: {% include 'collection-points-styles.html' %}
W pliku „__layout.html”, na końcu sekcji „<body>” dodaj poniższą linijkę: {% include 'collection-points-scripts.html' %}
Dodaj tłumaczenie: - SearchInpostInfo: "Szukaj po mieście, adresie i nazwie paczkomatu”
(punkt opcjonalny – poprawienie styli – bez niego paczkomaty i POO będą działać ale będzie brzydko wyglądać i każdy to zauważy) W pliku “order/delivery-partials/delivery-section.html”, pod formularzem „<form class="no-message-lq delivery-form-lq">” należy utworzyć nowy kontener “<div class="clear-after-ui"></div>”, a następnie wkleić do niego dwa ostatnie kontenery z klasą “f-left-ui” wraz z ich zawartością. <div class="clear-after-ui"> <div class="f-left-ui half-ui-with-space-ui cart-option-ui delivery-address-lq address-ui delivery-address-ui"> <p> {% if order.SelectedDelivery.CollectionPointTypeId == 0 -%} {{translations.ShippingAddress}} {% else -%} {{translations.MyData}} {% endif -%} </p> <div class="address-template-container-lq" data-address-type="0"> {% assign lackOfPhone = false -%} {% assign countryMismatch = false -%}{% if order.SelectedDelivery.PhoneRequired and deliveryAddress.PhoneNo == '' -%} {% assign lackOfPhone = true -%} {% endif -%} {% comment -%} {% if page.Cookies.deliveryAddressId == null or page.Cookies.deliveryAddressId == '' -%} {% for profileAddress in customer.DeliveryAddresses -%} {% if profileAddress.Default and profileAddress.Country != config.DefaultCountry -%} {% assign countryMismatch = true -%} {% break -%} {% endif -%} {% endfor -%} {% if countryMismatch == false and deliveryAddress.Country != config.DefaultCountry -%} {% assign countryMismatch = true -%} {% endif -%} {% elseif page.Cookies.deliveryAddressId == -1 -%} {% assign countryMismatch = true -%} {% else -%} {% for profileAddress in customer.DeliveryAddresses -%} {% if profileAddress.Id == page.Cookies.deliveryAddressId -%} {% if profileAddress.Country != deliveryAddress.Country %} {% assign countryMismatch = true -%} {% endif -%} {% break -%} {% endif -%} {% endfor -%} {% endif -%} {% endcomment -%} {% if page.Cookies.delivCountryChanged == 'true' -%} {% assign countryMismatch = true -%} {% endif -%} {% if deliveryAddress.Name == '' or lackOfPhone or countryMismatch -%} {% include 'order/delivery-partials/address-form.html' with 'orderDa' -%} {% else -%} {% include 'order/delivery-partials/address-presentation.html' with 'orderDa' -%} {% endif -%} </div> </div> <div class="f-left-ui half-ui-with-space-ui cart-option-ui invoice-address-lq address-ui invoice-address-ui"> <p>{{translations.InvoiceData}}</p> <div class="address-template-container-lq" data-address-type="1"> {% if invoiceAddress.Name == '' and order.Customer.CustomerDetailsEditable -%} {% include 'order/delivery-partials/address-form.html' with 'inv-add' -%} {% else -%} {% include 'order/delivery-partials/address-presentation.html' with 'inv-add'-%} {% endif -%} </div> </div> </div>

Szablon Agat

Wskazówka

Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki

Podmień plik ‘order.js’, który znajduje się w folderze ‘js’.
Wrzuć plik ‘collection-points.css’ do folderu ‘css’.
a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘delivery-adress.html’, który znajduje się w folderze ‘partials/cart’. b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami następującym: {% if cart.SelectedDelivery.CollectionPointTypeId == 2 or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div class="geowidget-container" id="map"> {% if settings.googleMapsKey == '' or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div id="collection-points-searcher" class="collection-points-search-box {% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} personal-collection-points {% endif -%}"> <input placeholder="{% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} {{translations.TypeAdress}} {% else -%}{{translations.AddCodeOrAdress}}{% endif -%}" type="search" id="machines-filter-input" class="collection-point-search-input"> <span class="fa fa-search"></span> <div class="collection-points-result hidden"><ul></ul></div> </div> {% elsif settings.googleMapsKey != '' and cart.SelectedDelivery.CollectionPointTypeId == 2 -%} <div id="easypack-map"></div> {% endif -%} </div> {% endif -%}
W pliku ‘_layout.html’, na końcu sekcji ‘<head>’ dodaj poniży kod: {% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="https://geowidget.easypack24.net/css/easypack.css"> <link rel="stylesheet" type="text/css" href="css/collection-points.css"> {% endif -%}
W pliku ‘_layout.html’, na końcu sekcji ‘<body>’ dodaj poniży kod: {% if page.PageId == config.DefinedPages.Order.Id -%} <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script> {% endif -%}
Dodaj tłumaczenia: - TypeAdress: "Wpisz adres" - AddCodeOrAdress: "Wpisz kod paczkomatu lub adres"
Aby paczkomaty działały poprawnie również przy przechodzeniu na poprzedni i następny krok koszyka: a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘init.js’, który znajduje się w folderze ‘js’. b) Jeśli kod szablonu był modyfikowany, wywołaj funkcje: orderCollectionPoints.easyPackAsyncInit(); orderCollectionPoints.getCollectionPoints(); w tych funkcjach, które są wywoływane przy zmianie sekcji na ‘CustomerData’ w koszyku: Zmienione fragmenty pliku ‘init.js’ to: orderPrevStep: function (e) { var container = $('.shopping-cart'); var data = { __template: 'partials/cart/cart-template.html', __csrf: __CSRF, __action: 'Order/StepPrev' }; $.post(null, data, function (result) { if (result.action.Result) { $('.shopping-cart').html(result.template); if ($('body').find('#invoice-address-data').index() >= 0) { application.uiSetSwitchNameWidthInInvoice(); } if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } if ($('.geowidget-container').length > 0) { $('#main-section .save-delivery-address-data').addClass('order-next-step').removeClass('choose-collection-point'); } application.loadImages(); application.uiScrollToTop(container); application.uiCheckLabels(); } else { if (result.action.Code != 100) { if (result.action.Validation != null) { errorMessage = '<div class="title">' + result.action.Message + '</div>' + '<p>' + result.action.Validation[0].Error + '</p>'; } else { errorMessage = '<div class="title">' + result.action.Message + '</div>'; } application.createMessage(errorMessage); } } }); }, orderNextStep: function (e) { if ($('#delivery-address-data').index() >= 0) { var allEdited = true; $('#delivery-address-data input[required]').each(function () { if (allEdited === false) { return; } else { if ($(this).val() == '') { allEdited = false; } } }); if (allEdited === false) { var errorMessage = $(e.currentTarget).next().next().val(); application.createMessage(errorMessage, 3000); return; } else if ($('input[name="invoice"]').hasClass('company') && $('input[name="tin"]').val() == '' && $('input[name="tin"]').prop('required')) { var message = $('input[name="company"]').attr('data-info'); application.createMessage(message, 2000); } else { var data = $('#delivery-address-data').serializeArray(); var validate = application.uiValidateForm($('#delivery-address-data'));if (validate) { $.post(null, data, function (result) { if (result.action.Result) { var container = $('body'); var data = { __template: 'partials/cart/cart-template.html', __csrf: __CSRF, __action: 'Order/StepNext' }; $.post(null, data, function (result) { if (result.action.Result) { $('.shopping-cart').replaceWith(result.template); if ($('body').find('#invoice-address-data').index() >= 0) { application.uiSetSwitchNameWidthInInvoice(); } application.loadImages(); application.uiSetSwitchNameWidthInSummaryCheckboxes(); application.uiScrollToTop(container); application.uiCheckLabels(); if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } } else { if (result.action.Code != 100) { if (result.action.Validation != null) { errorMessage = '<div class="title">' + result.action.Message + '</div>' + '<p>' + result.action.Validation[0].Error + '</p>'; } else { errorMessage = '<div class="title">' + result.action.Message + '</div>'; } application.createMessage(errorMessage, 3000); } } }); } else { if (result.action.Code != 100) { if (result.action.Validation != null) { errorMessage = '<div class="title">' + result.action.Message + '</div>' + '<p>' + result.action.Validation[0].Error + '</p>'; } else { errorMessage = '<div class="title">' + result.action.Message + '</div>'; } application.createMessage(errorMessage, 3000); return; } } }); } } } else { var container = $('body'); var data = { __template: 'partials/cart/cart-template.html', __csrf: __CSRF, __action: 'Order/StepNext' }; $.post(null, data, function (result) { if (result.action.Result) { if ((result.template).indexOf('name="sel-del-met" value="' + 1 + '"') !== -1 || (result.template).indexOf('name="sel-del-met" value="' + 2 + '"') !== -1) { application.orderPrevStep(); } else { $('.shopping-cart').replaceWith(result.template); if ($('body').find('#invoice-address-data').index() >= 0) { application.uiSetSwitchNameWidthInInvoice(); } if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } application.loadImages(); application.uiSetSwitchNameWidthInSummaryCheckboxes(); application.uiScrollToTop(container); application.uiCheckLabels(); } } else { if (result.action.Code != 100) { if (result.action.Validation != null) { errorMessage = '<div class="title">' + result.action.Message + '</div>' + '<p>' + result.action.Validation[0].Error + '</p>'; } else { errorMessage = '<div class="title">' + result.action.Message + '</div>'; } application.createMessage(errorMessage); } } }); } },

Szablon Opal

Wskazówka

Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki

Wrzuć plik ‘collection-points.js’ do folderu ‘js’.
Wrzuć plik ‘collection-points.css’ do folderu ‘css’.
Podmień plik ’delivery-points-partial.html’, który znajduje się w folderze ‘order’.
a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘data-form.html’, który znajduje się w folderze ‘order/cst-data’. b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami linijką: {% include 'order/delivery-points-partial.html' -%}
W pliku ‘_layout.html’, na końcu sekcji ‘<head>’ dodaj poniży kod: {% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="https://geowidget.easypack24.net/css/easypack.css"> <link rel="stylesheet" type="text/css" href="css/collection-points.css"> {% endif -%}
W pliku ‘order-cart.html’, do bloku ‘{% block PageBodyEnd -%}’ dodaj poniży kod: <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script> <script src="js/collection-points.js"></script>
Dodaj tłumaczenie: - TypeAdress: "Wpisz adres"
Aby paczkomaty działały poprawnie również przy przechodzeniu na poprzedni i następny krok koszyka: a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘order.js’, który znajduje się w folderze ‘js’. b) Jeśli kod szablonu był modyfikowany, wywołaj funkcje: orderCollectionPoints.easyPackAsyncInit(); orderCollectionPoints.getCollectionPoints(); w tych funkcjach, które są wywoływane przy zmianie sekcji na ‘customerData’ w koszyku: Zmienione fragmenty pliku ‘order.js’, to: orderForm.on('click', '#customer-data-form', function (e) { e.preventDefault(); $.get('', {__template: 'order/cst-data/data-form.html'}, function (res) { orderForm.find('.content').html(res.template); if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } window.sessionStorage.setItem('continueWithoutRegistration', true); }); }); var initStep = (function f(e, step) { if (!$('.order').hasClass('cart-empty')) { stepsLinks(); }if (step && step == 'ThankYou') { $("#order-form").find("script").each(function () { eval($(this).text()); }); if (window.sessionStorage.getItem('continueWithoutRegistration')) { window.sessionStorage.removeItem('continueWithoutRegistration'); } } if (step && step == 'CustomerData') { window.sessionStorage.setItem('toSkip', true); if (window.sessionStorage.getItem('continueWithoutRegistration')) { $.get('', {__template: 'order/cst-data/data-form.html'}, function (res) { orderForm.find('.content').html(res.template); if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } }); } } return f; })(); orderForm.on('click', '.recalculate, #remove-points', function (e) { e.preventDefault(); $.post(null, { __collection: 'customer.Cart.Value', __template: 'order/cart.html', __csrf: __CSRF, __action: 'cart/Recalculate' }, function (d) { CreateTooltip(d.action); showTooltip(); $('.order-content').replaceWith(d.template); lazyCheck(); UpdateSmallCrt(d.collection); orderCollectionPoints.checkPointsAvailability(); }); });

Szablon Bursztyn

Wskazówka

Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki

1. Wrzuć plik „collectionpoints.js” do folderu „js”.
2. Wrzuć plik “collectionpoints.css” do folderu “css” .
3. W pliku html w sekcji <head> pod koniec znaczników <link> dodaj poniższy kod: {% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="https://geowidget.easypack24.net/css/easypack.css"> <link rel="stylesheet" type="text/css" href="css/collectionpoints.css"> {% endif -%}
4. W pliku ‘order-cart.html’, do bloku ‘{% block PageBodyEnd -%}’ dodaj poniży kod: <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script> <script src="js/collection-points.js"></script>
5. Plik cart.html: a) Jeśli kod szablonu nie był modyfikowany, wystarczy podmienić plik, który znajduje się w katalogu ‘order’. b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami następującym kodem: {% if cart.SelectedDelivery.CollectionPointTypeId == 2 or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div class="col-sm-12 geowidget-container" id="map"> <h2> {% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} {{translations.Crt_ChooseCollectionPoint}} {% else -%} {{translations.Crt_ChooseInpostMachine}} {% endif -%} </h2>{% if settings.googleMapsKey == '' or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div id="collection-points-searcher" class="collection-points-search-box {% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} personal-collection-points {% endif -%}"> <input placeholder="{% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} {{transla-tions.TypeAdress}} {% else -%}{{translations.Crt_MachineCodeOrAdress}}{% endif -%}" type="search" id="machines-filter-input" class="collection-point-search-input"> <span class="fa fa-search"></span> <div class="collection-points-result hidden"><ul></ul></div> </div> {% elsif settings.googleMapsKey != '' and cart.SelectedDelivery.CollectionPointTypeId == 2 -%} <div id="easypack-map"></div> {% endif -%} </div> {% endif -%}
6. Plik order-short-info.html : a) Jeśli kod szablonu nie był modyfikowany, podmień plik znajdujący się w folderze ‘order’ b) Jeśli kod szablonu był modyfikowany, podmień linijkę {% assign displayOptions = include %} (znajdującą się na początku dokumentu), poniższym kodem: {% if page.POST.__include %} {% assign displayOptions = page.POST.__include %} {% else %} {% assign displayOptions = include %} {% endif %}
7. Plik cart-products-partial.html: a) Jeśli kod szablonu nie był modyfikowany, podmień plik znajdujący się w folderze ‘order’ b) Jeśli kod szablonu był modyfikowany, proszę usunąć poniższy kod znajdujący się pod koniec znacznika <div class=”custom-collection”> : {% if settings.googleMapsKey != '' and deliveryData.CollectionPoints[deliveryData.CollectionPointId].Latitude <> "" and deliveryData.CollectionPoints[deliveryData.CollectionPointId].Longitude <> "" and step == 'summary' -%} <p class="collection-localization"> <span class="glyphicon glyphicon-map-marker"></span> {{translations.Crt_LocateOnMap}} </p> <div id="map-canvas" data-step="{{step}}" data-type="{{deliveryData.CollectionPointTypeId}}" data-lat="{{deliveryData.CollectionPoints[deliveryData.CollectionPointId].Latitude}}" data-lng="{{deliveryData.CollectionPoints[deliveryData.CollectionPointId].Longitude}}"></div> {% endif -%}
8. Aby paczkomaty działały poprawnie podczas przechodzenia na poprzedni oraz następny krok koszyka należy: a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘order.js’ znajdujący się w folderze ‘js’ b) Jeśli kod szablonu był modyfikowany, należy wywołać orderCollectionPoints.cpCheck() oraz orderCollectionPoints .checkPackage() na końcu funkcji, która przenosi użytkownika do poprzedniego kroku koszyka.Funkcja orderCollectionPoints.cpCheck() jest odpowiedzialna za inicjalizację mapy bądź listy paczkomatów na danej stronie. Z kolei orderCollectionPoints.checkPackage() sprawdza czy paczkomat do którego ma być zrealizowane zamówienie został już wybrany.Funkcja orderCollectionPoints.cpCheck() należałoby również dodać do zdarzenia obsługującego zmianę sposobu dostawy.Ostatnią rzeczą jaką trzeba zrobić na koniec zamówienia, kiedy klient zrealizuje już transakcję, to dodanie linijki sessionStorage.removeItem(‘paczka’). Ma ona na celu usunięcia informacji o wybranym paczkomacie.

Wskazówka

Przeczytaj więcej o nowym API serwisu InPost.

Obsługa kanałów do zgody na newsletter w darmowych szablonach graficznych Comarch e-Sklep

Wskazówka

Listę zgód wyświetlanych w newsletterze możemy znaleźć w tablicy przechowywanej w obiekcie config.TOS.Consents.Newsletter. Poniższa pętla pozwoli nam wyświetlić wszystkie zgody znajdujące się w obiekcie Newsletter:

{% for tos in config.TOS.Consents.Newsletter -%}

<label class="statement tos-name">{{tos.Text}}</label> {% endif -%} Jeżeli interesuje nas pokazanie wszystkich kanałów znajdujących się w danej zgodzie to warto najpierw przypisać ich ilość do konkretnej zmiennej liquidowej. W każdej pojedynczej zgodzie kanały możemy znaleźć w obiekcie Channels.

{% assign channelsSize = tos.Channels | Size -%}
Teraz wystarczy tylko napisać prostą pętle „for” Poniżej przykład wykorzystujący listę.

{% if channelsSize > 0 -%}
<ul class="channels disabled">
    {% for chn in tos.Channels -%}
    <li class="channel">
        <input id="channel{{ chn.Key }}" type="checkbox" name="channelKey" value="{{ chn.Key }}" disabled/>
        <div class="channel-switch input-switch "><div class="switch-button"></div></div>
        <label for="channel{{ chn.Key }}">{{chn.Name}}</label>
    </li>
    {% endfor -%}
</ul>
{% endif -%}

Spis treści

Szablon Agat

Szablon Opal

Szablon Bursztyn

Szablon Agat

1.Zmień pętlę for wyświetlającą checkboxy ze zgodami w pliku 'footer.html', który znajduje się w folderze 'partials/common'

{% for tos in config.TOS.Consents.Newsletter -%}
<div class="input-group switches">
<label class="switch">
<span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
<input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%}/>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</div>
{% endfor -%}

{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}
<li class="{% if channelsSize > 0 -%}multiple-choice {% endif -%} {% if tos.Required -%} required-consent{% endif -%}">
<div class="input-group switches">
{% if tos.Statement %}
<p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
{% else %}
<span class="main-consent-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span>
<label class="switch">
<span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
<input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%}/>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
{% endif -%}

{% if channelsSize > 0 -%} <span class="channel-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span> {% for chn in tos.Channels -%} <label class="switch channel-switch {% if tos.Statement == false %} unactive-switch{% endif -%}"> <span class="switch-name">{{chn.Name}}</span> <input class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} {% if tos.Statement == false %} disabled{% endif -%}/> <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endfor -%} {% endif -%} </div> </li> {% endfor -%} 2.W pliku 'init.js' uzupełnij funkcję uiValidateForm o walidację pól kanałów. Plik znajduje się w folderze 'js'.

			uiValidateForm: function (form) {
var formRequiredInputs = form.find('input[required], textarea[required]');
var tosInputs = form.find('input[type="checkbox"]');
var formInvalidInfo = form.data('invalid');
var emailInvalidInfo = form.data('email-invalid');
var postCodeInvalidInfo = form.data('pcode-invalid');
var tinInvalidInfo = form.data('tin-invalid');
var tosRequiredInfo = form.data('tos-invalid');
var warningTosInfos = form.find('.tos-warning');
var tosRequiredValid = true;
var tinInputValid = true;
var emailInputValid = true;
var postCodeInputValid = true;
var isEmpty = false;
var checkedChannels = [];
var channelsInputs;

$.each(formRequiredInputs, function (key, value) { $(value).addClass('validationStyles'); if ($(value).val() == '') { isEmpty = true; } if ($(value).attr('name') === 'email') { emailInputValid = application.uiValidateEmail($(value).val()); } if ($(value).attr('name') === 'zipCode') { postCodeInputValid = application.uiValidatePostCode($(value).val(), $(value).attr('pattern')); } if ($(value).attr('name') === 'tin') { tinInputValid = application.uiValidateTinCode($(value).val(), $(value).attr('pattern')); } }); $.each(tosInputs, function (key, value) { if ($(value).data('required') === 'req') { if (!$(value).prop('checked')) { $(value).closest('label').addClass('required-checkbox-warning'); } if ($(value).hasClass('channel-checkbox')) { channelsInputs = $(value).closest('.input-group').find('.channel-checkbox'); $.each(channelsInputs, function (key, value) { if ($(value).prop('checked')) { checkedChannels.push($(value)); } }); if (checkedChannels.length > 0) { tosRequiredValid = true } else { tosRequiredValid = false } if (warningTosInfos.length > 0) { $.each(warningTosInfos, function (key, value) { if ($(value).is(":visible")) { tosRequiredValid = false; } }); } } else if (!$(value).prop('checked')) { tosRequiredValid = false; } } }); if (tosRequiredValid && tinInputValid && postCodeInputValid && emailInputValid && !isEmpty) { return true; } else if (!emailInputValid) { application.createMessage(emailInvalidInfo); } else if (!postCodeInputValid) { application.createMessage(postCodeInvalidInfo); } else if (!tinInputValid) { application.createMessage(tinInvalidInfo); } else if (!tosRequiredValid) { application.createMessage(tosRequiredInfo); } else { application.createMessage(formInvalidInfo); } },

			uiValidateForm: function (form) {
var formRequiredInputs = form.find('input[required], textarea[required]');
var tosInputs = form.find('input[type="checkbox"]');
var formInvalidInfo = form.data('invalid');
var emailInvalidInfo = form.data('email-invalid');
var postCodeInvalidInfo = form.data('pcode-invalid');
var tinInvalidInfo = form.data('tin-invalid');
var tosRequiredInfo = form.data('tos-invalid');
var warningTosInfos = form.find('.tos-warning');
var tosRequiredValid = true;
var tinInputValid = true;
var emailInputValid = true;
var postCodeInputValid = true;
var isEmpty = false;
var checkedChannels = [];
var channelsInputs;

	uicheckIfParentChecked: function(e) {
var parentBox = $(e.currentTarget).closest('.multiple-choice');
var elementParentTos = parentBox.find('input[name=tos]');
var consentWarning = parentBox.find('.main-consent-warning');
var channelWarning = parentBox.find('.channel-warning');
var tosChannels = parentBox.find('.channel-checkbox');
var checkedChannels = [];
var elementParentTosChecked, parentTosName;

if (elementParentTos.length > 0) { elementParentTosChecked = $(elementParentTos[0]).prop('checked'); parentTosName = parentBox.find('.input-group > label .switch-name'); consentWarning = $(elementParentTos[0]).closest('.input-group').find('.main-consent-warning'); if (!elementParentTosChecked) { $(parentTosName[0]).css({ 'color': '#ff3a3a', 'transition': '200ms' }); $(consentWarning[0]).show(); } if (!$(e.currentTarget).prop('checked') || elementParentTosChecked) { $(parentTosName[0]).css({ 'color': '', 'transition': '200ms' }); $(consentWarning[0]).hide(); } if (!$(e.currentTarget).prop('checked') && !elementParentTosChecked) { $(parentTosName[0]).css({ 'color': '', 'transition': '200ms' }); $(consentWarning[0]).hide(); $(e.currentTarget).prop('disabled', true); $(e.currentTarget).closest('.channel-switch').addClass('unactive-switch'); } if ($(e.currentTarget).prop('checked')) { $(channelWarning[0]).hide(); } else { $.each(tosChannels, function (key, value) { if ($(value).prop('checked')) { checkedChannels.push($(value)); } }); if (checkedChannels.length === 0 && elementParentTosChecked) { $(channelWarning[0]).show(); } } } }, uicheckIfTosChannelChecked: function (e) { var parentBox = $(e.currentTarget).closest('.multiple-choice'); var tosChannels = parentBox.find('.channel-checkbox'); var checkedChannels = []; var channelWarning = parentBox.find('.channel-warning'); var consentWarning = parentBox.find('.main-consent-warning'); var isChecked = $(e.currentTarget).prop('checked'); var tosName = $(e.currentTarget).closest('label').find('.switch-name'); $.each(tosChannels, function (key, value) { if ($(value).prop('checked')) { checkedChannels.push($(value)); } }); if (checkedChannels.length > 0 && !isChecked) { $(channelWarning[0]).hide(); $.each(tosChannels, function (key, value) { $(value).closest('.channel-switch').addClass('unactive-switch'); $(value).prop('disabled', true); $(value).prop("checked", false); }); } if (checkedChannels.length > 0 && isChecked) { $(channelWarning[0]).hide(); $(tosName[0]).css({ 'color': '', 'transition': '200ms' }); $(consentWarning[0]).hide(); } if (checkedChannels.length === 0 && isChecked) { $(channelWarning[0]).show(); $.each(tosChannels, function (key, value) { $(value).closest('.channel-switch').removeClass('unactive-switch'); $(value).removeAttr('disabled'); }); } if (checkedChannels.length === 0 && !isChecked) { $(channelWarning[0]).hide(); $.each(tosChannels, function (key, value) { $(value).closest('.channel-switch').addClass('unactive-switch'); $(value).prop('disabled', true); }); } }, 4.Wywołaj nowe funkcje w pliku 'init.js', w obiekcie application.events

		$('body').on('click', '.channel-checkbox', function (e) {
self.uicheckIfParentChecked(e);
});

$('body').on('click', '.multiple-choice .input-group > label .switch-input[name=tos]', function (e) { self.uicheckIfTosChannelChecked(e); }); 5.Dodaj tłumaczenia: - MainConsentWarning: "Wyraź zgodę" - ChannelWarning: "Wybierz przynajmniej jeden kanał" 6.Uzupełnij plik '480plus.css', który znajduje się w folderze 'css', o style:

.multiple-switch {
margin: 0 0 20px;
}

.multiple-choice .main-consent-warning, .multiple-choice .channel-warning, .input-group.switches .main-consent-warning, .input-group.switches .channel-warning { display: none; position: relative; font-size: 11px; color: #ff3a3a; top: -20px; left: -51px; } .multiple-choice .main-consent-warning .fa, .multiple-choice .channel-warning .fa, .input-group.switches .main-consent-warning .fa, .input-group.switches .channel-warning .fa { margin: 0 5px 0 0; } .input-group label.required-checkbox-warning .switch-name { color: #ff3a3a !important; } .input-group label.required-checkbox-warning .switch-name a.cp_link { color: #ff3a3a; } form .input-group .switch.unactive-switch { opacity: .5; cursor: not-allowed; }

Szablon Bursztyn

W pliku homepage.html proszę zastąpić poniższy kod:

{% for tos in config.TOS.Consents.Newsletter -%}
{% if tos.Statement -%}
<label>{{tos.Text}}</label>
{% else -%}
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<div class="input-switch "><div class="switch-button"></div></div>
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
{% endif -%}
{% endfor -%}

następującym:

{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}
<div class="single-tos {% if channelsSize > 0 -%} channels {% endif %}">
{% if tos.Statement -%}
<label class="statement tos-name">{{tos.Text}}</label>
{% else -%}
<div class="tos-switch">
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<div class="input-switch "><div class="switch-button"></div></div>
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
</div>
{% endif -%}
{% if channelsSize > 0 -%}
<ul class="channels disabled">
{% for chn in tos.Channels -%}
<li class="channel">
<input id="channel{{ chn.Key }}" type="checkbox" name="channelKey" value="{{ chn.Key }}" disabled/>
<div class="channel-switch input-switch "><div class="switch-button"></div></div>
<label for="channel{{ chn.Key }}">{{chn.Name}}</label>
</li>
{% endfor -%}
</ul>
{% endif -%}
</div>
{% endfor -%}

Szablon Opal

W pliku homepage.html proszę zastąpić poniższy kod:

{% for tos in config.TOS.Consents.Newsletter -%}
{% if tos.Statement -%}
<label>{{tos.Text}}</label>
{% else -%}
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<div class="input-switch "><div class="switch-button"></div></div>
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
{% endif -%}
{% endfor -%}

następującym:

{% for tos in config.TOS.Consents.Newsletter -%}
{% assign channelsSize = tos.Channels | Size -%}
<div class="single-tos">
{% if tos.Statement -%}
<label class="statement-reg tos-name">{{tos.Text}}</label>
{% else -%}
<div class="tos-switch single-switch">
<input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} />
<div class="input-switch "><div class="switch-button"></div></div>
<label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label>
</div>
{% endif -%}
{% if channelsSize > 0 -%}
<ul class="channels-list">
{% for chn in tos.Channels -%}
<li class="channel single-switch">
<input id="channel{{ chn.Key }}" type="checkbox" name="channelKey" value="{{ chn.Key }}"/>
<div class="input-switch "><div class="switch-button"></div></div>
<label for="channel{{ chn.Key }}">{{chn.Name}}</label>
</li>
{% endfor -%}
</ul>
{% endif -%}
</div>
{% endfor -%}

Kanał e-mail

Jeśli wprowadziłeś powyższe zmiany, a w swoich zgodach posiadasz tylko kanał e-mail i chcesz zaoszczędzić zbędnego klikania swoim klientom to poniżej znajduje się instrukcja co należy zmienić w kodzie. Te zmiany sprawią, że kanał e-mail będzie zawsze zaznaczony i nie będzie się go dało odznaczyć.

Szafir

Plik init-ui2.js

Znajdź funkcję toggleChannels. W niej jest zdeklarowana zmienna var inputs = container.find('[name=channelKey]');. Zmień ją na var inputs = container.find('[name=channelKey]:not([type=hidden])');

Pliki home.html, sign-up-no-address.html, common/address-form-register-full.html, customer-profile/your-account/employee-update.html, order/cart.html, __loginconsents.liquid

Znajdź w tych plikach taki fragment kodu:

{% if channelsSize > 0 -%}
{{ translations.ChooseOption }}
{% endif -%}
{% for channel in tos.Channels -%}


{{ channel.Name }}

{% endfor -%}

Usuń go, a w jego miejsce wklej ten fragment kodu:

{% if channelsSize > 0 -%}
{% assign onlyEmail = false -%}
{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
{% assign onlyEmail = true -%}
{% endif -%}
{% if onlyEmail == false -%}
{{ translations.ChooseOption }}
{% endif -%}
{% endif -%}
{% for channel in tos.Channels -%}

{% if onlyEmail == false -%}

{% else -%}


{% endif -%}
{{ channel.Name }}

{% endfor -%}

Agat

Pliki partials/cart/delivery-and-payment.html, partials/common/footer.html, partials/common/registration-consents.html, __loginconsents.liquid

Znajdź w tych plikach taki fragment kodu:

{% if channelsSize > 0 -%}
{{translations.ChannelWarning}}
{% for chn in tos.Channels -%}

{{chn.Name}}

{% endfor -%} {% endif -%} Usuń go, a w jego miejsce wklej ten fragment kodu:

{% if channelsSize > 0 -%}
{% assign onlyEmail = false -%}
{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
{% assign onlyEmail = true -%}
{% endif -%}
{% if onlyEmail == false -%}
{{translations.ChannelWarning}}
{% endif -%}
{% for chn in tos.Channels -%}

{{chn.Name}}
{% if onlyEmail == false -%}

{% else -%}


{% endif -%}

{% endfor -%} {% endif -%}

Bursztyn

Plik init.js

Wyszukaj frazę channels i zamień wszystkie jej wystąpienia w tym pliku na channels:not(.only-email)

Pliki homepage.html, customer/registration.html, order/stepsummary.html, __loginconsents.liquid

Znajdź w tych plikach taki fragment kodu: {% if channelsSize > 0 -%}

- {{chn.Name}}

{% endfor -%} {% endif -%} Usuń go, a w jego miejsce wklej ten fragment kodu:

{% if channelsSize > 0 -%}
{% assign onlyEmail = false -%}
{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
{% assign onlyEmail = true -%}
{% endif -%}

- {% if onlyEmail == false -%} {% else -%} {% endif -%}
  
  {{chn.Name}}

{% endfor -%} {% endif -%}

Opal

Plik init.js

Wyszukaj frazę channels-list i zamień wszystkie jej wystąpienia w tym pliku na channels-list:not(.only-email)

Pliki homepage.html, customer/registration.html, order/stepsummary.html, __loginconsents.liquid

Znajdź w tych plikach taki fragment kodu: {% if channelsSize > 0 -%}

- {{chn.Name}}

{% endfor -%} {% endif -%} Usuń go, a w jego miejsce wklej ten fragment kodu:

{% if channelsSize > 0 -%}
{% assign onlyEmail = false -%}
{% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
{% assign onlyEmail = true -%}
{% endif -%}

- {% if onlyEmail == false -%} {% else -%} {% endif -%}
  
  {{chn.Name}}

{% endfor -%} {% endif -%}

Jak dostosować szablony do integracji z Google Tag Manager?

Wskazówka

Spis treści

1. Wstęp

2. Implementacja skryptów

3. Przydatne linki

1. Wstęp

W związku ze zmianami w Comarch e-Sklep od wersji 2018.6, które poszerzają zakres integracji z Google Tag Manager, szablony w wersji starszej będą wymagały wprowadzenia zmian, które pozwolą na wykorzystanie w pełni funkcjonalności opisanych w artykule Integracja z Google Tag Manager.

Uwaga

Poniższa konfiguracja przeznaczona jest dla użytkowników posiadających e-Sklep w wersji 2018.6 lub wyższej ale z szablonami w starszej wersji. Pliki szablonu, fragmenty ich kodu oraz modyfikacje przedstawione w instrukcji dotyczą darmowych szablonów Comarch. W przypadku szablonów indywidualnych miejsce wklejenia skryptów niezbędnych do dostosowania szablonu powinien wskazać twórca szablonu

2. Implementacja skryptów

Jeżeli przed wersją 2018.6 integracja była już konfigurowana to konieczne będzie usunięcie starego skryptu dodanego do ostatniej strony zamówienia. W tym celu w panelu administracyjnym sklepu przejdź do obszaru Wygląd sklepu / Ustawienia / Edytuj ustawienia zaawansowane / Edytuj HTML i usuń z pliku lastpagescripts.html poniższy skrypt:

<script>
dataLayer.push({{ page.GTMDataLayer }});
dataLayer.push({event:'UaTrack',VirtualPath:null});
</script>

W zależności od szablonu plik lastpagescripts.html będzie zlokalizowany w innym miejscu w strukturze plików:

Szablon Bursztyn, Opal i Szafir - order / lastpagescripts.html
Szablon Agat - partials / cart / lastpagescripts.html

Następnym krokiem będzie implementacja dwóch nowych skryptów. W pliku _layout.html znajdującym się bezpośrednio w obszarze Edytuj HTML zamień istniejący skrypt znajdujący się na początku sekcji <body> <script>var dataLayer=[{{ page.GTMDataLayer }}];</script> na nowy: <script>var dataLayer={{ page.GtmDL }};</script> Kolejny skrypt należy umieścić w pliku odpowiedzialnym za koszyk

<script>
(function(){
var i,dl={{ page.GtmDL }};
for(i in dl) dataLayer.push(dl[i]);
})();
</script>

W zależności od szablonu będzie to inny plik - nazwa i lokalizacja pliku oraz miejsce wklejenia powyższego skryptu wskazane poniżej:

Szablon Bursztyn, Opal - order-cart-container.html

Szablon Agat - partials / cart / cart-template.html

Szablon Szafir - order / cart.html

oraz w pliku order / thx.html

Wskazówka

Pamiętaj o zapisaniu i publikacji wszystkich zmian wykonanych w szablonie. Po przygotowaniu szablonu zgodnie z powyższymi instrukcjami możesz przejść do konfiguracji integracji Twojego sklepu z Google Tag Manager opisanej w artykule Integracja z Google Tag Manager.

3. Przydatne linki

Google Tag Manager: Pomoc Strona serwisu Dokumentacja programistyczna Google Analytics: Strona serwisu Dokumentacja programistyczna

Dodawanie kanałów do płatności online w szablonach

Wskazówka

Dodawanie kanałów do płatności online

Kanały w płatnościach online to inaczej sposób zapłaty. W tym artykule dowiesz się, jak je dodać w swoim szablonie.

1. Bursztyn i Opal

W pliku order/cart.html dodaj poniższy kod:

{% for delivery in cart.DeliveryMethods %}
{% for payment in delivery.Payments %}
{% if payment.Channels[0] and payment.Id == cart.SelectedDeliveryPaymentId %}

{% for channel in payment.Channels -%} {{ channel.Name }}

{% endfor -%}

{% endif %} {% endfor %} {% endfor %} Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/main2.scss dodaj poniższe style:

.payment-channels{
background-color: $middleColor;
display: flex;
flex-wrap: wrap;
margin-top: 11px;
}

.payment-channel{ display: inline-block; width: calc(100%/6 - 30px); min-width: 100px; height: 50px; margin: 15px; position: relative; [type=radio]{ position: absolute; opacity: 0; width: 0; height: 0; & + img{ cursor: pointer; max-width: 100px; max-height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } &:checked + img{ outline: 1px solid $primaryColor; } } }

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/order.js należy wkleić poniższy kod:

$('body').on('change', '.payment-channels [name=channel]', function (e) {
e.preventDefault();
var id = $('.payment-channels').data('id');
var channel = $(e.currentTarget).val();
$.post(null, {
__csrf: __CSRF,
__action: 'Order/DeliveryChange',
id: id,
channel: channel
});
});

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/order.js odnajdź funkcję oznaczoną komentarzem //next i dodaj w niej (w pierwszym warunku if ($(this).hasClass('start'))) w zależności od szablonu: Bursztyn:

if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){
var tt = $('

'); tt.append('

'+$('.payment-channels').data('validation')+'

'); $('body').append(tt); setTimeout(function(){tt.fadeOut(function(){tt.remove();});},3000); return tt; } Opal:

if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){
var tt;
if (sessionStorage.getItem('tooltip') != null){
tt = $(".tt.err");
} else {
tt = $('

'); tt.append(''+$('.payment-channels').data('validation')+''); $('body').append(tt); sessionStorage.setItem('tooltip', 'err'); } showTooltip(); return; } Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentChannel i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).

2. Agat:

W pliku partials/cart/cart-content.html dodaj poniższy kod:

{% for deliveryMethodLvl in cart.DeliveryMethods -%}
{% if deliveryMethodLvl.Name == cart.SelectedDelivery.Name %}
{% for payment in deliveryMethodLvl.Payments -%}
{% if payment.Channels[0] and payment.Id == cart.SelectedDeliveryPaymentId %}

{% for channel in payment.Channels -%} {{ channel.Name }}

{% endfor -%}

{% endif %} {% endfor -%} {% endif %} {% endfor -%} Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/main2.scss dodaj poniższe style:

.payment-channels{
background-color: $bgColor;
border: 1px solid $lighterColor;
box-shadow: 2px 2px 1px 0 $bgColorFont;
margin: 0 auto 20px;
display: inline-flex;
flex-wrap: wrap;
width: calc(100% - 2px);
@media only screen and (min-width: 481px) {
width: calc(50% - 22px);
min-width: 298px;
margin: 0 10px 20px
}
@media only screen and (min-width: 769px) {
width: calc(100% - 22px);
}
@media only screen and (min-width: 1441px) {
width: calc(75% - 22px);
}
}

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/order.js należy wkleić poniższy kod:

$('body').on('change', '.payment-channels [name=channel]', function (e) {
e.preventDefault();
var id = $('.payment-channels ').data('id');
var channel = $(e.currentTarget).val();
$.post(null, {
__csrf: __CSRF,
__action: 'Order/DeliveryChange',
id: id,
channel: channel
});
});

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/order.js odnajdź funkcję orderNextStep i dodaj w niej (na początku else'a warunku if ($('#delivery-address-data').index() >= 0)) kolejny warunek do sprawdzenia:

if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){
application.createMessage($('.payment-channels').data('validation'), 3000);
return;
}

Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentChannel i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).

3. Szafir

W pliku order/delivery-partials/delivery-section.html dodaj poniższy kod:

{% for indexString in matchedDeliveriesIndexesArray -%}
{% assign index = indexString | ToInt -%}
{% if order.SelectedDelivery.Name == order.DeliveryMethods[index].Name -%}
{% for payment in order.DeliveryMethods[index].Payments -%}
{% if payment.Id == order.SelectedDelivery.Payment.Id and payment.Channels[0] -%}

{% for channel in payment.Channels -%} {{ channel.Name }}

{% endfor -%}

{% endif -%} {% endfor -%} {% endif -%} {% endfor -%} Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/globals/_globals2.scss dodaj poniższe style:

.order-ui .payment-channels-ui{
padding: 0;
margin: 0 30px 15px 0;
width: calc(100% - 30px);
display: flex;
flex-wrap: wrap;
.message-bar-ui{
width: 100%;
margin: 0;
}
}

.payment-channel-ui:not(.checkbox-ui):not(.radio-ui){ width: calc(100%/6 - 30px); min-width: 100px; height: 50px; margin: 15px; position: relative; [type=radio]{ position: absolute; opacity: 0; width: 0; height: 0; & + img{ cursor: pointer; max-width: 100px; max-height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } &:checked + img{ outline: 1px solid $primaryColor; } } } oraz w pliku scss/globals/_globals-m.scss:

.order-ui .payment-channels-ui {
margin-right: 0;
width: 100%;
}

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/init-ui2.js należy wkleić poniższy kod:

function choosePaymentChannel(e) {
var form = $('.delivery-form-lq');
var data = form.serializeArray();
data.push({ name: '__csrf', value: __CSRF });
data.push({ name: 'channel', value: $(e.currentTarget).val() });
$.post('', data);
$('.payment-channels-lq .form-error-lq').remove();
};

$('body').on('change', '.payment-channel-lq [name=channel]', function (e) { choosePaymentChannel(e); });

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/init-ui1.js odnajdź funkcję addOrder i dodaj w niej (zaraz pod pierwszym warunkiem if (ajaxModalSelector && this.hiddingClass)) kolejny warunek do sprawdzenia:

if ($('.payment-channels-lq').index() != -1 && $('.payment-channel-lq [name=channel]:checked').index() == -1) {
$('.payment-channels-lq').append('

' + __translations.ChoosePaymentMethod + '

'); guardian = false; } Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w pliku _layout.html odnajdź skrypt ze zmienną __translations i dopisz w nim kolejną linijkę: ChoosePaymentMethod: '{{ translations.ChoosePaymentMethod | H }}'. Następnie w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentMethod i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).

Obsługa towaru archiwalnego

Wskazówka

Obsługa towaru archiwalnego

W tym artykule dowiesz się jak obsłużyć towar archiwalny na stronie ze szczegółami towaru w swoim szablonie.

Szafir

W pliku product/product-presentation-data.html wyszukaj frazę header. Jest to element, w którym trzeba dodać warunek, aby ostatecznie wyglądało to tak: {% if product.Archival == false -%} . . . {% endif -%} Następnie wyszukaj frazę add-to-cart-container-ui. Jest to kontener, w którym na samym początku wyświetlane są punkty lojalnościowe i flagi. Trzeba je uwarunkować, żeby nie pojawiały się przy towarze archiwalnym. Zamiast nich powinna się pojawić informacja o tym, że jest to towar archiwalny. Początek tego kontenera powinien wyglądać następująco: {% if product.Archival -%}

{% else -%} {% if activeProduct.Points != null and usr.Authenticated -%} {% capture quantityUnit -%}1 {{ product.SaleUnit }}{% endcapture -%}

{{ translations.EarnLoyaltyPoints | Format:quantityUnit }}: {{ activeProduct.Points }} {{ translations.PointsShortcut }}

{% endif -%}

- {% if flag.Type == "Reward" -%} {{ translations.PointsProduct }}{% if usr.Authenticated and activeProduct.PointsPrice != null -%}: {{ activeProduct.PointsPrice }} {{ translations.PointsShortcut }}/{{ product.SaleUnit }}{% endif -%} {% else -%} {{ flag.Text }} {% endif -%}

{% endfor -%} {% endif -%} Parę linijek niżej znajdują się etykiety {{ translations.ChooseProductVariant }} i {{ translations.Availability }}: {{ activeProduct.Availability.Text }}. Trzeba zmodyfikować ich warunki tak, aby nie wyświetlały się w przypadku towaru archiwalnego. Powinno to wyglądać w ten sposób:


{% if tableView and product.Archival == false -%}
{{ translations.ChooseProductVariant }}
{% endif -%}
{% if activeProduct.Availability.Text != '' and product.Archival == false -%}

{{ translations.Availability }}: {{ activeProduct.Availability.Text }}

{% endif -%} W podobny sposób należy ukryć całą resztę dotyczącą różnych danych o towarze. Aby to zrobić należy wyszukać taki warunek {% if activeProduct.StockLevel.Control and tableView == false -%} i linijkę wyżej dopisać {% if product.Archival == false -%}. Natomiast zamknięcie tego warunku trzeba będzie dopisać dużo dalej. Aby znaleźć odpowiednie miejsce należy wyszukać taką frazę CheaperInSet. Jest to etykieta przycisku przewijającego do sekcji z zestawami (o ile takowe istnieją dla danego towaru). Pod tym przyciskiem znajduje się {% endif -%}, który zamyka warunek sprawdzający właśnie istnienie owych zestawów. Pod nim trzeba dopisać jeszcze jedno {% endif -%}, aby zamknąć warunek, który dodaliśmy wyżej. Ostatecznie powinno to wyglądać tak:

{% if product.Archival == false -%}
{% if activeProduct.StockLevel.Control and tableView == false -%}
.
.
.
{% if product.Sets != null and product.Sets != empty -%}

{% endif -%} {% endif -%} . . . Na końcu pliku scss/globals/_globals2.scss wklej taki kod:

.archival-product-info-ui{
position: absolute;
top: -40px;
right: 0;
text-transform: uppercase;
color: $primaryColor;
font-style: italic;
}

A na końcu pliku scss/globals/_globals-m.scss wklej taki kod:

.archival-product-info-ui{
right: 20px;
}

Wskazówka

Zwróć uwagę, aby ten styl znajdował się wewnątrz głównej klamry, która otwiera się w pierwszej linijce pliku i zamyka w ostatniej

Wskazówka

Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat

W pliku product-page.html wyszukaj frazę button-container. Jest to klasa kontenera, w którym znajdują się najważniejsze dane związane z towarem. Pod tym kontenerem wklej taki kod: {% if product.Archival -%}

{% endif -%} Pozostając w tym samym pliku (product-page.html) wyszukaj frazę config.Reviews.Enabled. Jest to część warunku, odpowiedzialnego za dodawanie opinii o produkcie. Zmodyfikuj go tak, aby wyglądał następująco:

{% if product.Archival -%}
{% if config.Reviews.Enabled == true and productD.Archival == false -%}
{% endif -%}

W pliku partials/product/product-popup.html wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak:

{% if usr.Authenticated and product.Archival == false -%}

W tym samym pliku (partials/product/product-popup.html) wyszukaj frazę add-to-cart-popup. Jest to klasa kontenera, który trzeba zmodyfikować, aby wyglądał tak: Dalej w tym samym pliku (partials/product/product-popup.html) wyszukaj frazę AddToCartForm. Jest to ID formularza odpowiedzialnego za dodawanie towaru do koszyka. Linijkę wyżej otwórz taki warunek:

{% if product.Archival == false -%}

Będzie on obejmował resztę kodu znajdującego się w tym pliku. Na końcu znajdziesz kontener z klasą ask-for-price-popup. Pod tym kontenerem zamknij wcześniej otworzony warunek dopisując linijkę niżej {% endif -%}. Na końcu pliku scss/main2.scss wklej taki kod:

.archival{
padding-bottom: 20px;
}

.archival-info{ background: $pageNameColor; color: $primaryColor; padding: 20px; margin-bottom: 20px; text-transform: uppercase; @media only screen and (min-width: 481px) { box-shadow: 2px 2px 1px 0 $bgColorFont; } }

Wskazówka

Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn

W pliku productdetails.html wyszukaj frazę itemprop="offers". Jest to jeden z atrybutów kontenera, na którego początku trzeba wkleić taki kod: {% if _pd.Archival -%}

{% endif %} W tym samym pliku (productdetails.html) wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak:

{% if usr.Authenticated and _pd.Archival == false -%}

Dalej w tym samym pliku (productdetails.html) wyszukaj frazę class="availability". Linijkę wyżej nad elementem, który ma taką klasę dopisz {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć trochę niżej. Aby znaleźć to miejsce wyszukaj frazę {% if customer.HidePrices %}. Jest to warunek przed, którym trzeba zakończyć ten nasz nowy, który właśnie dodaliśmy. Aby tego dokonać należy linijkę wyżej dopisać {% endif %}. Kolejną frazą w tym pliku (productdetails.html), którą trzeba wyszukać jest add-to-cart. Jest to klasa przycisku dodawania towaru do koszyka. Będą dwa wystąpienia. Interesuje nas tylko pierwsze, które dotyczy danego towaru. Drugie wystąpienie dotyczy zestawów i znajduje się w warunku {% if set.Price <> null %}. To nas nie interesuje więc zostańmy przy tym pierwszym. Linijkę wyżej dopisz {% if _pd.Archival == false %}. Pod tym przyciskiem znajdują się jeszcze dwa przyciski (powiadamiania o dostępności i pytania o cenę). Pod tym drugim należy zamknąć warunek dopisując linijkę niżej {% endif %}. Będąc przy tych przyciskach możemy zauważyć element nav z klasą options. Linijkę wyżej wklej {% if _pd.Archival == false %}, a zaraz za końcem tego elementu dopisz linijkę niżej {% endif %}. Ostatni warunek w tym pliku (productdetails.html), który trzeba zmienić znajdziesz wyszukując frazę productuserreviews.TotalItems. Trzeba ją podmienić, aby wyglądała tak:

{% unless productuserreviews.TotalItems == 0 and _pd.Archival %}

Plik productdetails/opinions-partial.html należy zmodyfikować tak, żeby wyglądał w ten sposób:

{% if productuserreviews.TotalItems == 0 %}
{% if _pd.Archival == false -%}
.
.
.
{% endif -%}
{% else %}
{% for o in productuserreviews.Reviews %}
.
.
.
{% endfor %}
{% if _pd.Archival == false -%}

{% endif -%}
{% endif%}

Na końcu pliku scss/main2.scss wklej:

.archival-product-info{
padding: 15px 20px;
border-radius: 5px 0 0 5px;
box-shadow: rgba(0,0,0,.2) -2px 2px 10px;
background: #F5F5F5;
position: relative;
right: -20px;
left: -20px;
width: calc(100% + 40px);
margin: 10px 0 30px;
font-style: italic;
}

Wskazówka

Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Opal

W pliku productdetails.html wyszukaj frazę details-section. Jest to klasa kontenera, nad którym trzeba wkleić linijkę wyżej taki kod: {% if _pd.Archival -%}

{% endif %} Następnie wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak:

{% if usr.Authenticated and _pd.Archival == false -%}

Kolejna fraza to class="stock". Będzie to klasa elementu, który trzeba "ubrać" w warunek {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć linijkę pod elementem poprzez dopisanie {% endif %}. Teraz wyszukaj frazę class="attributes". Linijkę wyżej nad elementem, który ma taką klasę dopisz {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć trochę niżej. Aby znaleźć to miejsce wyszukaj frazę {% if customer.HidePrices %}. Jest to warunek przed, którym trzeba zakończyć ten nasz nowy, który właśnie dodaliśmy. Aby tego dokonać należy linijkę wyżej dopisać {% endif %}. Następna fraza to add-to-cart. Jest to klasa przycisku dodawania towaru do koszyka. Będą dwa wystąpienia. Interesuje nas tylko pierwsze, które dotyczy danego towaru. Drugie wystąpienie dotyczy zestawów i znajduje się w warunku {% if set.Price <> null %}. To nas nie interesuje więc zostańmy przy tym pierwszym. Linijkę wyżej dopisz {% if _pd.Archival == false %}. Pod tym przyciskiem znajdują się jeszcze dwa przyciski (powiadamiania o dostępności i pytania o cenę). Pod tym drugim należy zamknąć warunek dopisując linijkę niżej {% endif %}. Będąc przy tych przyciskach możemy zauważyć element nav z klasą options. Linijkę wyżej wklej {% if _pd.Archival == false %}, a zaraz za końcem tego elementu dopisz linijkę niżej {% endif %}. Na końcu pliku scss/main2.scss wklej:

.archival-product-info{
background: #f7f7f7;
color: $placeholderColorFont;
padding: 20px;
margin-top: 20px;
text-align: center;
}

Wskazówka

Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Topaz

Wzależności od wybranego wariantu szczegółów towaru zmiany będą inne. Wersja z miniaturkami zdjęć po lewej W pliku elements/product/product-details-1.html wyszukaj frazę product-details__images. Zastąp kontener z tą klasą poniższym kodem:

{% for flag in product.Flags -%} {{ flag.Text }} {% endfor %}

{% if product.Images[1] -%}

- {% if image.Id != -1 -%} {{image | Img: 'compact'}} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% endif -%}

{% endfor -%}

{% for image in product.Images -%}

{% if image.Id != -1 -%} {{image | Img: 'grande'}} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% endif -%} {% if product.Archival -%}

{% endif -%}

{% endfor -%}

{% elseif product.Images[0] -%}

{{product.Images[0] | Img: 'grande'}} {% if product.Archival -%}

{% endif -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% if product.Archival -%}

{% endif -%}

{% endif -%} {% if product.Images[0] -%} {% endif -%} {% if product.Archival == false -%}

{% if product.DeliveryCost != null and product.DeliveryCost > 0 -%}

{{ translations.Crt_Delivery }}: {{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}

| {% endif -%} {% if stockLevel.Control -%}

{{ translations.Com_StockLvl }}: {% unless stockLevel.Type == 2 or stockLevel.Type == 4 or stockLevel.Text == null -%} {{ stockLevel.Text }} {% endunless -%} {% if stockLevel.Type == 4 -%} {{ stockLevel.Value | Normalize }} {{ product.SaleUnit }} {% endif -%} {% if stockLevel.Type == 1 or stockLevel.Type == 2 -%} {% unless stockLevel.ImageUrl == null -%} {{stockLevel.ImageUrl | Img: '', stockLevel.Text}} {% endunless -%} {% endif -%}

| {% endif -%}

{{ translations.Com_Availability }}: {% unless product.Availability.Text == '' or product.Availability.Type == 2 -%} {{ product.Availability.Text }} {% endunless -%} {% if product.Availability.Type == 1 or product.Availability.Type == 2 -%} {{product.Availability.ImageUrl | Img: '', product.Availability.Text}} {% endif -%} {% unless product.Availability.Date == null -%} ({{ product.Availability.Date | Date:'d' }}) {% endunless -%}

{% endif -%}

Następnie wyszukaj frazę product-details__add-to-cart. Na początku kontenera z tą klasą wklej poniższy kod:


{% if product.Archival -%}

{% endif -%} Kawałek niżej znajdziesz kontener z klasą product-details__reviewsContainer. Podmień go poniższym kodem:


{% unless product.Archival and product.RatingCount == 0 -%}

{% include 'partials/common/product-rating.html', rating: product.Rating -%} ({{ product.RatingCount }})

{% endunless -%} Teraz wyszukiaj basic-unit-ratio. Podmień wszystko co jest pod tą linijką, aż do linijki, w której znajduje się kontener z klasą product-details__info-container (tej linijki nie podmieniaj) poniższym kodem:


{% if product.Archival == false -%}
{% if product.Clip or product.Batch -%}

{% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}

{% endfor -%}

{% elseif product.AttributesPolyvalent != empty -%} {% for attribute in product.AttributesPolyvalent -%}

{% for value in attribute.Values -%} {{ value.Value | H }} {% endfor -%}

{% endfor -%} {% endif -%} {% if product.Batch == null or product.Batch == false -%} {% if product.AttributesEditable != empty -%} {% assign i = 0 -%} {% for attribute in product.AttributesEditable -%}

{% assign i = i | Plus: 1 -%} {% endfor -%} {% endif -%} {% endif -%} {% if product.Units[1] -%}

{{ translations.Com_MeasureUnit }} {% for unit in product.Units -%} {% endfor -%}

{% endif -%} {% endif -%} Następnie znajdź kontener z klasą product-details__other-options i podmień go (wraz z jego zawartością) poniższym kodem: <codeclass="lang:ruby decode:true"> {% if product.Archival == false -%}

{% endif -%} Teraz znajdź kontener z klasą product-details__prices. Na samym początku w tym kontenerze będzie warunek {% if customer.Authenticated == true -%}. Zmień go na {% if customer.Authenticated == true and product.Archival == false -%}. Następnie znajdź kontener z klasą product-details__button-group i podmień go (wraz z jego zawartością) na poniższy kod:


{% if product.Archival == false -%}

{% if product.AskForPrice == false or customer.HidePrices == false -%} {% unless product.Availability.Status == 3 or noProductInStock == true -%}

{% if stockLevel -%} {% assign stockValue = stockLevel.Value | ToString | Split: "," -%} {% endif -%} {% if stockLevel and stockLevel.Control -%} {% assign stockValue = stockLevel.Value | ToString | Split: ',' -%} {% endif -%}

{% endunless -%} {% endif -%} {% if customer.HidePrices == true -%} {% else -%} {% endif -%}

{% else -%} {{translations.ArchivalProductCheckInfo}} {% endif -%} Teraz w pliku css/layout.css dodaj poniższy kod:


.product-details .product-details__image__archival{position:absolute;bottom:0;left:0;right:0;padding:20px;font-size:18px;background:rgba(204,204,204,0.9);color:#fff;text-align:center}.product-details .product-details__archivalProductInfo{background:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};padding:30px;margin-bottom:30px;text-align:center}.product-details .parent-category-link{color:{{settings.linkFontColor}};margin-top:50px;display:inline-block}.product-details .parent-category-link svg{fill:{{settings.linkFontColor}};height:19px;width:19px;vertical-align:middle}

Wersja z miniaturkami zdjęć pod głównym zdjęciem W pliku elements/product/product-details-2.html wyszukaj frazę product-details__images. Zastąp kontener z tą klasą poniższym kodem:

{% for flag in product.Flags -%} {{ flag.Text }} {% endfor %}

{% if product.Images[1] -%}

{% for image in product.Images -%}

{% if image.Id != -1 -%} {{image | Img: 'grande'}} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% endif -%} {% if product.Archival -%}

{% endif -%}

{% endfor -%}

- {% if image.Id != -1 -%} {{image | Img: 'compact'}} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% endif -%}

{% endfor -%} {% elseif product.Images[0] -%}

{{product.Images[0] | Img: 'grande'}} {% if product.Archival -%}

{% endif -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% if product.Archival -%}

{% endif -%}

{% endif -%} {% if product.Archival == false -%}

{% endif -%} {% if product.Images[0] -%} {% endif -%}

Następnie wyszukaj frazę product-details__add-to-cart. Na początku kontenera z tą klasą wklej poniższy kod:


{% if product.Archival -%}

{% endif -%} Teraz wyszukiaj {% if product.Clip or product.Batch -%}. Podmień wszystko co jest pod tą linijką (łącznie z nią), aż do linijki {% include 'partials/common/after-adding-to-cart-popup.html' %} (jej nie podmieniaj) poniższym kodem:


{% if product.Archival == false -%}
{% if product.Clip or product.Batch -%}

{% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}

{% endfor -%}

{% elseif product.AttributesPolyvalent != empty -%} {% for attribute in product.AttributesPolyvalent -%}

{% for value in attribute.Values -%} {{ value.Value | H }} {% endfor -%}

{% assign i = i | Plus: 1 -%} {% endfor -%} {% endif -%} {% endif -%} {% endif -%} {% if product.Units[1] -%}

{{ translations.Com_MeasureUnit }} {% for unit in product.Units -%} {% endfor -%}

{% endif -%} {% if product.Archival == false -%}

{% if stockLevel.Control -%}

{% endif -%}

{{ translations.Com_Availability }} {% unless product.Availability.Text == '' or product.Availability.Type == 2 -%} {{ product.Availability.Text }}: {% endunless -%} {% if product.Availability.Type == 1 or product.Availability.Type == 2 -%} {{product.Availability.ImageUrl | Img: '', product.Availability.Text}} {% endif -%} {% unless product.Availability.Date == null -%} ({{ product.Availability.Date | Date:'d' }}) {% endunless -%}

{% if product.DeliveryCost != null and product.DeliveryCost > 0 -%}

{{ translations.Crt_Delivery }} {{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}

{% endif -%}

{% if product.AskForPrice == false or customer.HidePrices == false -%} {% unless product.Availability.Status == 3 or noProductInStock == true -%}

{% endunless -%} {% endif -%}

{% if customer.HidePrices == true -%} {% else -%} {% endif -%} {% if customer.Authenticated == true -%} {% endif -%}

{% else -%} {{translations.ArchivalProductCheckInfo}} {% endif -%} Teraz w pliku css/layout.css dodaj poniższy kod:


.product-details .product-details__image__archival{position:absolute;bottom:0;left:0;right:0;padding:20px;font-size:18px;background:rgba(204,204,204,0.9);color:#fff;text-align:center}.product-details .product-details__archivalProductInfo{background:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};padding:30px;margin-bottom:30px;text-align:center}.product-details .parent-category-link{color:{{settings.linkFontColor}};margin-top:50px;display:inline-block}.product-details .parent-category-link svg{fill:{{settings.linkFontColor}};height:19px;width:19px;vertical-align:middle}

Obsługa funkcji autocomplete w wyszukiwarce szablonu

Wskazówka

Obsługa funkcji autocomplete w wyszukiwarce szablonu

W tym artykule dowiesz się jak zaimplementować funkcję autocomplete w swoim szablonie. Funkcja ta wyświetli klientowi listę towarów, które będą najlepiej pasowały do wpisanej przez niego frazy w wyszukiwarce.

Szafir

W pliku common/header/header.html wyszukaj frazę quick-search-form-lq. Zmodyfikuj element, do którego należy ta klasa, aby wyglądał tak: Na końcu pliku js/init-ui2.js wklej ten kod:

<class="lang:ruby decode:true">function autocomplete(e) { var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~`\\|]*/gi, ''); if (phrase != '' && phrase.length > 1) { $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (res) { if($(window).width() > 1280){ var right = 'right: 50px'; } else if($(window).width() > 680){ var right = ''; } else { var right = 'right: 61px'; } var loader = '

'; $('.quick-search-form-lq.autocomplete-form-lq').append(loader); var url = res.action.Redirect302; $.get(url, {__csrf:__CSRF, __collection:'products.Products|page.BaseHref|currency|config.Products.ShowCode'}, function(res) { $('.autocomplete-lq').remove(); var list = res.collection['products.Products']; var showCode = res.collection['config.Products.ShowCode']; if (list.length > 0){ if (list.length > 5) { var size = 5; } else { var size = list.length; } var baseHref = res.collection['page.BaseHref']; var currency = res.collection['currency']; var autocompleteList = '

'; var regPhrase = '(' + phrase.split(' ').join('|') + ')'; var reg = new RegExp(regPhrase, 'gi'); for (i = 0; i < size; i++) { var nameNoQuotes = list[i].Name.replace(/"/g, '"'); var name = list[i].Name.replace(reg, function(str) {return ''+str+''}); if(showCode){ var code = list[i].Code.replace(reg, function(str) {return ''+str+''}); } else { var code = ''; } if(list[i].Price){ var price = list[i].Price.toPrice() + ' ' + currency; } else { var price = ''; } if(list[i].ImageId != -1){ var img = '

'; } else { var img = ''; } var product = ' ' + '

' + img + '

' + '

' + name + '

' + '

' + code + '

' + '

' + price + '

' + ''; autocompleteList += product; } autocompleteList += '

'; $('.quick-search-form-lq.autocomplete-form-lq').append(autocompleteList); } $('.loader-for-autocomplete-lq').remove(); }); }); } else { $('.autocomplete-lq').remove(); $('.loader-for-autocomplete-lq').remove(); } }; $('body').on('input', '.quick-search-form-lq.autocomplete-form-lq [name="search"]', function (e) { if(timeOutAutocomplete!=null){ clearTimeout(timeOutAutocomplete); timeOutAutocomplete=null; } timeOutAutocomplete = setTimeout(function(){ autocomplete(e); }, 300); }); //variable to clearTimeout in autocomplete function var timeOutAutocomplete = null; $('body').on('blur', '.quick-search-form-lq.autocomplete-form-lq [name="search"]', function () { setTimeout(function () { $('.autocomplete-lq').remove(); $('.loader-for-autocomplete-lq').remove(); },200); });

Na końcu pliku scss/globals/_header.scss wklej ten kod:

.autocomplete-ui{
position: absolute;
z-index: 1000;
width: 100%;
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
@media only screen and (max-width: 1280px) {
max-width: 550px;
left: 50%;
transform: translateX(calc(-50% - 25px));
text-align: left;
}
@media only screen and (max-width: 680px) {
left: auto;
transform: none;
}
.product-ui{
display: block;
padding: 10px;
background: $bgColor;
border: 1px solid $lightBorderColor;
border-bottom: none;
font-size: 16px;
color: $primaryColorFont;
transition: all ease 300ms;
&:last-child{
border-bottom: 1px solid $lightBorderColor;
}
> div{
display: inline-block;
vertical-align: top;
margin-right: 10px;
&:last-child{
width: 100px;
margin-right: 0;
text-align: right;
}
}
.img-ui{
width: 50px;
height: 50px;
position: relative;
}
img{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.names-ui{
width: calc(100% - 50px - 100px - 20px);
}
.name-ui{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $primaryColor;
transition: all ease 300ms;
}
.code-ui{
font-size: 12px;
color: $bgColorFont;
transition: all ease 300ms;
}
&:hover{
background: $btnSolidHoverBgColor;
color: $btnSolidHoverTextColor;
.name-ui, .code-ui{
color: $btnSolidHoverTextColor;
}
}
}
}

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat

W pliku partials/common/header.html wyszukaj frazę id="search-form". Zmodyfikuj element, do którego należy to ID, aby wyglądał tak: W pliku js/init.js wyszukaj frazę events:. Linijkę wyżej wklej kod:

<class="lang:ruby decode:true ">autocomplete: function(e){ var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~`\\|]*/gi, ''); if (phrase != '' && phrase.length > 1) { $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (result) { if (result.action.Result) { var loader = '

'; $('#search-form').append(loader); var url = result.action.Redirect302; $.get(url, {__csrf:__CSRF, __collection:'products.Products|page.BaseHref|currency'}, function(res) { $('.autocomplete').remove(); var list = res.collection['products.Products']; if (list.length > 0){ if (list.length > 5) { var size = 5; } else { var size = list.length; } var baseHref = res.collection['page.BaseHref']; var currency = res.collection['currency']; var autocompleteList = '

'; var regPhrase = '(' + phrase.split(' ').join('|') + ')'; var reg = new RegExp(regPhrase, 'gi'); for (i = 0; i < size; i++) { var nameNoQuotes = list[i].Name.replace(/"/g, '"'); var name = list[i].Name.replace(reg, function(str) {return ''+str+''}); if(list[i].Price){ var price = list[i].Price.toPrice() + ' ' + currency; } else { var price = ''; } if(list[i].ImageId != -1){ var img = '

' } else { var img = ''; } var product = '' + '

' + img + '

' + '

' + name + '

' + '

' + price + '

' + '

' + ''; autocompleteList += product; } autocompleteList += '

'; $('#search-form').append(autocompleteList); } $('.loader-for-autocomplete').remove(); }); } else if (result.action.Code != 100) { application.createMessage(result.action); } }); } else { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); } },

Natomiast pod koniec pliku tuż pod takim kodem:

$('body').on('blur', 'input', function () {
application.uiCheckLabels();
});

Wklej taki kod:

$('body').on('input', '#header-section #search-form.autocomplete-form [name="search"]', function (e) {
if(timeOutAutocomplete!=null){
clearTimeout(timeOutAutocomplete);
timeOutAutocomplete=null;
}
timeOutAutocomplete = setTimeout(function(){
self.autocomplete(e);
}, 300);
});

//variable to clearTimeout in autocomplete function var timeOutAutocomplete = null;$('body').on('blur', '#header-section #search-form.autocomplete-form [name="search"]', function () { setTimeout(function () { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); }, 200); });

Na końcu pliku scss/main2.scss wklej kod:

.autocomplete{
position: absolute;
z-index: 101;
width: 100%;
@media only screen and (max-width: 1024px) {
width: calc(100% - 240px);
}
@media only screen and (max-width: 768px) {
width: calc(100% - 20px);
}
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
.product{
display: block;
padding: 10px;
background: $bgColor;
border: 1px solid $primaryColor;
border-bottom: none;
font-size: 16px;
color: $bgDarkerColorFont;
&:last-child{
border-bottom: 1px solid $primaryColor;
}
> div{
display: inline-block;
vertical-align: top;
margin-right: 10px;
&:last-child{
margin-right: 0;
}
}
.img{
width: 50px;
height: 50px;
position: relative;
}
img{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.names{
width: calc(100% - 50px - 10px);
}
.name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price{
margin-top: 5px;
font-size: 12px;
color: $primaryColor;
opacity: 0.63;
}
}
}

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn

W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak: Na końcu pliku js/init2.js wklej ten kod:

<class="lang:ruby decode:true ">$('header').on('input', '#SearchForm.autocomplete-form [name="search"]', function (e) { if(timeOutAutocomplete!=null){ clearTimeout(timeOutAutocomplete); timeOutAutocomplete=null; } timeOutAutocomplete = setTimeout(function(){ var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~`\\|]*/gi, ''); if (phrase != '' && phrase.length > 1) { $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (d) { var a = d.action; if (!a.Result) CreateTooltip(a); else if (a.Redirect302){ var loader = '

'; $('#SearchForm').append(loader); var url = a.Redirect302; $.get(url, {__csrf:__CSRF, __collection:'productlist.Products|page.BaseHref|currency'}, function(res) { $('.autocomplete').remove(); var list = res.collection['productlist.Products']; if (list.length > 0){ if (list.length > 5) { var size = 5; } else { var size = list.length; } var baseHref = res.collection['page.BaseHref']; var currency = res.collection['currency']; var autocompleteList = '

'; var regPhrase = '(' + phrase.split(' ').join('|') + ')'; var reg = new RegExp(regPhrase, 'gi'); for (i = 0; i < size; i++) { var nameNoQuotes = list[i].Name.replace(/"/g, '"'); var name = list[i].Name.replace(reg, function(str) {return ''+str+''}); if(list[i].Price){ var price = list[i].Price.toPrice() + ' ' + currency; } else { var price = ''; } if(list[i].ImageId != -1){ var img = '

' } else { var img = ''; } var product = ' ' + '

' + img + '

' + '

' + name + '

' + '

' + price + '

' + '

' + ''; autocompleteList += product; } autocompleteList += '

'; $('#SearchForm').append(autocompleteList); } $('.loader-for-autocomplete').remove(); }); } }); } else { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); } }, 300); }); //variable to clearTimeout in autocomplete function var timeOutAutocomplete = null; $('header').on('blur', '#SearchForm.autocomplete-form [name="search"]', function () { setTimeout(function () { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); }, 200); });

Na końcu pliku scss/main2.scss wklej ten kod:

<class="lang:ruby decode:true ">.autocomplete{ position: absolute; top: 43px; left: 0; z-index: 101; width: 100%; box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); .product{ display: block; padding: 10px; background: $bgColor; border: 1px solid $primaryColor; border-bottom: none; font-size: 14px; color: $secondaryColorFont; transition: all ease 300ms; &:last-child{ border-bottom: 1px solid $primaryColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ margin-right: 0; } } .img{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names{ width: calc(100% - 50px - 10px); } .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price{ margin-top: 5px; font-size: 12px; color: $primaryColor; opacity: 0.63; transition: all ease 300ms; } &:hover{ background: $primaryColor; color: $primaryColorFont; .price{ color: $primaryColorFont; opacity: 1; } } } }

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Opal

W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak: Na końcu pliku js/init2.js wklej ten kod:

'; $('#SearchForm').append(loader); var url = a.Redirect302; $.get(url, {__csrf:__CSRF, __collection:'productlist.Products|page.BaseHref|currency|config.Products.ShowCode'}, function(res) { $('.autocomplete').remove(); var list = res.collection['productlist.Products']; var showCode = res.collection['config.Products.ShowCode']; if (list.length > 0){ if (list.length > 5) { var size = 5; } else { var size = list.length; } var baseHref = res.collection['page.BaseHref']; var currency = res.collection['currency']; var input = $('#SearchForm').find('[name=search]'); var width = input.width(); var top = input.offset().top + input.height() - 16; var autocompleteList = '

' } else { var img = ''; } var product = ' ' + '

' + img + '

' + '

' + name + '

' + '

' + code + '

' + '

' + price + '

' + ''; autocompleteList += product; } autocompleteList += '

'; $('#SearchForm').parent().append(autocompleteList); } $('.loader-for-autocomplete').remove(); }); } }); } else { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); } }, 300); }); //variable to clearTimeout in autocomplete function var timeOutAutocomplete = null; $('header').on('blur', '#SearchForm.autocomplete-form [name="search"]', function () { setTimeout(function () { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); }, 200); });

Na końcu pliku scss/main2.scss wklej ten kod:

<class="lang:ruby decode:true ">.autocomplete{ position: absolute; left: calc(50% - 20px); transform: translateX(-50%); z-index: 1000; box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); .product{ display: block; padding: 10px; background: $bgColor; border: 1px solid $primaryColor; border-bottom: none; font-size: 16px; color: $secondaryColorFont; transition: all 300ms ease; &:last-child{ border-bottom: 1px solid $primaryColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ width: 100px; margin-right: 0; text-align: right; } } .img{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names{ width: calc(100% - 50px - 100px - 20px); } .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .code{ font-size: 12px; opacity: 0.63; } &:hover{ background: $primaryColor; color: $primaryColorFont; } } }

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Obsługa szczegółów zamówienia dla klienta niezalogowanego

Wskazówka

Obsługa szczegółów zamówienia dla klienta niezalogowanego

W tym artykule dowiesz się jak zmodyfikować szablon, aby klienci niezalogowani mogli w profilu klienta zobaczyć szczegóły zamówienia do którego posiadają link.

Szafir

W pliku customer-profile.html w pierwszym warunku dopisz and customer-profile.Order == null tak żeby warunek wyglądał w ten sposób:

{% if customer.Authenticated == false and config.DefinedPages.CustomerProfile.Id == page.PageId and customer-profile.Order == null -%}

W pliku customer-profile/orders/order-details.html wyszukaj frazę {{ page.Url }}?{{ pageQueryName }}. Będzie to część atrybutu przypisanego do przycisku powrotu do listy zamówień. Ten przycisk trzeba uwarunkować, aby zamiast niego pojawiał się link prowadzący do strony głównej sklepu. Ostatecznie powinno to wyglądać tak jak poniższy kod:

{% if customer.Authenticated -%}

{% else -%}


{% endif -%}

Pozostając dalej w tym samym pliku (customer-profile/orders/order-details.html) wyszukaj frazę Order/Cancel. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/Accept i Order/RestorePayment). Pod każdą z nich wklej:

Nadal w tym samym pliku (customer-profile/orders/order-details.html) wyszukaj frazę copy-to-cart-lq. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba w nim dodać atrybut data-hash="{{ order.Hash }}" tak, aby ostatecznie przycisk wyglądał następująco: Następnie w pliku js/init-ui2.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak:

var id = $(e.currentTarget).data('id');
var hash = $(e.currentTarget).data('hash');
var data = {
orderId: id,
hash: hash,
__csrf: __CSRF,
__action: 'Order/Copy'
};

Wskazówka

Pamiętaj, że pliki js należy zminifikować. O tym jak skompilować i zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn lub Opal

W pliku customerprofile.html podmień warunek, aby wyglądał tak: {% if customer.Authenticated and page.PageId == config.DefinedPages.CustomerProfile.Id %}

{% include 'customer/profile.html' %}

{% elseif customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customerprofile.Order != null %}

{% include 'customer/profile.html' %}

{% else %}

{% include 'customer/login.html' %}

{% endif %} W pliku customer/profile-orders.html wyszukaj frazę Order/RestorePayment. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/Cancel i Order/Accept). Pod każdą z nich wklej:

Nadal w tym samym pliku (customer/profile-orders.html) wyszukaj frazę copy-to-cart. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba go zmodyfikować tak, aby wyglądał następująco:

Następnie w pliku js/profile.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak:

var id = $(e.currentTarget).data('id');
var hash = $(e.currentTarget).data('hash');
var newLocation = $(e.currentTarget).data('url');
var added = $(e.currentTarget).data('added');
var copy = $(e.currentTarget).data('copy');
var notCopied = $(e.currentTarget).data('not-copied');
var data = [
{ name: '__action', value: 'Order/Copy' },
{ name: 'orderId', value: id },
{ name: 'hash', value: hash },
{ name: '__csrf', value: __CSRF }
];

Wskazówka

Pamiętaj, że pliki js należy zminifikować. O tym jak skompilować i zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat

W pliku customer-profile.html podmień warunek, aby wyglądał tak:

{% if page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null %}
{% include 'partials/customer/order-details.html' -%}
{% elseif customer.Authenticated and page.PageId == config.DefinedPages.CustomerProfile.Id %}

W pliku partials/customer/order-details.html wyszukaj frazę Order/Accept. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/RestorePayment i Order/Cancel). Pod każdą z nich wklej:

Będąc przy akcji Order/Cancel dodaj warunek do inputa z templatką tak, aby wyglądał następująco:

{% if customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null -%}

{% else -%}

{% endif -%}

Nadal będąc przy tej akcji (Order/Cancel) zmodyfikuj przycisk odpowiadający za anulowanie zamówienia tak, aby wyglądał jak tu:

Pozostając w tym samym pliku (partials/customer/order-details.html) wyszukaj frazę copy-to-cart. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba w nim dodać atrybut data-hash="{{ order.Hash }}" tak, aby ostatecznie przycisk wyglądał następująco:

Następnie w pliku js/init2.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak:

var copyButton = $(e.currentTarget);
var copySection = copyButton.parents('.copy-section');
var id = copyButton.data('id');
var hash = copyButton.data('hash');
var data = [
{ name: '__action', value: 'Order/Copy' },
{ name: 'orderId', value: id },
{ name: 'hash', value: hash },
{ name: '__csrf', value: __CSRF }
];

W pliku js/init.js znajdź funkcję cancelOrder i podmień w niej posta, żeby wyglądał tak:

$.post(url, data, function (result) {
if (result.action.Result) {
if($(e.currentTarget).hasClass('not-authenticated')){
application.createMessage(message);
$('#main-section').html(result.template);
application.loadImages();
} else {
window.templateChanged['under-execution'] = true;
application.createMessage(message);
if (parent.index() != -1) {
$('.under-execution').eq(1).replaceWith(result.template);
}
application.uiPreventScrolling();
}
} else if (result.action.Code != 100) {
application.createMessage(result.action);
}
});

W pliku partials/customer/order-details-products.html do kontenera z klasą cart-items dodaj warunek, tak aby ostatecznie kontener wyglądał następująco:

Na końcu pliku scss/main2.scss dodaj taki kod:

@media only screen and (min-width: 481px) {
.cart-items.not-authenticated .cart-item {
width: calc(50% - 40px);
display: inline-block;
}
}

@media only screen and (min-width: 769px) { .cart-items.not-authenticated .cart-item { width: calc(50% - 25px); } } @media only screen and (min-width: 1025px) { .cart-items.not-authenticated { width: 66%; } } Na końcu pliku scss/mobile2.scss dodaj taki kod:

.cart-items.not-authenticated{
text-align: center;
margin: 20px auto;
}

Wskazówka

Pamiętaj, że pliki js i scss należy zminifikować. O tym jak skompilować i zminifikować pliki js i scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Obsługa funkcji przypomnienia o wystawieniu opinii za zakupiony towar

Wskazówka

Obsługa funkcji przypomnienia o wystawieniu opinii za zakupiony towar

W wersji sklepu oznaczonej numerkiem 2019.5 w Panelu Administracyjnym doszła funkcja przypomnienia o wystawieniu opinii za zakupiony towar. Ta funkcja będzie wysyłać maila z owym przypomnieniem. W tym mailu będzie również link do szczegółów danego towaru. W tym artykule dowiesz się jak zmodyfikować swój szablon, aby po kliknięciu w ten link otworzyła się strona ze szczegółami danego towaru, a w niej był już otwarty i gotowy do uzupełnienia formularz wystawienia opinii.

Agat

W pliku js/init.js znajdź funkcję addReview i w niej zaraz pod zmienną validate dodaj taki kod:

if(window.location.hash.includes('#rate')){
var hash = window.location.hash.split('&')[1].split('=')[1];
data.push({ name: 'orderHash', value: hash });
}

A następnie w pliku js/init2.js na samym końcu dodaj taki kod:

function autoOpenReviewsForm(){
$('.new-review-label').trigger('click');
$('html, body').animate({
scrollTop: $('.new-review-label').offset().top - 81
}, 500);
}
$(document).ready(function () {
if(window.location.hash.includes('#rate')){
autoOpenReviewsForm();
}
});

Wskazówka

Z tego artykułu dowiesz się jak zminifikować swoje pliki js

Bursztyn

W pliku js/init.js wyszukaj frazę #opinion-form .primary-action. Będzie to trigger funkcji do wystawiania opinii. W tej funkcji pod zmienną data dodaj taki kod:

if(window.location.hash.includes('#rate')){
var hash = window.location.hash.split('&')[1].split('=')[1];
data.push({ name: 'orderHash', value: hash });
}

A następnie w pliku js/details.js na samym końcu dodaj taki kod:

$(document).ready(function () {
if(window.location.hash.includes('#rate')){
$('#add-first-review').trigger('click');
}
});

Wskazówka

Z tego artykułu dowiesz się jak zminifikować swoje pliki js

Opal

W pliku js/init.js wyszukaj frazę #opinion-form .primary-action. Będzie to trigger funkcji do wystawiania opinii. W tej funkcji pod zmienną data dodaj taki kod:

if(window.location.hash.includes('#rate')){
var hash = window.location.hash.split('&')[1].split('=')[1];
data.push({ name: 'orderHash', value: hash });
}

A następnie w pliku js/details.js na samym końcu dodaj taki kod:

$(document).ready(function () {
if(window.location.hash.includes('#rate')){
$('#main-rating > .glyphicon').trigger('click');
}
});

Wskazówka

Z tego artykułu dowiesz się jak zminifikować swoje pliki js

Obsługa załączników do zamówienia

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby było możliwe dodanie załączników do składanego zamówienia.

Wskazówka

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

Szafir

Na potrzeby tej funkcji zdecydowaliśmy się na drobne zmiany w wyglądzie elementów związanych z dodawaniem notatki do zamówienia. Poniższe fragmenty kodu uwzględniają owe zmiany. Na początku dodaj w swoim szablonie nowe frazy w zakładce Tłumaczenia: AddAttachement - Dodaj załącznik AddMessage - Dodaj wiadomość YourMessage - Twoja wiadomość AttachementsNotAdded - Nie dodano wszystkich załączników Attachements - Załączniki W pliku _layout.html w elemencie head znajduje się skrypt, który dodaje do zmiennej __translations różne tłumaczenia. Dodaj tam taką linijkę: AttachementsNotAdded: "{{ translations.AttachementsNotAdded | H }}", Jeśli miałeś w swoim szablonie funkcję do importowania koszyka z pliku to w pliku common/navigation-bars/main-navigation-bar-partial.html wyszukaj frazę id="file", a następnie w tym inpucie, w którym występuje to ID dodaj klasę import-cart-input-lq. Następnie w pliku js/init.js wyszukaj frazę [name="file"] i zamień ją na .import-cart-input-lq. W pliku order/cart.html wyszukaj frazę note-lq. Jest to klasa kontenera, w którym znajdują się wszystkie elementy związane z dodawaniem notatki do zamówienia. Wytnij cały ten kontener czyli taki kod:


{% if usr.Authenticated -%}
{% if order.Note == '' -%}
{% include 'order/note-partials/note-form.html' -%}
{% else -%}
{% include 'order/note-partials/note-presentation.html' -%}
{% endif -%}
{% endif -%}

i wklej go pod taką linijką: {% include 'common/order-summary.html' -%} Następnie trzeba w całości podmienić zawartość plików order/note-partials/note-form.html oraz order/note-partials/note-presentation.html. Poniżej właściwa zawartość obu plików: order/note-partials/note-form.html


{% assign isExpanded = include -%}


{% if config.Orders.AttachmentsEnabled -%}

{% endif -%}
{% if isExpanded == true or isExpanded == 'true' -%}

{% else -%}

{% endif -%}
{% if config.Orders.AttachmentsEnabled -%}
 {{ translations.AddAttachement }} (Max. {{ config.Orders.AttachmentsMaxCount }})


{% endif -%}


{{order.Note}}



{% if config.Orders.AttachmentsEnabled -%}
{% include 'order/attachements.html' -%}
{% endif -%}

order/note-partials/note-presentation.html

{% if config.Orders.AttachmentsEnabled -%}

{% endif -%}

{% if config.Orders.AttachmentsEnabled -%}
 {{ translations.AddAttachement }} (Max. {{ config.Orders.AttachmentsMaxCount }})


{% endif -%}
{{order.Note}}

{% if config.Orders.AttachmentsEnabled -%}
{% include 'order/attachements.html' -%}
{% endif -%}

Kolejnym krokiem będzie dodanie nowego pliku HTML o nazwie attachements. Należy go dodać do folderu order. Poniżej zawartość tego pliku:



order/attachements.html
{% for file in order.Attachments -%}
{% assign type = file.Name | Split: '.' | Last -%}
{% if type == "jfif" or type == "jpe" or type == "jpeg" or type == "jpg" -%}
{% assign icon = 'ti-image' -%}
{% elseif type == "csv" or type == "txt" -%}
{% assign icon = 'ti-receipt' -%}
{% elseif type == "docx" or type == "odt" -%}
{% assign icon = 'ti-write' -%}
{% elseif type == "xlsx" or type == "ods" -%}
{% assign icon = 'ti-bar-chart' -%}
{% elseif type == "pdf" -%}
{% assign icon = 'ti-agenda' -%}
{% else -%}
{% assign icon = 'ti-file' -%}
{% endif -%}
 {{ file.Name }} 
{% endfor -%}

Następnie w pliku customer-profile/orders/order-details.html wyszukaj frazę {% if order.Note != "" -%}. W tym warunku znajdują się dodane notatki do zamówienia. Pod tym warunkiem wklej poniższy kod:


{% if config.Orders.AttachmentsEnabled -%}
{% for file in order.Attachments -%}
{% assign type = file.Name | Split: '.' | Last -%}
{% if type == "jfif" or type == "jpe" or type == "jpeg" or type == "jpg" -%}
{% assign icon = 'ti-image' -%}
{% elseif type == "csv" or type == "txt" -%}
{% assign icon = 'ti-receipt' -%}
{% elseif type == "docx" or type == "odt" -%}
{% assign icon = 'ti-write' -%}
{% elseif type == "xlsx" or type == "ods" -%}
{% assign icon = 'ti-bar-chart' -%}
{% elseif type == "pdf" -%}
{% assign icon = 'ti-agenda' -%}
{% else -%}
{% assign icon = 'ti-file' -%}
{% endif -%}
 {{ file.Name }}
{% endfor -%}


{% endif -%}

Na samym końcu pliku js/init-ui2.js dodaj poniższy kod:


function processFilesList(fileInput, fileList) {
var file = fileList.pop();
if (file) {
var fd = new FormData();
fd.append('__CSRF',__CSRF);
fd.append('__action','Order/AttachmentAdd');
fd.append('__template','order/attachements.html');
fd.append('file', file);
$.ajax({data: fd, processData: false, contentType: false, type: 'POST',
success: function(data){
fileInput.val('');
if(data.action.Result){
$('.attachements-lq').html(data.template);
} else {
if(window.AttachementsNotAdded == undefined){
window.AttachementsNotAdded = [];
}
var attachement = '
'+file.name+': '+data.action.Message+'
';
window.AttachementsNotAdded.push(attachement);
}
processFilesList(fileInput, fileList);
}
});
} else {
$('.during-ajax-modal-lq').addClass('hidden-lq');
fileInput.removeClass('prevent-double-change-lq');
if(window.AttachementsNotAdded){
var popup = '
'+
'
'+
'
'+
__translations.AttachementsNotAdded+
''+
'
'+
window.AttachementsNotAdded.join('')+
'


'+
'


';

$('body').append(popup);
$('body').addClass('modal-opened-ui');
window.AttachementsNotAdded = undefined;
}
}
};

function addAttachementInOrder(e) {
$('.during-ajax-modal-lq').removeClass('hidden-lq');
var fileInput = $(e.currentTarget);
fileInput.addClass('prevent-double-change-lq');
var fileList = Object.values(e.currentTarget.files);
processFilesList(fileInput, fileList);
};

$('body').on('change', '.add-attachement-in-order-lq:not(.prevent-double-change-lq)', function (e) {
addAttachementInOrder(e);
});

function removeAttachementInOrder(e) {
$.post('', {__csrf: __CSRF, __action: 'Order/AttachmentDelete', id: $(e.currentTarget).data('id')}, function(result) {
$(e.currentTarget).parents('.file-container-lq').remove();
});
};

$('body').on('click', '.remove-attachement-in-order-lq', function (e) {
removeAttachementInOrder(e);
});

W pliku scss/globals/_globals-m.scss wyszukaj frazę &.confirm-in-cart-ui. Zmień tam top: 93px na top: 70px. Usuń też right: 20px. W pliku scss/globals/_globals2.scss wyszukaj frazę .add-note-in-cart-ui. Dopisz do niej po spacji w tej samej linijce .ti-notepad a następnie usuń margin-top: -10px i dodaj font-size: 20px. W pliku scss/globals/partials/_order.scss wyszukaj frazę .note-ui. Nadpisz wszystkie style znajdujące się w tej klasie poniższym kodem:


margin-top: 20px;
border-top: 1px solid $lightBorderColor;
border-bottom: 1px solid $lightBorderColor;
padding: 15px;
.half-ui{
padding: 10px;
float: left;
&:first-child{
border-right: 1px solid $lightBorderColor;
}
}
button {
padding: 0;
line-height: 1;
}
.note-in-order-ui{
margin-top: 20px;
position: relative;
.edit-ui{
margin-left: 15px;
vertical-align: baseline;
}
}
.label-note-in-cart-ui{
color: $labelsColor;
cursor: default;
}
.form-to-confirm-in-cart-ui{
resize: none;
}
.confirm-in-cart-ui{
top: -20px;
}
.file-container-ui{
background: $bgColor;
border: 1px solid $lightBorderColor;
border-radius: 20px;
margin: 0 10px 10px 0;
padding: 5px 15px 10px;
display: inline-block;
&:first-child{
margin-top: 20px;
}
.icon-ui{
font-size: 20px;
vertical-align: middle;
}
.remove-attachement-in-order-ui{
vertical-align: middle;
margin-left: 10px;
cursor: pointer !important;
}
}

Dodawanie wyboru działu na formularzu kontaktowym

Wskazówka

Ta instrukcja przeznaczona jest dla standardowych szablonów Comarch starszych niż wersja 2019.6. Jeśli posiadasz w sklepie kilka adresów do kontaktu, możesz umożliwić swoim klientom wybór jednego z nich na formularzu kontaktowym. Aby to zrobić, skorzystaj z poniższych instrukcji. Poszczególne pliki, które należy zmodyfikować znajdują się w Panelu administracyjnym w sekcji: Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane następnie Więcej/ Edytuj HTML.

Wskazówka

Pamiętaj, aby wprowadzone zmiany w szablonie Zapisać i Opublikować.

1. Bursztyn i Opal

1.1. W pliku contact.html odnajdź element z id "ContactSendForm" i powyżej pola e-mail dodaj poniższy kod:

{% if config.Contact.Contacts[0] -%}
<select name="contactId" class="department" required>
{% for contact in config.Contact.Contacts -%}
<option value="{{ contact.Id }}">{{ contact.Name }}</option>
{% endfor -%}
</select>
{% endif -%}

1.2. Aby wygląd nowego pola był spójny z resztą formularza, w pliku scss/contact.scss odnajdź selektor ".contact-info .contact-form input, .contact-info .contact-form textarea" i zamień go na: .contact-info .contact-form input, .contact-info .contact-form textarea, .contact-info .contact-form select 1.3. Skompiluj i zminifikuj pliki scss.

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

1.4. Aby walidacja działała poprawnie, w pliku js/init.js, odnajdź funkcję resetForm(form) i podmień ją na:

function resetForm(form) {
var inputs = form.find('input:not([disabled]):not([type=hidden]), select:not([disabled]):not(".department"), textarea:not([disabled])');
inputs.each(function () {
$(this).val('');
});
$('.loader-icon').remove();
$('.send-contact-form').removeClass('posting');
}

1.5. Zminifikuj pliki js.

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

2. Agat

2.1. W pliku contact.html odnajdź element z id "contact-form" i powyżej pola e-mail dodaj poniższy kod:

{% if config.Contact.Contacts[0] -%}
<div class="input-group">
<span class="required-fields-info">{{ translations.Department }} *</span>
<select name="contactId" required>
{% for contact in config.Contact.Contacts -%}
<option value="{{ contact.Id }}">{{ contact.Name }}</option>
{% endfor -%}
</select>
</div>
{% endif -%}

2.2. Aby wygląd nowego pola był spójny z resztą formularza, w pliku scss/mobile1.scss odnajdź selektor "input, textarea" i zamień go na: input, textarea, .contact-form-popup select 2.3. Skompiluj i zminifikuj pliki scss.

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

2.4. Dodaj tłumaczenie dla frazy Department [Dział] Tłumaczenie należy dodać w Panelu administracyjnym: Wygląd sklepu/ Ustawienia na zakładce Tłumaczenia.

3. Szafir

3.1. W pliku common/navigation-bars/navigation-contact.html odnajdź element z klasą "form-lq form-ui" i wewnątrz niego dodaj poniższy kod:

{% if config.Contact.Contacts[0] -%}
<div>
<label>{{ translations.Department }}<span class='required-ui'>*</span></label>
<span class="select-background-ui w100-ui">
<select name="contactId" required>
{% for contact in config.Contact.Contacts -%}
<option value="{{ contact.Id }}">{{ contact.Name }}</option>
{% endfor -%}
</select>
</span>
<i class="ti-angle-down select-arrow-ui"></i>
</div>
{% endif -%}

3.2. Dodaj tłumaczenie dla frazy Department [Dział] Tłumaczenie należy dodać w Panelu administracyjnym: Wygląd sklepu/ Ustawienia na zakładce Tłumaczenia.

3.3. Aby walidacja działała poprawnie, w pliku js/init-ui2.js, odnajdź funkcję sendContactForm(e) i podmień ją na:

function sendContactForm(e) {
if(app.validationBeforePost(e) != 'error'){
$('.during-ajax-modal-lq').removeClass('hidden-lq');
var form = $(e.currentTarget).parents('.form-lq');
var inputs = form.find('input, textarea, select');
var data = inputs.serializeArray();
data.push({name: "__csrf", value: __CSRF});
$.post('', data, function(result) {
$('.during-ajax-modal-lq').addClass('hidden-lq');
if (result.action.Result) {
var message = form.data('success');
app.temporaryMessage(form, message);
$.each(inputs, function (index, value) {
if ($(value).attr('name') !== 'contactId' && $(value).attr('name') !== '__action') {
$(value).val('');
}
});
form.find('.message-lq').remove();
} else {
var message = '<p>' + result.action.Message + '</p>';
if(result.action.Code != 100){
app.message(form, message);
}
}
});
$(e.currentTarget).removeClass('error-lq');
} else {
$(e.currentTarget).addClass('error-lq');
}
}

3.4. Zminifikuj pliki js.

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Obsługa cross-sellingu po złożeniu zamówienia

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby po złożeniu zamówienia wyświetliła się sekcja z Cross-Sellingiem.

Wskazówka

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

Szafir

W pliku order/thx.html wyszukaj frazę date-format.html. Pod linijką z tą frazą będzie się znajdował warunek, który trzeba zastąpić poniższym kodem:

{% if order.SelectedDelivery.Payment.MethodType == 2 and order.PlacedOrder.ExternalPayment.Success == false -%}
{% assign externalPaymentError = true -%}
{% endif -%}
{% if externalPaymentError or crossSellingSize > 0 -%}

Dalej w tym samym pliku (order/thx.html) wyszukaj frazę lastpagescripts.html. Nad linijką z tą frazą będzie się znajdowało zamknięcie warunku, które trzeba zastąpić poniższym kodem:

{% elseif crossSellingSize > 0 -%}{{ translations.CrossSellingInfo }}
{% for product in cross-selling.Products -%}
{{ product | Img:'compact' }}   {{ product | Img:'large' }}
{{ product.Name }}
{% unless customer.HidePrices -%} {% if product.Price == null or product.AskForPrice -%} {{ translations.AskForPrice }} {% else -%}
product.Price -%} class="price-container-ui" {% endif -%}>  {{ product.Price | ToPrice }} {{ currency }}   {% if customer.Cart.SubtotalPrices -%} {{ translations.Netto | Downcase }} {% else -%} {{ translations.Brutto | Downcase }} {% endif -%}
{% if product.PreviousPrice > product.Price -%}
{{ product.PreviousPrice | ToPrice }} {{ currency }}   {% if customer.Cart.SubtotalPrices -%} {{ translations.Netto | Downcase }} {% else -%} {{ translations.Brutto | Downcase }} {% endif -%}
{% endif -%} {% endif -%} {% endunless -%}{% endfor -%}

Następnie w pliku js/init-ui1.js wyszukaj frazę 1019. Będzie to linijka z warunkiem dotyczącym kodu błędu. Pod tym warunkiem wklej poniższy kod:

if ($('.crossselling-slider-in-cart-lq').length) {
window.UIFeatures.initSlider('.crossselling-slider-in-cart-lq', {
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: false,
infinite: false,
responsive: [{
breakpoint: 1279,
settings: {
slidesToShow: 1.7,
slidesToScroll: 1,
arrows: false,
infinite: false,
dots: false
}
}]
});
$('.crossselling-slider-in-cart-lq img').each(function () {
var src = $(this).data('src');
$(this).attr('src', src);
})
}

Na samym końcu pliku js/init-ui2.js wklej poniższy kod:

$(document).ready(function () {
if ($('.crossselling-slider-in-cart-lq').length) {
UIFeatures.initSlider('.crossselling-slider-in-cart-lq', {
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: false,
infinite: false,
responsive: [{
breakpoint: 1279,
settings: {
slidesToShow: 1.7,
slidesToScroll: 1,
arrows: false,
infinite: false,
dots: false
}
}]
});
$('.crossselling-slider-in-cart-lq img').each(function () {
var src = $(this).data('src');
$(this).attr('src', src);
})
}
});

Na końcu pliku scss/globals/_globals2.scss wklej poniższy kod:

.cross-selling-ui{
padding: 40px 0;
.minibox-product-container-ui{
padding: 10px;
}
.minibox-product-ui{
margin: 0;
height: 300px;
width: 100%;
}
}

Topaz

W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu -> Ustawienia -> Tłumaczenia) i dodaj tam frazę CrossSellingInfo - Inni kupili również. Następnie przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Trzykropek w prawym górnym rogu -> Edytuj ustawienia zaawansowane -> Obiekty) i dodaj tam nowy obiekt typu Nowości i Promocje o nazwie cross-selling. Po jego dodaniu wejdź w jego ustawienia i wybierz Typ Cross-Selling. Następnie pozostając w tych ustawieniach przejdź na zakładkę Strony i zaznacz tam check-box Zamówienie. Zapisz to wszystko kliknięciem w dyskietkę w prawym górnym rogu. W pliku partials/product-item.html wyszukaj frazę config.Products.ShowCode, a następnie usuń warunek (wraz z jego zawartością), którego częścią jest ta fraza. Następnie w pliku staticElements/cart/cart.html wyszukaj frazę cart--step-five. Zastąp kontener z tą klasą (wraz z jego zawartością) poniższym kodem:

<class="cart cart--step-five {% if crossSellingSize ><p> 0 -%} with-crossselling {% endif -%}"> <class="cart--step-five-content-container">{{translations.Thx}}, {{ translations.Crt_Order }} nr {{ cart.PlacedOrder.Id }} {{translations.Crt_BeenPlaced}}{{ translations.Crt_DetailsOnMail }} {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %} {{ translations.Crt_NotDeterminedDeliveryCostInfo }}. {% endif -%} {{ translations.Crt_CheckSPAM }}{{ translations.Crt_BackToShop }} {% if cart.SelectedDelivery.Payment.MethodType == 2 and cart.PlacedOrder.ExternalPayment.Success == false -%} <class="cart cart--unfinished-payment">

<class="shoppingCart__form--restore inputs-container-js"> {{ translations.IPay }} {{ translations.Crt_BackToShop }} {% endif -%} {% if crossSellingSize > 0 -%} <class="cart--step-five-crossselling-container"> {{ translations.CrossSellingInfo }} <class="cart--step-five-crossselling-container"> {% include 'partials/product-item.html' with product -%} <class="cart--step-five-crossselling-container">{% assign products = cross-selling.Products | Randomize -%} {% for product in products -%} {% unless product.Url == null and product.Url == '' -%} {% endunless -%} {% endfor -%}{% endif -%}

Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) wyszukaj zmienną var cartFunctions. W niej należy znaleźć funkcję init (zaraz na samym początku) i dodać na jej końcu linijkę this.initializeCrossSellingSlider();. Następnie trzeba wyszukać linijkę z frazą $('.activeCart').removeClass('activeCart'); (będzie w funkcji placeOrder) i pod nią dodać cartFunctions.initializeCrossSellingSlider();. Teraz trzeba dodać poniższy kod pod funkcją placeOrder:

initializeCrossSellingSlider: function () {
$('.crossselling-slider').slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1441,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1
}
}
]
});
},

Następnie w pliku css/layout.css dodaj poniższy kod:

.cart--step-five.with-crossselling{display:block}.cart--step-five a{display:block;width:calc(100% - 50px);max-width:387px;margin-bottom:35px}.crossselling-slider{padding:0}.crossselling-slider .slick-track{margin:0 -20px}.crossselling-slider .slick-prev,.crossselling-slider .slick-next{background:{{settings.sliderBgColor}}}.crossselling-slider .slick-prev:before,.crossselling-slider .slick-next:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;width:4px;height:4px;top:14px;content:" "}.crossselling-slider .slick-prev:hover,.crossselling-slider .slick-next:hover{background:{{settings.sliderHoverBgColor}}}.crossselling-slider .slick-prev:hover:before,.crossselling-slider .slick-next:hover:before{border-color:{{settings.sliderHoverArrowColor}}}.crossselling-slider .slick-prev{left:-40px}.crossselling-slider .slick-prev:before{left:16px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.crossselling-slider .slick-next{right:-40px}.crossselling-slider .slick-next:before{left:14px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.crossselling-slider button.slick-prev.slick-arrow.slick-disabled,.crossselling-slider button.slick-arrow.slick-disabled{display:none !important}

Teraz w pliku css/layout-m.css dodaj poniższy kod:

.cart--step-five-crossselling-container{margin-top:60px}.crossselling-slider .slick-prev{left:0}.crossselling-slider .slick-next{right:0}

Następnie w pliku css/layout-d.css dodaj poniższy kod:

.cart.with-crossselling{display:block}.cart--step-five.with-crossselling .cart--step-five-content-container{width:30%;margin-right:9%;display:inline-block;vertical-align:top}.cart--step-five-crossselling-container{display:inline-block;width:60%;vertical-align:top}

Obsługa dodawania załączników do reklamacji i zwrotów

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby przy składaniu reklamacji i zwrotów było możliwe dołączenie załączników.

Wskazówka

Na podstawie tego artykułu trzeba będzie wprowadzać zmiany w plikach js oraz scss. Pamiętaj, że te pliki należy zminifikować. O tym jak skompilować i zminifikować pliki js oraz scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Szafir

W pliku product/cart-product.html wyszukaj frazę note-ui. Nad linijką z tą frazą wklej poniższy kod:

{% if config.Complaints.AttachmentsEnabled -%}
<div>
<label class="add-attachement-label-ui" for="file"><i class="ti-clip"></i> {{ translations.AddAttachement }}</label> {% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Complaints.AttachmentsMaxCount) -%}
<div class="input-file-container-ui"><input class="add-attachement-in-complaint-ui add-attachement-in-complaint-lq" accept="{{ config.Complaints.AttachmentExtensions }}" name="file" type="file" data-file-size="{{ config.Complaints.AttachmentMaxSize }}" data-size-exceeded="{{ translations.Com_FileSizeExceeded | Format: maxSize }}" data-invalid-file="{{ translations.Com_InvalidFile | Format: config.Complaints.AttachmentExtensions }}" /> <i class="ti-close clear-file-input-ui clear-file-input-lq hidden-lq"></i></div>
{% endfor -%}
</div>
{% endif -%}

Następnie w pliku customer-profile/complaints/complaints.html wyszukaj frazę complaint.Response. Będzie to linijka z warunkiem. Pod tym warunkiem wklej poniższy kod:

{% assign complaintsSize = customer-profile.Complaint.Attachments | Size -%}
{% if config.Complaints.AttachmentsEnabled and complaintsSize &gt; 0 -%}</code>
<div class="attachements-ui remarks-ui">

{% for file in customer-profile.Complaint.Attachments -%} {% assign type = file.Name | Split: '.' | Last -%} {% if type == "jfif" or type == "jpe" or type == "jpeg" or type == "jpg" -%} {% assign icon = 'ti-image' -%} {% elseif type == "csv" or type == "txt" -%} {% assign icon = 'ti-receipt' -%} {% elseif type == "docx" or type == "odt" -%} {% assign icon = 'ti-write' -%} {% elseif type == "xlsx" or type == "ods" -%} {% assign icon = 'ti-bar-chart' -%} {% elseif type == "pdf" -%} {% assign icon = 'ti-agenda' -%} {% else -%} {% assign icon = 'ti-file' -%} {% endif -%}
<div class="file-container-ui file-container-lq"><a href="{{ file.Url }}"><i class="{{ icon }} icon-ui"></i> <span class="line-height-1-ui va-mid-ui">{{ file.Name }}</span></a></div>
{% endfor -%}

</div>
{% endif -%}

Teraz w pliku js/init-ui2.js wyszukaj frazę sendComplaintSuccess(e). Będzie to funkcja, którą należy usunąć. Usuń również jej wywołanie, które jest tuż pod nią. Na samym końcu tego pliku (js/init-ui2.js) wklej poniższy kod:

function addAttachementInComplaint(e) {
window.attachementsInComplaint = [];
var filesArr = $(e.currentTarget).parents('.form-lq').find('.add-attachement-in-complaint-lq');
filesArr.each(function () {
if(this.files.length &gt; 0){
var maxSize = $(this).data('file-size');
if(this.files[0].size &gt; maxSize){
var message = $(this).data('size-exceeded');
var popup = '</code>
<div class="message-popup-background-ui errors-lq cancel-lq container-to-delete-lq" style="overflow: auto;">

'+ '
<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui message-popup-on-background-lq" style="position: absolute; top: 0; transform: none; margin: 10% auto;">

'+ '
<div class="box-ui product-added-to-cart-ui" style="position: relative; padding: 20px;">'+ __translations.AttachementsNotAdded+ '<i class="ti-close cancel-lq" style="position: absolute; right: 20px; top: 20px; cursor: pointer;"></i>'+ '</div>
'+ '
<div style="padding: 20px;"><strong>'+this.files[0].name+'</strong>: '+message+'</div>
'+ '

</div>
'+ '

</div>
'; $('body').append(popup); $('body').addClass('modal-opened-ui'); $(this).val(''); } else { window.attachementsInComplaint.push(this.files[0]); $(this).next().removeClass('hidden-lq'); } } }); }; $('body').on('change', '.add-attachement-in-complaint-lq', function (e) { addAttachementInComplaint(e); }); function sendComplaint(e) { if(app.validationBeforePost(e) != 'error'){ var form = $(e.currentTarget).parents('.form-lq'); var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); var fileList = window.attachementsInComplaint; if(fileList != undefined){ var filesSize = fileList.length; } var fd = new FormData(); fd.append('__csrf', __CSRF); for(var i=0; i&lt;dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize &gt; 0) { window.AttachementsErrors = 0; function addAttachementError(file, message) { if(window.AttachementsNotAdded == undefined){ window.AttachementsNotAdded = []; } var attachement = '
<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+message+'</div>
'; window.AttachementsNotAdded.push(attachement); window.AttachementsErrors += 1; }; var input = form.find('[name=file]').eq(0); var extensions = input.attr('accept').split(', '); var fileSize = input.data('file-size'); for (var i=0; i&lt;filesSize; i++) { var file = fileList.pop(); if(file.size &lt; fileSize){ var extensionArr = file.name.split('.'); var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase(); var wrongExtension = true; for(var j=0; j&lt;extensions.length; j++){ if(extension == extensions[j]){ fd.append('file'+i, file); var wrongExtension = false; } } if(wrongExtension){ var message = input.data('invalid-file'); addAttachementError(file, message); } } else { var message = input.data('size-exceeded'); addAttachementError(file, message); } } if(window.AttachementsNotAdded){ var popup = '
<div class="message-popup-background-ui errors-lq cancel-lq container-to-delete-lq" style="overflow: auto;">

'+ '
<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui message-popup-on-background-lq" style="position: absolute; top: 0; transform: none; margin: 10% auto;">

'+ '
<div class="box-ui product-added-to-cart-ui" style="position: relative; padding: 20px;">'+ __translations.AttachementsNotAdded+ '<i class="ti-close cancel-lq" style="position: absolute; right: 20px; top: 20px; cursor: pointer;"></i>'+ '</div>
'+ window.AttachementsNotAdded.join('')+ '

</div>
'+ '

</div>
'; $('body').append(popup); $('body').addClass('modal-opened-ui'); window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined; } } $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { $('.add-attachement-in-complaint-lq').val(''); if (data.action.Result) { form.parents('.add-complaint-form-lq').find('.success-message-lq').removeClass('hidden-lq'); form.addClass('hidden-lq'); } else { app.serverMessage(data, form, e); } } }); } }; $('body').on('click', '.send-complaint-lq', function(e) { sendComplaint(e); }); $('body').on('click', '.clear-file-input-lq', function(e) { var index = $(e.currentTarget).parent().index(); $(e.currentTarget).prev().val(''); window.attachementsInComplaint.splice(index - 1, 1); $(e.currentTarget).addClass('hidden-lq'); });

W plikach scss/globals/_globals2.scss i scss/globals/_globals-m.scss znajdź linijkę z frazą .select-background-ui, input[type="date"]{ i zamień ją na .select-background-ui, input[type="date"], input[type="file"]{.

Topaz

W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu/ Ustawienia/ Tłumaczenia) i dodaj tam trzy frazy:

ReportDetails – Szczegóły zgłoszenia,
ReportSuccessInfo – Na adres e-mail zostało wysłane potwierdzenie. Oczekuj kolejnych wiadomości e-mail o zmianie statusu zgłoszenia.,
AttachementsNotAdded – Nie dodano wszystkich załączników.

W pliku partials/customer/order-content.html wyszukaj frazę popupDialog__complain. Kontener z wyszukaną klasą podmień (wraz z zawartością) poniższym kodem:

<div class="popupDialog popupDialog__complain popupDialog-js">
<div class="popupDialog__wrapper">

<span class="popupDialog__title">{{ translations.SendComplaintOrReturn }}</span>
<div class="complain__product">

<figure><img class="productImage-js" alt="" /></figure>

</div>

<div class="form complain__form inputs-container-js" data-success-info="{{ translations.ReportSuccessInfo }}">

<div class="form__checkBox checkBoxes__container checkBoxes__container--radio radioContainer-js">

<div class="radioComplaint-js"><input id="radio-complaint" class="checkbox-input" name="__action" type="radio" value="Order/ComplaintAdd" data-name="complaint" /> <label for="radio-complaint"> {{ translations.Prf_OrderComplaint }} </label></div>

<div class="radioReturn-js"><input id="radio-return" class="checkbox-input" name="__action" type="radio" value="Order/ReturnAdd" data-name="return" /> <label for="radio-return"> {{ translations.Prf_OrderReturn }} </label></div>


</div>
<strong>{{ translations.ReportDetails }}</strong>
<div class="form__input-wrapper complaintInputWrapper-js">

{% if config.Complaints.Defects &lt;&gt; null -%} {% assign defectsSize = config.Complaints.Defects | Size -%}<select class="form__input-value form__input-value-js" name="defectId" required="">{% if defectsSize &gt; 1 -%}
<option value="-1">{% if defectsSize &gt; 1 -%}* {% endif -%} {{translations.ChooseComplaintCause}}</option>{% endif -%} {% for def in config.Complaints.Defects -%}
<option value="{{def.Id}}">{{def.Name}}</option>{% endfor -%}
</select>

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


</div>

<div class="form__input-wrapper complaintInputWrapper-js"><input id="defectDate" class="form__input-value form__icon_padding form__input-value-js" max="{{config.Now | Date: 'yyyy-MM-dd'}}" min="{{order.Date | Date: 'yyyy-MM-dd'}}" name="defectDate" type="date" value="{{config.Now | Date: 'yyyy-MM-dd'}}" placeholder="yyyy-MM-dd" /> <label class="form__input-info" for="defectDate">* {{translations.Prf_DefectDate}}</label></div>

<div class="form__input-wrapper complaintInputWrapper-js">

{% if config.Complaints.Requests &lt;&gt; null -%} {% assign requestsSize = config.Complaints.Requests | Size -%}<select class="form__input-value form__input-value-js" name="requestId" required="">{% if requestsSize &gt; 1 -%}
<option value="-1">{% if requestsSize &gt; 1 -%}* {% endif %} {{translations.Prf_ComplainRequest}}</option>{% endif %} {% for req in config.Complaints.Requests -%}
<option value="{{req.Id}}">{{req.Name}}</option>{% endfor -%}
</select>

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


</div>
{% assign returnTypes = config.Complaints.Returns | Size -%} {% if returnTypes &gt; 1 -%}
<div class="form__input-wrapper returnInputWrapper-js">

<select class="form__input-value form__input-value-js" name="returnId" required="">
<option value="-1">{% if returnTypes &gt; 1 -%}* {% endif %} {{translations.ChooseReturn}}</option>{% for return in config.Complaints.Returns -%}
<option value="{{return.Id}}">{{return.Name}}</option>{% endfor -%}
</select>
<p class="form__invalid-input form__validation-required-js" style="display: none;">{{ translations.Com_FieldIsMandatory }}</p>


</div>
{% endif %}
<div class="form__input-wrapper min-js"><label class="quantityField__label">{{translations.Com_Quantity}}</label> <button class="button-minus-add-product" type="button" data-field="quantity"> </button> <input class="quantity-field quantity__field-js" max="" min="1" name="quantity" type="number" value="1" data-decimal="false" /> <button class="button-plus-add-product" type="button" data-field="quantity"> </button></div>

<div class="form__input-wrapper"><input id="accountNumber" class="form__input-value form__input-value-js" maxlength="50" name="accountNumber" type="text" /> <label class="form__input-info form__input-info-js" for="accountNumber">{{translations.Crt_BankAccountNumber}}</label></div>

<div class="form__input-wrapper">{{translations.Prf_AdditionalInfo}} <textarea class="form__input-value" name="message"></textarea></div>

<div class="form__input-wrapper"><span class="form__requiredFields--info">* {{ translations.Com_RequiredFields }}</span></div>
{% if config.Complaints.AttachmentsEnabled -%}
<div class="form__input-wrapper attachementsInputWrapper" data-not-added-info="{{translations.AttachementsNotAdded}}">

<div class="form__attachementsLabel">{{ translations.AddAttachment }}</div>
{% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Complaints.AttachmentsMaxCount) -%}
<div class="form__attachement-input-container"><input class="addAttachementInComplaint-js" accept="{{ config.Complaints.AttachmentExtensions }}" name="file" type="file" data-file-size="{{ config.Complaints.AttachmentMaxSize }}" data-size-exceeded="{{ translations.Com_FileSizeExceeded | Format: maxSize }}" data-invalid-file="{{ translations.Com_InvalidFile | Format: config.Complaints.AttachmentExtensions }}" /></div>
{% endfor -%}

</div>
{% endif -%} <input class="productId-js" name="no" type="hidden" value="" /> <input name="orderId" type="hidden" value="{{order.Id}}" /> <button class="primary-action-button orderComplaintOrReturnAdd-js" type="button" data-id="{{order.Id}}">{{translations.Report}}</button>
</div>
</div>
</div>

Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) znajdź zmienną var customerProfile, a w niej funkcję events. Tuż przed nią dodaj poniższy kod:

addAttachementInComplaint: function(e) {
window.attachementsInComplaint = [];
var filesArr = $(e.currentTarget).parents('.inputs-container-js').find('.addAttachementInComplaint-js');
filesArr.each(function () {
if(this.files.length &gt; 0){
var maxSize = $(this).data('file-size');
if(this.files[0].size &gt; maxSize){
var message = $('[data-not-added-info]').data('not-added-info') + '. </code></code><strong>' + this.files[0].name + '</strong><code class="lang:ruby decode:true ">: ' + $(this).data('size-exceeded');
app.showTemporaryPopup(message, 'error', '', 8000);
$(this).val('');
$(this).next().hide();
} else {
window.attachementsInComplaint.push(this.files[0]);
$(this).next().show();
}
}
});
},
sendComplaint: function(e) {
if(app.validationBeforePost(e) != 'error'){
var form = $(e.currentTarget).parents('.inputs-container-js');
var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
var fileList = window.attachementsInComplaint;
if(fileList != undefined){
var filesSize = fileList.length;
}
var fd = new FormData();
fd.append('__csrf', __CSRF);
for(var i=0; i&lt;dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize &gt; 0) {
window.AttachementsErrors = 0;
function addAttachementError(file, message) {
if(window.AttachementsNotAdded == undefined){
window.AttachementsNotAdded = [];
}
var attachement = '</code>
<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+message+'</div>
'; window.AttachementsNotAdded.push(attachement); window.AttachementsErrors += 1; }; var input = form.find('[name=file]').eq(0); var extensions = input.attr('accept').split(', '); var fileSize = input.data('file-size'); for (var i=0; i&lt;filesSize; i++) { var file = fileList.pop(); if(file.size &lt; fileSize){ var extensionArr = file.name.split('.'); var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase(); var wrongExtension = true; for(var j=0; j&lt;extensions.length; j++){ if(extension == extensions[j]){ fd.append('file'+i, file); var wrongExtension = false; } } if(wrongExtension){ var message = input.data('invalid-file'); addAttachementError(file, message); } } else { var message = input.data('size-exceeded'); addAttachementError(file, message); } } if(window.AttachementsNotAdded){ var message = $('[data-not-added-info]').data('not-added-info') + window.AttachementsNotAdded.join(''); app.showTemporaryPopup(message, 'error', '', 8000); window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined; } } $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { $('.addAttachementInComplaint-js').val(''); if (data.action.Result) { var message = form.data('success-info'); app.showTemporaryPopup(message, 'success', '', 8000); $('.clearFileInput-js').hide(); app.hidePopup(e); sessionStorage.removeItem('complains'); sessionStorage.removeItem('order' + (e.currentTarget).dataset.id); $('.order' + (e.currentTarget).dataset.id).remove(); customerProfile.showOrderDetails(e); } else { app.showTemporaryPopup(result.action.Description, 'error', '', 8000); } } }); } },

Następnie w funkcji events dodaj poniższy kod:

mainSection.on('change', '.addAttachementInComplaint-js', function (e) {
customerProfile.addAttachementInComplaint(e);
});
mainSection.on('click', '.orderComplaintOrReturnAdd-js', function(e) {
customerProfile.sendComplaint(e);
});
mainSection.on('click', '.clearFileInput-js', function(e) {
var index = $(e.currentTarget).parent().index();
$(e.currentTarget).prev().val('');
window.attachementsInComplaint.splice(index - 1, 1);
$(e.currentTarget).hide();
});

Teraz wyszukaj funkcję orderComplaintOrReturnAdd i usuń ją. Następnie wyszukaj wywołanie tej funkcji (w funkcji events) i również usuń. Następnie w pliku css/layout.css dodaj poniższy kod:

.customer .popupDialog__complain .popupDialog__wrapper{max-width:700px;padding-bottom:0}.customer .complain__product{width:40%;padding:0;margin:40px 0;vertical-align:top;display:inline-block;border:none}.customer .complain__product figure{width:100%;height:auto;margin:0 0 20px}.customer .complain__form{width:calc(60% - 84px);display:inline-block;margin:40px}.customer .complain__form>strong{display:block;margin-bottom:20px}.customer .complain__form textarea{margin-top:10px;padding:10px}.customer .customer__orderContent .checkBoxes__container--radio{margin-top:0}.customer .form__attachement-input-container{position:relative}.customer .form__clear-attachement-input{position:absolute;top:11px;cursor:pointer}

Teraz w pliku css/layout-m.css dodaj poniższy kod:

.customer .complain__product{width:100%;margin:20px 0}.customer .complain__form{width:100%;margin:20px 0}

Obsługa dostawy o typie negocjowalnym w szablonach

Wskazówka

Obsługa dostawy o typie negocjowalnym w szablonach

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsłużyć dostawy o typie negocjowalnym.

Szafir

Na samym początku pliku common/order-summary.html jest warunek z kilkoma assignami. W warunku dodaj taką linijkę {% assign notDeterminedDeliveryCost = order.Delivery.NotDeterminedDeliveryCost -%}, a w elsie dodaj taką {% assign notDeterminedDeliveryCost = order.SelectedDelivery.NotDeterminedDeliveryCost -%}. Kawałek niżej znajduje się warunek {% if order.NotDeterminedDeliveryCost and order.OrderStep != 'Start' -%}. Zamień go na poniższy kod:

{% if order.NotDeterminedDeliveryCost or order.SelectedDelivery.NotDeterminedDeliveryCost -%}
{% assign notDeterminedDeliveryCost = true -%}
{% endif -%}
{% if notDeterminedDeliveryCost and order.OrderStep == 'Start' -%}

Następnie w tym samym pliku wyszukaj frazę {% unless order.NotDeterminedDeliveryCost -%} i zamień ją na warunek {% if order.NotDeterminedDeliveryCost == false and notDeterminedDeliveryCost == false -%}. Pamiętaj aby kilka linijek niżej zamienić {% endunless -%} na {% endif -%}. Kawałek dalej znajduje się warunek {% if paymentCost != null -%}. Zamień go na {% if paymentCost != null and order.NotDeterminedDeliveryCost == false and notDeterminedDeliveryCost == false -%} Teraz w pliku order/delivery-partials/delivery-section.html, wyszukaj warunek {% if order.NotDeterminedDeliveryCost == false -%} i zamień go na {% if order.NotDeterminedDeliveryCost == false and deliveryMethod.NotDeterminedDeliveryCost == false -%}. Następnie wyszukaj warunek {% if order.NotDeterminedDeliveryCost == false -%} i zamień go na {% if order.NotDeterminedDeliveryCost == false and order.SelectedDelivery.NotDeterminedDeliveryCost == false -%} W pliku order/cart.html znajdź warunek {% if order.NotDeterminedDeliveryCost and order.OrderStep == 'Start' -%}. Zamień go na poniższy kod:

{% if order.NotDeterminedDeliveryCost or order.SelectedDelivery.NotDeterminedDeliveryCost -%}
{% assign notDeterminedDeliveryCost = true -%}
{% endif -%}
{% if notDeterminedDeliveryCost and order.OrderStep == 'Start' -%}

Agat

W pliku partials/cart/cart-content.html znajdź warunek {% if cart.NotDeterminedDeliveryCost == true %} i zamień go na {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %}. Kawałek dalej w tym samym pliku znajdź warunek {% if cart.NotDeterminedDeliveryCost == false %}. Zamień go na poniższy kod:

{% if deliveryMethod.Name == cart.SelectedDelivery.Name %}
{% assign notDeterminedDeliveryCost = cart.SelectedDelivery.NotDeterminedDeliveryCost -%}
{% else %}
{% assign notDeterminedDeliveryCost = deliveryMethod.NotDeterminedDeliveryCost -%}
{% endif %}
{% if cart.NotDeterminedDeliveryCost == false and notDeterminedDeliveryCost == false %}

Kawałek niżej znajdź warunek {% if cart.NotDeterminedDeliveryCost == false %} i zamień go na {% if cart.NotDeterminedDeliveryCost == false and deliveryMethodLvl.NotDeterminedDeliveryCost == false %}. Dalej w tym samym pliku (partials/cart/cart-content.html), oraz w plikach partials/cart/delivery-and-payment.html i partials/cart/summary.html znajdź frazę {% unless cart.NotDeterminedDeliveryCost -%} i zamień ją na {% if cart.NotDeterminedDeliveryCost == false and cart.SelectedDelivery.NotDeterminedDeliveryCost == false -%}. Pamiętaj aby kilka linijek niżej zamienić {% endunless -%} na {% endif -%}. We wszystkich przypadkach przesuń ten {% endif -%} tak aby warunek obejmował też dane związane z kosztami płatności. Podobną zmianę należy wprowadzić w pliku partials/customer/order-details.html. Frazę {% unless customer-profile.Order.NotDeterminedDeliveryCost -%} należy zamienić na {% if customer-profile.Order.NotDeterminedDeliveryCost == false and customer-profile.Order.Delivery.NotDeterminedDeliveryCost == false -%} W plikach partials/cart/delivery-and-payment.html i partials/cart/summary.html znajdź warunek {% if cart.NotDeterminedDeliveryCost -%} i zamień go na {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %}

Bursztyn lub Opal

Na początku pliku order/cart.html znajdź warunek {% if cart.NotDeterminedDeliveryCost %} i zamień go na {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %}. Następnie trochę dalej znajdź warunek {% if cart.NotDeterminedDeliveryCost == false %} i zamień go na {% if cart.NotDeterminedDeliveryCost == false and delivery.NotDeterminedDeliveryCost == false %}. Kawałek dalej znajdziesz warunek {% if delivery.FreeDeliveryFrom > cart.ProductsTotalValue and cart.NotDeterminedDeliveryCost == false and delivery.TotalValue > 0 %}. Zamień go na {% if delivery.FreeDeliveryFrom > cart.ProductsTotalValue and cart.NotDeterminedDeliveryCost == false and delivery.NotDeterminedDeliveryCost == false and delivery.TotalValue > 0 %} Następnie w pliku order/stepsummary.html znajdź frazę {{translations.Crt_DeliveryCost}} i całą linijkę z tą frazą nadpisz poniższym kodem:

{% if deliveryData.NotDeterminedDeliveryCost == false %}{{translations.Crt_DeliveryCost}}{{deliveryData.TotalValue|ToPrice}} {{cartCurrency}}{% endif %}

Topaz

W pliku staticElements/cart/cart.html znajdź warunek (występuje dwa razy) {% if cart.NotDeterminedDeliveryCost == true %} i zamień go na {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %} (w obu przypadkach). Następnie wyszukaj frazę {{deliveryMethod.DateText}}. Pod linijką z tą frazą znajduje się warunek. Zastąp go wraz z jego zawartością poniższym kodem:


{% if deliveryMethod.NotDeterminedDeliveryCost == false and cart.NotDeterminedProductsDeliveryCost == false -%}
{{ deliveryMethod.TotalValue | ToPrice }} {{ currency }}
{% endif -%}

Teraz wyszukaj frazę {{ payment.DueDateText }}. Pod linijką z tą frazą znajduje się warunek. Zastąp go wraz z jego zawartością poniższym kodem:


{% if deliveryMethodLvl.NotDeterminedDeliveryCost == false and cart.NotDeterminedProductsDeliveryCost == false -%}
{{ payment.TotalValue | ToPrice }} {{ currency }}
{% endif -%}

Obsługa lookbooka w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał lookbooka.

Topaz

W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu -> Ustawienia -> Tłumaczenia) i dodaj tam dwie frazy. ShowProducts - Pokaż towary, Lookbook - Lookbook. Następnie przejdź do zakładki Bannery (Wygląd sklepu -> Ustawienia -> Bannery) i dodaj tam banner o nazwie lookbook. Po jego dodaniu wejdź w jego ustawienia i zaznacz Lookbook zamiast Standardowy. Resztę uzupełnij wedle własnego uznania. W polu Nazwa (Lookbook) będzie nazwa lookbooka, która będzie się wyświetlać w sklepie. Teraz przejdź do zakładki Strony (Wygląd sklepu -> Ustawienia -> Trzykropek w prawym górnym rogu -> Edytuj ustawienia zaawansowane -> Strony) i przy stronie Lookbook wpisz lookbook.html, a następnie wejdź w ustawienia danej strony i zaznacz check-box header [Nagłówek]. Zapisz to wszystko kliknięciem w dyskietkę w prawym górnym rogu. W pliku elements/header/header-1.html (lub header-2.html - w zależności od wybranej w szablonie wersji nagłówka) wyszukaj frazę config.DefinedPages.Contact. Pod linijką z tą frazą wklej poniższy kod:


{% for banner in config.Banners -%}
    {% assign imagesQuantity = banner.Images | Size -%}
    {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%}
        {% assign fakeLookbook = true -%}
    {% endif -%}
{% endfor -%}
{% assign lookbooksQuantity = config.Lookbook.List | Size -%}
{% if lookbooksQuantity > 1  -%}
    
        {{ translations.Lookbook }}
        
    
    
        
            
                {% for lookbook in config.Lookbook.List -%}
                    {{lookbook.Text}}
                {% endfor -%}
            
        
    
{% elseif lookbooksQuantity == 1 or fakeLookbook -%}
    {{ config.DefinedPages.Lookbook | A }}
{% endif -%}

Następnie w folderze staticElements dodaj folder lookbook, a w nim plik lookbook.html, który będzie zawierał poniższy kod:


{% include 'partials/common/breadcrumbs.html' -%}

{% assign lookbooksQuantity = config.Lookbook.List | Size -%}
{% if lookbooksQuantity > 1  -%}
    {% assign lookbook = config.Lookbook.Current -%}
{% elseif lookbooksQuantity == 1 -%}
    {% assign lookbook = config.Lookbook.List[0] -%}
{% endif -%}


    {% if lookbooksQuantity > 0 -%}
        {{ lookbook.Text }}
        
            {% for image in lookbook.Images -%}
                
                    {% if image.JSON != "" -%}
                        
                        {{translations.Hide | Upcase}}
                        {{translations.ShowProducts | Upcase}}
                        
                    {% endif -%}
                
            {% endfor -%}
        
    {% else -%}
        {{ translations.Lookbook }}
        
            
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                560x630
            
            
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                700x850
            
            
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                1260x540
            
            
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                630x950
            
            
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                560x630
            
        
    {% endif -%}

Teraz w pliku css/layout.css dodaj poniższy kod:


.lookbookSection{width:85%;max-width:1400px;margin:50px auto 150px}.lookbook__name{margin-bottom:100px}.lookbook__imageContainer{position:relative;vertical-align:top}.lookbook__imageContainer:nth-child(5n+1){display:inline-block;width:40%;margin-right:calc(10% - 5px)}.lookbook__imageContainer:nth-child(5n+2){display:inline-block;width:50%}.lookbook__imageContainer:nth-child(5n+3){width:90%}.lookbook__imageContainer:nth-child(5n+4){display:inline-block;width:45%;margin-right:calc(15% - 5px)}.lookbook__imageContainer:nth-child(5n){display:inline-block;width:40%}.lookbook__imageContainer img{max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.lookbook__imagePlaceholder{background-color:#f2f2f2}.lookbook__imagePlaceholderSize{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.lookbook__productsToggleButton{position:absolute;right:0;bottom:0;padding:20px;background:#fff;width:250px;text-align:center;cursor:pointer}.lookbook__productsContainer{position:absolute;right:0;bottom:59px;padding:0 20px;background:#fff;width:250px}.lookbook__product{position:relative;padding:20px 0;border-bottom:1px solid #f2f2f2}.lookbook__productName{color:{{settings.inputLabelColor}};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}.lookbook__productPrice{font-size:18px;font-weight:700;display:inline-block;width:calc(100% - 50px)}.lookbook__checkProductLink{position:absolute;right:0;bottom:20px;color:{{settings.linkFontColor}}}

Następnie w pliku css/layout-m.css dodaj poniższy kod:


.lookbookSection{margin:20px auto}.lookbookSection .lookbook__imageContainer{width:100%;margin:0 0 100px}.lookbookSection .lookbook__imageContainer:last-child{margin-bottom:20px}.lookbook__name{margin-bottom:20px}.lookbook__showProductsButton{bottom:0;right:auto;left:50%;transform:translate(-50%, 50%);border:1px solid #f2f2f2}.lookbook__hideProductsButton,.lookbook__productsContainer{position:fixed;width:calc(100% - 40px);z-index:102}.lookbook__productsContainerBackgroundMobile{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,0.8);z-index:101}

Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) dodaj poniższy kod:


if($('.lookbookImageContainer-js').length > 0){
    var setLookbookImages = function () {
        $('.lookbookImageContainer-js').each(function(index){
            if(index == 0){
                var heightRatio = 1.13;
            } else if(index == 1){
                var heightRatio = 1.22;
                var marginTopRatio = 0.39;
            }  else if(index == 2){
                var heightRatio = 0.43;
                var marginTopRatio = 0.25;
                var marginBottomRatio = 0.36;
            }  else if(index == 3){
                var heightRatio = 1.52;
            }  else if(index == 4){
                var heightRatio = 1.13;
                var marginTopRatio = 0.46;
            }
            var width = $(this).width();
            var height = width * heightRatio;
            $(this).css('height', height);
            if($(window).width() > 768){
                if(marginTopRatio){
                    var marginTop = height * marginTopRatio;
                    $(this).css('margin-top', marginTop);
                }
                if(marginBottomRatio){
                    var marginBottom = height * marginBottomRatio;
                    $(this).css('margin-bottom', marginBottom);
                }
            } else {
                if(marginTopRatio){
                    $(this).css('margin-top', 0);
                }
                if(marginBottomRatio){
                    $(this).css('margin-bottom', 100);
                }
            }
        })
    };
    setLookbookImages();
    $(window).resize(function() {
        setLookbookImages();
    });

    var addLookbookProducts = function () {
        var url = $('[data-product-details-url]').data('product-details-url');
        var checkTranslation = $('[data-check-translation]').data('check-translation');
        $('[data-lookbook-products]').each(function(){
            var productContainer = $(this);
            var products = JSON.stringify(productContainer.data('lookbook-products'));
            var objProducts = JSON.parse(products);
            $.each(objProducts, function (index, value) {
                var productUrl = url + ',,' + value.id;
                var data = {__collection: 'product-details.Product.Name|product-details.Product.Price'};
                $.get(productUrl, data, function (res) {
                    productContainer.append(
                        ''+
                            ''+res.collection['product-details.Product.Name']+''+
                            ''+res.collection['product-details.Product.Price']+' '+__curr+''+
                            ''+checkTranslation+'
'+
                        '

'
                    );
                });
            });
        });
    };
    addLookbookProducts();

    $('body').on('click', '.showLookbookProducts-js', function (e) {
        $(e.currentTarget).siblings().show();
        $(e.currentTarget).hide();
    });

    $('body').on('click', '.hideLookbookProducts-js', function (e) {
        $(e.currentTarget).siblings().hide();
        $(e.currentTarget).next().show();
        $(e.currentTarget).hide();
    });
}

Następnie w pliku js/layout0.js (lub layout.js jeśli nie ma layout0.js) znajdź zmienną var headerFunctions i podmień ją na jeden z poniższych kodów. Pierwszy jest do nagłówka z domyślnie ukrytą wyszukiwarką, a drugi do nagłówka z domyślnie odkrytą wyszukiwarką. header-1


var headerFunctions = {
    init: function () {
        headerFunctions.events();
    },
    events: function () {
        var pageHeader = $('.pageHeader-js');

        pageHeader.on('click', '.showSearchSection-js', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $('.searchFormPhrase-js').focus();
        });

        pageHeader.on('click', '.showMenuSection-js', function() {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
        });

        pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() {
            $('.pageHeader-js .headerMainMenu-js').hide(200);
        });

        pageHeader.on('click', '.openCategoryMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').toggle(200);
            $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
            app.loadImages();
        });

        pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openPagesMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openLookbooksMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('change', '.customerLanguageChange-js', function(e) {
            if($(this).is(':checked')) {app.customerLanguageChange(e)}
        });

        pageHeader.on('change', '.customerCurrencyChange-js', function(e) {
            if($(this).is(':checked')) {app.customerCurrencyChange(e)}
        });

        pageHeader.on('click', '.openUndercategoryMenu-js', function(e) {
            var undercategory = $(e.currentTarget).closest('li').find('ul').first();
            $(undercategory).toggle(200);
        });
    }
};

header-2


var headerFunctions = {
    init: function () {
        headerFunctions.events();
    },
    events: function () {
        var pageHeader = $('.pageHeader-js');

        pageHeader.on('click', '.showSearchSection-js', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
            $('.searchFormPhrase-js').focus();
        });

        pageHeader.on('click', '.showMenuSection-js', function() {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
        });

        pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() {
            $('.pageHeader-js .headerMainMenu-js').hide(200);
        });

        pageHeader.on('click', '.openCategoryMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').toggle(200);
            $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
            app.loadImages();
        });

        pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openPagesMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openLookbooksMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('change', '.customerLanguageChange-js', function(e) {
            if($(this).is(':checked')) {app.customerLanguageChange(e)}
        });

        pageHeader.on('change', '.customerCurrencyChange-js', function(e) {
            if($(this).is(':checked')) {app.customerCurrencyChange(e)}
        });

        pageHeader.on('click', '.openUndercategoryMenu-js', function(e) {
            var undercategory = $(e.currentTarget).closest('li').find('ul').first();
            $(undercategory).toggle(200);
        });
    }
};

Dodawanie zgód do płatności online w szablonach

Wskazówka

Dodawanie zgód do płatności online w szablonach

W tym artykule dowiesz się, jak dodać zgody do swoich płatności online.

1. Bursztyn lub Opal

W pliku order/thank-you.html wyszukaj frazę Fields. Będzie to fragment takiej pętli:

{% for f in cart.PlacedOrder.ExternalPayment.Fields -%}

{% endfor -%}

Pod nią wklej poniższy kod:

{% for c in cart.PlacedOrder.ExternalPayment.Consents -%}

{% if c.Statement -%} {{c.Text}} {% else -%}

{% if c.Required -%}*{% endif -%} {{c.Text}}

{% endif -%}

{% endfor %}

2. Szafir

W pliku order/thx.html wyszukaj frazę Fields. Będzie to fragment takiej pętli:

{% for field in order.PlacedOrder.ExternalPayment.Fields -%}

{% endfor -%}

Pod nią wklej poniższy kod: {% for consent in order.PlacedOrder.ExternalPayment.Consents -%} {% endfor -%} W pliku scss/globals/_globals2.scss na samym końcu wklej poniższy fragment kodu:

.order-ui .in-external-payment-ui{
padding-bottom: 0;
margin: 20px 0;
}

Następnie taki plik należy zapisać zminifikować.

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat

W pliku partials/cart/summary.html wyszukaj frazę online-payment-step. Jest to klasa elementu form, do którego należy dodać atrybut data-tos-invalid="{{translations.TosRequired}}" tak, aby ostatecznie wyglądał jak kod poniżej: Pozostając dalej w tym samym pliku (partials/cart/summary.html) wyszukaj frazę Fields. Będzie to fragment takiej pętli:

{% for f in cart.PlacedOrder.ExternalPayment.Fields -%}

{% endfor -%}

Pod nią wklej poniższy kod:

- {% if consent.Statement %}
  {{ consent.Text }}
  {% else %} {{translations.MainConsentWarning}} {% if consent.Required -%}* {% endif -%}{{ consent.Text }} {% endif -%}

{% endfor %} Na końcu pliku js/order.js wklej ten kod:

$('body').on('click', '.external-payment-lq', function (e) {
e.preventDefault();
var validate = application.uiValidateForm($('.online-payment-step'));
if (validate) {
$('.online-payment-step').submit();
}
});

W pliku js/init.js wyszukaj funkcję uiSetSwitchNameWidthInNewsletter i na jej końcu dodaj poniższy kod:

$('#main-section').find('.online-payment-step .switch-name').each(function () {
var width = $('.online-payment-info').width();
$('.online-payment-consents').css('width', width);
$(this).css('width', width - 65);
});

Na końcu pliku scss/main2.scss wklej ten kod:

.online-payment-consents{
display: inline-block;
list-style-type: none;
padding: 0;
text-align: left;
.switches:after{
content: '';
display: block;
clear: both;
}
}

Wskazówka

Pamiętaj, że pliki js i scss należy zminifikować. O tym jak skompilować i zminifikować pliki js i scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Porównywarka towarów w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał porównywarkę towarów.

Wskazówka

Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!

Wskazówka

Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu - _ ' " itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!

Wskazówka

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

Pierwszy krok to przypisanie obiektu porównywarki do właściwej strony sklepu. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. W prawym górnym rogu kliknij przycisk z trzema kwadratami a następnie z rozwijanego menu wybierz opcję Edytuj ustawienia zaawansowane. Wybierz zakładkę Strony. Znajdź stronę Porównywarka (9). W tym samym wierszu, w kolumnie z nazwą pliku, wpisz comparer.html, a następnie zapisz. Kliknij na pole z napisem Porównywarka (9). Pojawi się lista dostępnych obiektów. Kliknij kwadrat przy obiekcie o nazwie comparison-tool, by pokazał się znak wyboru (tzw. "ptaszek"). A następnie zapisz.

Wskazówka

Jeśli na liście obiektów nie widzisz obiektu comparison-tool, wykonaj następujące czynności. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. Kliknij w prawym górnym rogu na ikonkę z trzema kwadratami i z rozwiniętego menu wybierz opcję Edytuj ustawienia zaawansowane. Przejdź do zakładki Obiekty. Kliknij przycisk Dodaj. W polu Typ wybierz Porównywarka towarów a w polu Nazwa podaj comparison-tool, po czym kliknij Dodaj. Następnie wykonaj opisane wcześniej kroki.

Kolejny krok to dodanie tłumaczeń. W tym celu należy w Panelu Administratora wejść w Wygląd sklepu -> Ustawienia i wybrać zakładkę Tłumaczenia. Przycisk Dodaj pozwala na dodanie nowego tłumaczenia. Aby tłumaczenie zostało dodane, należy wprowadzić odpowiednie Id oraz frazę (Tekst) i zatwierdzić przyciskiem Dodaj. Lista Id oraz fraz do wprowadzenia: 1. NoItemsSelectedToCompare - Nie wybrano żadnych towarów do porównania 2. ProductsComparison - Porównanie towarów 3. ProductsComparisonRemove - Usuń porównanie 4. AddMoreProductsToCompare - Dodaj kolejne towary, które chcesz porównać (max. 3) 5. ShowProductsFromCategory - Pokaż inne towary z tej kategorii 6. ComparerReview - Ocena 7. ComparerAvailability - Dostępność 8. ComparerInformations - Informacje podstawowe 9. Manufacturer - Producent 10. Brand - Marka 11. ComparerTechnicalParameters - Parametry techniczne 12. RemoveFromComparisonTool - Usuń z porównania 13. AddedToComparisonTool - Dodano do porównania 14. ItemsToCompare - Możesz porównać od 2 do 4 towarów. 15. ProductsComparisonRemove - Usuń porównanie 16. MaxItemsInComparisonTool - Osiągnięto maksymalną ilość produktów

Wskazówka

Kopiując Id z powyższej instrukcji do Panelu Administracyjnego, upewnij się, że po danym Id nie została skopiowana żadna spacja.

Kolejnym krokiem jest utworzenie nowego pliku o nazwie comparer.html w głównym katalogu z plikami Twojego szablonu Topaz. Treść tego pliku powinna wyglądać następująco:


{% extends '_layout.html' -%}
{% block pageContent -%}
{% include 'staticElements/comparer/comparer.html' -%}
{% endblock -%}

Możesz pominąć ten krok, jeżeli plik już istnieje, a jego treść jest identyczna jak powyżej. Następnie otwórz folder staticElements. W nim utwórz nowy katalog o nazwie comparer, a w nim utwórz nowy plik o nazwie comparer.html. W pliku tym, umieść następujący kod:


{% include 'partials/common/breadcrumbs.html' -%}
{% assign comparer = comparison-tool -%}
{% assign amount = comparer.Products | Size %}

    
    
        {% if amount == 0 %}
        
            
                {{translations.NoItemsSelectedToCompare}}
                {{translations.Crt_BackToShop}}
            
        
        {% else %}
        
            
                {{translations.ProductsComparison}} ({{amount}})
                
                    {{translations.ProductsComparisonRemove}}
                    
                    
                    {% for p in comparer.Products -%}
                    
                    {% endfor -%}
                
            

            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    
                        
                        {% assign productAlt = p.NameNoHtml|H %}
                        {{p|Img: 'medium', productAlt}}
                        
                    
                    
                    
                    
                    
                    {{p|A}}
                    {% if p.Price %}
                    
                        {{p.Price|ToPrice}} {{currency}}
                    
                        {% if p.PreviousPrice > p.Price %}
                        {{p.PreviousPrice|ToPrice}} {{currency}}
                        {% endif %}
                    
                    {% else -%}
                    {{ translations.Com_AskForPrice }}
                    
                    {% endif %}
                    
                        {% if p.Price == null or p.Availability.Status == 3 or noProductInStock -%}
                        
                        {% else -%}
                        
                            {{translations.Cmp_ToCart}}
                        
                        {% endif -%}

                        
                            
                            
                            
                            
                        
                    
                
                {% endfor -%}

                {% if amount == 1 -%}
                
                    
                        
                    
                    {{translations.AddMoreProductsToCompare}}
                    {{translations.ShowProductsFromCategory}}
                    
                
                {% endif -%}
            
        

        {% if config.Reviews.Enabled %}
        
            
                {{translations.ComparerReview}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    
                        {% for i in (1..p.Rating)%}
                        
                            
                        
                        {% endfor %}
                        {% for i in (p.Rating..4)%}
                        
                            
                        
                        {% endfor %}
                        ({{ p.RatingCount }})
                    
                
                {% endfor -%}
            
        
        {% endif -%}

        {% if config.Stock.Enabled == true -%}
        
            
                {{translations.ComparerAvailability}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    {{p.Availability.Text}}
                
                {% endfor -%}
            
        
        
            
                {{translations.Com_StockLvl}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    {{p.StockLevel.Text}}
                
                {% endfor -%}
            
        
        {% endif -%}

        
            
                {{translations.ComparerInformations}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    
                
                {% endfor -%}
            
        

        
            
                {{translations.Manufacturer}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    {{p.Manufacturer.Name}}
                
                {% endfor -%}
            
        

        
            
                {{translations.Brand}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    {{p.Brand.Name}}
                
                {% endfor -%}
            
        

        
            
                {{translations.Man_ManufacturerCode}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    {{p.ManufacturerCode}}
                
                {% endfor -%}
            
        

        
            
                {{translations.Pro_ProductCode}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    {{p.Code}}
                
                {% endfor -%}
            
        

        {% if comparison-tool.Attributes != null -%}
        
            
                {{translations.ComparerTechnicalParameters}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    
                
                {% endfor -%}
            
        

        {% for attr in comparer.Attributes -%}
        
            
                {{attr}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    {% assign attributeValue = p.Attributes[attr] -%}
                    {% assign lastItem = attributeValue | Last -%}
                    {% assign  attributesLength = attributeValue | Size -%}
                    
                        {% if attributesLength ==  0 -%}
                        -
                        {% else -%}
                        {% for a in attributeValue -%}
                        {% if a != lastItem -%}
                        {{a}},
                        {% else -%}
                        {{a}}
                        {% endif -%}
                        {% endfor -%}
                        {% endif -%}
                    
                
                {% endfor -%}
            
        
        {% endfor -%}

        
            
                {{translations.Pro_Weight}}
            
            {% assign index = 0 -%}
            
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                
                    {{p.Weight | Normalize}} {{ translations.Com_kg }}
                
                {% endfor -%}
            
        
        {% endif -%}
        {% endif -%}
    

    {% include 'partials/newsletter-global.html' -%}

Kolejnym krokiem jest dodanie odpowiedniego kodu do plików css, odpowiadających za wygląd porównywarki. W tym celu przejdź do katalogu css. Na końcu pliku layout.css wklej następujący kod:


.comparerContainer{font-family:{{settings.fontFamily}};background:{{settings.primaryPageBgColor}};max-width:1400px;margin:40px auto}.comparerContainer #firstRow{background:{{settings.primaryPageBgColor}} !important}.comparerContainer .row{width:100%;display:block;display:flex;flex-direction:row}.comparerContainer .row section{width:100%;display:inherit}.comparerContainer .groupInfo{background-color:#f8f8f8}.comparerContainer .lastProduct{border-right:none !important}.comparerContainer .noProducts{width:100%;margin-bottom:40px}.comparerContainer .noProducts .title{display:block;font-size:24px;line-height:32px;color:{{settings.primaryFontColor}}}.comparerContainer .noProducts .noProductsLinks{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .noProducts .noProductsLinks:hover{cursor:pointer}.comparerContainer .topSection-info{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .topSection-info .title{display:block;font-size:20px;line-height:32px;color:{{settings.primaryFontColor}};padding-right:10px}.comparerContainer .topSection-info .removeComparer{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .topSection-info .removeComparer:hover{cursor:pointer}.comparerContainer .topSection-productInfo{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;position:relative}.comparerContainer .topSection-productInfo .productImage{height:150px;position:relative}.comparerContainer .topSection-productInfo .productImage a{cursor:initial}.comparerContainer .topSection-productInfo .productImage .itemPrev,.comparerContainer .topSection-productInfo .productImage .itemNext{position:absolute;border-radius:50%;background-color:{{settings.sliderBgColor}};width:30px;height:30px;top:50%;border:none;transition:200ms}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover,.comparerContainer .topSection-productInfo .productImage .itemNext:hover{background-color:{{settings.linkFontColor}};border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover .svgIcon,.comparerContainer .topSection-productInfo .productImage .itemNext:hover .svgIcon{fill:{{settings.sliderHoverArrowColor}} !important;border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev{left:5px}.comparerContainer .topSection-productInfo .productImage .itemNext{right:5px}.comparerContainer .topSection-productInfo .productImage .svgItemPrev{padding-left:0px !important;margin-left:-9px !important;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important}.comparerContainer .topSection-productInfo .productImage .svgItemNext{float:right;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important;padding-top:0 !important;margin-right:-7px !important}.comparerContainer .topSection-productInfo .productImage img{display:block;margin:0 auto;max-height:150px;object-fit:contain;max-width:50%;cursor:pointer !important}.comparerContainer .topSection-productInfo .productImage .svgIcon{width:43px;height:34px;fill:#e5e5e5;margin:0 auto;display:block;padding-top:58px;padding-left:40px}.comparerContainer .topSection-productInfo .addMoreProducts{margin-top:10px;display:block;color:{{settings.secondaryFontColor}};text-align:center;font-size:14px;line-height:24px;margin-left:40px;font-weight:400}.comparerContainer .topSection-productInfo .showMoreProducts{font-weight:500;font-size:14px;line-height:24px;color:{{settings.linkFontColor}};margin-top:15px;margin-left:40px;text-align:center}.comparerContainer .topSection-productInfo .showMoreProducts>a:hover{cursor:pointer}.comparerContainer .topSection-productInfo .removeItem{position:absolute;top:10px;right:37px;background-color:{{settings.linkFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:15px;height:15px}.comparerContainer .topSection-productInfo .removeItem:hover{cursor:pointer}.comparerContainer .topSection-productInfo .productName{font-size:16px;line-height:24px;height:50px;margin-top:10px;margin-left:40px;color:{{settings.primaryFontColor}}}.comparerContainer .topSection-productInfo .productPrice{font-size:18px;line-height:26px;display:inline;font-weight:bold;color:{{settings.productPriceFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .redPrice{color:{{settings.ribbonPromotionColor}}}.comparerContainer .topSection-productInfo .previousPrice{font-size:14px;font-weight:400;display:inline;text-decoration:line-through;color:{{settings.productPricePreviousFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .currency{font-size:12px;line-height:18px;color:{{settings.primaryFontColor}};font-weight:bold}.comparerContainer .topSection-productInfo .buttons{margin:30px 40px 50px;width:calc(100% - 80px);height:40px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.comparerContainer .topSection-productInfo .buttons .disableCartButton{visibility:hidden}.comparerContainer .topSection-productInfo .buttons .addToCartButton{width:75%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0}.comparerContainer .topSection-productInfo .buttons .addToCartButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton{border:1px solid {{settings.secondaryBtnBorderColor}};width:40px;height:40px;background-color:{{settings.primaryPageBgColor}};transition:200ms}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover{border-color:{{settings.secondaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover .favouriteIcon{background-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .wishList{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;background-color:{{settings.secondaryBtnHoverBorderColor}} !important}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .favouriteIcon{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);background-color:{{settings.primaryFontColor}};width:20px;height:20px;display:block;margin:10px auto 0}.comparerContainer .topSection-productInfo .buttons .wishListBorder{border-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .lastAttribute{border-bottom:1px solid {{settings.borderColor}}}.comparerContainer .property{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .property .propertyName{font-size:16px;color:{{settings.primaryFontColor}};font-weight:400;line-height:24px;text-align:left;padding:18px 10px;text-transform:capitalize}.comparerContainer .property .groupName{color:{{settings.secondaryFontColor}};font-size:14px;font-weight:bold;padding:8px 0 8px 10px;text-transform:capitalize}.comparerContainer .propertyValueContainer{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 80px);margin:18px 40px}.comparerContainer .propertyValueContainer .rating .stars{width:13px;height:13px}.comparerContainer .propertyValueContainer .rating .productRating--color{fill:{{settings.linkFontColor}}}.comparerContainer .propertyValueContainer .rating .ratingCount{font-size:14px;color:{{settings.secondaryFontColor}};line-height:24px;font-weight:400;margin-left:12px}.comparerContainer .propertyValueContainer .propertyValue{width:calc(100% - 80px);margin:18px 40px;font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};font-weight:300;word-break:break-word}.comparerContainer .propertyValueContainer .delivery{color:{{settings.linkFontColor}}}@media only screen and (max-width: 1350px){.comparerContainer .fourItems .removeItem{right:20px}.comparerContainer .fourItems .productName,.comparerContainer .fourItems .buttons{margin-left:20px;margin-right:20px}.comparerContainer .fourItems .buttons{width:calc(100% - 40px);margin-bottom:20px}.comparerContainer .fourItems .productPrice,.comparerContainer .fourItems .previousPrice{margin-left:20px;display:block}.comparerContainer .fourItems .previousPrice{height:0}.comparerContainer .twoItems{width:50%}.comparerContainer .propertyValueContainer .propertyValue,.comparerContainer .propertyValueContainer .rating{margin-left:20px;margin-right:20px}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 40px)}}

Do pliku layout-m.css wklej następujący kod:


@media only screen and (max-width: 768px){.oneItem{margin-left:20px !important;margin-right:20px !important;width:calc(100% - 40px) !important}.row>section{width:75% !important}.row>section .comparerSlider{width:50% !important}.row>section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.topSection-info .title,.topSection-info .removeComparer,.property .groupName,.property .propertyName{padding-left:20px !important}.noProducts{margin-left:20px}}@media only screen and (max-width: 580px){.row section{width:60% !important}.row .topSection-info,.row .property{width:40% !important}.previousPrice{display:block !important}}@media only screen and (max-width: 385px){.buttons{width:calc(100% - 10px) !important;margin-left:5px !important;margin-right:5px !important}.title{font-size:16px !important}.removeComparer{font-size:12px !important}}

Do pliku layout-d.css wklej następujący kod:


@media only screen and (max-width: 1150px){.comparerContainer .fourItems .buttons .addToCartButton{display:block !important;width:auto !important;padding:8px 15px !important}.comparerContainer .fourItems .buttons .addToFavouriteButton{margin:10px auto}}@media only screen and (min-width: 971px) and (max-width: 1050px){.buttons{margin-left:10px !important;margin-right:10px !important;width:calc(100% - 20px) !important}}@media only screen and (max-width: 970px){.row .property{border-right:none}.row section{width:75% !important}.row section .comparerSlider{width:50% !important}.row section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.copmarerContainer .topSection-info .buttons{width:calc(100% - 40px)}.copmarerContainer .topSection-info .removeItem{right:20px}.copmarerContainer .topSection-info .productName,.copmarerContainer .topSection-info .buttons{margin-left:20px;margin-right:20px}.copmarerContainer .topSection-info .productPrice,.copmarerContainer .topSection-info .previousPrice{margin-left:20px;display:block}.copmarerContainer .topSection-info .previousPrice{height:0}}

Następnie należy dodać odpowiedni kod do plików js. W tym celu, w plikach Topaza, otwórz folder js a następnie plik layout0.js. Odszukaj linijkę z frazą productListFunctions.init();. Pod znalezioną linijką znajduje się linia ze znakiem }. Pod nią wklej następujący kod:


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

Otwórz plik layout1.js znajdujący się w tym samym katalogu. Poniższy kod możesz wkleić na samym początku pliku:


var comparerFunctions = {
    init: function() { 
        this.events();
    },

    events: function() {
        $(document).ready(function(){
            $('.propertyValue-js').each(function(index) {
                var t = $(this).text();
                t = t.replace(/([A-Z])/g, ' $1').trim();
                $(this).text(t);
            })

            $('.row').each(function() {
                if(!($(this).hasClass('groupInfo'))) {
                    $(this).children('.property').css('box-shadow', '2px 0 2px -2px #E5E5E5');
                    $(this).children('.topSection-info').css('box-shadow', '2px 0 2px -2px #E5E5E5');
                }
            });

            var amount = $('#amount').attr('value');
            var windowWidth = $(window).width();

            if (amount <= 2) {
                $('.topSection-productInfo').css('width', '50%');
                $('.propertyValueContainer').css('width', '50%');

                if(amount == 1 && windowWidth <= 768) {
                    $('.productPrice').addClass('oneItem');
                    $('.productName').addClass('oneItem');
                    $('.buttons').addClass('oneItem');
                    $('.lastProduct > *').css('margin-left', '10px', '!important');
                    $('.lastProduct > *').css('margin-right', '10px', '!important');
                } else if(amount == 1 && windowWidth <= 600) {
                    $('.topSection-productInfo').css('width', '100%', '!important');
                    $('.propertyValueContainer').css('width', '100%', '!important');
                    $('.lastProduct').css('display', 'none');
                }
            }

            if ((windowWidth <= 970 && amount > 2) || (windowWidth <= 742 && amount == 2)) {
                $(".row > section").addClass("comparerSlider");
                var slider = $('.comparerSlider').slick({
                    infinite: true,
                    slidesToShow: 2,
                    slidesToScroll:1,
                    draggable: false,
                    autoplay: false,
                    autoplaySpeed: 8000,
                    arrows:false,
                    swipe:false,                   
                    responsive: [
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 1,                               
                            }
                        }
                    ]
                });

                if(amount == 2) {
                    slider.slick('slickSetOption', 'infinite', false);
                }

                if(windowWidth <= 970 && windowWidth > 768 && amount > 2) {
                    showSliderArrows();
                }   

                if (windowWidth <= 768 && amount > 2) {
                    $(".itemPrev").removeClass('hidden');
                    $(".itemNext").removeClass('hidden');
                }

                if(windowWidth <= 742 && amount == 2) {
                    $(".itemNext").removeClass('hidden');
                }

                $(".itemPrev").on( "click", function() {
                    slider.slick("slickPrev").delay(500);
                    if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) {
                        showSliderArrows();
                    }
                    if(amount == 2) {
                        $('.itemPrev').addClass('hidden');
                        $('.itemNext').removeClass('hidden');
                    }
                });
        
                $(".itemNext").on( "click", function() {
                    slider.slick("slickNext").delay( 500 );
                    if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) {
                        showSliderArrows();
                    }
                    if(amount == 2) {
                        $('.itemNext').addClass('hidden');
                        $('.itemPrev').removeClass('hidden');
                    }
                });
            }
        });

        var topSection = document.getElementById("firstRow");
        var topPosition = topSection.offsetTop;

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

            if (window.pageYOffset > (topPosition)) {
                topSection.style.position = 'sticky';
                topSection.style.top = '0';
                topSection.style.zIndex = '100';

            } else {
                topSection.style.position = 'inherit';
                topSection.style.top = 'none';
                topSection.style.zIndex = 'inherit';
            }
        });

        $('body').on('click', '.productWishListAdd-js', function (e) {
            app.productWishListAdd(e);
        });

        $('body').on('click', '.productWishListRemove-js', function (e) {
            app.productWishListRemove(e);
        });

        $('body').on('click', '.removeItem', function (e) {
            app.productComparisonToolDeleteItem(e);
        });

        $('body').on('click', '.removeComparer', function (e) {
            var productIds = $(this).parent('.removeComparerContainer').children($('input [name="productId"]'));
            app.productComparisonToolDeleteAll(productIds);
        });

        function showSliderArrows() {
            var currentProducts = $('.topSection-productInfo');
            var activeProducts = [];
            var i=0;
            currentProducts.each(function() {
                if($(this).attr('aria-hidden') == 'false') {
                    activeProducts[i++] = $(this);
                }
            });
            activeProducts[0].find('.itemPrev').removeClass('hidden');
            activeProducts[0].find('.itemNext').addClass('hidden');
            activeProducts[1].find('.itemNext').removeClass('hidden');
            activeProducts[1].find('.itemPrev').addClass('hidden');
        }
    } 
}

Następnie należy dodać możliwość dodawania produktów do porównywarki z poziomu szczegółów towaru. Otwórz katalog elements -> product. W zależności do tego, jaką wersję szczegółów towaru wybrałeś w Kreatorze, w katalogu będzie plik product-details-1.html lub product-details-2.html. Wykonaj kolejne kroki w zależności od tego, który plik znajduje się w Twoim Topazie.
Dalsza instrukcja dla pliku product-details-1.html
Otwórz plik i wyszukaj linię, w której znajduje się fragment comparison-tool-add-button. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod:


                            {% assign isInComparisonTool = false -%}
                            {% for itemId in customer.ComparisonToolItems -%}
                                {% if itemId == product-details.Product.Id -%}
                                    {% assign isInComparisonTool = true -%}
                                {% endif -%}
                            {% endfor -%}
                           
                                
                                    
                                        
                                    
                                    {{translations.Cmp_Compare}}
                                    
                                    
                                    
                                    
                                    

                                
                         
                                
                                    
                                        
                                    
                                    {{translations.RemoveFromComparisonTool}}

a pod nimi wklej następujący kod:

{% assign comparisonToolItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

{{translations.AddedToComparisonTool}} ({{comparisonToolItems}}/4)

{% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

Następnie należy dodać kod odpowiadający za wygląd wyskakującego okienka z informacją o dodaniu towaru do porównywarki. Aby to zrobić, przejdź do katalogu css. W pliku layout.css wklej na samym dole następujący kod:


.product-details .addToComparePopup{display:none;position:fixed;z-index:100;right:10%;bottom:51px;transition:200ms;width:400px;height:62px;box-shadow:0 3px 8px #616060;background-color:{{settings.primaryPageBgColor}}}.product-details .addToComparePopup .comparisonIcons{margin-left:25px;display:inline-block}.product-details .addToComparePopup .comparisonIcons .comparerItemIcon{width:5px;height:5px;margin-right:10px;-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;background-color:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonIcons .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:6px;line-height:24px;display:block}.product-details .addToComparePopup .addToCompare{display:inline-block;font-size:14px;line-height:24px;margin-left:25px;color:{{settings.primaryFontColor}};font-weight:500}.product-details .addToComparePopup .closeComparePopup{position:absolute;top:0;right:0;margin-right:25px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:14px;height:14px}.product-details .addToComparePopup .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .comparisonIcon{float:right;margin-top:5px;margin-right:2px}.product-details .addToComparePopup .comparisonIcon .svgIcon{fill:{{settings.linkFontColor}};margin:0 5px -3px 0;width:15px;height:15px}.product-details .addToComparePopup .goToComparisonTool{color:{{settings.linkFontColor}};line-height:24px;font-size:14px;font-weight:400;margin-right:25px}

W pliku layout-m.css wklej następujący kod:


@media only screen and (min-width: 461px) and (max-width: 768px){.addToComparePopup{bottom:16px !important;right:15% !important}}
@media only screen and (max-width: 599px){.addToComparePopup{width:100% !important;bottom:0 !important;right:0 !important;left:0 !important}}

A w pliku layout-d.css wklej następujący kod:


@media only screen and (min-width: 769px) and (max-width: 900px){.addToComparePopup{bottom:16px !important;right:15% !important}}

Pozostało dodać kod w plikach js. Otwórz katalog js a w nim plik layout0.js. Wyszukaj frazę productComparisonToolAdd. Musisz usunąć kilka linii kodu, od znalezionej przed chwilą (włącznie) do najbliższej linii o treści }, (około 11 linii kodu). W miejsce usuniętego kodu, wklej poniższy:


productComparisonToolAdd: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        var comparisonItems = data[4].value;
        if(comparisonItems >= 4) {
            $('.addToComparePopup').fadeIn();
            var msg =__translations.MaxItemsInComparisonTool;
            $('.addToCompare').text(msg);
            
        } else {
            var url = data[2].value;
            $.post(null, data, function (result) {
                if (result.action.Result) {
                    $('.addToComparePopup').fadeIn();
                    $('#comparison-tool-delete-button').removeClass('hidden');
                    $('#comparison-tool-add-button').addClass('hidden');
                } else if (result.action.Code != 100) {
                    app.showTemporaryPopup(result.action.Message, 'error');
                }
            });
        }
    },
    productComparisonToolDelete: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        var pId = data[1].value;
        $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){
            setInterval(function() { location.reload(); }, 1000);
        });
    },
    productComparisonToolDeleteItem: function (e) {
        var pId = $(e.currentTarget).attr('data-id');
        $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){
            setInterval(function() { location.reload(); }, 1000);
        });
    },  
    productComparisonToolDeleteAll: function (e) {
        e.each(function() {
            var pId = $(this).attr('data-id');
            $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'});
        })
            setInterval(function() { location.reload(); }, 3000);
    },

Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });:


body.on('click', '.productComparisonToolDelete-js', function (e) {
            app.productComparisonToolDelete(e);
        });

        body.on('click', '.closeComparePopup', function (e) {
            $('.addToComparePopup').addClass('hidden');
        });

Jeśli posiadasz pierwszą wersję szczegółów towaru, to koniec instrukcji. Dalsza część dotyczy zmian dla wersji drugiej szczegółów towaru.
Dalsza instrukcja dla pliku product-details-2.html
Otwórz plik i wyszukaj linię, w której znajduje się fragment productComparisonToolAdd-js. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod:


                    {% assign isInComparisonTool = false -%}
                    {% for itemId in customer.ComparisonToolItems -%}
                        {% if itemId == product-details.Product.Id -%}
                            {% assign isInComparisonTool = true -%}
                        {% endif -%}
                    {% endfor -%}
                    
                    
                        
                        {{translations.Cmp_Compare}}
                        
                        
                        
                        
                        
                    
                    

                    
                        
                            
                        
                        {{translations.RemoveFromComparisonTool}}

a pod nimi wklej następujący kod:


            
                
                    {{translations.AddedToComparisonTool}}
                    
                
                
                    {{translations.ItemsToCompare}}
                    {{translations.ProductsComparisonRemove}}
                    
                    
                    
                    {% for itemId in customer.ComparisonToolItems -%}
                        
                    {% endfor -%}
                
                
                    {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}
                    
                    
                    
                    
                
                {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}
                {% if ComparerItems > 1 -%}
                    
                        {{translations.Cmp_Compare}}
                    
                {% endif -%}


.product-details .addToComparePopup{display:none;position:fixed;margin-left:auto;margin-right:auto;right:0;left:0;top:30%;width:30%;height:auto;background-color:{{settings.primaryPageBgColor}};transition:200ms;z-index:100;opacity:1 !important;box-shadow:0 3px 8px #616060}.product-details .addToComparePopup .comparisonIcons{width:calc(100% - 70px);margin:40px auto !important;text-align:center}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:40px;line-height:26px;display:block}.product-details .addToComparePopup .comparisonInfo .comparerItemIcon{width:40px;height:40px;margin-right:10px;-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;background-color:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonInfo .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo .addToCompare{margin-left:70px;font-size:18px;font-weight:500;color:{{settings.primaryFontColor}}}.product-details .addToComparePopup .comparisonInfo .comparisonItems{font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};display:inline-block;margin-left:70px}.product-details .addToComparePopup .comparisonInfo .removeComparison{margin-right:42px;margin-top:2px;float:right;font-size:14px;line-height:24px;font-weight:400;color:{{settings.linkFontColor}}}.product-details .addToComparePopup .comparisonInfo .removeComparison:hover{cursor:pointer}.product-details .addToComparePopup .comparisonInfo .closeComparePopup{position:absolute;top:4px;right:0;margin-right:40px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:18px;height:18px}.product-details .addToComparePopup .comparisonInfo .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .goToComparisonTool{width:60%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0;margin:40px auto;display:block}.product-details .addToComparePopup .goToComparisonTool:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}@media only screen and (max-width: 1550px){.product-details .comparisonItems,.product-details .removeComparison{display:block;width:100%;text-align:center;float:none !important}.product-details .comparisonItems{margin:0 auto !important}.product-details .removeComparison{margin:20px auto 0 !important}}

W pliku layout-m.css wklej następujący kod:


@media only screen and (max-width: 768px){.addToComparePopup{width:calc(100% - 40px) !important}}
@media only screen and (max-width: 330px){.addToComparePopup>.addToCompare{margin-left:20px !important}}

A w pliku layout-d.css wklej następujący kod:


@media only screen and (min-width: 641px) and (max-width: 1077px){.addToComparePopup{width:50% !important}}


productComparisonToolAdd: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        var comparisonItems = data[4].value;
        if(comparisonItems >= 4) {
            $('.addToComparePopup').fadeIn();
            var msg =__translations.MaxItemsInComparisonTool;
            $('.addToCompare').text(msg);
            
        } else {
            var url = data[2].value;
            $.post(null, data, function (result) {
                if (result.action.Result) {
                    $('.addToComparePopup').fadeIn();
                    $('#comparison-tool-delete-button').removeClass('hidden');
                    $('#comparison-tool-add-button').addClass('hidden');
                } else if (result.action.Code != 100) {
                    app.showTemporaryPopup(result.action.Message, 'error');
                }
            });
        }
    },
    productComparisonToolDelete: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        var pId = data[1].value;
        $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){
            setInterval(function() { location.reload(); }, 1000);
        });
    },
    productComparisonToolDeleteItem: function (e) {
        var pId = $(e.currentTarget).attr('data-id');
        $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){
            setInterval(function() { location.reload(); }, 1000);
        });
    },  
    productComparisonToolDeleteAll: function (e) {
        e.each(function() {
            var pId = $(this).attr('data-id');
            $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'});
        })
            setInterval(function() { location.reload(); }, 3000);
    },

Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });:


body.on('click', '.removeComparison', function (e) {
            var productIds = $(this).parent('.deleteComparison-js').children($('input [name="productId"]'));
            app.productComparisonToolDeleteAll(productIds);
        });

        body.on('click', '.productComparisonToolDelete-js', function (e) {
            app.productComparisonToolDelete(e);
        });

        body.on('click', '.closeComparePopup', function (e) {
            $('.addToComparePopup').addClass('hidden');
        });

Nowoczesne dolne menu nawigacji w wersji mobilnej w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby w wersji mobilnej posiadał nowoczesne dolne menu nawigacji.

Wskazówka

Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!

Wskazówka

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

Dodanie kodu dolnego menu

1. Pierwszym krokiem jest dodanie pliku z kodem dolnego menu. W tym celu w plikach szablonu otwórz katalog partials a w nim utwórz plik bottom-menu.html. Wklej do niego poniższy kod:

Dodanie tłumaczeń

Następnie należy dodać tłumaczenia. W tym celu otwórz Panel Administracyjny, a w nim odpowiednio Wygląd sklepu -> Ustawienia -> zakładka Tłumaczenia. Aby dodać nowe tłumaczenia, kliknij przycisk Dodaj, podaj odpowiednie Id, Tekst i zatwierdź przyciskiem Dodaj. Lista tłumaczeń do wprowadzenia (Id - Tekst): 1. Start - Start 2. SearchInShop - Szukaj w sklepie 3. Account - Konto

Wskazówka

Uważaj, aby przy kopiowaniu Id nie znalazła się żadna spacja przed ani po Id, w przeciwnym wypadku tłumaczenie nie wyświetli się w sposób poprawny!

Ustawienie wyświetlania etykiet w Panelu Administracyjnym

Dolne menu obsługuje ustawienie wyświetlania etykiet. Można je wyświetlać lub nie (wtedy zostają same ikonki). Aby wszystko działało poprawnie, otwórz plik __settings.liquid. Kolejny krok to dodanie kodu odpowiedzialnego za wygląd dolnego menu. W tym celu otwórz katalog css i wklej poniższy kod na końcu pliku layout.css. Wyszukaj linię o treści {% when '1' %}. Pod nią wklej ten kod:

{% assign displayLabelsOnBottomNavigationMenu = "Wyświetlaj etykiety w dolnym menu nawigacji" -%}

W tym samym pliku wyszukaj linię z frazą {% else %}. Pod nią wklej ten kod:

{% assign displayLabelsOnBottomNavigationMenu = "Display labels in the bottom navigation menu" -%}

Poniżej znajdują się sekcje kodu do ustawień. Każda sekcja zaczyna się od <section> a kończy się </section>. Poniższy kod wklej tuż pod sekcją (czyli pod jej tagiem </section>), której kolejna linijka zawiera frazę productListType

Wskazówka

Po dodaniu niniejszego kodu, koniecznie otwórz zakładkę Wygląd sklepu -> Ustawienia w Twoim Panelu Administracyjnym, i wybierz "TAK" lub "NIE" przy nowo dodanej opcji włączania/wyłączania wyświetlania etykiet w dolnym menu!

Dodanie kodu odpowiedzialnego za wygląd dolnego menu

Kolejny krok to dodanie kodu odpowiedzialnego za wygląd dolnego menu. W tym celu otwórz katalog css i wklej poniższy kod na końcu pliku layout.css

@media only screen and (min-width: 769px){.bottomMenuBack{display:none}.bottomMenu{display:none}}@media only screen and (max-width: 769px){.bottomMenuBack{display:block;width:100%;height:56px}.bottomMenu{width:100%;height:41px;background-color:{{settings.primaryPageBgColor}};display:flex;flex-direction:row;flex-wrap:wrap;position:fixed;bottom:0;padding-top:10px;padding-bottom:5px;z-index:12}.bottomMenu .menuItem{flex:0 1 20%;margin:0 auto;display:flex;flex-direction:column;justify-content:center}.bottomMenu .menuItem .svgContainer{margin:0 auto;position:relative}.bottomMenu .menuItem svg{fill:{{settings.primaryFontColor}};width:20px;height:18px;margin:0 auto}.bottomMenu .menuItem .itemsCounter{position:absolute;border-radius:50%;font-size:9px;width:14px;height:14px;top:-5px;right:-6px;font-weight:500;color:{{settings.primaryPageBgColor}};background-color:{{settings.linkFontColor}};text-align:center}.bottomMenu .menuItem .text{font-size:11px;line-height:18px;color:{{settings.primaryFontColor}};font-weight:300;font-family:{{settings.fontFamily}};text-align:center;margin:0 auto}.bottomMenu .activePage svg{fill:{{settings.linkFontColor}}}}

Dodanie funkcji

Następnie należy dodać odpowiednie funkcje do plików w katalogu js. W tym celu otwórz wspomniany przed chwilą katalog, a w nim otwórz plik layout0.js 1. Wyszukaj linię z frazą $('body').toggleClass('noscroll');. Kolejna linia pod nią zawiera znak }. Pod nią wklej następujący kod:

$('.headerMainMenu-js').scroll(function(){
    if(($(this).css('display') != 'none' && $('.bottomMenu').css('display') != 'none')) {
        if($(this).scrollTop() > 0) {
            $('.go-to-top__btn-js').fadeIn();
        } else {
            $('.go-to-top__btn-js').fadeOut();
        }
    }
});

2. Wyszukaj linię z frazą closePopup: function (e) {. Tuż nad nią wklej poniższy kod:

	showBottomMenuOnMobile: function () {
        var windowWidth = $(window).width();
        if(windowWidth < 769) { $('.bottomMenu').removeClass('hidden'); $('.bottomMenuBack').removeClass('hidden'); } else if (windowWidth >= 769) {
            $('.bottomMenu').addClass('hidden');
            $('.bottomMenuBack').addClass('hidden');
        }
    },

3. Modyfikacja funkcji dodawania i usuwania przedmiotów z listy ulubionych. Wyszukaj frazę productWishListAdd: function (e) {. Należy usunąć całą funkcję (od wyszukanej linijki włącznie, do najbliższej linijki o treści }, (ok. 13 linijek). W ich miejsce wklej ten kod:

productWishListAdd: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        $.post(null, data, function (result) {
            if (result.action.Result) {
                $(e.currentTarget).addClass(['active-js', 'productWishListRemove-js']);
                $(e.currentTarget).removeClass('productWishListAdd-js');
                sessionStorage.removeItem('wish-list');
                app.showTemporaryPopup(result.action.Message, 'success');
				if($(e.currentTarget).hasClass('addToFavouriteButton')) {
                    $(e.currentTarget).children('.favouriteIcon').addClass('wishList');
                    $(e.currentTarget).addClass('wishListBorder');
                }
            } else if (result.action.Code != 100) {
                app.showTemporaryPopup(result.action.Message, 'error');
            }
        });
        if($('.bottomMenu')) {
            var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) +1;
            $('.bottomMenu .menuItem .favouriteItems').text(items);
			if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .favouriteItems').addClass('hidden');
            }
        }
    },

Pod spodem znajduje się linijka o treści productWishListRemove: function (e) {. Usuń treść tej funkcji analogicznie jak poprzednio (do najbliższej linii o treści }, - ok. 13 linijek). Wklej w to miejsce następujący kod:

productWishListRemove: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        $.post(null, data, function (result) {
            if (result.action.Result) {
                $(e.currentTarget).removeClass(['active-js', 'productWishListRemove-js']);
                $(e.currentTarget).addClass('productWishListAdd-js');
                sessionStorage.removeItem('wish-list');
                app.showTemporaryPopup(result.action.Message, 'success');
				 if($(e.currentTarget).hasClass('addToFavouriteButton')) {
                    $(e.currentTarget).children('.favouriteIcon').removeClass('wishList');
                    $(e.currentTarget).removeClass('wishListBorder');

                }
            } else if (result.action.Code != 100) {
                app.showTemporaryPopup(result.action.Message, 'error');
            }
        });
        if($('.bottomMenu')) {
            var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) -1;
            $('.bottomMenu .menuItem .favouriteItems').text(items);
			if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .favouriteItems').addClass('hidden');
            }
        }
    },

4. Wyszukaj linię z frazą $(e.currentTarget).parents('.inputs-container-js').find('.enterKeyTrigger-js').trigger('click');. Pod nią będą dwie linie, pierwsza o treści } a druga o treści });. Pod nimi wklej poniższy kod:

$(window).on('load', function(e) {
            app.showBottomMenuOnMobile();
        });

        $(window).on('resize', function(e) {
            app.showBottomMenuOnMobile();
        });

        $('.showBottomMenuSection-js').on('click', function(e) {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
        })

5.Wyszukaj linię z frazą updateProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod:

if($('.bottomMenu')) {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue);
				if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) {
                    $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden');
                } else {
                    $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden');
                }
            }

6. Wyszukaj linię z frazą incrementProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod:

if($('.bottomMenu')) {
            $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue);
			 if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden');
            }
        }

7. Wyszukaj linię z frazą decrementProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod:

if($('.bottomMenu')) {
            $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue);
			 if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden');
            }
        }

8. W pliku layout1.js wyszukaj linię productWishListDelete: function (e) {. Pod nią znajduje się linia z kodem app.post(e, customerProfile.currentTabTemplateUpdate, 'wish-list');. Pod tą linią wklej poniższy kod:

if($('.bottomMenu')) {
            var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) -1;
            $('.bottomMenu .menuItem .favouriteItems').text(items);
            if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) {
                $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden');
            } else {
                $('.bottomMenu .menuItem .favouriteItems').addClass('hidden');
            }
        }

Modyfikacja stopki - obie wersje stopki

Kolejny krok to modyfikacja pliku ze stopką, pozwalająca na wyświetlanie dolnego menu. Aby to zrobić, otwórz katalogi elements -> footer. W środku znajdziesz jeden plik .html, o nazwie footer-1.html albo footer-2.html. Otwórz plik, i na samym jego końcu wklej tę linię:

{% include 'partials/bottom-menu.html' -%}

Uwaga! Jeśli stopka w Twoim szablonie Topaz jest w wersji 2 (w powyższym katalogu posiadasz plik footer-2.html), to konieczne jest dodanie jednej zmiany w wyglądzie stopki. Otwórz katalog css a w nim plik layout-m.css i doklej na jego końcu poniższy kod:

@media screen and (max-width: 599px){.footer{margin-bottom:56px}}

Modyfikacja przycisku powrotu na górę strony

W pliku layout.css wyszukaj frazę {.go-to-top__btn-js{width:50px;height:50px;bottom:20px}}. Powinna znajdować się pod koniec jednej z linii/jednego z bloków kodu. W znalezionej frazie zamień wartość przy bottom z 20px na 60px. Dzięki temu przycisk odpowiedzialny za powrót na górę strony nie będzie zasłaniał dolnego menu.

Modyfikacja profilu Klienta

Następnie otwórz katalog css a w nim plik layout.css. Wyszukaj duży blok kodu rozpoczynający się od .customer{position:relative}. Usuń cały blok, po czym wklej w jego miejscu następujący:

.customer{position:relative}.customer__blockContent.hide-on-mobile{display:block}.customer .form__input-wrapper:focus-within>label{color:{{settings.inputActiveLabelColor}}}.customer .form input:focus,.customer .form select:focus{border-bottom:1px solid {{settings.inputActiveLabelColor}}}.customer .form input,.customer .form select{border-bottom:1px solid {{settings.primaryFontColor}}}.customer .customer__emptySection{width:100%}.customer .customer__emptySection ol{padding:30px 20px 30px 71px;margin:0;box-sizing:border-box;counter-reset:my-counter;list-style:none}.customer .customer__emptySection ol li{position:relative;counter-increment:my-counter;margin-bottom:30px;color:#959494;font-size:14px;font-weight:400;line-height:1.8}.customer .customer__emptySection ol li:before{content:counter(my-counter);border-radius:50%;padding:8px 11px 7px;font-size:12px;color:{{settings.linkFontColor}};background-color:#f5f4f4;position:absolute;font-weight:600;left:-51px;line-height:normal;top:-2px}.customer .loyaltyProgram .customer__emptySectionImage .icon{top:39px;left:34px}.customer .loyaltyProgram .customer__emptySectionImage .icon .svgIcon{width:44px;height:33px}.customer .customer__emptySectionImage{width:115px;height:115px;border:1px solid #E5E5E5;text-align:center;position:relative;margin:40px auto}.customer .customer__emptySectionImage--bg:before,.customer .customer__emptySectionImage--bg{background:white;height:121px;position:absolute;width:57px;left:28px;top:-3px}.customer .customer__emptySectionImage--bg:before{content:' ';transform:rotate(90deg);left:-1px;top:0}.customer .customer__emptySectionImage .icon{fill:#E5E5E5;position:absolute;top:37px;left:39px}.customer .customer__emptySectionImage .icon .svgIcon{width:37px;height:37px}.customer .customer__emptySectionImage .icon--small{fill:#e5e5e5;position:absolute;background-color:#fff;bottom:30px;right:35px}.customer .customer__emptySectionImage .icon--small .svgIcon{width:19px;height:19px}.customer .customer__sectionTitle,.customer .customer__emptySectionTitle{color:#a9a8a8;display:block;font-size:14px;font-weight:400;max-width:90%}.customer .customer__sectionTitle--center,.customer .customer__emptySectionTitle--center{text-align:center;margin:0 auto}.customer .customer__sectionTitle--left,.customer .customer__emptySectionTitle--left{margin:0 0 10px 22px}.customer .customer__sectionTitle--bold,.customer .customer__emptySectionTitle--bold{margin-top:45px;color:{{settings.primaryFontColor}};font-weight:500}.customer .customer__emptySectionButton{display:block;width:265px;margin:40px auto;text-decoration:none;box-sizing:border-box}.customer__flexboxContainer{display:flex}@media screen and (min-width: 600px){.customer__flexboxContainer{margin-top:40px}}.customer__content{max-width:100%;min-width:62%;min-height:500px}.customer .customer__addresses .customer__contentBox{min-height:100px}@media screen and (min-width: 600px){.customer .popupBackground-js{background-color:#00000014;position:fixed;top:0;left:0;right:0;z-index:11;bottom:0;content:' '}}.customer .customer__contentSection{display:block;position:relative;margin:0 22px 45px;max-width:100%}.customer .customer__contentSection--edit{position:absolute;color:{{settings.linkFontColor}};top:0;right:-5px;padding:0 5px;cursor:pointer}.customer .customer__contentSection--edit .svgIcon__pen{width:16px;height:16px;fill:{{settings.linkFontColor}}}@media screen and (min-width: 600px){.customer .customer__contentSection{max-width:310px}}.customer .customer__contentSection.customer__contentBox{border:1px solid #d6d6d6;padding:20px 30px 18px;box-sizing:border-box}.customer .customer__contentSection.customer__contentBox .customer__contentBoxTitle{display:none;visibility:hidden}.customer .customer__contentSection.customer__contentBox--color{border-color:{{settings.linkFontColor}}}.customer .customer__contentSection.customer__contentBox .customer__contentPreview>span{color:#999}.customer .customer__contentSection.customer__contentBox .customer__contentPreview>span:first-of-type{display:block;height:45px;line-height:27px;font-size:18px;font-weight:300;color:{{settings.primaryFontColor}}}.customer .customer__contentSection.customer__contentBox .customer__contentSection--edit{bottom:15px;right:15px;top:unset}.customer .customer__contentSection.customer__contentBox.editSection-js{margin:0;border-color:white;position:absolute;background-color:white;z-index:11}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentBox.editSection-js{position:fixed !important;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{cursor:pointer;display:block;visibility:visible;padding:0 0 40px;position:relative;font-size:18px;font-weight:500}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{color:{{settings.primaryBtnBgColor}};position:absolute;padding:12px;border-radius:50%;bottom:unset;width:43px;height:43px;text-align:center;box-sizing:border-box}.customer__title{text-transform:uppercase;font-size:14px;font-weight:500;color:{{settings.primaryFontColor}};display:block;padding-bottom:35px}.customer__title--smallLetters{text-transform:none;font-size:12px}.customer__title--color{color:{{settings.linkFontColor}};text-transform:none}@media screen and (max-width: 599px){.customer .customer__breadcrumbs--desktop{display:none;visibility:hidden}}.customer .customer__breadcrumbs--mobile{background-color:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};font-size:14px}@media screen and (min-width: 600px){.customer .customer__breadcrumbs--mobile{display:none;visibility:hidden}}.customer .customer__breadcrumbs--mobile>span{padding:27px 0;display:inline-block;margin:0 22px}.customer .customer__breadcrumbs--mobile>span>svg{margin:0 15px -4px -5px}.customer .customer__menu{background-color:#fff;transition:200ms;z-index:9}.customer .customer__menu .mobileLogout{display:none}@media screen and (min-width: 600px){.customer .customer__menu{margin-right:4%;padding-left:3%}}@media screen and (min-width: 768px){.customer .customer__menu{margin-right:5%}}@media screen and (min-width: 600px){.customer .customer__menu li.active-js .customer__menu--submenu{display:block;background-color:#fff;padding:5px 0 5px 25px;margin:9px 0 -10px -30px}.customer .customer__menu>ul>li.active-js{border-left:5px solid {{settings.linkFontColor}}}.customer .customer__menu>ul>li{border-left:5px solid #fff}.customer .customer__menu li .customer__menu--submenu .active-js{color:{{settings.linkFontColor}}}}.customer .customer__menu--submenu{display:none}@media screen and (min-width: 600px){.customer .customer__menu>ul{border-right:1px solid #d6d6d6}}.customer .customer__menu ul{list-style:none;padding:5px 0 5px 43px;font-size:14px;color:#959494;margin:0}@media screen and (min-width: 600px){.customer .customer__menu ul{padding:5px 0 0 2px;margin-left:-10px;box-sizing:border-box;min-width:210px}}.customer .customer__menu ul>li{padding:10px 0 10px 23px}.customer .customer__menu ul>li:first-of-type{padding-top:10px}.customer .customer__menu ul>li li{padding:10px 0 10px 23px}.customer .customer__menu ul>li li:first-of-type{padding-top:10px}.customer .customer__menu ul li{cursor:pointer}.customer .customer__submenu{font-size:14px}.customer .customer__submenu ul{margin:0;padding:0;list-style:none;position:relative}.customer .customer__submenu li{color:#a9a8a8;display:inline-block;padding:20px 17px 20px 22px}@media screen and (min-width: 600px){.customer .customer__submenu li{padding-bottom:30px}.customer .customer__submenu li.active-js{position:absolute;left:0}}@media screen and (min-width: 600px){.customer .customer__submenu{font-weight:400;margin-bottom:6px}}@media screen and (min-width: 600px){.customer .customer__submenu--mobile{display:none;visibility:hidden}}@media screen and (min-width: 600px){.customer .customer__addresses .customer__contentSection.customer__contentBox{min-height:140px}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{top:18px}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{padding:15px;top:18px;left:unset;right:15px}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit .svgIcon{width:16px;height:16px}}.customer .customer__contentSection .customer__contentSection--inner{font-size:14px}.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>.form__input-wrapper,.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>button,.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>.form__checkBox{display:inline-block;visibility:visible}.customer .customer__contentSection .customer__hiddenForm-js.editMode-js .customer__contentPreview{display:none;visibility:hidden}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper,.customer .customer__contentSection .customer__hiddenForm-js>button,.customer .customer__contentSection .customer__hiddenForm-js>.form__checkBox{display:none;visibility:hidden}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper{margin-bottom:13px}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper.form__input-lastSmall{padding-bottom:15px}.customer .customer__contentSection .customer__hiddenForm-js .secondary-action-button{margin-top:0}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview{display:block;visibility:visible;line-height:2}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview label{display:block;font-size:11px;color:#d6d6d6}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview input:disabled{font-size:26px;color:#AEADAD;background-color:transparent;border:none}.customer .customer__contentSection.customer__contentSection--hidden{border:none}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{font-size:16px;color:{{settings.primaryBtnBgColor}}}}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{display:inline-block}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};font-size:40px;background-color:transparent;cursor:pointer;position:absolute;top:55px;left:128px}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit .svgIcon{width:48px;height:48px}}.customer .smallBoxesSection .customer__title{padding-bottom:25px;margin:-40px 0 0 22px}@media screen and (min-width: 600px){.customer .smallBoxesSection .customer__title{margin:-25px 0 0 22px;width:100%;box-sizing:border-box}}.customer .smallBoxesSection .customer__contentBox{position:relative}.customer .smallBoxesSection .customer__contentSection.customer__contentBox{margin-bottom:35px}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span{display:block;font-size:14px}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(1){font-size:18px;font-weight:300}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(2){padding:15px 0}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(2):first-letter{text-transform:uppercase}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(3){opacity:.5}.customer .smallBoxesSection .customer__contentBoxButton{cursor:pointer;fill:{{settings.linkFontColor}};position:absolute;padding:12px;bottom:3px;right:5px}.customer .smallBoxesSection .customer__contentBoxButton .svgIcon{width:15px;height:15px}.customer .complaints .complaints__productBox,.customer .complaints .reviews__productBox,.customer .complaints .wishList__productBox,.customer .customerReviews .complaints__productBox,.customer .customerReviews .reviews__productBox,.customer .customerReviews .wishList__productBox,.customer .wishList .complaints__productBox,.customer .wishList .reviews__productBox,.customer .wishList .wishList__productBox{margin:20px 25px 40px;position:relative;max-width:375px;box-sizing:border-box}.customer .complaints .wishList__removeProduct span,.customer .customerReviews .wishList__removeProduct span,.customer .wishList .wishList__removeProduct span{font-size:19px;color:#939292;fill:#939292;position:absolute;right:-15px;top:-16px;padding:15px;cursor:pointer}.customer .complaints .complaints__product,.customer .complaints .reviews__product,.customer .complaints .wishList__product,.customer .customerReviews .complaints__product,.customer .customerReviews .reviews__product,.customer .customerReviews .wishList__product,.customer .wishList .complaints__product,.customer .wishList .reviews__product,.customer .wishList .wishList__product{text-decoration:none;display:flex;padding-bottom:25px;border-bottom:1px solid #e5e5e5}.customer .complaints .complaints__productDetails,.customer .complaints .reviews__productDetails,.customer .complaints .wishList__productDetails,.customer .customerReviews .complaints__productDetails,.customer .customerReviews .reviews__productDetails,.customer .customerReviews .wishList__productDetails,.customer .wishList .complaints__productDetails,.customer .wishList .reviews__productDetails,.customer .wishList .wishList__productDetails{margin-left:15px;width:calc(100% - 145px)}.customer .complaints .complaints__productDetails span,.customer .complaints .reviews__productDetails span,.customer .complaints .wishList__productDetails span,.customer .customerReviews .complaints__productDetails span,.customer .customerReviews .reviews__productDetails span,.customer .customerReviews .wishList__productDetails span,.customer .wishList .complaints__productDetails span,.customer .wishList .reviews__productDetails span,.customer .wishList .wishList__productDetails span{display:block;color:#191616;font-size:14px;max-width:100%;overflow:hidden;max-height:23px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px}.customer .complaints .complaints__productDetails span.product__previousPrice,.customer .complaints .reviews__productDetails span.product__previousPrice,.customer .complaints .wishList__productDetails span.product__previousPrice,.customer .customerReviews .complaints__productDetails span.product__previousPrice,.customer .customerReviews .reviews__productDetails span.product__previousPrice,.customer .customerReviews .wishList__productDetails span.product__previousPrice,.customer .wishList .complaints__productDetails span.product__previousPrice,.customer .wishList .reviews__productDetails span.product__previousPrice,.customer .wishList .wishList__productDetails span.product__previousPrice{margin-bottom:0;color:#999fa2;font-weight:400}.customer .complaints .complaints__productDetails span a,.customer .complaints .reviews__productDetails span a,.customer .complaints .wishList__productDetails span a,.customer .customerReviews .complaints__productDetails span a,.customer .customerReviews .reviews__productDetails span a,.customer .customerReviews .wishList__productDetails span a,.customer .wishList .complaints__productDetails span a,.customer .wishList .reviews__productDetails span a,.customer .wishList .wishList__productDetails span a{color:#191616;text-decoration:none}.customer .complaints .complaints__productDetails span.wishList__addToCart,.customer .complaints .reviews__productDetails span.wishList__addToCart,.customer .complaints .wishList__productDetails span.wishList__addToCart,.customer .customerReviews .complaints__productDetails span.wishList__addToCart,.customer .customerReviews .reviews__productDetails span.wishList__addToCart,.customer .customerReviews .wishList__productDetails span.wishList__addToCart,.customer .wishList .complaints__productDetails span.wishList__addToCart,.customer .wishList .reviews__productDetails span.wishList__addToCart,.customer .wishList .wishList__productDetails span.wishList__addToCart{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};text-transform:uppercase;bottom:25px;margin-bottom:0;position:absolute}.customer .complaints .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .complaints .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .complaints .wishList__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .wishList__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .wishList__productDetails span.wishList__addToCart .svgIcon{width:19px;height:19px;margin-bottom:-2px}.customer .complaints .complaints__productDetails .complaint__statusText,.customer .complaints .complaints__productDetails p.reviews__reviewText,.customer .complaints .reviews__productDetails .complaint__statusText,.customer .complaints .reviews__productDetails p.reviews__reviewText,.customer .complaints .wishList__productDetails .complaint__statusText,.customer .complaints .wishList__productDetails p.reviews__reviewText,.customer .customerReviews .complaints__productDetails .complaint__statusText,.customer .customerReviews .complaints__productDetails p.reviews__reviewText,.customer .customerReviews .reviews__productDetails .complaint__statusText,.customer .customerReviews .reviews__productDetails p.reviews__reviewText,.customer .customerReviews .wishList__productDetails .complaint__statusText,.customer .customerReviews .wishList__productDetails p.reviews__reviewText,.customer .wishList .complaints__productDetails .complaint__statusText,.customer .wishList .complaints__productDetails p.reviews__reviewText,.customer .wishList .reviews__productDetails .complaint__statusText,.customer .wishList .reviews__productDetails p.reviews__reviewText,.customer .wishList .wishList__productDetails .complaint__statusText,.customer .wishList .wishList__productDetails p.reviews__reviewText{display:none;line-height:2;font-size:14px;margin:10px 0 0 -115px}.customer .complaints .complaints__productDetails .complaint__statusText,.customer .complaints .reviews__productDetails .complaint__statusText,.customer .complaints .wishList__productDetails .complaint__statusText,.customer .customerReviews .complaints__productDetails .complaint__statusText,.customer .customerReviews .reviews__productDetails .complaint__statusText,.customer .customerReviews .wishList__productDetails .complaint__statusText,.customer .wishList .complaints__productDetails .complaint__statusText,.customer .wishList .reviews__productDetails .complaint__statusText,.customer .wishList .wishList__productDetails .complaint__statusText{max-height:100px}.customer .complaints .complaints__productDetails .complaint__statusText span,.customer .complaints .reviews__productDetails .complaint__statusText span,.customer .complaints .wishList__productDetails .complaint__statusText span,.customer .customerReviews .complaints__productDetails .complaint__statusText span,.customer .customerReviews .reviews__productDetails .complaint__statusText span,.customer .customerReviews .wishList__productDetails .complaint__statusText span,.customer .wishList .complaints__productDetails .complaint__statusText span,.customer .wishList .reviews__productDetails .complaint__statusText span,.customer .wishList .wishList__productDetails .complaint__statusText span{display:inline-block;font-weight:400}.customer .complaints .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .complaints .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .complaints .wishList__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .wishList__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .wishList__productDetails .complaint__statusText span:nth-child(odd){width:111px;opacity:.5}.customer .complaints .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .complaints .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .complaints .wishList__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .wishList__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .wishList__productDetails .complaint__statusText span:nth-child(even){width:50%}.customer .complaints .complaints__productDetails span.complaint__moreDetails,.customer .complaints .complaints__productDetails span.review__link,.customer .complaints .reviews__productDetails span.complaint__moreDetails,.customer .complaints .reviews__productDetails span.review__link,.customer .complaints .wishList__productDetails span.complaint__moreDetails,.customer .complaints .wishList__productDetails span.review__link,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails,.customer .customerReviews .complaints__productDetails span.review__link,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails,.customer .customerReviews .reviews__productDetails span.review__link,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails,.customer .customerReviews .wishList__productDetails span.review__link,.customer .wishList .complaints__productDetails span.complaint__moreDetails,.customer .wishList .complaints__productDetails span.review__link,.customer .wishList .reviews__productDetails span.complaint__moreDetails,.customer .wishList .reviews__productDetails span.review__link,.customer .wishList .wishList__productDetails span.complaint__moreDetails,.customer .wishList .wishList__productDetails span.review__link{font-size:14px;margin-top:70px;text-decoration:underline;font-weight:400;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};margin-bottom:0;cursor:pointer}.customer .complaints .complaints__productDetails span.complaint__moreDetails a,.customer .complaints .complaints__productDetails span.review__link a,.customer .complaints .reviews__productDetails span.complaint__moreDetails a,.customer .complaints .reviews__productDetails span.review__link a,.customer .complaints .wishList__productDetails span.complaint__moreDetails a,.customer .complaints .wishList__productDetails span.review__link a,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails a,.customer .customerReviews .complaints__productDetails span.review__link a,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails a,.customer .customerReviews .reviews__productDetails span.review__link a,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails a,.customer .customerReviews .wishList__productDetails span.review__link a,.customer .wishList .complaints__productDetails span.complaint__moreDetails a,.customer .wishList .complaints__productDetails span.review__link a,.customer .wishList .reviews__productDetails span.complaint__moreDetails a,.customer .wishList .reviews__productDetails span.review__link a,.customer .wishList .wishList__productDetails span.complaint__moreDetails a,.customer .wishList .wishList__productDetails span.review__link a{color:{{settings.linkFontColor}}}.customer .complaints .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .complaints__productDetails span.review__link .svgIcon,.customer .complaints .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .reviews__productDetails span.review__link .svgIcon,.customer .complaints .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .wishList__productDetails span.review__link .svgIcon,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .complaints__productDetails span.review__link .svgIcon,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .reviews__productDetails span.review__link .svgIcon,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .wishList__productDetails span.review__link .svgIcon,.customer .wishList .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .complaints__productDetails span.review__link .svgIcon,.customer .wishList .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .reviews__productDetails span.review__link .svgIcon,.customer .wishList .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .wishList__productDetails span.review__link .svgIcon{margin-bottom:-4px;transition:300ms}.customer .complaints .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .complaints .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .complaints .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .wishList__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .wishList__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .wishList__productDetails span.review__link .svgIcon.rotateUp-js{transform:rotate(-90deg);transition:300ms}.customer .complaints .complaints__productDetails span.complaint__moreDetails,.customer .complaints .reviews__productDetails span.complaint__moreDetails,.customer .complaints .wishList__productDetails span.complaint__moreDetails,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails,.customer .wishList .complaints__productDetails span.complaint__moreDetails,.customer .wishList .reviews__productDetails span.complaint__moreDetails,.customer .wishList .wishList__productDetails span.complaint__moreDetails{margin-top:45px}.customer .complaints .complaints__productDetails span.complaint__link,.customer .complaints .reviews__productDetails span.complaint__link,.customer .complaints .wishList__productDetails span.complaint__link,.customer .customerReviews .complaints__productDetails span.complaint__link,.customer .customerReviews .reviews__productDetails span.complaint__link,.customer .customerReviews .wishList__productDetails span.complaint__link,.customer .wishList .complaints__productDetails span.complaint__link,.customer .wishList .reviews__productDetails span.complaint__link,.customer .wishList .wishList__productDetails span.complaint__link{color:#939292;fill:#939292;margin-top:0;padding:15px;cursor:pointer;position:absolute;top:-17px;right:-17px}.customer .complaints .complaints__productDetails span.complaint__type,.customer .complaints .reviews__productDetails span.complaint__type,.customer .complaints .wishList__productDetails span.complaint__type,.customer .customerReviews .complaints__productDetails span.complaint__type,.customer .customerReviews .reviews__productDetails span.complaint__type,.customer .customerReviews .wishList__productDetails span.complaint__type,.customer .wishList .complaints__productDetails span.complaint__type,.customer .wishList .reviews__productDetails span.complaint__type,.customer .wishList .wishList__productDetails span.complaint__type{font-size:12px;font-weight:400;text-transform:uppercase;display:inline}.customer .complaints .complaints__productDetails span.complaint__type>span,.customer .complaints .reviews__productDetails span.complaint__type>span,.customer .complaints .wishList__productDetails span.complaint__type>span,.customer .customerReviews .complaints__productDetails span.complaint__type>span,.customer .customerReviews .reviews__productDetails span.complaint__type>span,.customer .customerReviews .wishList__productDetails span.complaint__type>span,.customer .wishList .complaints__productDetails span.complaint__type>span,.customer .wishList .reviews__productDetails span.complaint__type>span,.customer .wishList .wishList__productDetails span.complaint__type>span{margin-left:2px;font-size:12px;font-weight:400;text-transform:capitalize;text-overflow:ellipsis;white-space:nowrap;display:inline-block;margin-bottom:-3px;max-width:50%}.customer .complaints .complaints__image,.customer .complaints .reviews__image,.customer .complaints .wishList__image,.customer .customerReviews .complaints__image,.customer .customerReviews .reviews__image,.customer .customerReviews .wishList__image,.customer .wishList .complaints__image,.customer .wishList .reviews__image,.customer .wishList .wishList__image{position:relative;width:100px;margin:0;height:130px;padding:0;text-align:center;font-size:50px;color:#E5E5E5;overflow:hidden}.customer .complaints .complaints__image img,.customer .complaints .reviews__image img,.customer .complaints .wishList__image img,.customer .customerReviews .complaints__image img,.customer .customerReviews .reviews__image img,.customer .customerReviews .wishList__image img,.customer .wishList .complaints__image img,.customer .wishList .reviews__image img,.customer .wishList .wishList__image img{width:auto;min-width:100px;max-width:100%}.customer .complaints span.complaints__lightText,.customer .customerReviews span.complaints__lightText,.customer .wishList span.complaints__lightText{opacity:.5;font-weight:400;margin-top:8px}.customer .customer__dateHourSpace{display:inline !important;padding:0 7px}@media screen and (min-width: 600px){.customer .customerReviews{margin-top:20px}}.customer .customerReviews .customer__title{margin-left:22px}.customer .customerPagination{list-style:none;margin:0 0 0 22px;padding:0}.customer .customerPagination li{display:inline-block;margin:0;color:rgba(25,22,22,0.5);padding:0;cursor:pointer}.customer .customerPagination li.active span{color:#191616}.customer .customer__orderContent{color:{{settings.primaryFontColor}};position:absolute;top:0;background-color:white;right:0;left:0}.customer .customer__orderContent .orderContent__setIcon{margin-bottom:-2px;fill:{{settings.secondaryFontColor}}}.customer .customer__orderContent .orderContent__showSet{display:block;font-size:14px;font-weight:400;cursor:pointer}.customer .customer__orderContent .orderContent__productsRow.orderContent__setElement{display:none;max-height:159px}.customer .customer__orderContent .orderContent__productsRow.orderContent__setElement.elementVisible-js{animation:showSetAnimation .5s;animation-fill-mode:both;display:flex}@keyframes showSetAnimation{from{height:0}to{height:210px}}@media screen and (min-width: 600px){.customer .customer__orderContent{left:240px;width:calc(100% - 250px);z-index:11;top:125px}}.customer .customer__orderContent .form__input-info[for="defectDate"]{top:-5px;font-size:11px}.customer .customer__orderContent .form__icons{fill:{{settings.linkFontColor}}}.customer .customer__orderContent textarea{height:auto}.customer .customer__orderContent .form .form__icon_padding{padding-left:25px}.customer .customer__orderContent .customer__title{padding-bottom:25px}.customer .customer__orderContent .orderContent{padding:25px;box-sizing:border-box}.customer .customer__orderContent .orderContent__infoBox{margin-bottom:30px}.customer .customer__orderContent .orderContent__infoBox>span{display:block}.customer .customer__orderContent .orderContent__infoBox .orderContent__lightText{font-size:14px;color:#adabab;line-height:2;font-weight:400}.customer .customer__orderContent .orderContent__productDetails{font-weight:500;font-size:14px;width:calc(100% - 130px)}.customer .customer__orderContent .orderContent__productTitle{display:block;color:#191616;font-size:14px;max-width:100%;overflow:hidden;max-height:70px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px}.customer .customer__orderContent .orderContent__productTitle a{text-decoration:none;color:#191616;max-height:20px}.customer .customer__orderContent .orderContent__productDetails span.orderContent__productAttributes{font-size:12px;color:#a9a7a7;display:block;line-height:1.2;white-space:normal}.customer .customer__orderContent .orderContent__productPrice{display:block}.customer .customer__orderContent .orderContent__bottomText{margin-top:62px;display:inline-block}.customer .customer__orderContent .orderContent__complainBtn{display:block;margin:20px 0 5px;text-decoration:underline;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};font-weight:400;cursor:pointer}.customer .customer__orderContent .orderContent__complainBtn svg{margin:0 3px -4px 0}.customer .customer__orderContent .orderContent__summary div{display:flex;justify-content:space-between;align-items:center;font-size:14px}.customer .customer__orderContent .orderContent__summary div span:nth-child(2){font-weight:500}.customer .customer__orderContent .orderContent__summary .orderContent__finalPrice{font-weight:500;font-size:18px;margin:40px 0}.customer .customer__orderContent .orderContent__status{margin:37px 0;font-size:14px;justify-content:space-between;display:flex}.customer .customer__orderContent .orderContent__status span:first-letter{text-transform:uppercase}.customer .customer__orderContent .orderContent__status span:first-of-type{color:#a9a7a7}.customer .customer__orderContent .orderContent__status span:last-of-type{color:{{settings.linkFontColor}};font-weight:500}.customer .customer__orderContent .orderContent__btn{width:100%;margin:0 0 20px}.customer .customer__orderContent .orderContent__productsRow{border-bottom:1px solid {{settings.borderColor}};padding:14px 0;max-height:210px;box-sizing:border-box;display:flex}.customer .customer__orderContent .orderContent__productsRow.orderContent__titleRow{height:auto;padding:0}.customer .customer__orderContent .orderContent__productsRow.orderContent__titleRow span:nth-child(2){min-width:190px}.customer .customer__orderContent .orderContent__productImage{width:100px;height:130px;overflow:hidden;margin-right:22px;flex-shrink:0}.customer .customer__orderContent .orderContent__productImage img{width:auto;min-width:100px;max-width:100%}.customer .customer__orderContent .checkBoxes__container--radio{display:flex;justify-content:flex-start;margin:30px 0 25px -10px}.customer .customer__orderContent .orderContent__link{text-decoration:underline;color:{{settings.linkFontColor}}}.customer .customer__orderContent .orderContent__docsToPrint{font-size:14px;margin:-10px -4px 23px}.customer .customer__orderContent .orderContent__docsToPrint__item{display:block;padding:0 0 5px 5px;margin-bottom:5px}.customer .customer__orderContent .orderContent__docsToPrint__item svg{width:14px;margin:0 3px -3px 0;fill:{{settings.secondaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .quantityField__label{display:block;margin-bottom:10px}.customer .customer__orderContent .form__input-wrapper.min-js .button-minus-add-product svg{fill:#dddddd;transition:200ms}.customer .customer__orderContent .form__input-wrapper.max-js .button-plus-add-product svg{fill:#dddddd;transition:200ms}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product,.customer .customer__orderContent .form__input-wrapper .button-plus-add-product{cursor:pointer;outline:none;background-color:{{settings.primaryPageBgColor}};border:none;color:{{settings.primaryFontColor}};width:55px;height:55px;display:inline-block;font-weight:700;margin:0}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product{font-size:23px}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product svg{transition:200ms;margin-bottom:-2px;fill:{{settings.primaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .button-plus-add-product{font-size:20px}.customer .customer__orderContent .form__input-wrapper .button-plus-add-product svg{margin-bottom:-2px;transition:200ms;fill:{{settings.primaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .quantity-field{border:1px solid #191616;background-color:{{settings.primaryPageBgColor}};color:{{settings.primaryFontColor}};width:70px;height:55px;text-align:center;padding:0;box-sizing:border-box;font-size:17px;font-weight:500;left:-2px;margin-right:-4px;display:inline-block;position:relative}.customer .complain__product{display:flex;margin:35px 0 20px;padding:12px 0;border-bottom:1px solid {{settings.borderColor}}}.customer .complain__product figure svg{display:none;visibility:hidden}.customer .complain__product figure img{display:inline-block;visibility:visible}.customer .complain__product figure.noImage-js img{display:none;visibility:hidden}.customer .complain__product figure.noImage-js svg{display:inline-block;visibility:visible;height:40px;margin-top:25px}.customer .complain__product .complain__productTitle{font-weight:500;color:{{settings.primaryFontColor}};display:block;font-size:14px}.customer .complain__product .complain__lightText{font-weight:400;color:#adabab;font-size:13px}.customer .complain__product figure{width:85px;height:100px;overflow:hidden;margin:0 15px 0 0;display:inline-block}.customer .complain__product img{width:100%;height:auto}.customer .complain__product p{margin:0}.customer .customer__consents{font-size:14px}@media screen and (max-width: 599px){.customer .customer__consents{margin-top:20px}}.customer .customer__consents .primary-action-button,.customer .customer__consents .secondary-action-button{display:block;margin:15px 0 30px;width:100%}.customer .customer__consents ul{margin:0;padding:0;list-style:none}.customer .customer__consents li{line-height:1.8}.customer .customer__consents span{display:block}.customer .customer__consents .consentWithdraw__warning{color:#CE283E;font-size:12px;margin-top:15px}.customer .customer__consents .consentAccepted__date{color:#959494}.customer .customer__consents .acceptedConsents li{margin-bottom:30px}.customer .customer__consents .consentChannel{margin-top:10px}.customer .customer__consents .consentDetails{display:none;margin-bottom:-10px}.customer__socialButton{color:#fff;font-size:14px;text-transform:uppercase;font-weight:400;display:block;margin-bottom:20px;padding:17px;text-align:center;cursor:pointer;letter-spacing:1px}.customer__socialButton svg{fill:#fff}.customer__socialButton__google{background-color:#DD4B39}.customer__socialButton__google svg{margin:0 5px -7px 0;height:26px;width:26px}.customer__socialButton__facebook{background-color:#3B5998}.customer__socialButton__facebook svg{margin:0 5px -4px 0;height:20px;width:20px}@media screen and (min-width: 600px){.customer .complaints.complaints__emptySectionMargin{margin-top:-52px}.customer .complaints{margin-top:-60px}}.customer .showOrder-js{cursor:pointer}.customer .orderContent__additionalInformation .customer__title__attachments{padding-top:25px;text-align:left !important}.customer .orderContent__additionalInformation .attachmentsFile{display:block;text-decoration:none}.customer .orderContent__additionalInformation .attachmentsFile .attachmentsFile__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%;display:inline-block;margin-bottom:-9px}.customer .orderContent__additionalInformation .attachmentsFile .svgIcon{margin-bottom:-3px}.customer .customer__history{width:100%;padding:0 20px;box-sizing:border-box;text-align:center}.customer .customer__history__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #f2f2f2;margin-bottom:5px;font-size:13px;font-weight:300;align-items:center}.customer .customer__history__row:last-of-type{border-bottom:none;margin-bottom:20px}.customer .customer__history__rowTitle{font-size:15px;width:35%;text-align:left;font-weight:400}.customer .popupDialog__complain .popupDialog__wrapper{max-width:700px;padding-bottom:0}.customer .complain__product{width:40%;padding:0;margin:40px 0;vertical-align:top;display:inline-block;border:none}.customer .complain__product figure{width:100%;height:auto;margin:0 0 20px}.customer .complain__form{width:calc(60% - 84px);display:inline-block;margin:40px}.customer .complain__form>strong{display:block;margin-bottom:20px}.customer .complain__form textarea{margin-top:10px;padding:10px}.customer .customer__orderContent .checkBoxes__container--radio{margin-top:0}.customer .form__attachement-input-container{position:relative}.customer .form__clear-attachement-input{position:absolute;top:11px;cursor:pointer}

W tym samym katalogu otwórz plik layout-m.css. Wyszukaj blok kodu z frazą .hide-on-mobile-order. Usuń go i wklej w jego miejsce następujący kod:

@media screen and (max-width: 768px){.hide-on-mobile-order{display:none;visibility:hidden}.customer__blockContent.hide-on-mobile{display:none}.hide-on-desktop-order{display:inline-block;visibility:visible}.customer .customer__menu ul{border-right:none}}@media screen and (max-width: 599px){.temporaryPopup{width:100%;text-align:center;min-height:72px;background-color:#f2f2f2;box-sizing:border-box;top:0;margin:0;padding:26px 0}.customer .customer__menu ul{padding:12px 0 5px 0}.customer .customer__menu ul>li.active-js{color:{{settings.linkFontColor}}}.customer .customer__menu ul>li{padding:18px 0 18px 23px}.customer .customer__orderContent .orderContent__status{margin:0 0 37px}.customer .customer__orderContent{min-height:100%}}@media screen and (max-width: 359px){.customer .customer__orderContent .orderContent__complainBtn{margin:7px 0 0 -130px}}@media screen and (max-width: 479px){.customer .popupDialog__complain{padding:0}.customer .popupDialog__complain .popupDialog__closeBtn{top:17px;right:17px}}@media screen and (max-width: 768px){.customer__flexboxContainer{flex-direction:column}}@media screen and (max-width: 599px){.customer .customer__contentSection.customer__contentBox.editSection-js{padding:5px 20px 15px;top:155px}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{display:none;visibility:hidden}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{top:-77px;right:13px;background-color:#fff;width:45px;height:44px;padding:14px 11px 11px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}}@media screen and (min-width: 600px) and (max-width: 768px){.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{font-size:16px;padding:10px 0 30px}}@media screen and (min-width: 630px){.customer .customer__contentSection.customer__contentBox.editSection-js{max-width:360px}}@media screen and (max-width: 599px){.customer .customer__contentSection.customer__contentSection--hidden{position:static}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{position:absolute;color:white;fill:white;background-color:{{settings.linkFontColor}};border-radius:50%;font-size:18px;width:43px;height:43px;text-align:center;box-sizing:border-box;top:80px;padding:13px 11px 11px;box-shadow:0 2px 5px 1px #0000001c}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{background-color:transparent}}@media screen and (max-width: 599px){.customer__content{flex-grow:5}}@media screen and (max-width: 768px){.customer .customer__breadcrumbs--desktop{display:none;visibility:hidden}}@media screen and (max-width: 768px){.customer .customer__breadcrumbs--mobile{display:inherit;visibility:visible}}@media screen and (max-width: 768px){.customer .customer__menu{position:absolute;top:71px;left:-300px;flex-grow:1}.customer .customer__menu.customer__menuActive-js{left:0;bottom:0;right:0}}@media screen and (max-width: 768px){.customer .mobileLogout{display:block !important;width:100% !important;margin-top:50px}.customer .mobileLogoutButton{width:calc(100% - 40px);padding:18px 0;margin-left:20px;margin-right:20px;text-align:center;color:{{settings.primaryBtnFontColor}};background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400}.customer .mobileLogoutButton:hover{cursor:pointer;color:{{settings.primaryBtnHoverFontColor}};background-color:{{settings.primaryBtnHoverBgColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}}}}@media screen and (max-width: 599px){.customer .customer__submenu{margin-bottom:30px}}@media screen and (max-width: 599px){.customer .customer__submenu.customer__submenu--desktop{display:none;visibility:hidden}}@media screen and (max-width: 599px){.customer .customer__menu .active-js,.customer .customer__submenu .active-js{color:{{settings.linkFontColor}}}}.customer .complain__product{width:100%;margin:20px 0}.customer .complain__form{width:100%;margin:20px 0}@media screen and (max-width: 599px){.loyaltyProgram .customer__title,.wishList .customer__title{margin:-40px 0 0 22px}}

Kolejnym krokiem jest otwarcie pliku static-elements -> customer-profile -> customer-profile.html. Kilka linii przed końcem pliku znajduje się linia z frazą </nav>. Tuż nad nią (a przed linią z frazą </ul>) wstaw poniższy kod:

Inne zmiany

Otwórz plik layout1.js. Wyszukaj linię z frazą var mainSection = $('main');. Tuż pod nią wklej poniższy kod:

mainSection.on('click', '.customerLogout-js', function (e) {
    app.customerLogout(e);
});

Następnie w tym samym pliku wyszukaj linijkę mainSection.on('click', '.customer__menuActivate-js', customerProfile.showCustomerProfileMenu); i tuż nad nią wklej:

jest
		$(window).on('load', function(e) {
			let searchFavParam = new URLSearchParams(window.location.search);
            if(searchFavParam.has('fav')) {
                $('.customer__menu').addClass('customer__menu-js');
                $('.customerProfileButton').removeClass('activePage');
                $('.favouriteItemsButton').addClass('activePage');
                var favourites = $('.customerPrimaryMenu-js').find('[data-template="wish-list"]');
                favourites.click();
            } else if (searchFavParam.has('accountData')) {
                var accountData = $('.customerPrimaryMenu-js').find('[data-template="account-data"]');
                accountData.click();
            }
        });

Otwórz plik css -> layout.css. Wyszukaj .popup-dialog.after-adding-to-cart-popup{z-index:12;bottom:0;top:0;right:0;left:0;margin:auto;position:fixed;padding:30px;box-sizing:border-box}. Zamień liczbę 12 przy z-index na 101.

Modyfikacja nagłówków - obie wersje nagłówka

Na koniec należy zmodyfikować wygląd nagłówków. Aby sprawdzić, którą wersję nagłówka posiadasz, wejdź do katalogu elements -> header. Jeśli w środku znajduje się plik header-1.html to posiadasz wersję 1. Jeśli header-2.html to wersję 2. W zależności od posiadanej wersji, wykonaj odpowiednie instrukcje (kod dla obu wersji będzie się różnić). Jeśli posiadasz nagłówek w wersji 1: Otwórz katalog css a w nim plik layout-m.css. W nim znajduje się bardzo długa linia, w której treści pojawia się fraza headerSection. Usuń całą tę linię i wklej w jej miejsce poniższy kod:

@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}.headerSection .header__icon svg{width:18px;height:18px}.headerSection .header__icon.header__login{display:none}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__shopData{position:absolute;top:30px;right:30px}.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:none}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg,.headerSection .headerSection__logo{min-height:30px;height:30px}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 35px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none;position:fixed;top:0;bottom:56px;overflow-y:auto;overflow-x:hidden;z-index:1}.headerSection .headerSection__mainMenu{position:absolute;top:50px;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{text-align:left;position:absolute;padding:15px;width:105px;box-sizing:border-box;left:20px;top:-40px;font-size:16px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};background-color:{{settings.headerBgColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn span{display:none}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn svg{margin-bottom:-3px;margin-top:50px}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 22px)}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:50px 40px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block;margin-top:5px}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text i{display:none}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:15px}.headerSection .mobileMenuIcon .iconsMenuItem__text{text-transform:uppercase}.headerSection .mobileMenuIcon svg{top:3px;margin:4px 0 0;width:20px;height:20px}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;font-size:10px;position:static;bottom:22px;right:35px}.headerSection .headerSection__searchForm{position:fixed;top:45px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;max-width:100%;height:100%;padding:35px 0 0;margin:-45px 0 0 0}.headerSection .headerSection__searchForm svg{fill:{{settings.linkFontColor}};display:block;margin-left:33px;margin-bottom:25px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__btn{background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__phrase{margin:10px 0;width:calc(100% - 71px);max-width:calc(100% - 71px)}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:15px;position:relative}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:block}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}.headerSection .hideOnMobile{display:none}}

W tym samym katalogu otwórz plik layout.css. Znajdź cały blok kodu, w którym występują frazy headerSection. Usuń go i wklej w jego miejsce następujący kod:

.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:120px;box-sizing:border-box;position:relative;z-index:13}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:120px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;z-index:1}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{height:36px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__row{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .mainNavigation{display:none}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative;padding:10px 0 0}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px;position:absolute;bottom:-37px;right:0;z-index:1}.headerSection .headerSection__iconsMenu .mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .iconsMenuItem__text i{font-style:normal}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{position:absolute;top:100px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;display:none;padding:30px 15px;margin:0;overflow:hidden;box-sizing:border-box;text-align:center;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .headerSection__searchForm__searchButtonMobile{display:none}.headerSection .headerSection__searchForm__phrase{max-width:436px;width:100%;height:36px;padding:0 0 11px;box-sizing:border-box;border-bottom:1px solid {{settings.linkFontColor}};color:{{settings.headerFontColor}};background-color:transparent}.headerSection .headerSection__searchForm__btn{position:absolute;top:30px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:none;display:none}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:45px;position:relative;box-sizing:border-box;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;position:absolute;top:-40px;right:0}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.breadcrumbsFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;margin:10px 0 5px;opacity:.5}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}

Jest to konieczne, ponieważ zmian w nagłówku było zbyt wiele, by wyszukiwać i zmieniać pojedyncze elementy. Podobnie należy zrobić z kodem nagłówka. Otwórz katalog elements -> header a następnie otwórz znajdujący się w nim plik header-1.html, usuń jego zawartość i wklej następujący kod:

{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}

{{ translations.Hea_Menu }} {% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}}

{{ translations.Com_Search }} {% if usr.Authenticated -%} {{ translations.Hea_CustomerProfile }}

{% else -%} {{ translations.Log_Login }} {% endif -%} {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%})

{{ translations.Hea_Menu }} {% if header.Nodes[0] -%} {{ translations.Com_Categories }} {% endif -%}

- {{ category | A }}
  - - {{undercategory.Name}}
  {% endfor -%}

{% endif -%} {% endfor -%}

- - - {{ category | A }}
  {% endif -%} {% endfor -%}

{% assign name = 'menuBanner' -%} {% if config.Banners[name].Images[0] -%} {% assign banner = config.Banners[name].Images[0] -%} {% if banner -%} {% assign bannerAlt = banner.Alt | H -%} {{banner.Url | Img: '', bannerAlt}} {% endif -%} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

220x295

{% endif -%}

{{ translations.Hea_Pages }} {{ config.DefinedPages.Contact | A }} {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} {{ translations.Lookbook }} {% elseif lookbooksQuantity == 1 or fakeLookbook -%} {{ config.DefinedPages.Lookbook | A }} {% endif -%}

{% if config.Shop.Contact.PhoneNo != '' -%} {{config.Shop.Contact.PhoneNo}} {% endif -%} {% if config.Shop.Contact.Email != '' -%} {{ config.Shop.Contact.Email }} {% endif -%} {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

{{ translations.Prf_Language }} {% for language in config.Languages -%} {{ language.Language }} {% endfor -%}

{{ translations.Com_Currency }} {% for currency in config.Currencies -%} {{ currency.Code }} {% endfor -%}

{% if usr.Authenticated == false -%} {{translations.Com_Login}} / {{translations.Registration}} {% endif -%}

{% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%} {% endif -%} {% endif -%} {% endfor -%} Następnie otwórz katalog js a w nim plik layout0.js. Wyszukaj linię pageHeader.on('click', '.openCategoryMenu-js', function() { i wstaw tuż nad nią kod:

pageHeader.on('click', '.closeSearchButton > svg', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
        });

        pageHeader.on('input', '.searchFormPhrase-js', function() {
            if($(this).val().length > 0) {
                $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden');
            } else {
                $('.headerSection__searchForm__searchButtonMobile').addClass('hidden');
            }
        });

Jeśli posiadasz nagłówek w wersji 2: Otwórz katalog css a w nim plik layout-m.css. W nim znajduje się bardzo długa linia, w której treści pojawia się fraza headerSection. Usuń całą tę linię i wklej w jej miejsce poniższy kod:

@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon svg{width:15px;height:15px}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg,.headerSection .headerSection__logo{min-height:30px;height:30px}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 20px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none}.headerSection .headerSection__mainMenu{position:fixed;top:0;bottom:56px;overflow:auto;z-index:1;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{display:block;text-align:left;position:relative;padding:15px;width:50px;box-sizing:border-box;left:-15px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 20px)}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:10px 20px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .headerSection__row{flex-direction:row}.headerSection .headerSection__iconsMenu .hideOnMobile{display:none !important}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text,.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:block;margin-top:5px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:0}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;margin-top:-9px;font-size:10px}.headerSection .headerSection__searchForm{position:fixed;top:0;padding-top:25px;left:0;right:0;width:100%;max-width:100%;bottom:0;overflow:auto;height:auto;background-color:{{settings.primaryPageBgColor}};z-index:1}.headerSection .headerSection__searchForm .closeSearchButton{display:block;margin-bottom:25px;margin-left:20px}.headerSection .headerSection__searchForm .closeSearchButton:hover{cursor:pointer}.headerSection .headerSection__searchForm .closeSearchButton svg{width:18px;height:18px;fill:{{settings.linkFontColor}}}.headerSection .headerSection__searchForm__btn{display:none;background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__phrase{margin:10px 20px 10px 20px;width:calc(100% - 40px);max-width:calc(100% - 40px);border-left:none;border-right:none;border-top:none;padding-bottom:14px;border-bottom:1px solid {{settings.primaryFontColor}}}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:-5px}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__searchForm__phrase{background-color:rgba(255,255,255,0.4);color:{{settings.secondaryFontColor}}}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.secondaryFontColor}}}.headerSection .searchForm__searchAutocomplete{position:fixed;display:block;top:110px;left:0;width:100%}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}}@media only screen and (max-width: 360px){.headerSection.headerSection__bg>.headerSection__row{padding:15px}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{padding:10px 20px 40px}.headerSection .headerSection__shopData{left:0}}

W tym samym katalogu otwórz plik layout.css. Znajdź cały blok kodu, w którym występują frazy headerSection. Usuń go i wklej w jego miejsce następujący kod:

.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:150px;box-sizing:border-box;position:relative;z-index:13}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:150px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;overflow:hidden}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{height:36px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .headerSection__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;position:relative}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2),.headerSection .mainNavigation{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{height:36px;position:relative;box-sizing:border-box;width:30%;max-width:420px}.headerSection .headerSection__searchForm__searchButtonMobile,.headerSection .headerSection__searchForm .closeSearchButton{display:none}.headerSection .headerSection__searchForm__phrase{max-width:420px;width:100%;height:36px;padding:12px 10px 11px;box-sizing:border-box;border:1px solid {{settings.borderColor}};color:{{settings.headerFontColor}};background-color:rgba(255,255,255,0.25)}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.headerFontColor}};opacity:.7}.headerSection .headerSection__searchForm__btn{position:absolute;top:0;right:-35px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:1px solid {{settings.borderColor}}}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{display:block;margin:0 auto;padding:20px 0;top:45px;z-index:9;width:100%;position:absolute;box-sizing:border-box}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;width:80%;max-width:500px;margin:0 auto;padding:15px 20px;background-color:{{settings.headerBgColor}};border-bottom:1px solid #f2f2f2;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2);font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;top:7px;position:relative;color:{{settings.headerFontColor}}}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.headerFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;opacity:.5;margin:10px 0 5px}@media screen and (min-width: 768px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:0}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory{margin-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__undercategory a{text-transform:none;color:{{settings.headerFontColor}};width:100%;font-weight:300;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__category a{color:{{settings.headerFontColor}};font-size:12px;font-weight:500;width:100%;display:inline-block}}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (max-width: 949px){.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:inline-block}}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}

Jest to konieczne, ponieważ zmian w nagłówku było zbyt wiele, by wyszukiwać i zmieniać pojedyncze elementy. Podobnie należy zrobić z kodem nagłówka. Otwórz katalog elements -> header a następnie otwórz znajdujący się w nim plik header-2.html, usuń jego zawartość i wklej następujący kod:

{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}

{% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}}

{{ translations.Hea_Menu }} {% if usr.Authenticated -%} {{ translations.Hea_CustomerProfile }}

{% else -%} {{ translations.Log_Login }} {% endif -%} {{ translations.Com_Search }} {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%})

{% if header.Nodes[0] -%} {{ translations.Com_Categories }} {% endif -%}

- {{ category | A }}
  - - {{undercategory.Name}}
  {% endfor -%}

{% endif -%} {% endfor -%}

- - - {{ category | A }}
  {% endif -%} {% endfor -%}

220x295

{% endif -%}

{{ translations.Prf_Language }} {% for language in config.Languages -%} {{ language.Language }} {% endfor -%}

{{ translations.Com_Currency }} {% for currency in config.Currencies -%} {{ currency.Code }} {% endfor -%}

    pageHeader.on('click', '.closeSearchButton > svg', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
        });

        pageHeader.on('input', '.searchFormPhrase-js', function() {
            if($(this).val().length > 0) {
                $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden');
            } else {
                $('.headerSection__searchForm__searchButtonMobile').addClass('hidden');
            }
        });

W tym samym pliku wyszukaj linię z frazą $('.go-to-top__btn-js').click(function(){. Tuż pod nią wklej ten kod:

    $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800);

Zmiany w zakresie wymagalności adresu e-mail do kuponu rabatowego w szablonie Topaz

Z tego artykułu dowiesz się, jak wprowadzić zmiany w zakresie wymagalności adresu e-mail do kuponu rabatowego w Twoim szablonie Topaz. Dzięki wprowadzonym zmianom, adres e-mail będzie wymagany tylko dla kuponów subsksrybentów.

Wskazówka

UWAGA! Do poprawnego działania wszystkich funkcji wymagana jest wersja sklepu 2020.2 lub nowsza!

Wskazówka

Podczas kopiowania fraz do wyszukania z niniejszego artykułu, mogą wystąpić problemy ze znakami -, _, ', ". Jeśli nie jesteś w stanie odnaleźć poszczególnych fraz w kodzie, spróbuj przepisać te znaki ręcznie, lub zamiast kopiować frazy do wyszukania z artykułu, przepisać je.

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. Przejdź do katalogu staticElements -> cart i otwórz plik cart.html. Wyszukaj w nim frazę js-close-coupon. Cała znaleziona linia powinna wyglądać w ten sposób:

Tuż nad nią, dodaj poniższy kod:


 
    
    {{translations.InvalidEmail}}

2. Przejdź do katalogu js i otwórz plik layout0.js. Odszukaj linię z frazą $.post(obj.url, data, function (result) {. Tuż pod nią wstaw następujący kod:


var emailInput = $('.cart__input-email');
    if(result.action.Code == "107" && emailInput.hasClass('hidden')) {
        var msg =__translations.DiscountEmail;
        app.showTemporaryPopup(msg, 'error');
        emailInput.removeClass('hidden');
        return;
    }

W celu upewnienia się, sprawdź, czy następna linia po wstawionym przez Ciebie kodzie wygląda następująco: if (result.action.Result) {. 3. Otwórz plik base_layout.html znajdujący się w głównym katalogu z plikami szablonu Topaz. Wyszukaj frazę __translations. Pod znalezioną linią wstaw następujący fragment kodu:


 DiscountEmail: "{{translations.DiscountEmail}}",

4. Ostatnim krokiem jest dodanie jednego tłumaczenia. W tym celu otwórz Panel Administracyjny, a następnie Wygląd sklepu -> Ustawienia -> Tłumaczenia. Kliknij przycisk z napisem Dodaj. W polu Id wprowadź DiscountEmail a w polu tekst Dla wybranego kuponu wymagane jest podanie e-mail. Zatwierdź przyciskiem Dodaj. W ten sposób zmodyfikowałeś swój szablon Topaz pod względem zmian w zakresie wymagalności adresu e-mail do kuponu rabatowego. Pamiętaj, że aby powyższe zmiany działały poprawnie, wymagany jest sklep w wersji 2020.2 i nowszej!

Nowy sposób prezentacji rabatów w profilu klienta w szablonie Szafir

W tym artykule dowiesz się, jak zmodyfikować szablon Szafir, aby obsługiwał nowy sposób prezentacji rabatów w profilu klienta.

Wskazówka

Do poprawnego działania potrzebujesz sklepu w wersji 2020.2 lub nowszej!

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. Otwórz plik common -> navigation-bars -> main-navigation-bar-partial.html. W pliku tym wyszukaj frazę {% if usr.Authenticated == true -%}. Trzy linie poniżej, powinna znajdować się linia zaczynająca się od <a href. Podmień tę linię na następującą:

2. Otwórz plik common -> pagination.html. Wyszukaj linię {% assign tab = 'loyalty' -%}. Tuż pod nią wklej następujący kod:


{% elseif page.QueryString contains 'tab=discounts' -%}
    {% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%}
    {% assign paginationPageCount = customer-profile.DiscountsERP.PageCount -%}
    {% assign paginationPageNo = customer-profile.DiscountsERP.PageNo -%}
    {% assign template = 'customer-profile/discounts/discounts-list.html' -%}
    {% assign templateContainer = '.discounts-list-lq' -%}
    {% assign tab = 'discounts' -%}
{% elseif page.QueryString contains 'tab=discount-details' -%}
    {% assign pageQueryName = customer-profile.DiscountDetPageQueryGET -%}
    {% assign paginationPageCount = customer-profile.DiscountERPDetails.PageCount -%}
    {% assign paginationPageNo = customer-profile.DiscountERPDetails.PageNo -%}
    {% assign template = 'customer-profile/discounts/discount-elements.html' -%}
    {% assign templateContainer = '.discount-elements-lq' -%}
    {% assign tab = 'discount-details' -%}
    {% assign id = customer-profile.DiscountERPDetails.Id -%}
    {% assign discountString = customer-profile.DiscountQueryGET -%}

3. Otwórz katalog customer-profile -> discounts. W nim otwórz plik discounts.html. Usuń jego treść, i wklej następujący kod:


    
         {{ translations.BackToShopping }}
        {{translations.Promotions}}
    


{% include 'customer-profile/menu.html' -%}


        {{translations.DiscountsInfo}}
        
	    	{% include 'customer-profile/discounts/discounts-list.html' -%}

4. W tym samym katalogu utwórz plik discount-details.html. Wklej do niego następujący kod:


{% include 'common/date-format.html' -%}
{% assign discount = customer-profile.DiscountERPDetails -%}
{% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%}
{% assign queries = page.QueryString | Split: '&' -%}
{% for query in queries -%}
    {% if query contains 'page=' -%}
        {% assign pageQueryNo = query | Split: '=' | Last -%}
        {% break -%}
    {% else -%}
        {% assign pageQueryNo = 1 -%}
    {% endif -%}
{% endfor -%}


    
        
            
        
        {{ discount.Name }}
    


{% if discount.Description != '' and discount.Description != null  -%}
    
        
            {{discount.Description}}
        
    
{% endif -%}

{% if discount.Thresholds -%}
    {% for threshold in discount.Thresholds -%}
        
            {{translations.Threshold}}: 
            {% if threshold.ThresholdType == 1 -%}
                {{threshold.Threshold | ToPrice}} {{threshold.ThresholdSymbol}}
            {% else -%}
                {{threshold.Threshold}}
            {% endif -%}
        
        {{translations.QuantityThreshold}}: {{threshold.ThresholdMinPositionsCount}}
        
            {% include 'customer-profile/discounts/discount-elements.html' with threshold -%}
        
    {% endfor -%}
{% else -%}
    
        {% include 'customer-profile/discounts/discount-elements.html' with discount -%}
    
{% endif -%}

5. W tym samym katalogu utwórz plik discount-elements.html i wklej do niego następujący kod:


{% assign discount = customer-profile.DiscountERPDetails -%}
{% if include -%}
	{% assign elementsParent = include -%}
{% else -%}
	{% assign elementsParent = discount -%}
{% endif -%}


    
		{% assign anyGroup = false -%}
		{% assign anyProduct = false -%}
		{% assign anyThreshold = false -%}
		{% assign anyBundleThreshold = false -%}
		{% assign anyTotalPrice = false -%}
		{% assign anySubtotalPrice = false -%}
		{% for element in elementsParent.Elements -%}
			{% if element.Group != null -%}
				{% assign anyGroup = true -%}
			{% endif -%}
			{% if element.Product != null -%}
				{% assign anyProduct = true -%}
			{% endif -%}
			{% if element.Threshold != null and element.Threshold > 0 -%}
				{% assign anyThreshold = true -%}
			{% endif -%}
			{% if element.BundleThreshold != null and element.BundleThreshold > 0 -%}
				{% assign anyBundleThreshold = true -%}
			{% endif -%}
			{% if element.FixedPrice -%}
				{% if element.TotalPrice != null and element.TotalPrice > 0 -%}
					{% assign anyTotalPrice = true -%}
				{% endif -%}
				{% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%}
					{% assign anySubtotalPrice = true -%}
				{% endif -%}
			{% endif -%}
		{% endfor -%}
        
            
                
                
                    {% if anyGroup and anyProduct -%}
                        {{translations.Product}}/{{translations.Category}}
                    {% elseif anyGroup -%}
                        {{translations.Category}}
                    {% else -%}
                        {{translations.Product}}
                    {% endif -%}
				
				{% unless element.FixedPrice and anySubtotalPrice == false -%}
					
						{% if element.FixedPrice and anySubtotalPrice -%}
							{{translations.Price}} {{translations.Netto | Downcase }}
						{% else -%}
							{{translations.Discount}}
						{% endif -%}
					
                {% endunless -%}
                {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
                    
						{% if element.FixedPrice and anyTotalPrice -%}
							{{translations.Price}} {{translations.Brutto | Downcase}}
						{% elseif anyBundleThreshold -%}
							{{translations.BundleThreshold}}
						{% else -%}
							{{translations.Threshold}}
						{% endif -%}
                    
                {% endif -%}
            
        
		{% for element in elementsParent.Elements -%}
            
                
                    {{ forloop.index }}
                
				
					
						{% if element.Group != null -%}
							{% if element.Group.Url -%}
								
							{% endif -%}
									{{ element.Group.Name }}
							{% if element.Group.Url -%}
								
							{% endif -%}
						{% else -%}
							{% if element.Product.Url -%}
								
							{% endif -%}
									{{ element.Product.NameNoHtml }}
							{% if element.Product.Url -%}
								
							{% endif -%}
						{% endif -%}
					
				
				{% unless element.FixedPrice and anySubtotalPrice == false -%}
					
						
							{% if element.FixedPrice -%}
								{% if element.SubtotalPrice > 0 -%}
									{{ translations.Price | Downcase }} {{ translations.Netto | Downcase }}
								{% endif -%}
							{% else -%}
								{{ translations.Discount | Downcase }}
							{% endif -%}
						 
						
							{% if element.FixedPrice -%}
								{% if element.SubtotalPrice > 0 -%}
									{{ element.SubtotalPrice | ToPrice }}
								{% endif -%}
							{% else -%}
								{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
									{{ element.Value | ToPrice }}
								{% else -%}
									{{ element.Value | Normalize }}
								{% endif -%}
							{% endif -%}
							{{ element.ValueSymbol }}
						
					
				{% endunless -%}
				{% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
					
						
							{% if element.FixedPrice -%}
								{% if element.TotalPrice > 0 -%}
									{{ translations.Price | Downcase }} {{ translations.Brutto | Downcase }}
								{% endif -%}
							{% elseif element.BundleThreshold > 0 -%}
								{{ translations.BundleThreshold | Downcase }}
							{% elseif element.Threshold > 0 -%}
								{{ translations.Threshold | Downcase }}
							{% endif -%}
						
						
							{% if element.FixedPrice -%}
								{% if element.TotalPrice > 0 -%}
									{{ element.TotalPrice | ToPrice }}
								{% endif -%}
								{{ element.ValueSymbol }}
							{% elseif element.BundleThreshold > 0 -%}
								{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
									{{ element.BundleThreshold | ToPrice }}
								{% else -%}
									{{ element.BundleThreshold | Normalize }}
								{% endif -%}
								{{ element.BundleThresholdSymbol }}
							{% elseif element.Threshold > 0 -%}
								{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
									{{ element.Threshold | ToPrice }}
								{% else -%}
									{{ element.Threshold | Normalize }}
								{% endif -%}
								{{ element.ThresholdSymbol }}
							{% endif -%}
						
					
				{% endif -%}
            
        {% endfor -%}
    
	{% assign paginationPageCount = discount.PageCount -%}
	{% if paginationPageCount > 1 -%}
		
			
				
					
						{% include 'common/pagination.html' -%}
					
				
			
		
	{% endif -%}

6. W tym samym katalogu utwórz plik discounts-list.html i wklej do niego następujący kod:


{% include 'common/date-format.html' -%}

{% assign discountsERP = customer-profile.DiscountsERP -%}
{% assign discountString = customer-profile.DiscountQueryGET | H -%}
{% assign paginationPageNo = discountsERP.PageNo -%}

{% if paginationPageNo == 1 -%}
    {% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%}
    {% if orderValuesSize > 0 -%}
        {% assign anyDiscount = true -%}
        {% for orderValue in customer-profile.DiscountsEshop.OrderValue -%}
            
                {{ orderValue.Discount | Normalize }} %
                
                    {{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }}
                    
                        {% if orderValue.DateTill -%}
                            {{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }}
                        {% else -%}
                            {{ translations.ValidLifetime | Downcase }}
                        {% endif -%}
                    
                
            
        {% endfor -%}
    {% endif -%}
    {% if customer-profile.DiscountsEshop.Regular -%}
        {% assign anyDiscount = true -%}
        {% assign regular = customer-profile.DiscountsEshop.Regular -%}
        
            {{ regular.Discount | Normalize }} %
            
                {{ translations.ForRegularCustomer }}
                
                    {% if regular.DateTill -%}
                        {{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }}
                    {% else -%}
                        {{ translations.ValidLifetime | Downcase }}
                    {% endif -%}
                
            
        
    {% endif -%}
    {% if customer-profile.DiscountsEshop.FirstOrder -%}
        {% assign anyDiscount = true -%}
        {% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%}
        
            {{ firstOrder.Discount | Normalize }} %
            
                {{ translations.ForNewCustomer }}
                
                    {% if firstOrder.DateTill -%}
                        {{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }}
                    {% else -%}
                        {{ translations.ValidLifetime | Downcase }}
                    {% endif -%}
                
            
        
    {% endif -%}
{% endif -%}
{% if discountsERP.TotalItems > 0 -%}
    {% assign anyDiscount = true -%}
    {% for discount in discountsERP.Discounts -%}
        
            
                {{ translations.Details }}
            
            
                {{ discount.Name }}
                
                    {% if discount.DateTill -%}
                        {% if discount.DateFrom -%}
                            {{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }}
                        {% endif -%}
                        {{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }}
                    {% else -%}
                        {{ translations.ValidLifetime | Downcase }}
                    {% endif -%}
                
            
        
    {% endfor -%}
    {% include 'common/pagination.html' -%}
{% endif -%}
{% unless anyDiscount -%}
    {{ translations.NoDicountsInfo }}
{% endunless -%}

7. Następnie przejdź do katalogu customer-profile. Otwórz plik menu.html. Wyszukaj linię <ul class="category-column-ui customer-profile-menu-ui category-column-lq attached-lq customer-profile-menu-lq" data-container=".customer-profile-content-lq">. Linia pod spodem zaczyna się od <li class="load-erp-data-lq. Podmień ją na następującą:

W tym samym pliku wyszukaj frazę {% if settings.discountsPresentationInCustomerProfileInPromotionsTab == 'yes' %}. Linia pod spodem zaczyna się od <li class="discounts-menu-button-lq". Podmień ją na następującą:

8. Otwórz katalog js a w nim plik init-ui2.js. Wyszukaj linię function setProductNameMaxWidthInTable() {. Należy podmienić całą funkcję (od znalezionej linii włącznie, do linii o treści }; znajdującej się ok. 70 linii poniżej - 2 linie przed tą znajduje się linia $('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);):


function setProductNameMaxWidthInTable() {
    if($(window).width() > 1279) {
        function calculateProductNameMaxWidthInTable(parent) {
            if(parent){
                var header = parent.find('.products-table-header-container-lq');
            } else {
                var header = $('.products-table-header-container-lq');
            }
            
            var headerWidth = header.width();
            var nameWidth = headerWidth;

            function calculateNameWidth(className) {
                var elements = header.find(className);
                var size = elements.length;
                if (size == 1) {
                    nameWidth -= elements.outerWidth();
                } else if (size > 1) {
                    elements.each(function () {
                        nameWidth -= $(this).outerWidth();
                    });
                }
            }

            calculateNameWidth('.remove-product-lq');
            calculateNameWidth('.open-complaint-form-container-lq');
            calculateNameWidth('.price-like-column-lq');
            calculateNameWidth('.percent-column-lq');
            calculateNameWidth('.amount-stepper-column-lq');
            calculateNameWidth('.currency-column-lq');
            calculateNameWidth('.options-column-lq');
            calculateNameWidth('.number-column-lq');

            if ($('.attributes-view-lq').index() != -1) {
                var freeSpaceWidth = headerWidth;

                function calculateFreeSpaceWidth(className) {
                    var elements = header.find(className);
                    var size = elements.length;
                    if(className == '.attributes-view-lq' && size > 5){
                        size = 5;
                    }
                    if (size == 1) {
                        freeSpaceWidth -= elements.outerWidth();
                    } else if (size > 1) {
                        elements.each(function (i) {
                            if(i < size){
                                freeSpaceWidth -= $(this).outerWidth();
                            } else {
                                return false;
                            }
                        });
                    }
                }

                calculateFreeSpaceWidth('.remove-product-lq');
                calculateFreeSpaceWidth('.open-complaint-form-container-lq');
                calculateFreeSpaceWidth('.attributes-view-lq');
                calculateFreeSpaceWidth('.arrow-lq');
                calculateFreeSpaceWidth('.options-column-lq');
                calculateFreeSpaceWidth('.name-column-lq');
                
                if (nameWidth > freeSpaceWidth) {
                    var difference = nameWidth - freeSpaceWidth;
                    var amountStepperWidth = $('.amount-stepper-column-lq').outerWidth() + difference;
                    $('.amount-stepper-column-ui').css('width', amountStepperWidth);
                    nameWidth = freeSpaceWidth;
                }
            }

            if(parent){
                parent.find('.name-and-code-lq').css('width', nameWidth);
            } else {
                $('.name-and-code-lq').css('width', nameWidth);
            }
            
            if ($('.choose-cart-table-view-lq').index() != -1) {
                nameWidth -= $('.choose-cart-table-view-lq').width();
            }

            if(parent){
                parent.find('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);
            } else {
                $('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);
            }
        };
        
        if($('.discount-elements-table-lq').index() != -1){
            $('.discount-elements-table-lq').each(function(){
                calculateProductNameMaxWidthInTable($(this));
            });
        } else {
            calculateProductNameMaxWidthInTable()
        }
    }
};

9. Otwórz plik scss -> globals -> _globals-m.scss. Wyszukaj frazę .position-attributes-set-form-lq{. Poniżej znajdują się dwie linie o treści }. Tuż pod nimi wklej poniższy kod:

 
        &.discount-element-ui{
          height: 100px;
          .name-and-code-lq{
            margin-top: 4px;
          }
          .price-like-column-ui{
            left: 60px;
            text-align: left;
            .prices-ui{
              left: 0;
            }
          }
          .value-ui{
            position: absolute;
            left: 40px;
            font-size: 10px;
            top: 2px;
          }
        }

W tym samym katalogu otwórz plik _globals2.scss. Wyszukaj linię // Discounts in customer-profile. Poniżej znajduje się linia .discount-item-ui{. Tuż pod nią wklej poniższą linijkę:


  height: 72px;

Poniżej znajduje się linia .discount-value-ui{. Klika linii poniżej znajdziesz linię o treści vertical-align: middle;. Słowo middle zamień na top. Kolejne kilka linii poniżej znajduje się linia o treści .currency-ui{. Tuż nad nią wklej ten kod:


  &.clickable-ui{
    cursor: pointer;
  }

10. Otwórz Panel administracyjny, a w nim zakładkę Wygląd sklepu -> Ustawienia -> Tłumaczenia. Nowe tłumaczenia dodaj poprzez kliknięcie przycisku Dodaj, wprowadzenie Id, Tekstu i zatwierdzenie przyciskiem Dodaj. Należy dodać następujące tłumaczenia (Id - Tekst): 1. Threshold - Próg 2. QuantityThreshold - Próg ilościowy 3. BundleThreshold - Próg pakietowy

Wskazówka

Kopiując Id tłumaczeń upewnij się, że przed lub za danym Id nie znajduje się żadna spacja, inaczej tłumaczenie może nie zadziałać w sposób poprawny!

Wskazówka

Pamiętaj, aby po wprowadzeniu zmian w plikach scss i js, wykonać odpowiednie komendy opisane w artykule o minifikacji, do którego link znajduje się na samej górze niniejszego artykułu. Przed wykonaniem odpowiedniej komendy dla plików js, usuń z katalogu js pliki: init-ui1.min.js, collection-points.min.js, init-ui2.min.js, init.min.js, sw.min.js. Po wykonaniu komendy możesz usunąć plik slick.min.min.js.

Slajder producentów w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał slajder producentów.

Wskazówka

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

W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Naciśnij przycisk Dodaj. W formularzu wybierz Menu producentów i marek, a jako nazwę ustaw manufacturer-brand. Teraz kliknij na nowo utworzony obiekt na liście. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna, Produkty i Szczegóły produktu, w zależności od tego na jakiej stronie ma być umiejscowiony slajder (istnieje możliwość wyświetlenia slajdera na wszystkich w.w. stronach). Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie logo producentów na stronie sklepu. Kolejnym krokiem jest dodanie na stronę sklepu podglądu slidera. Dostępne są dwa warianty. Pierwszy z nich wyświetla loga producentów w prosty sposób, a drugi wokół każdego logo dodaje cienką ramkę. W celu wykonania tej operacji, przejdź do plików sklepu, otwórz katalog elements a następnie utwórz w nim nowy katalog o nazwie manufacturer. W nowo utworzonym katalogu należy stworzyć pliki o nazwie manufacturer-1.html oraz manufacturer-2.html (w zależności czy chcemy wariant pierwszy, drugi czy obydwa). Następnie w pliku tym należy dodać poniższy kod:

Uwaga

Na jednej stronie można dodać tylko jeden slider!

Wariant zwykły:

{% if manufacturer-brand.Manufacturers -%}
    {% assign manufacturers = manufacturer-brand.Manufacturers -%}
    <div class="manufacturer1-slider">
        {% for manufacturer in manufacturers -%}
            {% if manufacturer.ImageId > 0 -%}
                <div class="manufacturer1-slider__wrapper">
                {% if manufacturer.Url != empty -%}
                    <a aria-label="manufacturer" class="item" href="{{manufacturer.Url}}">
                {% endif -%}
                    <figure>
                        {% if manufacturer.Heading != null -%}
                            {% assign title = {{manufacturer.Heading | H}} -%}
                        {% else -%}
                            {% assign title = {{manufacturer.Name | H}} -%}
                        {% endif -%}
                        {{manufacturer | Img: "compact"}}
                    </figure>
                    {% if manufacturer.Url != empty -%}
                        </a>
                    {% endif -%}
                </div>
            {% endif -%}
        {% endfor -%}
    </div>
{% endif -%}
Wariant z ramką wokół logo:
{% assign manufacturerSliderSize = manufacturer-brand.Manufacturers | Size -%}
{% if manufacturer-brand.Manufacturers -%}
    {% assign manufacturers = manufacturer-brand.Manufacturers -%}
    <div class="manufacturer2-slider">
        {% for manufacturer in manufacturers -%}
            {% if manufacturer.ImageId > 0 -%}
                <div class="manufacturer2-slider__wrapper">
                    <div class="slider2-element-border">
                    {% if manufacturer.Url != empty -%}
                        <a class="item" href="{{manufacturer.Url}}">
                    {% endif -%}
                        <figure>
                            {% if manufacturer.Heading != null -%}
                                {% assign title = {{manufacturer.Heading | H}} -%}
                            {% else -%}
                                {% assign title = {{manufacturer.Name | H}} -%}
                            {% endif -%}
                            {{manufacturer | Img: "compact"}}
                        </figure>
                        {% if manufacturer.Url != empty -%}
                            </a>
                        {% endif -%}
                    </div>
                </div>
            {% endif -%}
        {% endfor -%}
    </div>
{% endif -%}


Po wprowadzeniu powyższego kodu, otwieramy pliki dla stron, na których chcemy umieścić slider. Odpowiednio:

 	Strona główna -- home-page.html
 	Lista produktów -- product-list.html
 	Strona produktu -- product-page.html

Znajdują się w głównym katalogu. Należy dodać w nich linijkę:
Wariant zwykły:

{% include 'elements/manufacturer/manufacturer-1.html' with 'manufacturer-brand' -%}
Wariant z ramką wokół logo:

{% include 'elements/manufacturer/manufacturer-2.html' with 'manufacturer-brand' -%}
Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie bloga na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji.

Następnie należy otworzyć katalog css a w nim plik layout.css. Na jego końcu wklejamy następujący kod:
Wariant zwykły:
.manufacturer1-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.manufacturer1-slider .slick-track{height:100%;display:flex;align-items:center;justify-content:center}.manufacturer1-slider__wrapper{width:100%;box-sizing:border-box;position:relative}.manufacturer1-slider__wrapper a{height:100px}.manufacturer1-slider__wrapper a figure{display:flex;align-items:center;justify-content:center}.manufacturer1-slider__wrapper a figure img{filter:grayscale(100%)}.manufacturer1-slider__wrapper a figure img:hover{filter:none}
Wariant z ramką wokół logo:
.manufacturer2-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.manufacturer2-slider .slick-track{display:flex;align-items:center;justify-content:center}.manufacturer2-slider__wrapper{margin:0 25px;box-sizing:border-box}.manufacturer2-slider__wrapper .slider2-element-border{display:flex;align-items:center;border:1px #ebebeb solid;justify-content:center;height:150px}.manufacturer2-slider__wrapper a figure{display:flex;justify-content:center;box-sizing:content-box}.manufacturer2-slider__wrapper a figure img{filter:grayscale(100%);max-width: 150px;}.manufacturer2-slider__wrapper a figure img:hover{filter:none}
Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout1.js.

Następujący kod należy wkleić na końcu pliku:
Wariant zwykły:

$('.manufacturer1-slider').slick({
    lazyLoad: 'progressive',
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    draggable: true,
    autoplay: false,
    autoplaySpeed: 3000,
    arrows: false,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 4
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 550,
            settings: {
                centerMode: true,
                slidesToShow: 1
            }
        }
    ]
});

Wariant z ramką wokół logo:

$('.manufacturer2-slider').slick({
    lazyLoad: 'progressive',
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    draggable: true,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
    responsive: [
        {
            breakpoint: 1600,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1
            }
        },
        {
            breakpoint: 550,
            settings: {
                centerMode: true,
                slidesToShow: 1
            }
        }
    ]
});

`Slajder marek w szablonie Topaz`


W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał slajder marek.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Naciśnij przycisk Dodaj. W formularzu wybierz Menu producentów i marek, a jako nazwę ustaw manufacturer-brand. Teraz kliknij na nowo utworzony obiekt na liście. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna, Produkty i Szczegóły produktu, w zależności od tego na jakiej stronie ma być umiejscowiony slajder (istnieje możliwość wyświetlenia slajdera na wszystkich w.w. stronach). Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie logo producentów na stronie sklepu.

Kolejnym krokiem jest dodanie na stronę sklepu podglądu slidera. Dostępne są dwa warianty. Pierwszy z nich wyświetla loga producentów w prosty sposób, a drugi  wokół każdego logo dodaje cienką ramkę. W celu wykonania tej operacji, przejdź do plików sklepu, otwórz katalog elements a następnie utwórz w nim nowy katalog o nazwie brand. W nowo utworzonym katalogu należy stworzyć pliki o nazwie brand-1.html oraz brand-2.html (w zależności czy chcemy wariant pierwszy, drugi czy obydwa). Następnie w pliku tym należy dodać poniższy kod:
Uwaga
Na jednej stronie można dodać tylko jeden slider!


Wariant zwykły:

{% if manufacturer-brand.Brands -%}
    {% assign brands = manufacturer-brand.Brands -%}
    <div class="brand1-slider">
        {% for brand in brands -%}
            {% if brand.ImageId > 0 -%}
                <div class="brand1-slider__wrapper">
                {% if brand.Url != empty -%}
                    <a aria-label="brand-url" class="item" href="{{brand.Url}}">
                {% endif -%}
                    <figure>
                        {% if brand.Heading != null -%}
                            {% assign title = {{brand.Heading | H}} -%}
                        {% else -%}
                            {% assign title = {{brand.Name | H}} -%}
                        {% endif -%}
                        {{brand | Img: "compact"}}
                    </figure>
                    {% if brand.Url != empty -%}
                        </a>
                    {% endif -%}
                </div>
            {% endif -%}
        {% endfor -%}
    </div>
{% endif -%}
Wariant z ramką wokół logo:
{% if manufacturer-brand.Brands -%}
    {% assign brands = manufacturer-brand.Brands -%}
    <div class="brand2-slider">
        {% for brand in brands -%}
            {% if brand.ImageId > 0 -%}
                <div class="brand2-slider__wrapper">
                    <div class="slider2-element-border">
                    {% if brand.Url != empty -%}
                        <a class="item" href="{{brand.Url}}">
                    {% endif -%}
                        <figure>
                            {% if brand.Heading != null -%}
                                {% assign title = {{brand.Heading | H}} -%}
                            {% else -%}
                                {% assign title = {{brand.Name | H}} -%}
                            {% endif -%}
                            {{brand | Img: "compact"}}
                        </figure>
                        {% if brand.Url != empty -%}
                            </a>
                        {% endif -%}
                    </div>
                </div>
            {% endif -%}
        {% endfor -%}
    </div>
{% endif -%}

Po wprowadzeniu powyższego kodu, otwieramy pliki dla stron, na których chcemy umieścić slider. Odpowiednio:

 	Strona główna -- home-page.html
 	Lista produktów -- product-list.html
 	Strona produktu -- product-page.html

Znajdują się w głównym katalogu. Należy dodać w nich linijkę:
Wariant zwykły:

{% include 'elements/manufacturer/brand-1.html' with 'manufacturer-brand' -%}
Wariant z ramką wokół logo:

{% include 'elements/manufacturer/brand-2.html' with 'manufacturer-brand' -%}
Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie bloga na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji.

Następnie należy otworzyć katalog css a w nim plik layout.css. Na jego końcu wklejamy następujący kod:
Wariant zwykły:
.brand1-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.brand1-slider .slick-track{height:100%;display:flex;align-items:center;justify-content:center}.brand1-slider__wrapper{width:100%;box-sizing:border-box;position:relative}.brand1-slider__wrapper a{height:100px}.brand1-slider__wrapper a figure{display:flex;align-items:center;justify-content:center}.brand1-slider__wrapper a figure img{filter:grayscale(100%)}.brand1-slider__wrapper a figure img:hover{filter:none}
Wariant z ramką wokół logo:
.brand2-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.brand2-slider .slick-track{display:flex;align-items:center;justify-content:center}.brand2-slider__wrapper{margin:0 25px;box-sizing:border-box}.brand2-slider__wrapper .slider2-element-border{display:flex;align-items:center;border:1px #ebebeb solid;justify-content:center;height:150px}.brand2-slider__wrapper a figure{display:flex;justify-content:center;box-sizing:content-box}.brand2-slider__wrapper a figure img{filter:grayscale(100%);max-width: 150px;}.brand2-slider__wrapper a figure img:hover{filter:none}
Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout1.js.

Następujący kod należy wkleić na końcu pliku:
Wariant zwykły:

$('.brand1-slider').slick({
    lazyLoad: 'progressive',
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    draggable: true,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 4
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 550,
            settings: {
                centerMode: true,
                slidesToShow: 1
            }
        }
    ]
});

Wariant z ramką wokół logo:

$('.brand2-slider').slick({
    lazyLoad: 'progressive',
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    draggable: true,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
    responsive: [
        {
            breakpoint: 1600,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1
            }
        },
        {
            breakpoint: 550,
            settings: {
                centerMode: true,
                slidesToShow: 1
            }
        }
    ]
});

`Strona producentów w szablonie Szafir`


W tym artykule dowiesz się jak dodać stronę producentów w swoim szablonie.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

Nową stronę dodamy w panelu administracyjnym w obszarze Wygląd sklepu/ Strony. W sekcji Użytkownika skorzystaj z przycisku Dodaj. Wypełnij pola z nazwą, linkiem i tytułem strony i zatwierdź przyciskiem Dodaj.



Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywowania wystarczy kliknąć na jej kafelek i zmienić przełącznik opcji Aktywna na TAK.

Teraz zajmiemy się dodaniem pliku strony.

Przejdź do obszaru Wygląd sklepu/ Ustawienia, następnie użyj przycisku Więcej i wybierz Edytuj ustawienia zaawansowane. Przejdź na zakładkę Strony. Dla nowo dodanej strony w kolumnie Plik należy wpisać nazwę pliku który będziemy tworzyć z końcówką html, przykładowo: manufacturers.html.

Wprowadzone zmiany zachowaj za pomocą przycisku Zapisz.

Następnie proszę dodać tłumaczenia. W sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.

 	Id: ShowProducts -- Tekst: Pokaż produkty
 	Id: ShowMore -- Tekst: Pokaż więcej

W głównym folderze szablonu Szafir stwórz plik o nazwie manufacturers.html. Do pliku wklej następujący kod:
{% extends '_layout.html' %}
{% block pageContent -%}
{% assign manufacturers = manufacturer-brand.Manufacturers -%}
{% assign manufacturersSize = manufacturers | Size -%}
<section class="product-presentation-ui container-ui manufacturers-container-ui">
	<div class="manufacturers-breadcrumbs-ui">
	    {% include 'common/breadcrumbs.html' -%}
	</div>

    <div class="manufacturers-ui manufacturers-lq">
        {% for manufacturer in manufacturers  -%}
            <div  class="manufacturer-ui manufacturer-lq {% if forloop.index > 12 -%} hidden-lq {% endif -%}">
                {% if manufacturer.ImageId != 0 -%}
                    {{ manufacturer | Img:'large' }}
                {% endif -%}
                <h2>{{ manufacturer.Name }}</h2>
                <a href="{{ manufacturer.Url }}" name="{{ manufacturer.Name }}" title="{{ manufacturer.Name }}">
                    {{ translations.ShowProducts }} <i class="ti-arrow-right"></i>
                </a>
            </div>
        {% endfor -%}
    </div>
    {% if manufacturersSize > 12 -%}
        <button class="show-more-manufacturers-ui show-more-manufacturers-lq">{{ translations.ShowMore }}</button>
    {% endif -%}
</section>
{% endblock -%}
Na końcu pliku scss/globals/_globals2.scss wklej taki kod:
.manufacturers-container-ui{
text-align: center;
.manufacturers-breadcrumbs-ui{
text-align: left;
}
.manufacturers-ui{
text-align: left;
}
.manufacturer-ui{
width: calc(25% - 64px);
margin-right: 60px;
margin-bottom: 60px;
display: inline-block;
i{
margin-left: 5px;
}
}
.show-more-manufacturers-ui{
margin: 40px auto;
width: 300px;
}
}

A na końcu pliku (przed ostatnią klamrą) scss/globals/_globals-m.scss wklej taki kod:

.manufacturers-container-ui{
  .manufacturer-ui{
    width: calc(50% - 43px);
    margin: 40px 20px;
  }
  .show-more-manufacturers-ui{
    display: none;
  }
}

Następnie przechodzimy do pliku js/init-ui2.js, a na jego końcu doklejamy następujący kod:
function showMoreManufacturers(e) {
  $('.manufacturer-lq.hidden-lq').each(function(index){
    if(index < 12){
      $(this).removeClass('hidden-lq');
      app.loadImages();
    }
  });
  if($('.manufacturer-lq.hidden-lq').length == 0){
    $(e.currentTarget).addClass('hidden-lq');
    }
  };

  $('body').on('click', '.show-more-manufacturers-lq', function (e) {
    showMoreManufacturers(e);
  });

  if($(window).width() <= 1279 && $('.manufacturer-lq.hidden-lq').length > 0) {
    $('.manufacturer-lq.hidden-lq').removeClass('hidden-lq');
}

`Baner na stronie z podziękowaniami w szablonie Szafir`


W tym artykule dowiesz się jak dodać baner na stronę z podziękowaniami w swoim szablonie.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

Pierwszym krokiem będzie dodanie kodu w pliku order/thx.html. Przy pomocy narzędzia wyszukiwania, szukamy frazy {% include 'edrone/order.html' %}. Następujący kod należy wkleić bezpośrednio nad linijką:

{% assign thxpageBannerSize = config.Banners['thxpage'].Images | Size -%}
{% if thxpageBannerSize > 0 -%}
    <div class="thxpage-slider-ui thxpage-slider-lq slider-lq">
        {% for slide in config.Banners['thxpage'].Images -%}
            <div>
                <figure class="thxpage-slider-figure-ui">
                    <img data-lazy="{{slide.Url}}" alt="{{slide.Alt | H}}" title="{{slide.Title | H}}" />
                    <figcaption class="thxpage-slider-figcaption-ui">
                        <h2 class="thxpage-slider-heading-ui">{{slide.Heading}}</h2>
                        <p class="thxpage-slider-text-ui">{{slide.Text}}</p>
                        {% if slide.Link != empty -%}
                            <a class="btn-ui" href="{{slide.Link}}" {% if slide.TargetBlank -%} target="_blank" {% endif -%}>{{ translations.CheckDetails }}</a>
                        {% endif -%}
                    </figcaption>
                </figure>
            </div>
        {% endfor -%}
    </div>
{% endif -%}
Następnie w pliku js/init-ui1.js proszę wyszukać za pomocą narzędzia wyszukiwania frazę $('.crossselling-slider-in-cart-lq img').each(function () {, a następnie wkleić następujący kod:
if ($('.thxpage-slider-lq').length > 0) {
  window.UIFeatures.initSlider('.thxpage-slider-lq', {
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: false
  });
}

Kod musi wyglądać w następujący sposób:



Kolejnym plikiem, który musimy edytować jest js/init-js2.js. Proszę wyszukać za pomocą narzędzia wyszukiwania frazę $('.crossselling-slider-in-cart-lq img').each(function () {, a następnie wkleić następujący kod:
if ($('.thxpage-slider-lq').length > 0) {
  UIFeatures.initSlider('.thxpage-slider-lq', {
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: false
  });
}
Kod musi wyglądać w następujący sposób:



Po wykonaniu powyższych instrukcji otwieramy plik scss/_globals2.css, na którego końcu wklejamy następujący kod:
.thxpage-slider-ui{
  margin: 20px 0;
}

.slick-slide .thxpage-slider-figure-ui{
  position: relative;
  text-align: right;
  margin: 0;
  &:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 6px);
    display: inline-block;
    background: linear-gradient(90deg, rgba(#f8f8f8, 1) 0%, rgba(#f8f8f8, 1) 40%, rgba(#f8f8f8, 0) 70%, rgba(#f8f8f8, 0) 100%);
  }
  img{
    display: inline-block;
    width: 60%;
  }
  .thxpage-slider-figcaption-ui{
    text-align: left;
    z-index: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: calc(60% + 20px);
  }
  .thxpage-slider-heading-ui{
    border-left: none;
    padding: 0;
    font-weight: 700;
  }
  .thxpage-slider-text-ui{
    color: $labelsColor;
  }
  .btn-ui{
    display: inline-block;
    width: 300px;
    padding: 10px;
    margin-top: 20px;
    text-align: center;
    background-color: $lowerPriceAndCart;
    color: $lowerPriceAndCartFont;
    &:hover{
      background-color: $cartButtonHover;
      color: $cartButtonHoverFont;
    }
  }
}
Przedostatnim krokiem jest otworzenie pliku scss/_globals-m.css i wklejenie na końcu następującego kodu (przed ostatnią klamrą):
.thxpage-slider-ui{
  margin: 20px 0;
}

.slick-slide .thxpage-slider-figure-ui{
  position: relative;
  text-align: right;
  margin: 0;
  &:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 6px);
    display: inline-block;
    background: linear-gradient(90deg, rgba(#f8f8f8, 1) 0%, rgba(#f8f8f8, 1) 40%, rgba(#f8f8f8, 0) 70%, rgba(#f8f8f8, 0) 100%);
  }
  img{
    display: inline-block;
    width: 60%;
  }
  .thxpage-slider-figcaption-ui{
    text-align: left;
    z-index: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: calc(60% + 20px);
  }
  .thxpage-slider-heading-ui{
    border-left: none;
    padding: 0;
    font-weight: 700;
  }
  .thxpage-slider-text-ui{
    color: $labelsColor;
  }
  .btn-ui{
    display: inline-block;
    width: 300px;
    padding: 10px;
    margin-top: 20px;
    text-align: center;
    background-color: $lowerPriceAndCart;
    color: $lowerPriceAndCartFont;
    &:hover{
      background-color: $cartButtonHover;
      color: $cartButtonHoverFont;
    }
  }
}
Ostatnim krokiem jest dodanie zdjęć i utworzenie banera w panelu administracyjnym w obszarze Wygląd sklepu/ Ustawienia. W sekcji Bannery skorzystaj z przycisku Dodaj. Wypełnij pole Nazwa wpisując thxpage, następnie wciśnij Dodaj. Wejdź na nowo utworzony baner i dodaj zdjęcia według własnego uznania.

Zawężanie filtrów

Wskazówka

Zawężanie filtrów

W tym artykule dowiesz się jak dodać możliwość zawężanie filtrów w swoim szablonie.

Wskazówka

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

Uwaga

Agat

Pierwszym krokiem jest otwarcie pliku category-page.html. Przy użyciu narzędzia wyszukiwania wyszukaj frazę {% assign long = value.Text | Size %}. Usuń następujący kod, znajdujący się pod wyszukaną linijką:

<li {% if long > 40 -%} class="long" {% endif -%}>
<span class="switch-name">{{ value.Text }}</span>
<label class="switch">
<input id="flt_{{ value.Field | H }}_{{ value.Value | H }}" class="switch-input" name="{{ value.Field | H }}" type="checkbox" {%if value.Selected%}checked{%endif%} value="{{ value.Value | H }}"/>
<span class="switch-label"></span><span class="switch-handle"></span>
</label>
</li>

Następnie w to samo miejsce wklej kod:

<li {% if long > 36 -%} class="long" {% endif -%}>
<span class="switch-name">{{ value.Text }} ({{value.Count}})</span>
<label class="switch">
<input id="flt_{{ value.Field | H }}_{{ value.Value | H }}" class="switch-input" name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value | H }}"/>
<span class="switch-label"></span><span class="switch-handle"></span>
</label>
</li>

Teraz przejdź do pliku scss/mobile1.scss i wklej na końcu następujący kod:

[disabled] + .switch-label, [disabled] + .switch-label + .switch-handle {
opacity: 0.5;
cursor: default;
}

Bursztyn

Otwórz plik categories.html. Za pomocą narzędzia wyszukiwania znajdź frazę <div class="switch"> a następnie usuń następujący kod :

<div class="switch">
<input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/>
<div class="input-switch">
<div class="switch-button"></div>
</div>
<label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label>
</div>

W miejsce usuniętego kodu wklej następujący:

<div class="switch">
<input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/>
<div class="input-switch">
<div class="switch-button"></div>
</div>
<label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label>
</div>

Kolejnym krokiem jest otwarcie pliku scss/main.scss. Na jego końcu wklej następujący kod:

.switch input:disabled {
& + .input-switch, & + .input-switch + label {
opacity: 0.5;
cursor: default;
}
}

Opal

Otwórz plik categories.html. Za pomocą narzędzia wyszukiwania znajdź frazę <div class="switch"> a następnie usuń następujący kod :

<div class="switch">
<input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {%if v.Selected%}checked{%endif%}/>
<div class="input-switch">
<div class="switch-button"></div>
</div>
<label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} {% if v.Count > 0%}({{v.Count}}/{{v.TotalCount}}){% endif -%}</label>
</div>

W miejsce usuniętego kodu wklej następujący:

<div class="switch">
<input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/>
<div class="input-switch">
<div class="switch-button"></div>
</div>
<label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label>
</div>

Kolejnym krokiem jest otwarcie pliku scss/main.scss. Na jego końcu wklej następujący kod:

.switch input:disabled {
& + .input-switch, & + .input-switch + label{
opacity: 0.5;
cursor: default;
}
}

Szafir

Otwórz plik product-filters.html. Za pomocą narzędzia wyszukiwania znajdź frazę <input name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value | H }}" />, a następnie zamień znalezioną linijkę na nastepujacą:

 <input name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value | H }}" />

Następnie wyszukaj {% if value.Field != colorFilterName -%}, a następnie usuń kod:

{% if value.Field != colorFilterName -%}
{% if value.Field == "REWARD" -%}
{{ translations.PointsProduct }}
{% else -%}
{{ value.Text }}
{% endif -%}
{% endif -%}

W to miejsce wklej następujący kod:

{% if value.Field != colorFilterName -%}
{% if value.Field == "REWARD" -%}
{{ translations.PointsProduct }}
{% else -%}
{{ value.Text }}
{% endif -%}
({{value.Count}})
{% endif -%}

Kolejnym krokiem jest otwarcie pliku scss/globals/_globals1.scss. Za pomocą narzędzia wyszukiwania znajdź frazę [type="checkbox"], [type="radio"] { a następnie bezpośrednio pod nią wklej następujący kod:

&:disabled + .label-ui{
opacity: 0.5;
cursor: default;
&::before{
cursor: default;
}
}

Następnie otwórz plik js/init-ui1.js. Za pomocą narzędzia wyszukiwania znajdź frazę for (var i in newFilterValues) i usuń następujący kod:

for (var i in newFilterValues) {
var value = newFilterValues[i];
var isChecked = (value.Selected) ? 'checked' : '';

if(value.Field == 'REWARD'){ value.Text = __translations.pointsProduct; } var valueItemHtml = '<label class="checkbox-ui">' + '<input name="' + value.Field + '" type="checkbox" ' + isChecked + ' value="' + value.Value + '" />' + '<span class="label-ui">' + value.Text + '</span>' + '</label>'; newFiltersContainerHtml.append(valueItemHtml); } W miejsce usuniętego kodu należy wkleić następujący:

for (var i in newFilterValues) {
var value = newFilterValues[i];
var count = value.Count;
var isChecked = (value.Selected) ? 'checked' : '';
var isDisabled = (count == 0) ? 'disabled' : '';

if(value.Field == 'REWARD'){ value.Text = __translations.pointsProduct; } var valueItemHtml = '<label class="checkbox-ui">' + '<input name="' + value.Field + '" type="checkbox" ' + isChecked + isDisabled + ' value="' + value.Value + '" />' + '<span class="label-ui">' + value.Text + ' (' + count + ')</span>' + '</label>'; newFiltersContainerHtml.append(valueItemHtml); }

Topaz

Otwórz plik elements/products-list/products-1.html ( lub elements/products-list/products-2.html w zależności od wybranego modułu). Następnie za pomocą narzędzia wyszukiwania znajdź frazę <li class="filter-group-wrapper"> i usuń następujący kod:

<li class="filter-group-wrapper">
<ul class="filter-group">
<li class="filter-group__title product-list__title">{{ filter.Heading }}</li>
{% for value in visibleValues -%}
<li class="filter checkBoxes__container">
<input type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index}}" name="{{ value.Field }}" {%if value.Selected%}checked{%endif%} value="{{ value.Value }}"/>
<label for="flt_{{value.Field}}_{{forloop.index}}">
<span class="checkBoxes__checkIcon">
<svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg>
</span>
<span class="filter-label">{{ value.Text }} ({{ value.TotalCount }})</span>
</label>
</li>
{% endfor -%}
</ul>
{% if valuesSize > 4 -%}
<ul class="filter-group filter-group--redundant">
{% for value in redundantValues -%}
<li class="filter checkBoxes__container">
<input  type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index | Plus: 4}}" name="{{ value.Field }}" {%if value.Selected%}checked{%endif%} value="{{ value.Value }}"/>
<label for="flt_{{value.Field}}_{{forloop.index | Plus: 4}}">
<span class="checkBoxes__checkIcon">
<svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg>
</span>
<span class="filter-label">{{ value.Text }} ({{ value.TotalCount }})</span>
</label>
</li>
{% endfor -%}
</ul>
<span class="filter-toggle filter-more">{{ translations.Com_More }}</span>
<span class="filter-toggle filter-less">{{ translations.Com_Less }}</span>
{% endif -%}
</li>

W to miejsce wklej następujący kod:

<li class="filter-group-wrapper">
<ul class="filter-group">
<li class="filter-group__title product-list__title">{{ filter.Heading }}</li>
{% for value in visibleValues -%}
<li class="filter checkBoxes__container">
<input type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index}}" name="{{ value.Field }}" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value }}"/>
<label for="flt_{{value.Field}}_{{forloop.index}}">
<span class="checkBoxes__checkIcon">
<svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg>
</span>
<span class="filter-label">{{ value.Text }} ({{ value.Count }})</span>
</label>
</li>
{% endfor -%}
</ul>
{% if valuesSize > 4 -%}
<ul class="filter-group filter-group--redundant">
{% for value in redundantValues -%}
<li class="filter checkBoxes__container">
<input  type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index | Plus: 4}}" name="{{ value.Field }}" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value }}"/>
<label for="flt_{{value.Field}}_{{forloop.index | Plus: 4}}">
<span class="checkBoxes__checkIcon">
<svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg>
</span>
<span class="filter-label">{{ value.Text }} ({{ value.Count }})</span>
</label>
</li>
{% endfor -%}
</ul>
<span class="filter-toggle filter-more">{{ translations.Com_More }}</span>
<span class="filter-toggle filter-less">{{ translations.Com_Less }}</span>
{% endif -%}
</li>

Następnie otwórz plik scss/elements/products-list/products-1-g.scss ( lub scss/elements/products-list/products-2-g.scss w zależności od wybranego modułu ). Za pomocą narzędzia wyszukiwania znajdź frazę .filter {, a poniżej wklej następujący kod:

input[disabled]+label {
opacity: 0.5;
cursor: not-allowed;
}

Obsługa blokowania pracownika w Profilu Klienta przez głównego administratora w szablonie Szafir

W tym artykule dowiesz się dodać głównemu administratorowi uprawnienie umożliwiające blokowanie i odblokowanie pracownika w Profilu Klienta w szablonie Szafir. Pierwszym modyfikowanym plikiem będzie customer-profile/employees-list/employees-view-list.html. Cały kod w pliku należy usunąć a wkleić poniższy.

{% for employee in customer-profile.Employees -%}
	<div class="customer-details-tile-ui customer-details-lq container-lq">
		<div class="content-ui">
			<div><strong>{{employee.Name}} {{employee.Name2}}</strong></div>
			<br>
			<div><i class="ti-email"></i>  <span class="employee-email-lq">{{employee.Email}}</span></div>
			{% if employee.PhoneNo != '' -%}
				<div><i class="ti-headphone-alt"></i>  {{employee.PhoneNo}}</div>
			{% endif -%}
		</div>
		<div class="buttons-ui">
			<div class="edit-ui">
				<div class="form-lq flr-ui form-into-data-lq">
					<input type="hidden" name="id" value="{{employee.Id}}" />
					<input type="hidden" name="__template" value="customer-profile/employees-list/employees-view-list.html" />
					{% if employee.Active -%}
						<input type="hidden" name="__action" value="Customer/EmployeeLock" />
						<button class="btn-pure-ui toggle-employee-lq" data-container=".employees-list-view-lq">
							<i class="ti-lock"></i>
							<span class="icon-label-ui">{{ translations.Lock }}</span>
						</button>
					{% else-%}
						<input type="hidden" name="__action" value="Customer/EmployeeUnlock" />
						<button class="btn-pure-ui toggle-employee-lq" data-container=".employees-list-view-lq">
							<i class="ti-unlock"></i>
							<span class="icon-label-ui">{{ translations.Unlock }}</span>
						</button>
					{% endif -%}
				</div>
			</div>
		</div>
	</div>
{% endfor -%}

Drugim plikiem, który należy zmodyfikować jest js/init-ui2.js. Na końcu dokumentu należy wkleić poniższy kod.

function toggleEmployee(e) {
    if(app.validationBeforePost(e) != 'error'){
        var form = $(e.currentTarget).parents('.form-lq');
        var data = form.find('input:not([disabled])').serializeArray();
        data.push({name: "__csrf", value: __CSRF});
        $.post('', data, function(result) {
            app.serverMessage(result, form, e);
            if (result.action.Result) {
                $('.employees-list-view-lq').html(result.template);
            }
        });
    }
};

$('body').on('click', '.toggle-employee-lq', function (e) {
    toggleEmployee(e);
});

Obsługa zawężania kategorii w wynikach wyszukiwania w szablonie Szafir

W tym artykule dowiesz się jak dodać możliwość zawężania kategorii przy prezentacji wyników wyszukiwania w szablonie Szafir. W pierwszej kolejności otwórz plik common/categories-navigation/sliding-navigation-partial.html. Wyszukaj frazę sliding-categories-ui. Pod znalezioną linią wklej poniższy kod.

{% if page.PageId == config.DefinedPages.ProductList.Id and products.Search != null -%}
{% for group in products.FilteringOptions.Groups -%}
<div class="filtered-category-group-ui">
    {% if group.Parent != null and group.Parent.Id != config.DefinedPages.ProductList.Id -%}
    <a class="parent-ui" href="{{group.Parent.Url}}">{{group.Parent.Name}}</a>
    {% endif -%}
    {% assign groupCount = 0 -%}
    {% for node in group.Nodes -%}
    {% assign groupCount = groupCount | Plus: node.Count -%}
    {% endfor -%}
    <a class="group-ui" href="{{group.Group.Url}}">{{group.Group.Name}} <span class="count-ui">{{groupCount}}</span></a>
    <ul>
        {% for node in group.Nodes -%}
        <li><a class="node-ui" href="{{node.Group.Url}}">{{node.Group.Name}} <span
                    class="count-ui">{{node.Count}}</span></a></li>
        {% endfor -%}
    </ul>
</div>
{% endfor -%}
{% else -%}

Przejdź na koniec dokumentu. Powinieneś zauważyć tam dwa tagi zamykające <div>.

</div>
</div>

Nad nimi umieść poniższą linię.

{% endif -%}

Następnie otwórz plik css/desktop2.css i w dowolnym miejscu (np. na końcu pliku) wklej poniższy kod.

.filtered-category-group-ui {
  margin: 20px; }
  .filtered-category-group-ui a {
    display: block;
    position: relative; }
  .filtered-category-group-ui .parent-ui {
    color: #696666; }
  .filtered-category-group-ui .node-ui {
    padding-left: 20px; }
  .filtered-category-group-ui .count-ui {
    position: absolute;
    right: 0; }

Obsługa drugiej wersji widoku bloga na stronie głównej w szablonie Szafir

W tym artykule dowiesz się jak dodać drugą wersję widoku bloga na stronie głównej w szablonie Szafir - powiększone kafle z większą ilością tekstu. Od wersji 2020.3 w standardowym szablonie Szafir dostępne są dwie wersje widoku bloga. Poniższa instrukcja dedykowana jest dla szablonów starszych lub modyfikowanych. W pierwszej kolejności należy zmodyfikować plik __settings.liquid. Pierwsze dwie linijki w pliku powinny wyglądać następująco:

{% case languageId %}
	{% when '1' %}

Kolejne 100-200 linii (w zależności od posiadanej przez Ciebie wersji sklepu) będą zaczynać się od frazy {% assign. Następnie zauważysz linię {% else %}. Przed linią {% else %} należy wkleić poniższy kod.

		{% assign blogOnHomepage = "Blog na stronie głównej" -%}
		{% assign blogPresentationOnHomepage = "Prezentacja bloga na stronie głównej" -%}
		{% assign extended = "Rozszerzony" -%}
		{% assign compact = "Kompaktowy" -%}

Po linii {% else %} znów zauważysz 100-200 linii zaczynających się od frazy {% assign, a następnie linię {% endcase %}. Przed linią {% endcase %} należy wkleić poniższy kod.

{% assign blogOnHomepage = "Blog on homepage" -%}
{% assign blogPresentationOnHomepage = "Blog presentation on homepage" -%}
{% assign extended = "Extended" -%}
{% assign compact = "Compact" -%}

Następnie wyszukaj frazę #lg-settings-content a.Nad znalezioną linią powinieneś zauważyć tag <script> a nad nią tag </div> (jeden lub dwa). Nad nimi powinieneś widzieć tag </fieldset>. Pod tagiem </fieldset> umieść następujący kod. <fieldset> <legend>{{blogOnHomepage}}</legend> <section> <h3 class="section-title">{{blogPresentationOnHomepage}}</h3> <div class="table"> <div class="trow"> <div class="tcell"> <input type="radio" name="blogPresentationOnHomepage" value="extended" id="blogPresentationOnHomepage-extended" {%="" if="" settings.blogpresentationonhomepage="=" 'extended'="" %}="" checked="" endif=""> <label class="label" for="blogPresentationOnHomepage-extended">{{extended}}</label> </div> <div class="tcell"> <input type="radio" name="blogPresentationOnHomepage" value="compact" id="blogPresentationOnHomepage-compact" {%="" if="" settings.blogpresentationonhomepage="=" 'compact'="" %}="" checked="" endif=""> <label class="label" for="blogPresentationOnHomepage-compact">{{compact}}</label> </div> </div> </div> </section> </fieldset> Następnie przejdź do pliku blog/blog-news-partial.html. Usuń pierwszą linię kodu i wklej poniższy.

<div class="blog-posts-slider-lq blog-posts-slider-ui {% if settings.blogPresentationOnHomepage == 'extended' %} extended-ui {% endif -%}">

Następnie wyszukaj frazę <time. Znalezioną linię usuń i w tym miejscu wklej poniższy kod.

{% if settings.blogPresentationOnHomepage == 'extended' %}
<div class="blog-publication-date-ui">{{post.Content}}</div>
{% else -%}
<time class="blog-publication-date-ui">{{post.PublishedDate}}</time>
{% endif -%}

Ostatnim modyfikowanym plikiem będzie css/desktop1.css. W dowolnym miejscu wklej poniższy kod.

.blog-posts-slider-ui.extended-ui .blog-home-ui {
  border: none; }

@media only screen and (min-width: 1280px) {
  .blog-posts-slider-ui.extended-ui .blog-home-ui {
    width: calc(33% - 49px);
    border: none;
    margin: 40px 80px 0 0; }
    .blog-posts-slider-ui.extended-ui .blog-home-ui .product-caption-ui {
      height: auto; }
    .blog-posts-slider-ui.extended-ui .blog-home-ui .blog-publication-date-ui {
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2; }
    .blog-posts-slider-ui.extended-ui .blog-home-ui .latest-blog-post-heading {
      font-weight: 700; }
    .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child {
      width: 100%;
      margin: 0;
      padding-bottom: 0; }
      .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .blog-home-news-ui {
        width: 45%;
        height: 213px;
        margin-right: 4%;
        float: left; }
      .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .product-caption-ui {
        width: 50%;
        float: left; }
      .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .latest-blog-post-heading {
        font-size: 22px; }
      .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .blog-publication-date-ui {
        height: auto;
        font-size: 16px; }
      .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .read-more-ui {
        float: left; }
    .blog-posts-slider-ui.extended-ui .blog-home-ui:last-child {
      margin-right: 0; } }

Obsługa prezentacji informacji o limicie kredytowym w szablonie Szafir

W tym artykule dowiesz się jak dodać do szablonu Szafir informacje o limicie kredytowym w nagłówku strony. W tym celu należy zmodyfikować plik common/header/header-top-bar.html. Przejdź do końca pliku. Ostatnie dwie linijki powinny wyglądać następująco:

    </ul>
</div>

Przed nimi należy wstawić następujący kod:

{% if customer.CreditLimit.OverdueUsed > 0 -%}
            <li class="f-right-ui">
                <div class="label-ui">{{translations.OverduePayments}}:</div> 
                {{customer.CreditLimit.OverdueUsed}} {{customer.Currency}}
            </li>
        {% endif -%}
        {% if customer.CreditLimit.Left > 0 -%}
            <li class="f-right-ui">
                <div class="label-ui">{{translations.CreditLeft}}:</div> 
                {{customer.CreditLimit.Left}} {{customer.Currency}}
            </li>
        {% endif -%}
        {% if customer.CreditLimit.Value > 0 -%}
            <li class="f-right-ui">
                <div class="label-ui">{{translations.LimitGranted}}:</div> 
                {{customer.CreditLimit.Value}} {{customer.Currency}}
            </li>
        {% endif -%}

Obsługa prezentacji wymiarów towaru dla wskazanej jednostki miary

Wskazówka

W tym artykule dowiesz się jak umożliwić wyświetlanie wymiarów towarów w zależności od wybranej jednostki miary w szablonach Szafir, Bursztyn, Opal, Agat, Topaz.

Szafir

W pierwszej kolejności dokonaj zmian w pliku product-presentation-data.html. W narzędziu wyszukiwania wyszukaj frazę if unit.Id == unitId. Powinieneś znaleźć kilka wyników, jednak interesuje Cię tylko ten pierwszy. Tuż pod nim wklej poniższy fragment.

{% assign unitDimensions = unit.Dimensions-%}

Następnie wyszukaj frazę if unit.Default == true or unit.Id == null. Linia w kodzie, który znalazłeś powinna być około 10 linii pod tą, którą przed chwilą zmieniałeś. Tuż pod nią wklej poniższy kod.

{% assign unitDimensions = unit.Dimensions-%}

Następnie należy wyszukać frazę data-ratio. Znajdziesz prawdopodobnie dwa wyniki, jednak również interesuje Cię ten pierwszy. Pod linią, którą znajdziesz i która będzie rozpoczęta słowem <option powinieneś znaleźć linię {% endfor -%} a pod nią </select>. Pod linią </select> należy wpisać poniższy kod.

<input class="dimensions-lq" type="hidden" {% for unit in product.Units -%} {% assign dimensionsByUnitIndex = unit.Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByUnitIndex.Height}}|{{dimensionsByUnitIndex.Length}}|{{dimensionsByUnitIndex.Width}}" {% endfor -%}>

Potem w tym samym pliku wyszukaj frazę if activeProduct.Attributes[limitIndex]. Nad znalezionym wynikiem powinieneś widzieć {% if tableView -%} a powyżej </ul> oraz {% endif -%}. Nad linią {% endif -%} i poniżej linii {% endfor -%} wklej poniższy kod.

{% if activeProduct.Attributes.size < 4-%}
<li class="dimensions-height {% if unitDimensions == null or unitDimensions.Height == 0 -%} hidden-lq {% endif -%}">
<div class="name-ui">{{ translations.Height }}</div>
<div class="value-ui">{{unitDimensions.Height }} cm</div>
</li>
<li class="dimensions-length {% if unitDimensions == null or unitDimensions.Length == 0 -%} hidden-lq {% endif -%}">
<div class="name-ui">{{ translations.Length }}</div>
<div class="value-ui">{{unitDimensions.Length}} cm</div>
</li>
<li class="dimensions-width {% if unitDimensions == null or unitDimensions.Width == 0 -%} hidden-lq {% endif -%}">
<div class="name-ui">{{ translations.Width }}</div>
<div class="value-ui">{{unitDimensions.Width}} cm</div>
</li>
{% endif -%}

Teraz wyzukaj frazę downloads-ui. Nad znalezioną linią powinieneś znaleźć poniższy kawałek kodu.

</ul>
</div>

{% if product.Attachments[0] -%} Nad tagiem zamykającym </ul> wklej poniższy kod.

<li class="dimensions-height-lq {% if unitDimensions == null or unitDimensions.Height == 0 -%} hidden-lq {% endif -%}">
<div class="name-ui">{{ translations.Height }}</div>
<div class="value-ui height-value-lq">{{unitDimensions.Height }} cm</div>
</li>
<li class="dimensions-length-lq {% if unitDimensions == null or unitDimensions.Length == 0 -%} hidden-lq {% endif -%}">
<div class="name-ui">{{ translations.Length }}</div>
<div class="value-ui length-value-lq">{{unitDimensions.Length}} cm</div>
</li>
<li class="dimensions-width-lq {% if unitDimensions == null or unitDimensions.Width == 0 -%} hidden-lq {% endif -%}">
<div class="name-ui">{{ translations.Width }}</div>
<div class="value-ui width-value-lq">{{unitDimensions.Width}} cm</div>
</li>

Teraz przejdź do pliku init-ui1.js. Należy wyszukać frazę function loadChildsProps() . Pod pierwszą linijką (która będzie się zaczynać od słów var childs) należy wkleić poniższy kod.

if($('.child-lq.active-lq').index() != -1){
var childIndex = $('.child-lq.active-lq').data('child-index');
} else {
var childIndex = 0;
}
var childUnit = window.childs[childIndex].unit;
if($('.dimensions-lq').index() != -1) {
changeDimensions(childUnit);
}

Następnie wyszukaj frazę changePrices(child, index);. Nad znalezioną linią wklej poniższy kod.

var childUnit = $('.child-lq.active-lq select').val();
if($('.dimensions-lq').index() != -1) {
changeDimensions(childUnit);
}

W ostatnim kroku należy zaimplementować funkcję odpowiadającą za zmianę wymiarów w zależności od wybranej jednostki. W dowolnym miejscu w pliku (może być powyżej funkcji function changePrices(child, index), która znajduje się kilka linii poniżej) należy wkleić poniższy kod.

function changeDimensions(childUnit){
// dimensions
var selectedUnitDimensions = $('.dimensions-lq').attr('data-unit'+childUnit)
if(selectedUnitDimensions != '||' ){
var selectedUnitDimensionsArr = selectedUnitDimensions.split('|');
var height = selectedUnitDimensionsArr[0];
var length = selectedUnitDimensionsArr[1];
var width = selectedUnitDimensionsArr[2];
if(height != 0){
$('.height-value-lq').text(height + ' cm');
$('.dimensions-height-lq').removeClass('hidden-lq');
} else {
$('.dimensions-height-lq').addClass('hidden-lq');
}
if(length != 0){
$('.length-value-lq').text(length + ' cm');
$('.dimensions-length-lq').removeClass('hidden-lq');
} else {
$('.dimensions-length-lq').addClass('hidden-lq');
}
if(width != 0){
$('.width-value-lq').text(width + ' cm');
$('.dimensions-width-lq').removeClass('hidden-lq');
} else {
$('.dimensions-width-lq').addClass('hidden-lq');
}
}
}

Bursztyn

Pierwszym zmienianym plikiem będzie plik productdetails.html. Po kilku pierwszych linijkach kodu powinieneś zauważyć kod wyglądający w ten sposób.

    {% for u in _pd.Units -%}
{% if u.Default -%}
{% assign defaultUnitRatio = u.Ratio -%}
{% assign defaultUnitName = u.Name -%}
{% endif -%}
{% endfor -%}

Kod ten należy usunąć a wstawić poniższy.

{% assign unitsCount = _pd.Units | Size -%}
{% if unitsCount > 1 -%}
{% for u in _pd.Units -%}
{% if u.Default or u.Id == null -%}
{% assign defaultUnitRatio = u.Ratio -%}
{% assign defaultUnitName = u.Name -%}
{% assign dimensions = u.Dimensions -%}
{% endif -%}
{% endfor -%}
{% else -%}
{% assign dimensions = _pd.Units[0].Dimensions -%}
{% endif -%}

Następnie wyszukaj frazę if attr. Pod znalezioną linią powinieneś widzień linię {% endfor -%}. Pod tą linią należy wkleić poniższy kod.

<input class="dimensions-lq" type="hidden"
{% for unit in _pd.Units -%}
{% assign dimensionsByIndex = _pd.Units[forloop.index0].Dimensions  -%}
data-unit{{unit.Id}}="{{dimensionsByIndex.Height}}|{{dimensionsByIndex.Length}}|{{dimensionsByIndex.Width}}"
{% endfor -%}>
{% if dimensions.Height == 0 and dimensions.Width == 0 and dimensions.Length == 0 -%} {% assign noDimensions = true -%} {% endif -%}
<div class="dimensions {% if dimensions == null or noDimensions -%} hidden {% endif -%} ">
<div class="dimensions-height {% if dimensions.Height == 0 -%} hidden {% endif -%}"><dt>{{translations.Height}}</dt><dd class=" dimensions-height-value">{{dimensions.Height}} cm</dd></div>
<div class="dimensions-length {% if dimensions.Length == 0 -%} hidden {% endif -%}"><dt>{{translations.Length}}</dt><dd class=" dimensions-length-value">{{dimensions.Length}} cm</dd></div>
<div class="dimensions-width {% if dimensions.Width == 0 -%} hidden {% endif -%}"><dt>{{translations.Width}}</dt><dd class=" dimensions-width-value">{{dimensions.Width}} cm</dd></div>
</div>

Teraz przejdź do pliku js/details.js. Wyszukaj frazę if (prevPrice. Nad znalezioną linią wklej poniższy kod.

        var unitId = $('option:selected', this)[0].value;
var selectedDimension = $('.dimensions-lq').attr('data-unit'+unitId)
if(selectedDimension != '||' && selectedDimension != '0|0|0' ){
($('.dimensions').removeClass('hidden'))
var selectedDimensionArr = selectedDimension.split('|');
var height = selectedDimensionArr[0];
var length = selectedDimensionArr[1];
var width = selectedDimensionArr[2];

if(height != 0){ $('.dimensions-height-value').text(height + ' cm'); $('.dimensions-height').removeClass('hidden'); } else { $('.dimensions-height').addClass('hidden'); } if(length != 0){ $('.dimensions-length-value').text(length + ' cm'); $('.dimensions-length').removeClass('hidden'); } else { $('.dimensions-length').addClass('hidden'); } if(width != 0){ $('.dimensions-width-value').text(width + ' cm'); $('.dimensions-width').removeClass('hidden'); } else { $('.dimensions-width').addClass('hidden'); } } else{ ($('.dimensions').addClass('hidden')) }

Opal

Pierwszym zmienianym plikiem będzie plik productdetails.html. Po kilku pierwszych linijkach kodu powinieneś zauważyć kod wyglądający w ten sposób.

{% assign unitsCount = _pd.Units | Size -%}
{% if unitsCount > 1 -%}
{% assign defaultUnitRatio = _pd.Units[0].Ratio -%}
{% assign defaultUnitName = _pd.Units[0].Name -%}
{% endif -%}

Kod ten należy usunąć a wstawić poniższy.

{% assign unitsCount = _pd.Units | Size -%}
{% if unitsCount > 1 -%}
{% assign defaultUnitRatio = _pd.Units[0].Ratio -%}
{% assign defaultUnitName = _pd.Units[0].Name -%}
{% assign defaultUnitId = _pd.Units[0].Id-%}
{% for unit in product.Units -%}
{% if unit.Default or unit.Id == null -%}
{% assign dimensions = unit.Dimensions -%}
{% assign defaultUnitId = unit.Id-%}
{% endif -%}
{% endfor -%}
{% else -%}
{% assign dimensions = _pd.Units[0].Dimensions-%}
{% endif -%}

Następnie wyszukaj frazę if attr. Pod znalezioną linią powinieneś widzieć linię {% endfor -%}. Pod tą linią należy wkleić poniższy kod.

<input class="dimensions-lq" type="hidden"
{% for unit in _pd.Units -%}
{% assign dimensionsByIndex = _pd.Units[forloop.index0].Dimensions  -%}
data-unit{{unit.Id}}="{{dimensionsByIndex.Height}}|{{dimensionsByIndex.Length}}|{{dimensionsByIndex.Width}}"
{% endfor -%}>
{% if dimensions.Height == 0 and dimensions.Width == 0 and dimensions.Length == 0 -%} {% assign noDimensions = true -%} {% endif -%}
<div class="dimensions {% if dimensions == null or noDimensions -%} hidden {% endif -%} ">
<div class="dimensions-height {% if dimensions.Height == 0 -%} hidden {% endif -%}"><dt>{{translations.Height}}</dt><dd class=" dimensions-height-value">{{dimensions.Height}} cm</dd></div>
<div class="dimensions-length {% if dimensions.Length == 0 -%} hidden {% endif -%}"><dt>{{translations.Length}}</dt><dd class=" dimensions-length-value">{{dimensions.Length}} cm</dd></div>
<div class="dimensions-width {% if dimensions.Width == 0 -%} hidden {% endif -%}"><dt>{{translations.Width}}</dt><dd class=" dimensions-width-value">{{dimensions.Width}} cm</dd></div>
</div>

Teraz przejdź do pliku js/details.js. Wyszukaj frazę if (prevPrice. Nad znalezioną linią wklej poniższy kod.

//wymiary
var unitId = $('option:selected', this)[0].value;
var selectedDimension = $('.dimensions-lq').attr('data-unit'+unitId)
if(selectedDimension != '||' && selectedDimension != '0|0|0' ){
($('.dimensions').removeClass('hidden'))
var selectedDimensionArr = selectedDimension.split('|');
var height = selectedDimensionArr[0];
var length = selectedDimensionArr[1];
var width = selectedDimensionArr[2];

Agat

Pierwszym modyfikowanym plikiem w szablonie Agat będzie product-page.html. Po kilku pierwszych linijkach kodu, przed <section class="product-details"> należy wstawić poniższy fragment.

{% assign unitsCount = productD.Units | Size -%}
{% if unitsCount > 1 -%}
{% for u in productD.Units -%}
{% if u.Default or u.Id == null -%}
{% assign dimensions = u.Dimensions -%}
{% endif -%}
{% endfor -%}
{% else -%}
{% assign dimensions = productD.Units[0].Dimensions -%}
{% endif -%}

Następnie wyszukaj frazę if productD.UPC. Pod znalezioną linią powinieneś znaleźć linię zaczynającą się od < li a pod nią {% endif -%}. Pod tym fragmentem wklej poniższy kod.

<li class="dimensions-height {% if dimensions == null or dimensions.Height == 0 -%} hidden {% endif -%}"><span>{{ translations.Height }}</span> <span class="dimensions-height-value" >{{ dimensions.Height }} cm</span></li>
<li class="dimensions-length {% if dimensions == null or dimensions.Length == 0 -%} hidden {% endif -%}"><span>{{ translations.Length }}</span> <span class="dimensions-length-value" >{{ dimensions.Length }} cm</span></li>
<li class="dimensions-width {% if dimensions == null or dimensions.Width == 0 -%} hidden {% endif -%}"><span>{{ translations.Width }}</span> <span class="dimensions-width-value" >{{ dimensions.Width }} cm</span></li>

Kolejnym zmienianym plikiem będzie partials/product/product-popup.html. Wyszukaj frazę {{ unit.Id }}. Prawdopodobnie znajdziesz dwa wyniki, ale interesuje Cię ten drugi. Pod wyszukaną linią powinieneś widzieć linię {% endfor -%}. Pod nią należy wkleić poniższy kod.

<input class="dimensions" type="hidden"
{% for unit in product.Units -%}
{% assign dimensionsByIndex = unit.Dimensions  -%}
data-unit{{unit.Id}}="{{dimensionsByIndex.Height}}|{{dimensionsByIndex.Length}}|{{dimensionsByIndex.Width}}"
{% endfor -%}>

W ostatnim kroku przejdź do katalogu js/init.js. Wyszukaj frazę $(e.currentTarget).hasClass('attributeId'). Nad nią należy wkleić poniższy kod.

var unitId = $(e.currentTarget).next().val();
// dimensions
var selectedUnitDimensions = $('.dimensions').attr('data-unit'+unitId)
if(selectedUnitDimensions != '||' ){
var selectedUnitDimensionsArr = selectedUnitDimensions.split('|');
var height = selectedUnitDimensionsArr[0];
var length = selectedUnitDimensionsArr[1];
var width = selectedUnitDimensionsArr[2];

Topaz

Wskazówka

Poniższa instrukcja jest uniwersalna dla obu wariantów widoku szczegółów towaru w szablonie Topaz. Jeśli chcesz dodać obsługę wag w pierwszym wariancie, należy zmodyfikować pliki src/assets/elements/productDetails/product-details1/html.js oraz src/assets/elements/productDetails/product-details1/js.js. Natomiast jeżeli chcesz dodać obsługę wag w drugim wariancie, należy zmodyfikować plikisrc/assets/elements/productDetails/product-details2/html.js oraz src/assets/elements/productDetails/product-details2/js.js

Na początku zmodyfikuj plik html.js. Należy wyszukać frazę productDetails-js. Nad znalezioną linią wklej poniższy kod.

{% for unit in product.Units -%}
{% if unit.Default or unit.Id == null -%}
{% assign defaultUnitDimensions = unit.Dimensions -%}
{% endif -%}
{% endfor -%}

Następnie wyszukaj frazę if product.UPC. Pod znalezioną linią powinieneś znaleźć linię zaczynającą się od < li a pod nią {% endif -%}. Pod tym fragmentem wklej poniższy kod.

<li class="dimensions-height {% if defaultUnitDimensions == null or defaultUnitDimensions.Height == 0 -%} hidden {% endif -%}">
<span>{{ translations.Height }}</span>
<span class="height-value">{{defaultUnitDimensions.Height }} cm</span>
</li>
<li class="dimensions-length {% if defaultUnitDimensions == null or defaultUnitDimensions.Length == 0 -%} hidden {% endif -%}">
<span>{{ translations.Length }}</span>
<span class="length-value">{{defaultUnitDimensions.Length}} cm</span>
</li>
<li class="dimensions-width {% if defaultUnitDimensions == null or defaultUnitDimensions.Width == 0 -%} hidden {% endif -%}">
<span>{{ translations.Width }}</span>
<span class="width-value">{{defaultUnitDimensions.Width}} cm</span>
</li>
<input class="dimensions-lq" type="hidden"
{% for unit in product.Units -%}
{% assign dimensionsByUnitIndex = unit.Dimensions  -%}
data-unit{{unit.Id}}="{{dimensionsByUnitIndex.Height}}|{{dimensionsByUnitIndex.Length}}|{{dimensionsByUnitIndex.Width}}"
{% endfor -%}>

Następnie wuszukaj frazę else if ($('#supplyId').attr('data-clip'). Nad znalezioną linią wklej poniższy kod.

// dimensions
var unitId = $(e.currentTarget).next().val();
var selectedUnitDimensions = $('.dimensions-lq').attr('data-unit'+unitId);
if(selectedUnitDimensions != '||' ){
var selectedUnitDimensionsArr = selectedUnitDimensions.split('|');
var height = selectedUnitDimensionsArr[0];
var length = selectedUnitDimensionsArr[1];
var width = selectedUnitDimensionsArr[2];
if(height != 0){
$('.height-value').text(height + ' cm');
$('.dimensions-height').removeClass('hidden');
} else {
$('.dimensions-height').addClass('hidden');
}
if(length != 0){
$('.length-value').text(length + ' cm');
$('.dimensions-length').removeClass('hidden');
} else {
$('.dimensions-length').addClass('hidden');
}
if(width != 0){
$('.width-value').text(width + ' cm');
$('.dimensions-width').removeClass('hidden');
} else {
$('.dimensions-width').addClass('hidden');
}
}

Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Lista tłumaczeń:

Id: Height ,Tekst: Wysokość
Id: Length ,Tekst: Długość
Id: Width ,Tekst: Szerokość

Obsługa strony porównywania towarów w szablonie Szafir

W tym artykule dowiesz się jak dodać w szablonie Szafir stronę umożliwiającą porównywanie cech towarów.

Pierwszym modyfikowanym plikiem będzie __settings.liquid. Pierwsze dwie linijki pliku powinny wyglądać następująco:

{% case languageId %}
{% when '1' %}

Tuż pod nimi umieść kod odpowiadający za polskie tłumaczenia:

{% assign productsComparison = "Porównywanie towarów" -%}
{% assign compareProducts = "Pozwalaj na porównywanie towarów" -%}

Kolejne około 100-200 linii (w zależności od tego, jaką wersję teraz posiadasz) będzie zaczynało się od frazy {% assign ... . Następnie ujrzysz frazę {% else -%}, pod którą należy umieścić poniższy kod, odpowiadający za angielskie tłumaczenia.

{% assign productsComparison = "Products comparison" -%}
{% assign compareProducts = "Allow for products comparison" -%}

Wyszukaj również frazę #lg-settings-content a. Nad znalezioną linią powinieneć widzieć tag <script> a nad nim tag zamykający </div> (jeden lub kilka), a nad nim(i) tag zamykający </fieldset>. Pod tagiem </fieldset> należy umieścić poniższy blok kodu.

<fieldset>
	<legend>{{productsComparison}}</legend>

	<section>
		<h3 class="section-title">{{compareProducts}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="compareProducts" value="yes" id="compareProducts-yes" {%="" if="" settings.compareproducts="=" 'yes'="" %}="" checked="" endif="">
					<label class="label" for="compareProducts-yes">{{yesTranslation}}</label>
				</div>

				<div class="tcell">
					<input type="radio" name="compareProducts" value="no" id="compareProducts-no" {%="" if="" settings.compareproducts="=" 'no'="" %}="" checked="" endif="">
					<label class="label" for="compareProducts-no">{{noTranslation}}</label>
				</div>
			</div>
		</div>
	</section>
</fieldset>

Kolejnym modyfikowanym plikiem będzie product/product-presentation-data.html. Narzędziem wyszukiwania należy wyszukać frazę page-title-ui.Nad znalezioną linią należy wkleić poniższy kod.

{% assign isInComparison = false -%}
{% for itemId in customer.ComparisonToolItems -%}
    {% if itemId == product-presentation.Product.Id -%}
        {% assign isInComparison = true -%}
    {% endif -%}
{% endfor -%}

<div class="move-to-comparison-lq move-to-comparison-ui {% if customer.ComparisonToolItems == null or isInComparison == false-%} hidden-lq {% endif -%}">
	<div class="compare-items-lq compare-items-ui">
		{% for item in customer.ComparisonToolItems-%} 
			<span class="comparison-item-icon-ui"></span>
		{% endfor -%}
		{% for i in (customer.ComparisonToolItems.size..3)-%} 
			<span class="comparison-item-icon-ui available-ui"></span>
		{% endfor -%}
	</div>
	<a class="compare-ui btn-ui" href = "{{config.DefinedPages.ProductComparisonTool.Url}}">{{translations.Compare}}</a>
</div>

Następnie należy wyszukać frazę product.Description != "" or. Do znalezionego warunku należy dopisać or settings.compareProducts == 'yes'. Cały warunek może wówczas wyglądać następująco:

{% if product.Description != "" or product.Attachments[0] or reviewsExist or setsExist or product.Related[0] or settings.compareProducts == 'yes' -%}

Następnie wyszukaj frazę product-presentation-menu-container-ui. Nad znalezioną linią wklej poniższy kod.

{% if settings.compareProducts == 'yes' -%}
		{% assign elementsQuantity = elementsQuantity | Plus:1 -%}
	{% endif -%}

Około 3 linie poniżej powinieneś znaleźć listę ul o klasie product-presentation-menu-ui. W tagu otwierającym należy dopisać atrybuty data

data-add-to-compare-translations = "{{translations.AddToCompare}}" data-delete-from-compare-translations = "{{translations.DeleteFromCompare}}"

Cała linia kodu może wyglądać następująco:

<ul class="product-presentation-menu-ui product-presentation-menu-lq attached-lq {% if elementsQuantity > 2 -%} more-elements-lq {% endif -%}" data-add-to-compare-translations = "{{translations.AddToCompare}}" data-delete-from-compare-translations = "{{translations.DeleteFromCompare}}">

Następnie wyszukaj frazę translations.RelatedProducts. Pod znalezioną linią powinieneś widzieć:

{% endif -%}
</ul>

</ul> należy usunąć a zamiast tego tagu wkleić poniższy kod.

{% if settings.compareProducts == 'yes' and isInComparison == 'false' -%}
				<li class="add-to-comparison-lq add-to-comparison-ui">
					<i class="ti-panel"></i> <span class="no-on-mobile-ui">{{ translations.AddToCompare }}</span><span class="mobile-ui">{{ translations.Compare }}</span>
				</li>
			{% endif -%}
			{% if settings.compareProducts == 'yes' and isInComparison == 'true' -%}
				<li class="delete-from-comparison-lq delete-from-comparison-ui">
					<i class="ti-panel"></i> <span class="no-on-mobile-ui">{{ translations.DeleteFromCompare }}</span><span class="mobile-ui">{{ translations.Delete }}</span>
				</li>
			{% endif -%}
		</ul>
		<div class="hidden-lq add-to-compare-action-lq">
			<input type="hidden" name="__action" value="Product/ComparisonToolAdd"/>
			<input type="hidden" name="productId" value="{{ product.Id }}"/>
			<input type="hidden" name="url" value="{{ page.BaseHref }}{{ config.DefinedPages.ProductComparisonTool.Url }}"/>
		</div>
		<div class="hidden-lq delete-from-compare-action-lq">
			<input type="hidden" name="__action" value="Product/ComparisonToolDelete" />
			<input type="hidden" name="productId" value="{{ product.Id }}"/>
		</div>
		<input class="comparison-items-count-lq hidden-lq" data-items-count="{{ customer.ComparisonToolItems | Size}}">
		<div class="message-popup-background-ui after-adding-to-compare-popup-lq hidden-lq hide-lq container-to-hide-lq">
			<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-adding-to-cart-popup-container-lq">
				<button aria-label="hide-container" class="btn-pure-ui close-ui hide-container-lq">
					<i class="ti-close"></i>
				</button>

				<div class="box-ui product-added-to-compare-ui">
					<span class="va-mid-ui line-height-1-ui">
						<i class="va-mid-ui ti-check"></i>
						{{translations.AddedToCompare}}
					</span>
				</div>
				<div class="info-ui compare-info-ui">
					<div > {{translations.2to4products}} </div>
					<div class="items-ui compare-items-lq">
						{% for item in customer.ComparisonToolItems-%} 
							<span class="comparison-item-icon-ui"></span>
						{% endfor -%}
					</div>
					<div class="compare-button-ui">
						<a class="compare-ui btn-ui compare-button-lq {% if customer.ComparisonToolItems.size > 1 -%} hidden-lq {% endif -%}" href = "{{config.DefinedPages.ProductComparisonTool.Url}}">{{translations.Compare}}</a>
					</div>
				</div>
			</div>
		</div>
		<div class="message-popup-background-ui too-much-items-compare-popup-lq hidden-lq hide-lq container-to-hide-lq">
			<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-adding-to-cart-popup-container-lq">
				<button aria-label="hide-container" class="btn-pure-ui close-ui hide-container-lq">
					<i class="ti-close"></i>
				</button>

				<div class=" box-ui info-ui too-much-items-compare-ui ">
					<div > {{translations.TooMuchProductsInComparer}} </div>
				</div>
			</div>
		</div>

Teraz przejdź do pliku js/init-ui2.js. Należy w nim wkleić poniższy kod (można wkleić w pierwszej linii pliku).

//comparer functions 
var comparer = {
    addToComparison: function(e) {
        var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count');
        var deleteFromCompareTranslation = $('.product-presentation-menu-lq').data('delete-from-compare-translations');
        if(comparisonItemsCount < 4){
            var data = $('.add-to-compare-action-lq').find('input').serializeArray();
            data.push({name: "__csrf", value: __CSRF});
            $.post(null, data, function (result) {
                if (result.action.Result) {
                    $('.delete-from-comparison-lq').removeClass('hidden-lq');
                    $('.add-to-comparison-lq').addClass('hidden-lq');
                    comparisonItemsCount += 1;
                    $('.comparison-items-count-lq').data('items-count', comparisonItemsCount)
                    $('.move-to-comparison-lq').removeClass('hidden-lq');
                    $('.after-adding-to-compare-popup-lq').removeClass('hidden-lq');
                    itemsContent = '';
                    for( i=0; i<comparisonItemsCount; i++){
                        itemsContent += '<span class="comparison-item-icon-ui"></span>';
                    }	
                    for( i=comparisonItemsCount; i<4; i++){
                        itemsContent += '<span class="comparison-item-icon-ui available-ui"></span>';
                    }	
                    $('.compare-items-lq').html(itemsContent);
                    if($(window).width() <= 1279){
                        $('.product-presentation-menu-lq').slick('unslick');
                    }                     
                    $('.product-presentation-menu-lq li').last().remove();
                    $('.product-presentation-menu-lq').append('<li class="delete-from-comparison-lq delete-from-comparison-ui" ><i class="ti-panel"></i>' + deleteFromCompareTranslation + '</li>')
                    if(comparisonItemsCount > 1 ) {
                        $('.compare-button-lq').removeClass('hidden-lq');
                    }
                    if($(window).width() <= 1279){
                        window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false });
                    }                
                }
            });
        } else {
            $('.too-much-items-compare-popup-lq').removeClass('hidden-lq');
        }
    },

    deleteFromComparison: function(e){
        var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count');
        var data = $('.delete-from-compare-action-lq').find('input').serializeArray();
        data.push({name: "__csrf", value: __CSRF});
        var addToCompareTranslation = $('.product-presentation-menu-lq').data('add-to-compare-translations');
        $.post(null, data, function (result) {
            if (result.action.Result) {
                $('.delete-from-comparison-lq').addClass('hidden-lq');
                $('.add-to-comparison-lq').removeClass('hidden-lq');
                comparisonItemsCount -= 1;
                $('.comparison-items-count-lq').data('items-count', comparisonItemsCount);
                if(!comparisonItemsCount) {
                    $('.move-to-comparison-lq').addClass('hidden-lq');
                }
                itemsContent = '';
                for( i=0; i<comparisonItemsCount; i++){
                    itemsContent += '<span class="comparison-item-icon-ui"></span>';
                }	
                for( i=comparisonItemsCount; i<4; i++){
                    itemsContent += '<span class="comparison-item-icon-ui available-ui"></span>';
                }	
                $('.compare-items-lq').html(itemsContent);
                if($(window).width() <= 1279){
                    $('.product-presentation-menu-lq').slick('unslick');
                }                
                $('.product-presentation-menu-lq li').last().remove();
                $('.product-presentation-menu-lq').append('<li class="add-to-comparison-lq add-to-comparison-ui"><i class="ti-panel"></i>' + addToCompareTranslation + '</li>')
                if(comparisonItemsCount < 1 ) {
                    $('.compare-button-lq').addClass('hidden-lq');
                }
                if($(window).width() <= 1279){
                    window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false });
                } 
            } 
        });
    },

    deleteFromComparisonSite: function(e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        data.push({name: "__csrf", value: __CSRF});
        var id = $(e.currentTarget).find("input[name='productId']")[0].value;
        var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count');
        $.post(e, data, function (result) {
            if (result.action.Result) {
                comparisonItemsCount -= 1;
                if(comparisonItemsCount < 1 ) {
                    $('.compare-button-lq').addClass('hidden-lq');
                }
                location.reload();
            } 
        });
    },
    setCompareSlider: function(){
		var windowWidth = $(window).width();
		var amount = $('.comparison-items-count-lq').data('items-count');
		if ((windowWidth <= 1279 )) {
			$(".compare-icons-arrow-lq").removeClass('hidden-lq');
			$(".row-ui > .products-ui").addClass("comparer-slider-lq");
                var slider = $('.comparer-slider-lq').slick({
                    infinite: true,
                    slidesToShow: 2,
                    slidesToScroll:1,
                    draggable: false,
                    autoplay: false,
                    autoplaySpeed: 8000,
                    arrows:false,
                    swipe:false,                   
                    responsive: [
                        {
                            breakpoint: 1000,
                            settings: {
                                slidesToShow: 1,                               
                            }
                        }
                    ]
				});
				
                $(".itemPrev").on( "click", function() {
                    slider.slick("slickPrev").delay(500);
                    
                });
        
                $(".itemNext").on( "click", function() {
                    slider.slick("slickNext").delay( 500 );
                });
		}
		slider.slick('slickSetOption', 'infinite', false);
		var stickyTop = $('.comparer-header-ui .header-ui').offset().top;
		$(window).scroll(function() {
			var windowTop = $(window).scrollTop();
            if (stickyTop < windowTop) {
				$('.comparer-header-ui .header-ui').addClass('sticky-lq')
			} else {
				$('.comparer-header-ui .header-ui').removeClass('sticky-lq')
			}
		});
	}
}

Następnie wyszukaj frazę product-presentation-menu-lq.more-elements-lq. Znajdziesz instrukcję warunkową if:

if($('.product-presentation-menu-lq.more-elements-lq').index() != -1) {
    window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false });
}

Kod ten należy usunąć i wkleić poniższy:

if(($('.product-presentation-menu-lq.more-elements-lq').index() != -1) && !($('.product-presentation-menu-lq').hasClass('slick-initialized')) ){
            window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false });
        }
        if($('.comparer-lq').index() != -1) {
            comparer.setCompareSlider();
        }

Wyszukaj frazę function adjustCategoryMenuToUrlBar(). Nad znalezioną linią wklej poniższy kod.

$('body').on('click', '.add-to-comparison-lq', function (e) {
    comparer.addToComparison(e);
});

$('body').on('click', '.delete-from-comparison-lq', function (e) {
    comparer.deleteFromComparison(e);
});

$('body').on('click', '.remove-from-compare-site-lq', function(e){
    comparer.deleteFromComparisonSite(e);
});

Kolejnym modyfikowanym plikiem będzie comparison-tool.html. Należy wkleić do pliku poniższy kod.

{% extends '_layout.html' -%}

{% block pageContent -%}
{% include 'product/comparison.html' -%}
{% endblock -%}

Następnie w katalogu product należy utworzyć nowy plik i nazwać go comparison.html. Należy w nim umieścić poniższy kod.

{% assign productsInComparison = comparison-tool -%}
{% assign products = comparison-tool.Products -%}
{% assign attributes = comparison-tool.Attributes -%}

{% if comparison-tool.Products.size > 0-%}
<section class="container-ui comparer-header-ui">
    <input type="hidden" class="comparison-items-count-lq" data-items-count={{products.size}}>
    <div class="product-presentation-breadcrumbs-ui border-bottom-ui breadcrumbs-in-comparison-ui">
        {% include 'common/breadcrumbs.html' -%}
    </div>
    <div class="header-ui">
        <h1 class="page-title-ui compare-title-ui">{{translations.ProductsComparison}}</h1>
        <div class="icons-ui btn-pure-ui hidden-lq compare-icons-arrow-lq">
            <i class="itemPrev ti-angle-left"></i>
            <i class="itemNext ti-angle-right"></i> 
        </div>
    </div>
</section>
    <section class="container-ui comparer-ui comparer-lq">
    <div class="row-ui first-row-ui">
        <div class="column-ui property-ui white-space-ui"></div>
        <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
            {% for product in products -%}
            <div class="column-ui product-compare-info-ui">
                <div class="remove-from-compare-site-lq remove-ui">
                    <i class="ti-trash"></i>
                    {{translations.DeleteFromCompare}}
                    <input type="hidden" name="__action" value="Product/ComparisonToolDelete" />
                    <input type="hidden" name="productId" value="{{ product.Id }}" />
                </div>
                
                <div class="img-ui">
                        {% if product.ImageId == -1 -%}
                           <div class="no-image-compare-ui"><i class="ti-image no-image-ui"></i></div> 
                        {% else -%}
                            {{ product | Img:'large' }}
                        {% endif -%}
                </div>
                <div class="prod-name-ui">
                    <a href="{{ product.Url }}">{{product.Name }}</a>
                </div>
                <div class="prod-price-ui">
                    <p class="price-ui compare-price-ui value-ui">
                        {{product.Price }}
                    </p>
                    <p class="price-ui compare-price-ui">
                        {{ customer.Currency}}
                    </p>
                    <small class="price-label-ui compare-brutto-ui">{{translations.Brutto | Downcase}}</small>
                </div>
                <div class="add-to-cart-compare-ui">
                    <a class="add-to-cart-ui" href="{{ product.Url }}">
                        {% if customer.Cart.EditedOrderId -%}
                        <i class="ti-bag"></i>
                        {% else -%}
                        <i class="ti-shopping-cart"></i>
                        {% endif -%}

                        <span class="add-to-cart-label-ui add-to-cart-label-lq">

                            {% capture end -%} <span class="cart-name-lq"> {{ currentCartName }}</span>{% endcapture -%}
                            {% assign cartsAmount = customer.Carts | Size -%}
                            {% if customer.Cart.EditedOrderId or cartsAmount > 1 -%}
                            {% unless customer.Cart.EditedOrderId -%}
                            {{ translations.AddToCartSplittedWithName | Format: mid,end }}
                            {% else -%}
                            {% assign end = end | Prepend:mid -%}
                            {{ translations.AddToOrderSplitted | Format: end }}
                            {% endunless -%}
                            {% else -%}
                            {{ translations.AddToCartSplitted | Format: mid }}
                            {% endif -%}
                        </span>
                    </a>
                </div>
            </div>
        {% endfor -%}
    </div>
    </div>
    <section class="compare-section-ui">
        {% if config.Reviews.Enabled %}
        <div class="row-ui ">
            <div class="column-ui attr-name-ui property-ui">
                {{translations.Rating}}
            </div>
            <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
                {% for product in products -%}
                <div class="column-ui attr-value-ui stars-ui">
                    {% for i in (1..5) -%}
						{% if product.Rating >= i -%}
						<img src="css/img/star.svg" alt="star">
						{% else -%}
						<img src="css/img/star-o.svg" alt="star">
						{% endif -%}
                    {% endfor -%}
                    <span class="rating-count-ui">({{ product.RatingCount }})</span>
                </div>
                {% endfor -%}
            </div>
        </div>
        {% endif -%}
        <div class="row-ui ">
            <div class="column-ui attr-name-ui property-ui">
                {{translations.Availability}}
            </div>
            <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
                {% for product in products -%}
                <div class="column-ui attr-value-ui">
                    {{product.Availability.Text}}
                </div>
                {% endfor -%}
            </div>
        </div>
    </section>
    <section class="compare-section-ui">
        <div class="name-of-property row-ui border-bottom-ui"> {{translations.BasicInformation}} </div>
        <div class="row-ui ">
            <div class="column-ui attr-name-ui property-ui">
                {{translations.Manufacturer}}
            </div>
            <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
                {% for product in products -%}
                <div class="column-ui attr-value-ui">
                    {{product.Manufacturer.Name}}
                </div>
                {% endfor -%}
            </div>
        </div>
        <div class="row-ui">
            <div class="column-ui attr-name-ui property-ui">
                {{translations.Brand}}
            </div>
            <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
                {% for product in products -%}
                <div class="column-ui attr-value-ui">
                    {{product.Brand.Name}}
                </div>
                {% endfor -%}
            </div>
        </div>
        <div class="row-ui">
            <div class="column-ui attr-name-ui property-ui">
                {{translations.ManufacturerCode}}
            </div>
            <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
                {% for product in products -%}
                <div class="column-ui attr-value-ui">
                    {{product.ManufacturerCode}}
                </div>
                {% endfor -%}
            </div>
        </div>
        <div class="row-ui">
            <div class="column-ui attr-name-ui property-ui">
                {{translations.ProductCode}}
            </div>
            <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%}  ">
                {% for product in products -%}
                <div class="column-ui attr-value-ui">
                    {{product.Code}}
                </div>
                {% endfor -%}
            </div>
        </div>
        <div class="row-ui">
            <div class="column-ui attr-name-ui property-ui">
                {{translations.VatTax}}
            </div>
            <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
                {% for product in products -%}
                <div class="column-ui attr-value-ui">
                    {{product.VAT | ToInt}}%
                </div>
                {% endfor -%}
            </div>
        </div>
    </section>

    {% if attributes != null -%}
    <section class="compare-section-ui">

    <div class="name-of-property row-ui border-bottom-ui"> {{translations.TechnicalParameters}} </div>
        {% for i in attributes -%}
        <div class="row-ui">
            <div class="column-ui attr-name-ui property-ui">
                {{i}}
            </div>
            <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
                {% for product in products -%}
                <div class="column-ui attr-value-ui">
                    {% assign productAttr = product.Attributes[i]-%}
                    {% if productAttr.size == 0 -%}
                        -
                    {% else -%}
                        {% for attr in productAttr -%}
                            {% if attr != productAttr.last-%}
                                {{attr}},
                            {% else -%}
                                {{attr}}
                            {% endif -%}
                        {% endfor -%}
                    {% endif -%}
                </div>
                {% endfor -%}
            </div>
        </div>
        {% endfor -%}
    </section>
    {% endif -%}
</section>
{% else -%}
<section class="container-ui comparer-header-ui">
    <input type="hidden" class="comparison-items-count-lq" data-items-count={{products.size}}>
    <div class="product-presentation-breadcrumbs-ui border-bottom-ui breadcrumbs-in-comparison-ui">
        {% include 'common/breadcrumbs.html' -%}
    </div>
    <div class="header-ui">
        <h1 class="page-title-ui compare-title-ui">{{translations.ProductsComparison}}</h1>
    </div>
    <p>{{translations.NoProductsInComparer}}</p>
</section>
{% endif -%}

Teraz przejdź do katalogu css. W pliku desktop2.css w dowolnym miejscu wklej poniższy kod.

.move-to-comparison-ui {
  height: 80px;
  padding: 20px 13%;
  margin-top: 2px;
  width: 99.5vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #f6f6f6;
  display: flex; }
  @media (max-width: 1600px) {
    .move-to-comparison-ui {
      width: 99.3vw;
      padding: 20px 5%; } }
  .move-to-comparison-ui i {
    padding-right: 15px; }
  .move-to-comparison-ui .compare-items-ui .comparison-item-icon-ui {
    margin-right: 20px;
    width: 30px;
    height: 30px;
    margin-top: 5px; }

.comparison-item-icon-ui {
  width: 40px;
  height: 40px;
  margin-right: 30px;
  -webkit-mask: url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;
  mask: url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;
  background-color: black;
  display: inline-block; }
  .comparison-item-icon-ui:last-child {
    margin-right: 0; }
  .comparison-item-icon-ui.available-ui {
    background-color: #d2d2d2; }

.compare-ui {
  padding: 10px 0 10px 0;
  display: block;
  width: 300px;
  text-align: center;
  margin-left: 40px; }

.product-added-to-compare-ui {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding: 50px 80px 0 40px;
  background: {{settings.bgColor}}; }
  .product-added-to-compare-ui .ti-check {
    color: #68a204;
    font-size: 30px;
    margin-right: 10px; }
  .product-added-to-compare-ui + .info-ui {
    padding: 25px; }
    .product-added-to-compare-ui + .info-ui.compare-info-ui {
      text-align: center; }
    .product-added-to-compare-ui + .info-ui .compare-button-ui a {
      margin-left: auto;
      margin-right: auto; }
    .product-added-to-compare-ui + .info-ui .items-ui {
      width: 260px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      padding: 30px 0; }

.too-much-items-compare-ui {
  padding: 30px; }

.comparer-header-ui .header-ui {
  height: 70px; }

.delete-from-comparison-ui {
  color: #7FBA01;
  float: left; }
  .delete-from-comparison-ui i {
    padding-right: 5px; }

.add-to-comparison-ui {
  float: left; }
  .add-to-comparison-ui i {
    padding-right: 5px; }

.breadcrumbs-in-comparison-ui {
  width: 100%; }

.compare-title-ui {
  padding: 25px 0;
  margin: 15px 0 30px;
  font-size: 28px;
  color: {{settings.primaryColorFont}};
  line-height: 1.2; }

.comparer-ui {
  margin-bottom: 30px; }
  .comparer-ui .column-ui {
    margin-left: 35px; }
    .comparer-ui .column-ui.property-ui {
      margin-left: 0; }
  .comparer-ui .row-ui {
    display: flex; }
    .comparer-ui .row-ui .products-ui {
      display: flex;
      width: 80%; }
      .comparer-ui .row-ui .products-ui:last-child {
        margin-right: 0; }
      .comparer-ui .row-ui .products-ui .column-ui {
        width: 25%; }
        .comparer-ui .row-ui .products-ui .column-ui.stars-ui .rating-count-ui {
          position: relative;
          top: -2px; }
        .comparer-ui .row-ui .products-ui .column-ui.stars-ui img {
          width: 15px;
          height: 15px; }
      .comparer-ui .row-ui .products-ui.three-products-ui .column-ui {
        width: 33%; }
      .comparer-ui .row-ui .products-ui.two-products-ui .column-ui {
        width: 50%; }
  .comparer-ui .property-ui {
    min-width: 20%; }
  .comparer-ui .product-compare-info-ui {
    margin-bottom: 30px; }
    .comparer-ui .product-compare-info-ui .remove-ui {
      cursor: pointer;
      padding: 0 0 16px 0;
      color: #004B88;
      float: right; }
    .comparer-ui .product-compare-info-ui .img-ui {
      clear: both;
      height: 250px;
      width: 100%;
      text-align: center; }
      .comparer-ui .product-compare-info-ui .img-ui .no-image-compare-ui {
        padding-top: 70px; }
      .comparer-ui .product-compare-info-ui .img-ui img:not([src="css/img/alo.gif"]) {
        width: 100% !important;
        height: 200px !important;
        object-fit: contain !important; }
    .comparer-ui .product-compare-info-ui .prod-name-ui {
      color: #004B88;
      font-size: 18px;
      overflow: hidden;
      height: 30px;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .comparer-ui .product-compare-info-ui .prod-price-ui {
      display: flex;
      margin-top: 10px; }
      .comparer-ui .product-compare-info-ui .prod-price-ui .compare-price-ui {
        font-size: 22px;
        margin: 0; }
        .comparer-ui .product-compare-info-ui .prod-price-ui .compare-price-ui.value-ui {
          margin-right: 7px; }
      .comparer-ui .product-compare-info-ui .prod-price-ui .compare-brutto-ui {
        font-size: 12px;
        line-height: 2.5em;
        margin-left: 15px; }
    .comparer-ui .product-compare-info-ui .add-to-cart-compare-ui {
      width: 100%;
      display: block; }
      .comparer-ui .product-compare-info-ui .add-to-cart-compare-ui a, .comparer-ui .product-compare-info-ui .add-to-cart-compare-ui button {
        text-align: center;
        width: 100%;
        padding: 10px;
        min-height: auto;
        margin-top: 20px; }

.comparer-ui .name-of-property {
  font-size: 14px;
  font-weight: 600;
  background-color: white !important;
  padding: 7px;
  padding-left: 0;
  margin-top: 10px; }

.comparer-ui section.compare-section-ui .row-ui:nth-child(odd) {
  background-color: #f8f8f8; }

.comparer-ui .attr-name-ui {
  font-size: 14px;
  padding: 7px; }

.comparer-ui .attr-value-ui {
  font-size: 14px;
  width: 330px;
  padding: 7px;
  margin-right: 35px; }

.comparer-header-ui .sticky-lq {
  position: fixed;
  z-index: 10;
  width: 100%;
  top: 0;
  border-bottom: 1px solid {{settings.lightBorderColor}}; }

W pliku mobile.css należy na końcu pliku dodać poniższy kod.

 
@media only screen and (max-width: 1279px) {
.comparer-ui {
    padding: 0; }
    .comparer-ui .column-ui {
      width: 80% !important; }
    .comparer-ui .remove-ui {
      padding-top: 20px !important; }
    .comparer-ui .stars-ui img {
      display: inline-block; }
    .comparer-ui .name-of-property {
      display: none; }
    .comparer-ui .property-ui {
      border-right: 1px solid {{settings.lightBorderColor}};
      min-width: 20%;
      max-width: 20%; }
    .comparer-ui .first-row-ui {
      border-bottom: 1px solid {{settings.lightBorderColor}};
      border-top: 1px solid {{settings.lightBorderColor}}; }
  .comparer-header-ui {
    padding: 0; }
    .comparer-header-ui h1 {
      padding: 20px;
      margin-bottom: 0;
      font-size: 16px; }
    .comparer-header-ui .header-ui {
      padding-left: 20px;
      display: flex;
      height: 70px; }
      .comparer-header-ui .header-ui .icons-ui {
        width: 30%;
        display: flex;
        justify-content: space-between;
        margin: 20px auto 30px auto; } }

@media (max-width: 500px) {
  .comparer-ui .column-ui {
    width: 75% !important; }
  .comparer-ui .property-ui {
    min-width: 25% !important;
    max-width: 25% !important;
    overflow: scroll !important; } }

@media (max-width: 650px) {
  .move-to-comparison-ui .compare-items-ui .comparison-item-icon-ui {
    width: 15px !important;
    height: 15px !important;
    margin-right: 10px !important; }
  .move-to-comparison-ui .compare-ui {
    width: 50% !important;
    margin-left: 10px !important; } }

Lista tłumaczeń:

Id: DeleteFromCompare ,Tekst: Usuń z porównania
Id: AddToCompare, Tekst: Dodaj do porównania
Id: AddedToCompare, Tekst: Dodano do listy porównania
Id: 2to4products, Tekst: Możesz dodać od 2 do 4 produktów
Id: Rating, Tekst: Ocena
Id: BasicInformation, Tekst: Informacje podstawowe
Id: TechnicalParameters, Tekst: Parametry techniczne
Id: ProductsComparison, Tekst: Porównywanie towarów
Id: NoProductsInComparer, Tekst: Nie wybrano żadnych towarów do porównania
Id: TooMuchProductsInComparer, Tekst: Możesz dodać maksymalnie 4 produkty

Obsługa prezentacji wagi netto oraz wagi brutto towaru dla wskazanej jednostki miary

Wskazówka

W tym artykule dowiesz się jak zmodyfikować szablon, aby umożliwić przeliczanie i wyświetlanie wagi netto oraz wagi brutto towaru w zależności od wybranej jednostki.

Szafir

Na początku zmodyfikuj plik product/product-presentation-data.html. Należy znaleźć narzędziem wyszukiwania divy o klasie child-lq i dopisać atrybuty data z informacjami o wadze netto i brutto produktu w tagu otwierającym div (będą dwa takie divy). W pierwszym należy dopisać:

data-weight="{{ supplyProduct.Weight }}" data-netweight="{{ supplyProduct.NetWeight}}"

Cała linijka może wyglądać następująco:

<div class="attribute-button-ui last-lvl-ui {% if supply.ValueId == key -%} active-lq {% endif -%} table-row-ui child-lq child-reload-lq parent-container-reload-lq expandable-mechanism-container-lq {% if supplyProduct.AskForPrice -%} ask-for-price-child-lq {% endif -%} {% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%} higher-mobile-ui {% endif -%} {% if supplyProduct.SubtotalPreviousPrice != null and supplyProduct.SubtotalPreviousPrice > supplyProduct.SubtotalPrice -%} previous-with-units-ui {% endif -%}" data-url="{{ url }}?keys={{ dataKeys }}{% if unitId != null -%}&unit={{ unitId }}{% endif -%}" data-child-index="{{ forloop.index0 }}" data-supply-id="{{ supply.SupplyId }}" data-img="http:{{ page.BaseHref }}img/large/{{ supplyProduct.ImageId }}/.jpg" data-code="{{ supplyProduct.Code }}" data-weight="{{ supplyProduct.Weight }}" data-netweight="{{ supplyProduct.NetWeight}}">

W kolejnym divie należy dopisać

data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight}}"

Cała linijka może wyglądać następująco:

<div class="attribute-button-ui last-lvl-ui child-lq table-row-ui attributes-list-ui expandable-mechanism-container-lq" data-child-index="{{ forloop.index0 }}" data-weight="{{ product.Weight }}" >data-netweight="{{ product.NetWeight}}">

Następnie w tym samym pliku należy wyszukać po frazie translations.Weight element listy, który zawiera informacje o wadze produktu ( znajdziesz trzy takie elementy ). Będą one wyglądać w ten sposób:

{% if activeProduct.Weight != '' and activeProduct.Weight > 0 and attributesQuantity > 2 -%}
<li>
<div class="name-ui">{{ translations.Weight }}</div>
<div class="value-ui">{{ activeProduct.Weight | Normalize }}{{ translations.Kg }}</div>
</li>
{% endif -%}

Ten kod należy usunąć a następnie dodać poniższy (w obu znalezionych miejscach).


{% if activeProduct.Weight != '' and activeProduct.Weight > 0 -%}
<li>
<div class="name-ui">{{ translations.Weight }}</div>
<div class="value-ui weight-value-lq">{{ activeProduct.Weight | Normalize | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: 2 }}{{ translations.Kg }}</div>
</li>
{% endif -%}
{% if activeProduct.NetWeight != '' and activeProduct.NetWeight > 0 -%}
<li>
<div class="name-ui">{{ translations.NetWeight }}</div>
<div class="value-ui netweight-value-lq">{{ activeProduct.NetWeight | Normalize | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: 2 }}{{ translations.Kg }}</div>
</li>
{% endif -%}

W tym samym pliku trzeba wyszukać frazę data-unit-ratio-info="{{unitRatioInfo}}". Powinieneś znaleźć dwie linie w kodzie. W każdej z nich należy dodać jeszcze jeden atrybut data oraz klasę unit-ratio-lq:

class = "unit-ratio-lq" data-basic-unit-ratio="{{product.BasicUnitRatio}}"
</code >

Kolejnym krokiem będzie modyfikacja kodu w pliku js/init-ui1.js. Narzędziem wyszukiwania wyszukaj function saveChildsProps() . W funkcji saveChildProps() znajdziesz zainicjowane zmienne, których wartości pobierane są z atrubutów data. Pod nimi możemy dodać zmienne dotyczące wag.

var weight = $(this).data('weight');
var netweight = $(this).data('netweight');

A następnie:

if(typeof weight == 'string' && weight.indexOf(__decSep) !== -1){
weight = weight.replace(__decSep,'.');
weight = Number(weight);
}

if(typeof netweight == 'string' && netweight.indexOf(__decSep) !== -1){ netweight = netweight.replace(__decSep,'.'); netweight = Number(netweight); } W tej samej funkcji znajdziesz obiekt child. Należy do jego pól dopisać wagi:

var child = {
...
...
...
weight: weight,
netweight: netweight
};

Zaraz potem znajdziesz funkcję function loadChildsProps(). Pod linią:

var childs = $('.child-lq');

należy dopisać poniższy kod: var attributes = $('.product-attributes-lq'); if($('.child-lq.active-lq').index() != -1){ var childIndex = $('.child-lq.active-lq').data('child-index'); } else { var childIndex = 0; } if(attributes.length > 0) { changeWeights(childIndex); } Ostatnim krokiem będzie stworzenie funkcji przeliczającej wagi. W tym samym pliku należy wkleić poniższy kod (np. pod funkcją function changePrices(){ ... }) :

function changeWeights(index){
var basicUnitRatio = $('.unit-ratio-lq').data('basic-unit-ratio');
if(typeof(basicUnitRatio) == 'string' && basicUnitRatio.includes(',')){
basicUnitRatio = Number(basicUnitRatio.replace(',','.'));
}
if(window.childs[index]!=undefined){
var weight = window.childs[index].weight;
if(window.childs[index].ratio!=undefined){
weight = (weight * window.childs[index].ratio / basicUnitRatio).toFixed(2);
}
$('.weight-value-lq').text(weight.toString().replace('.',',') + 'kg');

var netweight = window.childs[index].netweight; if(window.childs[index].ratio!=undefined){ netweight = (netweight * window.childs[index].ratio / basicUnitRatio).toFixed(2); } $('.netweight-value-lq').text(netweight.toString().replace('.',',') + 'kg'); } }

Bursztyn i Opal

W powyższych szablonach należy najpierw zmodyfikować plik productdetails.html. W pierwszej kolejności wyszukaj sekcję (section) o klasie technical-info. Należy w niej dopisać atrybuty data, zawierające informacje o wagach produktu.

data-weight = "{{_pd.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{_pd.NetWeight  | ToString | Replace: config.DecimalSeparator, '.'}}"

Cała linijka może wówczas wyglądać następująco:

<section class="technical-info col-sm-6" data-weight = "{{_pd.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{_pd.NetWeight  | ToString | Replace: config.DecimalSeparator, '.'}}">

Zaraz pod tym znajdziesz element listy zawierający informacje o wadze:

{% if _pd.Weight <> 0 and _pd.Weight <> "" %}<dt>{{translations.Com_Weight}}</dt><dd class="weight">{{_pd.Weight|Normalize}} {{translations.Com_UoMKg}}</dd>{% endif %}

Ten fragment należy usunąć a wkleić poniższy zawierający informacje o wadze netto i brutto:

<div class="weight-div {% if _pd.Weight == 0 or _pd.Weight == '' -%} hidden {% endif -%}">
<dt>{{translations.Com_Weight}}</dt><dd class="weight"><span class="weight-value">{{_pd.Weight|Normalize}}</span> {{translations.Com_UoMKg}}</dd>
</div>
<div class="net-weight-div {% if _pd.NetWeight == 0 or _pd.NetWeight == '' -%} hidden {% endif -%}">
<dt>{{translations.NetWeight}}</dt><dd class="net-weight"><span class="net-weight-value">{{_pd.NetWeight|Normalize}}</span> {{translations.Com_UoMKg}}</dd>
</div>

Teraz przejdź do pliku js/ details.js. W pierwszych liniach kodu znajdziesz zainicjowane zmienne. Należy do nich dopisać również:

var technInfo = $('.technical-info');

Następnie wyszukaj frazę jednostka pomocnicza. Pod znalezionym komentarzem znajdziesz funkcję obsługującą zmianę elementu o id unitId. Pod linią zawierającą frazę prevPriceNode.data należy umieścić następujący kod:

//weight
var weight = technInfo.data('weight') / basicUnitRt * selectedRatio;
var netWeight = technInfo.data('netweight') / basicUnitRt * selectedRatio;

var weightNode = technInfo.find('.weight-value'); var netWeightNode = technInfo.find('.net-weight-value'); weightNode.text(weight); netWeightNode.text(netWeight); W ostatnim kroku narzędziem wyszukiwania znajdź funkcję function SetProduct(s,stock). Po kilku linijkach, przed instrukcją warunkową if (stock) umieść następujący kod:

basicUnitRt = cnt.data('basicunitrt');
selectedRt = cnt.data('selectedrt');
var selectedUnit = cnt.data('selectedunit');

// weight
technInfo.data('weight', s.Weight)
if(ifUnits){
det.find('.technical-info .weight-value').text(s.Weight * priceUnitRt / basicUnitRt);
} else{
det.find('.technical-info .weight-value').text(s.Weight);
}

if(s.Weight && s.Weight > 0){ $('.weight-div').removeClass('hidden'); } else { $('.weight-div').addClass('hidden'); } //net-weight technInfo.data('netweight', s.NetWeight); if(ifUnits){ det.find('.technical-info .net-weight-value').text(s.NetWeight * priceUnitRt / basicUnitRt); } else{ det.find('.technical-info .net-weight-value').text(s.NetWeight); } if(s.NetWeight && s.NetWeight > 0){ $('.net-weight-div').removeClass('hidden'); } else { $('.net-weight-div').addClass('hidden'); } Należy także usunąć z kodu w tym samym pliku linijkę

det.find('.technical-info .weight').text(s.Weight+' kg');

Agat

W pliku partials/product/product-popup.html należy znaleźć input o id supplyId (pierwszy znaleziony) i wkleić atrybuty data:

data-weight = "{{product.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{product.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}"

Cała linijka może wyglądać następująco:

<input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId" data-clip="1" data-parent-id="{{ product.Id }}" data-weight = "{{product.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{product.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}"/>

Następnie w tym samym pliku wyszukaj frazę {% if product.Units[1] -%} . Pod nią znajdziesz div o klasie input-group. Pod tagiem otwierającym div wklej następujący kod:

<input aria-label="initialWeight" type="hidden" name="initial-weight" value="{{ product.Weight }}"/>
<input aria-label="initialNetWeight" type="hidden" name="initial-netweight" value="{{ product.NetWeight }}"/>

Przejdź do pliku product-page.html. Należy wyszukać w nim div o klasie product-attributes. Wewnątrz niego znajdziesz input o nazwie "translations". Wklej do niego poniższy kod. data-netweight="{{ translations.NetWeight }}" Cała linijka może wyglądać następująco:

<input aria-label="translations" type="hidden" name="translations" data-vat="{{ translations.Pps_VAT }}" data-weight="{{ translations.Pro_Weight }}" data-netweight="{{ translations.NetWeight }}" data-symbol="{{ translations.Pro_ProductSymbol }}" data-upc="{{ translations.Pro_UPC }}">

Następnie, kilka linii poniżej w liście ul znajdź fragment:

{% if productD.Weight != '' -%}
<li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ productD.Weight }}{{ translations.Com_kg }}</span></li>
{% endif -%}

Należy go usunąć. Zamiast niego wklej poniższy fragment:

{% if productD.Weight != '' and productD.Weight != 0 -%}
<li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ productD.Weight | Normalize }} {{ translations.Com_kg }}</span></li>
{% endif -%}
{% if productD.NetWeight != '' and productD.NetWeight != 0 -%}
<li><span>{{ translations.NetWeight }}</span> <span class="net-weight-value">{{ productD.NetWeight | Normalize }} {{ translations.Com_kg }}</span></li>
{% endif -%}

Teraz przejdź do pliku js/init.js. Znajdziesz w nim warunek: if (spLast && spLast.Product) { , a kilka linijek poniżej:

det.find('#supplyId').attr('data-weight', spLast.Product.Weight);

Pod tą linijką należy dopisać obsługę wagi netto, czyli fragment:

det.find('#supplyId').attr('data-netweight', spLast.Product.NetWeight);

Kilkadziesiąt linii dalej znajdziesz warunek: if (s && s.Product) { Pod kodem

det.find('#supplyId').attr('data-weight', s.Product.Weight);

doklej

det.find('#supplyId').attr('data-netweight', s.Product.NetWeight);

W tym samym pliku znajdź funkcję changeValues: function(e) {. Wewnątrz instrukcji warunkowej: if ($(e.currentTarget).hasClass('unitId')) { pod koniec dopisz poniższy kod

//recalulate weight
if($('#supplyId').attr('data-weight')){
var calcWeight = Number(($('#supplyId').data('weight') /  basicRatio * ratio).toFixed(2));
} else {
var calcWeight = (Number($(e.currentTarget).parent().find('input[name="initial-weight"]').val().replace(',','.')) /  basicRatio * ratio).toFixed(2);
}
$('.weight-value').text(calcWeight + ' kg');

//recalulate netweight if($('#supplyId').attr('data-netweight')){ var calcNetWeight = Number(($('#supplyId').data('netweight') / basicRatio * ratio).toFixed(2)); } else { var calcNetWeight = (Number($(e.currentTarget).parent().find('input[name="initial-netweight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2); } $('.net-weight-value').text(calcNetWeight + ' kg'); Następnie wyszukaj komentarz reload product attributes i wklej poniższy kod pod zainicjowanymi zmiennymi

var basicRatio = Number($('input[name="basic-unit-ratio"]').val().replace(',', '.'));
var weight = $('#supplyId').attr('data-weight') / basicRatio * ratio;
var netWeight = $('#supplyId').attr('data-netweight') / basicRatio * ratio;
var netweightTrans = translations.data('netweight');

//weight if ((weight == '' || weight == 0) && ul.find('.weight-value').index() >= 0) { $('.weight-value').parent().remove(); } else if (weight != '' && weight != 0) { if (ul.find('.weight-value').index() >= 0) { $('.weight-value').text(Number(weight.toFixed(2)) + ' kg'); } else { ul.append('<li><span>' + weightTrans + '</span> <span class="weight-value">' + weight + ' kg</span></li>'); } } //net-weight if ((netWeight == '' || netWeight == 0) && ul.find('.net-weight-value').index() >= 0) { $('.net-weight-value').parent().remove(); } else if (netWeight != '' && netWeight != 0) { if (ul.find('.net-weight-value').index() >= 0) { $('.net-weight-value').text(Number(netWeight.toFixed(2)) + ' kg'); } else { ul.append('<li><span>' + netweightTrans + '</span> <span class="net-weight-value">' + netWeight + ' kg</span></li>'); } } Na koniec należy usunąć z kodu w pliku poniższy fragment:


if(weight == '' && ul.find('.weight-value').index() >= 0{
$('.weight-value').parent().remove();
} else if (weight != '') {
if(ul.find('.weight-value').index()>=0 {
$('.weight-value').text(weight + 'kg');
} else {
ul.append('<li><span>' + weightTrans + '</span> <span class="weight-value">' + weight +  'kg</span></li>');
}
}

Topaz

Wskazówka

Na początku zmodyfikuj plik src/assets/elements/productDetails/product-details(1 lub 2)/html.js. Wyszukaj input o id supplyId i wklej do niego atrybuty data: data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight }}" Następnie około 35 linijek poniżej znajdziesz instrukcję warunkową {% if product.Units[1] -%} a pod nią div o klasie input-group. Będą się tam znajdować inputy o nazwie initial-.... Należy dopisać jeszcze dwa takie elementy widoczne poniżej:

<input type="hidden" name="initial-weight" value="{{ product.Weight }}"/>
<input type="hidden" name="

initial-netweight" value="{{ product.NetWeight }}"/> Następnie wyszukaj div o klasie product-attributes. Tuż pod tagiem otwierającym znajdziesz input o nazwie translations. Należy dokleić do niego atrybut data: data-netweight = "{{ translations.NetWeight }} Kilka linii poniżej znajdziesz tag otwierający listę ul a w niej kawałek kodu wyglądający tak jak poniżej

{% if product.Weight != '' and product.Weight != 0 -%}
<li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ product.Weight }} {{ translations.Com_kg }}</span></li>
{% endif -%}

Tuż pod nim wklej poniższy kod:

{% if product.NetWeight != '' and product.NetWeight != 0 -%}
<li><span>{{ translations.NetWeight }}</span> <span class="net-weight-value">{{ product.NetWeight }} {{ translations.Com_kg }}</span></li>
{% endif -%}

Kolejnym krokiem jest modyfikacja pliku js.js (w tym samym katalogu). Narzędziem wyszukiwania wyszukaj frazę spLast.Product.Weight. Pod linijką, która ją zawiera wklej poniższy kod: form.find('#supplyId').attr('data-netweight', spLast.Product.NetWeight); Następnie wyszukaj frazę s.Product.Weight. Pod znalezioną linią wklej poniższy kod: form.find('#supplyId').attr('data-netweight', s.Product.NetWeight); Podobnie wyszukaj frazę $('.quantity-field').trigger('change'); Pod znalezioną linijką znajdziesz klamrę zamykającą } . Tuż pod nią wklej poniższy kod:

// weights
if($('#supplyId').index>0){
var weight = (Number($('#supplyId').attr('data-weight').replace(',', '.')) / basicRatio * ratio).toFixed(2);
var netweight = (Number($('#supplyId').attr('data-netweight').replace(',', '.')) / basicRatio * ratio).toFixed(2);
} else {
var weight = (Number($(e.currentTarget).parent().find('input[name="initial-weight"]').val().replace(',','.')) /  basicRatio * ratio).toFixed(2);
var netweight = (Number($(e.currentTarget).parent().find('input[name="initial-netweight"]').val().replace(',','.')) /  basicRatio * ratio).toFixed(2);
}
$('.weight-value').text(weight + 'kg');
$('.net-weight-value').text(netweight + 'kg');

Wyszukaj frazę reload product attributes. Powinieneś znaleźć taki komentarz. Pod nim wklej poniższe linijki: var netweight = $('#supplyId').attr('data-netweight'); var netweightTrans = translations.data('netweight'); Około 50 linii dalej znajdziesz linię wyglądającą następująco: if (symbol == '' && ul.find('.symbol-value').index() >= 0) { Nad nią należy wkleić poniższy kod:

if ((netweight == '' || netweight == 0) && ul.find('.net-weight-value').index() >= 0) {
$('.net-weight-value').parent().remove();
} else if (netweight != '' && netweight != 0) {
if (ul.find('.net-weight-value').index() >= 0) {
$('.net-weight-value').text(netweight + 'kg');
} else {
ul.append('<li><span>' + netweightTrans + '</span> <span class="net-weight-value">' + netweight + 'kg</span></li>');
}
}
// reload weights
if ($('.unitId.active').index() >= 0) {
var ratio = Number($('.unitId.active').next().attr('data-ratio').replace(',', '.'));
} else {
var ratio = Number($('input[name="basic-ratio"]').val().replace(',', '.'));
}
if ($('#supplyId').attr('data-weight') != '') {
var weight = (Number($('#supplyId').attr('data-weight').replace(',', '.')) / basicratio * ratio).toFixed(2);
$('.weight-value').text(weight + 'kg');
}

if ($('#supplyId').attr('data-netweight') != '') { var netweight = (Number($('#supplyId').attr('data-netweight').replace(',', '.')) / basicratio * ratio).toFixed(2); $('.net-weight-value').text(netweight + 'kg'); Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Lista tłumaczeń:

Id: NetWeight , Tekst: Waga netto

Wyświetlanie drugiego zdjęcia na liście towarów

W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.

Wskazówka

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

Wskazówka

Kod wykorzystany do przykładu należy do szablonu Opal

Uwaga

Do zrozumienia tego artykułu wymagana jest wiedza z zakresu HTML, CSS, JavaScript oraz Liquid

Pobranie numeru Id zdjęć

Pierwszym krokiem jest dodanie kodu odpowiadającego za sprawdzenie czy produkt, na który najechaliśmy myszką ma więcej niż jedno zdjęcie. W takim wypadu, pobieramy numery Id tych kolejnego ze zdjęć i osadzamy je w elemencie html, odpowiadającym za wyświetlanie się zdjęcia produktu.

Przyklad

Kod odpowiadający za wyświetlenie listy produktów oraz sprawdzenie, czy główne zdjęcie produktu istnieje.

{% for prod in productlist.Product-%}
  <div class="product-item {% if prod.ImageId == -1 -%} no-photo {% endif -%}">
    {% if prod.ImageId <> -1 -%}{{ prod | Img:'large' }}{% endif -%}
  </div>
{% endfor -%}

Gdzie prod jest przekazywanym w pętli for obiektem productlist.Products. Zwraca on informacje o aktualnie wyświetlonej liście produktów (w tym interesujący nas ImageId).

Odpowiednio dla reszty szablonów obiektami zwracającymi listę produktów są:

Szablon Topaz -- products
Szablon Agat -- productlist
Szablon Bursztyn -- productlist
Szablon Szafir -- products

Dodanie logiki

W celu sprawdzenia ilości dostępnych zdjęć dla danego produktu, zastosujemy następującą funkcje JavaScript (jQuery):

$('body').on('mouseenter', '.product-item', function () {
      var pItem = $(this);
      putPhoto(pItem);
});

Funkcja ta "nasłuchuje" momentu, w którym myszka wejdzie na zdjęcie i uruchamia kolejną funkcję, która odpowiada za umiejscowienie kolejnego zdjęcia w kodzie strony.

window.putPhoto = function (pItem) {
    var imgContainer = pItem.find('.product-item');
    var images = imgContainer.find('img');
    var imagesCount = images.length;
    if (pItem.data('loaded') == undefined) {
        $.get(path, { __collection: 'productdetails.Product' }, function (res) {
            if (imagesCount == 1) {
                var imagesCol = res.collection.Images;
                if (imagesCol.length > 1) {
                    pItem.addClass('hover');
                    pItem.data('loaded', 'true');
                    var img = imagesCol[1];
                    imgContainer.append('<img alt="" src="img/large/' + img.Id + '/.jpg"/>');
                }
            }
      }
}

Dodanie styli

Na końcu wystarczy dodać style w taki sposób,tak aby zdjęcia były wyświetlane za zmianę.

.product-item.hover img:nth-child(1) {
  display: block;
}
.product-item.hover img:nth-child(2) {
  display: none;
}
.product-item.hover:hover img:nth-child(1) {
  display: none;
}
.product-item.hover:hover img:nth-child(2) {
  display: block;
}

Powiększanie zdjęć w szczegółach towaru w szablonie Topaz

W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.

Wskazówka

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

Uwaga

<img alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">

W jej miejsce wklej następujący kod:

<img class="open-gallery" alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">

openGallery: function (e) {
var t = $(".product-details__image").slick("slickCurrentSlide");
var i = $(e.currentTarget).parents(".product-details__images");
i.addClass("opened-gallery");
i.append('<svg class="svgIcon close-gallery-button"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>');

$("body").addClass("modal-opened");
$(".open-gallery:not(.opened-gallery-switch)").addClass("opened-gallery-switch");
$(".product-details__image-list").addClass("slider-hidden");
$(".product-details__image").addClass("opened-gallery");
$(".product-details__image").slick("unslick");

this.setGallerySlider(t);
$(".draggable").css("top", "25%");
},
closeGallery: function (e) {
$(".product-details__images").removeClass("opened-gallery");
$(".product-details__image").removeClass("opened-gallery");
$(".open-gallery.opened-gallery-switch").removeClass("opened-gallery-switch");
$(e.currentTarget).remove();
$(".product-details__image-list").removeClass("slider-hidden");
$("body").removeClass("modal-opened");
$(".product-details__image").slick("unslick");
$(".draggable").css("top", "0");

this.setSlider();
},
setGallerySlider: function (t) {
$(".product-details__image").slick ({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
nextArrow: '<button type="button" aria-label="nextArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowRight"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',
prevArrow: '<button type="button" aria-label="prevArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowLeft"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',
accessibility: false,
dots: false,
});
$(".product-details__image").slick("slickGoTo", t, true);
},

W tym samym pliku za pomocą narzędzia wyszukiwania znajdź frazę var body = $('body'); a bezpośrednio pod nią wklej następujacy kod:

body.on("click", ".open-gallery:not(.opened-gallery-switch)", function(e) {
productDetailsFunctions.openGallery(e);
}),

$("body").on("click", ".close-gallery-button", function(e) {
productDetailsFunctions.closeGallery(e);
}),

Przejdź do pliku css\elements\product-deatils-1-g.css lub css\elements\product-deatils-2-g.css (w zależności od typu wyglądu). Na koncu pliku wklej następujący kod:

.close-gallery-button {
position: fixed;
right: 0;
top: 0;
background: transparent;
color: #656565;
z-index: 20;
border: 0;
font-size: 20px;
width: 50px;
height: 50px;
cursor: pointer;
}

.slider-hidden {
display: none;
}

.opened-gallery {
position: fixed;
display: flex;
z-index: 20;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #ffffff;
width: 100%;

.slick-next:last-child {
right: 20px;
}

.slick-next:first-child {
left: 20px;
}

.slick-next {
height: 35px;
width: 35px;
}

img { 
  max-height: none;
  }
}

Ostatnim krokiem jest przeście do pliku css\base_layout-g.css. Znajdź frazę body { i bezpośrednio pod wyszukaną linijką wklej następujacy kod:

 &.modal-opened {
overflow: hidden;
}

Obsługa atrybutów na liście towarów

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby z poziomu listy towarów dało się dodawać do koszyka towary z atrybutami.

Wskazówka

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

Szafir

W folderze products dodaj plik add-variants-to-cart-from-products-list.html i wklej do niego poniższy kod:

{% include 'common/date-format.html' -%}

{% assign product = product-presentation.Product -%}
{% assign url = page.Url -%}

{% comment -%}{% endcomment -%}
{% assign suppliesSize = product.Supplies.Supplies | Size -%}
{% if product.Supplies != null and suppliesSize != 0 -%}
	{% comment -%}{% endcomment -%}
	{% if page.QueryString contains 'keys' -%}
		{% assign queries = page.QueryString | Split:'&' -%}
		{% for query in queries -%}
			{% if query contains 'keys' -%}
				{% assign queryString = query | Split:'=' -%}
				{% assign joinedKeys = queryString[1] | Replace: '%2c', ',' -%}
				{% assign keys = joinedKeys | Split:',' -%}
			{% endif -%}
		{% endfor -%}
	{% else -%}
		{% if product.Supplies.Key != null -%}
			{% assign joinedKeys = product.Supplies.Key | Replace: '%2c', ',' -%}
			{% assign keys = joinedKeys | Split:',' -%}
		{% else -%}
			{% assign noParentSupply = product.Supplies.Supplies[0] -%}
			{% assign size = product.Supplies.AttributeNames | Size -%}
			{% for attribute in product.Supplies.AttributeNames -%}
				{% if forloop.index != 1 -%}
					{% assign noParentSupply = noParentSupply.Supplies[0] -%}
				{% endif -%}
				{% if forloop.index == size -%}
					{% assign joinedKeys = noParentSupply.Key | Replace: '%2c', ',' -%}
					{% assign keys = joinedKeys | Split:',' -%}
					{% assign noParentKey = true -%}
				{% endif -%}
		  {% endfor -%}
		{% endif -%}
	{% endif -%}

	{% comment -%}{% endcomment -%}
	{% assign supplies = product.Supplies.Supplies -%}
	{% for key in keys -%}
  	{% for supply in supplies -%}
  		{% if supply.ValueId == key -%}
				{% assign supplies = supply.Supplies -%}
				{% if supply.Key and product.Clip == true -%}
					{% assign supplyProduct = supply.Product -%}
				{% endif -%}
			{% endif -%}
		{% endfor -%}
  {% endfor -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if product.Clip or product.Batch -%}
	{% if product.Supplies != null and suppliesSize != 0 -%}
		{% assign suppliesAsNotSupplies = false -%}
	{% endif -%}
{% endif -%}
{% if suppliesAsNotSupplies == false and product.Clip -%}
	{% assign activeProduct = supplyProduct -%}
{% else -%}
	{% assign activeProduct = product -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if page.QueryString contains 'unit' -%}
	{% assign queries = page.QueryString | Split:'&' -%}
	{% for query in queries -%}
		{% if query contains 'unit' -%}
			{% assign queryString = query | Split:'=' -%}
			{% assign queriesSize = queryString | Size -%}
			{% if queriesSize > 1 -%}
				{% assign unitId = queryString[1] -%}
			{% else -%}
				{% assign unitId = null -%}
			{% endif -%}
			{% for unit in product.Units -%}
				{% if unit.Id == unitId -%}
					{% assign unitDimensions = unit.Dimensions-%}
					{% assign unitRatio = unit.Ratio -%}
					{% assign unitName = unit.Name -%}
					{% assign defaultUnit = unit.Default -%}
				{% endif -%}
		  	{% endfor -%}
		{% endif -%}
	{% endfor -%}
{% else -%}
	{% for unit in product.Units -%}
		{% if unit.Default == true or unit.Id == null -%}
			{% assign unitDimensions = unit.Dimensions-%}
			{% assign unitId = unit.Id -%}
			{% assign unitRatio = unit.Ratio -%}
			{% assign unitName = unit.Name -%}
			{% assign defaultUnit = unit.Default -%}
		{% endif -%}
  	{% endfor -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% assign noProductOnControlledStock = false -%}
{% if activeProduct.StockLevel.QuantityControl == true and activeProduct.StockLevel.Value == 0 -%}
	{% assign noProductOnControlledStock = true -%}
{% else -%}
	{% assign noProductOnControlledStock = false -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if usr.Authenticated == false and settings.notAuthStock == 'no' -%}
	{% assign showStock = false -%}
{% else -%}
	{% assign showStock = true -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if customer.Carts[1] or customer.Cart.EditedOrderId -%}
	{% assign inquiryExists = false -%}
	{% assign lastCartId = -1 -%}
	{% for cart in customer.Carts -%}
		{% if cart.Current -%}
			{% assign currentCartId = cart.Id -%}
			{% assign currentCartName = cart.Name -%}
		{% endif -%}
		{% if cart.Inquiry -%}
			{% assign inquiryExists = true -%}
			{% assign inquiryId = cart.Id -%}
		{% else -%}
			{% assign lastCartId = cart.Id -%}
		{% endif -%}
	{% endfor -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if product.Archival == false -%}
	{% if suppliesAsNotSupplies == false or activeProduct.AttributesPolyvalent[0] -%}
		{% if activeProduct.AttributesPolyvalent[0] -%}
			{% if activeProduct.AskForPrice == false -%}
				{% assign tableView = true -%}
			{% else -%}
				{% assign tableView = false -%}
			{% endif -%}
		{% else -%}
			{% assign tableView = true -%}
		{% endif -%}
	{% else -%}
		{% assign tableView = false -%}
	{% endif -%}
{% else -%}
	{% assign tableView = false -%}
{% endif -%}

{% if product.Batch -%}
	
{% elseif product.Clip -%}
	
{% else -%}
	
{% endif -%}

{% if activeProduct.Availability.Text != '' and product.Archival == false -%} {% include 'common/date-format.html' -%}

{{ translations.Availability }}: {{ activeProduct.Availability.Text }} {% if activeProduct.Availability.Date != null -%}({{ activeProduct.Availability.Date | Date:dateFormat }}){% endif -%}

{% endif -%} {% if product.Archival == false -%} {% unless noProductOnControlledStock and activeProduct.AskForPrice -%}

{% if tableView == false -%} {% unless customer.HidePrices == false and activeProduct.AskForPrice == true -%}

{% include 'product/amount-stepper.html' with activeProduct -%} {% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' %} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if defaultUnit == false and unitId != null -%}

1 {{unitName}} = {{unitRatio|DividedBy: product.BasicUnitRatio | Round: 4}} {{product.SaleUnit}}

{% endif -%} {% else -%} {% if product.BasicUnit != unitName -%}

1 {{unitName}} = {{unitRatio | Round: 4}} {{product.BasicUnit}}

{% endif -%} {% endif -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%}

{% endunless -%} {% endif -%} {% if activeProduct.Availability.Status == 3 -%} {% assign notifyMe = true -%} {% else -%} {% assign notifyMe = false -%} {% endif -%} {% if notifyMe == false -%} {% if product.Clip or product.Batch -%} {% assign supplies = product.Supplies.Supplies -%} {% for attribute in product.Supplies.AttributeNames -%} {% assign lvl = forloop.index -%} {% assign levelsQuantity = product.Supplies.AttributeNames | Size -%} {% if lvl != levelsQuantity -%}

{% assign key = keys[forloop.index0] -%} {% for supply in supplies -%} {% if supply.Key -%} {% assign dataKeys = supply.Key -%} {% else -%} {% assign childs = supply.Supplies -%} {% assign size = keys | Size -%} {% assign end = size | Minus: lvl -%} {% for lvl in (1..end) -%} {% for child in childs -%} {% if child.ValueId == childs[0].ValueId -%} {% unless child.Key -%} {% assign childs = child.Supplies -%} {% else -%} {% assign dataKeys = child.Key -%} {% endunless -%} {% break -%} {% endif -%} {% endfor -%} {% endfor -%} {% endif -%} {% if supply.ValueId == key -%} {% assign supplies = supply.Supplies -%} {% if supply.Key == joinedKeys -%} {% for keyVal in keys -%} {% endfor -%} {% endif -%} {% endif -%} {% endfor -%}

{% else -%}

{% if config.ENTERPRISE -%}

{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%}{{ translations.TotalPrice }}{% endunless -%}

{% else -%} {% if customer.Cart.SubtotalPrices -%}

{% else -%}

{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

{% endif -%}

{% assign key = keys[forloop.index0] -%} {% for supply in supplies -%} {% if supply.Key -%} {% assign dataKeys = supply.Key -%} {% else -%} {% assign childs = supply.Supplies -%} {% assign size = keys | Size -%} {% assign end = size | Minus: lvl -%} {% for lvl in (1..end) -%} {% for child in childs -%} {% if child.ValueId == childs[0].ValueId -%} {% unless child.Key -%} {% assign childs = child.Supplies -%} {% else -%} {% assign dataKeys = child.Key -%} {% endunless -%} {% break -%} {% endif -%} {% endfor -%} {% endfor -%} {% endif -%} {% if product.Clip -%} {% assign supplyProduct = supply.Product -%} {% elseif product.Batch -%} {% assign supplyProduct = product -%} {% endif -%} {% assign supplyStockLevel = supply.StockLevel -%}

{% if config.ENTERPRISE -%}

{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%} {% if supplyProduct.TotalPrice != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}

{{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% endunless -%} {% if supplyProduct.TotalPreviousPrice != null and supplyProduct.TotalPreviousPrice > supplyProduct.TotalPrice -%}

{{ supplyProduct.TotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}

{% endif -%}

{% if supplyProduct.SubtotalPrice != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}

{{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.SubtotalPreviousPrice != null and supplyProduct.SubtotalPreviousPrice > supplyProduct.SubtotalPrice -%}

{{ supplyProduct.SubtotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}

{% endif -%}

{% else -%} {% if customer.Cart.SubtotalPrices -%}

{% if supplyProduct.Price != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}

{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.PreviousPrice != null and supplyProduct.PreviousPrice > supplyProduct.Price -%}

{{ supplyProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}

{% endif -%}

{% else -%}

{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.PreviousPrice != null and supplyProduct.PreviousPrice > supplyProduct.Price -%}

{% endif -%}

{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

{{ translations.InStock }}:

{% if supplyStockLevel.ImageUrl != null -%} {% if supplyStockLevel.Type == 1 or supplyStockLevel.Type == 2 -%}

{% endif -%} {% elseif supplyStockLevel.Text != null and supplyStockLevel.Type == 3 -%} {{ supplyStockLevel.Text }} {% else -%} {{ supplyStockLevel.Value | Normalize }} {% endif -%}

{% endif -%}

{% if supplyProduct.StockLevel.QuantityControl == true and supplyProduct.StockLevel.Value == 0 -%} {% assign noSupplyProductOnControlledStock = true -%} {% else -%} {% assign noSupplyProductOnControlledStock = false -%} {% endif -%} {% if noSupplyProductOnControlledStock -%}

{% comment -%}{% endcomment -%}

{% elseif supplyProduct.AskForPrice == false and supplyProduct.Availability.Status != 3 -%} {% if product.Clip -%} {% include 'product/amount-stepper.html' with supplyProduct -%} {% elseif product.Batch -%} {% include 'product/amount-stepper.html' with supplyStockLevel -%} {% endif -%} {% endif -%}

{% assign unitRatioInfo = false -%} {% if product.Units[1] and settings.showUnitRateOnProductDetailsPage == 'yes' and settings.showUnitRateOnProductDetailsPageUnit == 'basic' and unitName != product.BasicUnit -%} {% assign unitRatioInfo = true -%} {% endif -%}

{% if config.ENTERPRISE and supplyProduct.TotalPrice == null and supplyProduct.SubtotalPrice == null -%} {% elseif supplyProduct.Price == null -%} {% endif -%} {% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}

1 {{unit.Name}} = {{unit.Ratio | DividedBy: unitRatio | Round: 4}} {{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

1 {{unit.Name}} = {{unit.Ratio | Round: 4}} {{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%} {% if config.ENTERPRISE and supplyProduct.TotalPrice == null and supplyProduct.SubtotalPrice == null -%} {% elseif supplyProduct.Price == null -%} {% endif -%}

{% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%} {% endif -%}

{% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%}

{% if supplyProduct.AttributesEditable[0] -%} {% for attrEditable in supplyProduct.AttributesEditable -%}

{{ attrEditable.Name }} * {% case attrEditable.Format -%} {% when 1 -%}

{% when 2 -%}

{% when 3 -%} {% when 4 -%}

{% endcase -%}

{% endfor -%} {% endif -%} {% if supplyProduct.AttributesPolyvalent[0] -%} {% for attrPolyvalent in supplyProduct.AttributesPolyvalent -%}

{{ attrPolyvalent.Name }} *

{% endfor -%} {% endif -%}

{% endif -%} {% if supply.ValueId == key -%} {% assign supplies = supply.Supplies -%} {% endif -%} {% assign dataKeys = dataKeys | Split:',' -%} {% for keyVal in dataKeys -%} {% endfor -%}

{% endfor -%}

{% endif -%} {% endfor -%} {% endif -%} {% endif -%} {% unless product.Clip or product.Batch -%} {% if activeProduct.Availability.Status == 3 -%} {% assign notifyMe = true -%} {% else -%} {% assign notifyMe = false -%} {% endif -%} {% if activeProduct.AttributesPolyvalent[0] and product.AskForPrice == false and product.Archival == false and notifyMe == false -%} {% for attribute in activeProduct.AttributesPolyvalent -%}

{% assign lvl = forloop.index -%} {% assign levelsQuantity = activeProduct.AttributesPolyvalent | Size -%} {% if lvl != levelsQuantity -%}

{% for value in attribute.Values -%} {% endfor -%} {% else -%}

{% if config.ENTERPRISE -%}

{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%}{{ translations.TotalPrice }}{% endunless -%}

{% else -%} {% if customer.Cart.SubtotalPrices -%}

{% else -%}

{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

{% endif -%}

{% if config.ENTERPRISE -%} {% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% endunless -%} {% if activeProduct.TotalPreviousPrice != null and activeProduct.TotalPreviousPrice > activeProduct.TotalPrice -%} {% assign previousPriceExists = true -%} {% endif -%} {% else -%} {% if customer.Cart.SubtotalPrices -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%} {% assign previousPriceExists = true -%} {% endif -%} {% else -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%} {% assign previousPriceExists = true -%} {% endif -%} {% endif -%} {% endif -%} {% for value in attribute.Values -%}

{% if config.ENTERPRISE -%}

{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}

{{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% endunless -%} {% if activeProduct.TotalPreviousPrice != null and activeProduct.TotalPreviousPrice > activeProduct.TotalPrice -%}

{{ activeProduct.TotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}

{% endif -%}

{% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}

{{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.SubtotalPreviousPrice != null and activeProduct.SubtotalPreviousPrice > activeProduct.SubtotalPrice -%}

{{ activeProduct.SubtotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}

{% endif -%}

{% else -%} {% if customer.Cart.SubtotalPrices -%}

{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%}

{{ activeProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}

{% endif -%}

{% else -%}

{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%}

{% endif -%}

{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

{{ translations.InStock }}:

{% if activeProduct.StockLevel.ImageUrl != null -%} {% if activeProduct.StockLevel.Type == 1 or activeProduct.StockLevel.Type == 2 -%}

{% endif -%} {% elseif activeProduct.StockLevel.Text != null and activeProduct.StockLevel.Type == 3 -%} {{ activeProduct.StockLevel.Text }} {% else -%} {{ activeProduct.StockLevel.Value | Normalize }} {% endif -%}

{% endif -%} {% assign attributeIndex = forloop.index0 -%}

{% include 'product/amount-stepper.html' with activeProduct -%}

{% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}

1 {{unit.Name}} = {{unit.Ratio | DividedBy: unitRatio | Round: 4}} {{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

1 {{unit.Name}} = {{unit.Ratio | Round: 4}} {{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%}

{% if activeProduct.AttributesEditable[0] -%} {% endif -%}

{% if activeProduct.AttributesEditable[0] -%}

{% for attrEditable in activeProduct.AttributesEditable -%}

{{ attrEditable.Name }} * {% case attrEditable.Format -%} {% when 1 -%}

{% when 2 -%}

{% when 3 -%} {% when 4 -%}

{% endcase -%}

{% endfor -%}

{% endif -%}

{% endfor -%}

{% endif -%}

{% endfor -%} {% endif -%} {% if product.Batch == null or product.Batch == false -%} {% if activeProduct.AttributesEditable != empty and activeProduct.AttributesPolyvalent == empty -%} {% for attribute in activeProduct.AttributesEditable -%}

{{ attribute.Name }} * {% case attribute.Format -%} {% when 1 -%} {% when 2 -%} {% when 3 -%} {% when 4 -%} {% endcase -%}

{% endfor -%} {% endif -%} {% endif -%} {% endunless -%} {% if activeProduct.Price != null and activeProduct.Availability.Status != 3 and activeProduct.AskForPrice == false -%} {% if settings.afterAddingToCart == 1 -%} {% capture redirectUrl -%}{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}{% endcapture -%} {% endif -%} {% unless joinedKeys == product.Supplies.Key and unitId == null -%} {% assign newQuery = true -%} {% capture dataUrl -%}{{ url }}?{% endcapture -%} {% if joinedKeys != product.Supplies.Key -%} {% capture dataUrl -%}{{ dataUrl }}keys={{ joinedKeys }}{% endcapture -%} {% endif -%} {% assign lastSign = dataUrl | Last -%} {% if unitId != null -%} {% if lastSign == '?' -%} {% capture dataUrl -%}{{ dataUrl }}unit={{ unitId }}{% endcapture -%} {% else -%} {% capture dataUrl -%}{{ dataUrl }}&unit={{ unitId }}{% endcapture -%} {% endif -%} {% endif -%} {% endunless -%} {% if tableView -%}

{% endif -%} {% if usr.Authenticated -%} {% unless tableView or config.B2B == false -%} {% endunless -%} {% endif -%} {% if canBuy -%} {% if usr.Authenticated -%} {% unless tableView or config.B2B == false -%} {% endunless -%} {% endif -%} {% if settings.redirectCustomer == 'yes' and product.MoreInfoUrl != '' -%} {{ translations.SeeMore }} {% else -%} {% endif -%} {% endif -%} {% if tableView -%}

{% endif -%} {% endif -%}

{% endunless -%} {% if usr.Authenticated -%} {% endif -%} {% if noProductOnControlledStock and tableView == false -%} {% assign noSimpleProductOnControlledStock = true -%} {% endif -%} {% if activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% if usr.Authenticated -%} {% endif -%} {% if tableView -%}

{% endif -%}

{% comment -%}{% endcomment -%}

{% if tableView -%}

{% endif -%} {% endif -%} {% if activeProduct.AskForPrice == true -%} {% if usr.Authenticated -%} {% unless activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% endunless -%} {% endif -%} {% if tableView -%}

{% endif -%}

{% comment -%}{% endcomment -%}

{% if tableView -%}

{% endif -%} {% if usr.Authenticated -%} {% unless activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% endunless -%} {% endif -%} {% endif -%} {% endif -%}

Następnie w pliku products/products-list-item.html wyszukaj frazę data-product-id. Linijkę z tą frazą trzeba zastąpić poniższym kodem:

Teraz w tym samym pliku (products/products-list-item.html) wyszukaj frazę product-code-lq. Linijkę z tą frazą trzeba zastąpić poniższym kodem:


            {% if settings.attributesQuantityOnQuickView > 0 or settings.showAllAttributesOnQuickView == 'true' -%}
                {% assign showAttributesOnQuickView = true -%}
            {% endif -%}
            {% assign attributesSize = product.AttributesList.Attributes | Size -%}
            {% if config.Products.ShowCode -%}{{product.Code}}{% endif -%}    
            {% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == "yes" and showAttributesOnQuickView and attributesSize > 0 -%}
                
                    {% assign attributeIndex = 1 -%}
                    {% if config.Products.ShowCode -%}{{product.Code}} | {% endif -%}  
                    {% for attribute in product.AttributesList.Attributes -%}
                        
                            {% assign valuesSize = attribute.Values | Size -%}
                            {% assign valueIndex = 1 -%}
                            {% for value in attribute.Values -%}
                                {{value.Value}}{% if valueIndex != valuesSize -%}, {% elseif attributeIndex != attributesSize -%} | {% endif -%}
                                {% assign valueIndex = valueIndex | Plus:1 -%}
                            {% endfor %}
                            {% assign attributeIndex = attributeIndex | Plus:1 -%}
                          
                    {% endfor %}
                
            {% endif -%}

Pozostając dalej w tym samym pliku (products/products-list-item.html) wyszukaj frazę expandable-lq. Linijkę, która jest poniżej trzeba zastąpić poniższym kodem:

{% if settings.attributesQuantityOnListView > 0 or settings.showAllAttributesOnListView == 'true' -%}
                        {% assign showAttributesOnListView = true -%}
                    {% endif -%}

{% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == "yes" and showAttributesOnListView -%}

{% assign attributesSize = product.AttributesList.Attributes | Size -%} {% assign attributeIndex = 1 -%} {% for attribute in product.AttributesList.Attributes -%} {% assign valuesSize = attribute.Values | Size -%} {% assign valueIndex = 1 -%}

{% for value in attribute.Values -%} {{value.Value}}{% if valueIndex != valuesSize -%}, {% endif -%} {% assign valueIndex = valueIndex | Plus:1 -%} {% endfor %}

{% assign attributeIndex = attributeIndex | Plus:1 -%} {% endfor %}

{% endif -%} Nadal w tym samym pliku (products/products-list-item.html) wyszukaj frazę choose-variant-ui. Linijkę z tą frazą trzeba zastąpić poniższym kodem:

Ostatnią zmianą w tym samym pliku (products/products-list-item.html) będzie dodanie poniższego kodu prawie na samym końcu pliku (linijkę nad ostatnim zamykającym divem):

{% assign attributesSize = product.AttributesList.Attributes | Size -%}
    {% if settings.attributesQuantityOnGridView > 0 or settings.showAllAttributesOnGridView == 'true' -%}
        {% assign showAttributesOnGridView = true -%}
    {% endif -%}
    {% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == "yes" and attributesSize > 0 and showAttributesOnGridView -%}

{% assign attributeIndex = 1 -%} {% for attribute in product.AttributesList.Attributes -%} {% assign valuesSize = attribute.Values | Size -%} {% assign valueIndex = 1 -%}

{% for value in attribute.Values -%} {{value.Value}}{% if valueIndex != valuesSize -%}, {% endif -%} {% assign valueIndex = valueIndex | Plus:1 -%} {% endfor %}

{% assign attributeIndex = attributeIndex | Plus:1 -%} {% endfor %}

{% endif -%} Następnie w pliku js/init-ui1.js wyszukaj frazę childs[childIndex]. Linijkę z tą frazą oraz warunek, który będzie pod nią zastąp poniższym kodem:

if(window.childs[childIndex]){
        var childUnit = window.childs[childIndex].unit;
        if($('.dimensions-lq').index() != -1) {
            changeDimensions(childUnit);
        }
    }

Pozostając w pliku js/init-ui1.js wyszukaj frazę $('[data-product-id]').data('product-id'). Linijkę z tą frazą zastąp poniższym kodem:

    if($(e.currentTarget).data('id') != undefined){
        var productId = $(e.currentTarget).data('id');
    } else {
        var productId = $('[data-product-id]').data('product-id');
    }

Teraz w tym samym pliku (js/init-ui1.js) wyszukaj frazę productsAddedToCart. Linijkę nad tą frazą zastąp poniższym kodem:

if($('.child-lq').index() != -1 || $('.choose-variant-lq').index() != -1){

Na samym końcu pliku js/init-ui2.js wklej poniższy kod:

function chooseVariantOnProductsList(e) {
    var url = $(e.currentTarget).data('url');
    $.get(url, {__template: 'products/add-variants-to-cart-from-products-list.html'}, function (result) {
        $('.add-variants-to-cart-from-products-list-popup-background-lq').remove();
        $('body').append(result.template);
        saveChildsProps();
    });
};

$('body').on('click', '.choose-variant-lq', function (e) {
    chooseVariantOnProductsList(e);
});

$('body').on('click', '.change-variant-on-products-list-lq', function (e) {
    chooseVariantOnProductsList(e);
});

$('body').on('click', '.remove-lq', function (e) {
    if($(e.currentTarget).parents('.container-to-remove-lq').length > 0){
        $(e.currentTarget).parents('.container-to-remove-lq').remove();
    } else {
        $(e.currentTarget).remove();
    }
});

$('body').on('click', '.stop-propagation-lq', function (e) {
    e.stopPropagation();
});

W pliku scss/globals/_globals-m.scss znajdź frazę expandable-ui i podmień ją wraz z jej zawartością na poniższy kod:

.expandable-ui{
      display: flex !important;
      flex-direction: column;
      .product-desc-ui{
        width: 100%;
        order: 2;
        margin: 0;
        &.with-attributes-ui{
          width: 100%;
        }
      }
      .attributes-ui, .product-attributes-listed-in-list-view-ui{
        margin: 40px 0 10px;
        width: auto;
        .f-left-ui{
          width: 120px;
        }
        .f-right-ui{
          width: calc(100% - 140px);
        }
      }
      .attributes-ui{
        margin-top: 10px;
      }
    }

Następnie na końcu tego samego pliku (scss/globals/_globals-m.scss) dodaj poniższy kod:

.add-variants-to-cart-from-products-list-popup-background-ui{
    .message-popup-ui{
      margin: 0;
      max-width: none;
      overflow: auto;
      padding: 0;
      .product-added-to-cart-ui{
        padding: 20px 60px 20px 20px;
        & + .info-ui{
          padding: 0;
        }
      }
    }
    .availability-ui{
      padding: 20px 20px 0;
    }
    .add-to-cart-ui{
      width: 100%;
      margin: 0;
    }
    .attribute-name-ui{
      &:not(.table-row-ui){
        color: $labelsColor;
        font-size: 12px;
        font-weight: 400;
        width: 100%;
        display: block;
        padding: 0 20px;
        line-height: 1;
        margin-bottom: 20px;
      }
      &.table-row-ui{
        margin: 20px 0;
        .table-cell-ui:not(.name-column-ui){
          display: none;
        }
        > div.name-column-ui{
          color: $labelsColor;
          font-size: 12px;
          font-weight: 400;
          width: 100%;
          display: block;
          padding: 0 20px;
          line-height: 1;
        }
      }
    }
    .attribute-button-ui{
      &.not-last-lvl-lq{
        margin: 0 -5px 0 20px;
      }
      &.last-lvl-ui{
        position: relative;
        background-color: $addToCartContainerBg;
        
        &:after{
          display: block;
          clear: both;
          content: '';
        }
        &.higher-mobile-ui{
          height: 140px;
        }
        &.previous-with-units-mobile-ui {
          height: 180px;
          .brutto-price-column-ui{
            top: 60px;
          }
          .unit-column-ui{
            top: 100px;
          }
        }
      }
      &.previous-with-units-ui {
        padding: 10px 0;
      }
      .expandable-lq.expanded-lq{
        position: fixed !important;
        left: 0 !important;
        top: 0;
        bottom: 0;
        height: auto !important;
        width: 100% !important;
        background: $formsBgColor;
        z-index: 102;
        .more-attributes-ui{
          padding: 20px;
          font-size: 14px;
          .ti-close{
            float: right;
            font-size: 20px;
          }
          label:not(.checkbox-ui):not(.radio-ui){
            font-size: 12px;
          }
          .attribute-editable-ui{
            width: 100%;
            margin: 0;
            input, select, .select-arrow-ui.no-error-ui{
              margin-bottom: 0;
            }
          }
        }
      }
    }
    .attributes-lq > .attribute-button-ui{
      margin: 0 0 20px 20px;
    }
    .name-column-ui{
      vertical-align: top;
      line-height: 1.2;
      font-size: 14px;
      padding: 20px;
      width: calc(100% - 225px);
    }
    .stock-column-ui{
      position: absolute;
      left: 20px;
      top: 48px;
      padding: 0;
      width: calc(100% - 280px);
      font-size: 12px;
      line-height: 1.3;
      .mobile-ui{
        color: $labelsColor;
      }
    }
    .quantity-column-ui{
      float: right;
      width: 120px;
      height: 109px;
      padding: 20px;
      margin-right: 0;
      position: relative;
      .change-quantity-ui{
        width: 40px;
        height: 35px;
        position: absolute;
        bottom: 20px;
      }
      .increment-ui{
        right: 20px;
        border-left: 1px solid $lightBorderColor;
      }
      [name="quantity"]{
        width: 80px;
        height: 35px;
      }
    }
    .netto-price-column-ui, .brutto-price-column-ui{
      position: absolute;
      right: 120px;
      line-height: 1;
      padding: 0;
      width: 125px;
      text-align: right;
      &.many-units-ui, &.no-stock-ui, &.many-units-ui.no-stock-ui{
        width: 125px;
      }
      .mobile-ui{
        color: $labelsColor;
        font-size: 10px;
      }
    }
    .netto-price-column-ui{
      font-size: 16px;
      top: 20px;
      .netto-ui{
        font-size: 16px;
        font-weight: 400;
      }
      .netto-mobile-ui{
        color: $nettoPrice;
      }
    }
    .brutto-price-column-ui{
      font-size: 14px;
      top: 45px;
    }
    &
    .unit-column-ui{
      position: absolute;
      right: 120px;
      padding: 0;
      line-height: 1;
      font-size: 12px;
      text-align: right;
      top: 69px;
      width: 125px;
      .select-background-ui{
        margin-right: 0;
      }
      .select-arrow-ui{
        margin-left: -25px;
        margin-right: 10px;
      }
    }
    .options-column-ui{
      position: absolute;
      top: 95px;
      padding: 0;
      left: 20px;
      width: auto;
      .change-arrow-title-lq{
        transform: none !important;
      }
      .ti-angle-down, .ti-angle-up{
        display: none;
      }
      .mobile-ui{
        font-size: 12px;
      }
    }
    .previous-price-ui {
      position:static !important;
    }
    .moblie-previous-ui {
      top: 58px !important;
    }
    .unit-previous-ui {
      top: 96px !important;
    }
    .change-mobile-paddings-ui{
      &.quantity-ui{
        padding: 20px;
      }
      &.attribute-editable-ui{
        padding: 0 20px 20px;
      }
    }
  }

Teraz w pliku scss/partials/_product-list.scss podmień całą jego zawartość na poniższy kod:

Wskazówka

W tym pliku było dużo zmian i dlatego podajemy go w całości. Przed zastąpieniem swojego kodu upewnij się, że nie nadpiszesz zmian wprowadzanych wcześniej przez siebie.

.product-list-ui {
  position: relative;
  .add-to-cart-ui {
    margin-top: 0;
  }
  .choose-cart-form-ui {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    line-height: 1.5em;
  }
  .product-link-ui {
    box-shadow: 0 3px 12px 0 transparent;
    transition: box-shadow $short-animations-time;
    &:hover {
      box-shadow: 0 3px 12px 0 $gridAndListHoverShadowColor;
    }
  }

  .suggested-price-products-list-ui {
    position:absolute;
    right:20px;
    padding:10px 20px;
    top:25%;
    .suggested-ui {
      font-size: 16px;
    }

    .suggested-price-ui {
      font-size: 20px
    }

    .suggested-previous-ui {
      text-decoration: line-through;
    }
  }

  .stepper-and-adding-ui:not(.has-attributes-link) {
    opacity: 0.999;
    z-index: 2;
  }
}

.products-navigation-ui {
  margin: 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid $lightBorderColor;
  .breadcrumbs-ui li {
    margin:0;
  }
  .sorting-views-container-ui {
    font-size: 1.3rem;
    .sorting-views-container-ui button {
      padding-top: 10px;
    }
  }
  .change-view-ui {
    padding-top: 10px;
    background: $viewButtonsBg;
    box-shadow: 0 0 1px #a5a5a5;
    margin-right: 10px;
    transition: border $short-animations-time;
    &:not(.btn-active-lq) {
      border:1px solid transparent;
    }
  }
}

.products-header-ui {
  display:none;
  z-index: 10;
  top:0;
  border: 1px solid $tableBorderColor;
  position:absolute;
  left: 0;
  right: 0;
  >* {
    display:block;
    float: left;
    height: $tableHeaderHeight;
    line-height: $tableHeaderHeight;
    padding-top: 0;
    padding-bottom: 0;
  }
  .stepper-and-adding-ui{
    padding:0;
    > div {
      width:100%;
    }
  }
  .add-to-cart-ui {
    padding: 0;
    float: left;
    width: 100%;
  }
  .choose-cart-form-ui {
    width: 100%;
  }
  .change-cart-arrows-ui {
    line-height: 1.5em;
    height: $tableHeaderHeight;
    width: $tableHeaderHeight;
    float: right;
  }
}

.product-item-ui, .products-header-ui {
  .price-ui {
    font-size:inherit;
  }
}

.product-item-ui {
  position:relative;
  display:block;
  color: $primaryColorFont;
  transition: box-shadow $short-animations-time, background $short-animations-time;
  .product-name-ui {
    color: $iconColors;
    margin-bottom:0;
    font-size: inherit;
  }
  .unit-name-ui {
    font-size:inherit;
  }
  .product-code-ui {
    color: $primaryColorFont;
  }
  .image-container-ui {
    display: -ms-inline-flexbox;
    display:inline-flex;
    width: $imageWidthOnList;
  }
  .price-ui, .old-price-ui {
    margin:0;
  }
  .price-ui {
    font-size: larger;
  }
  .old-price-ui {
    font-size: smaller;
    margin-bottom: 3px;
  }
  .stock-level-ui img {
    z-index:1;
    position:relative;
  }
  .stock-text-ui {
    display: block;
    line-height: 1em;
  }
  .stock-label-ui {
    margin-right:10px;
    font-size:small;
  }
  .stepper-and-adding-ui {
    padding:0;
    .add-to-cart-form-container-ui {
      display: inline-block;
    }
  }
  .btn-ui, button {
    position:relative;
    z-index:2;
  }
}

.choose-variant-icon-ui {
  font-size:2rem;
  padding-right: 15px;
}

/* quick shopping view */
.quick-shopping-view-lq {
  .message-bar-ui {
    padding-top: $tableHeaderHeight;
    position: relative;
    .close-ui {
      top: $tableHeaderHeight;
      color: $messageBarFont;
    }
    &[class*='hidden-lq'] {
      display: block !important;
      height: 0;
      padding-bottom: 0;
      z-index: -1;
      visibility: hidden;
    }
  }

  .message-bar-title-ui {
    font-weight: 500;
    font-size: 1.2em;
  }

  .product-name-ui {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
  }

  .product-validation-message-ui {
    margin-top: 0;
  }

  .pagination-page-ui {
    width: 100%;
    font-size: 0.9rem;
    padding-top: $tableHeaderHeight;
    &::after {
      display: block;
      clear: both;
      float: none;
      content: '';
    }
  }

  .products-header-ui, .product-item-ui {
    > *:not(.image-container-ui):not(.product-link-ui):not(.name-and-code-ui) {
      vertical-align: middle;
      width: 20%;
    }
    .name-and-code-ui {
      width: 40%;
      vertical-align: middle;
      &.without-stock {
        width: 60%;
      }
    }
  }

  &.prices-hidden-ui {
    &::after {
      display: block;
      clear: both;
      float: none;
      content: '';
    }
    .products-header-ui, .product-item-ui {
      > *:not(.product-link-ui) {
        float: left;
        width: 50% !important;
      }
    }
  }

  .products-header-ui {
    display: block;
  }

  .product-item-ui {
    display: -ms-flexbox;
    display:flex;
    align-items:center;
    &::after {
      display: block;
      clear: both;
      float: none;
      content: '';
    }
    > * {
      float: left;
      align-self:center;
    }
    .choose-variant-ui{
      position: relative;
      z-index: 2;
    }
  }

  .element-attached-lq.products-header-ui > *:not(.image-container-ui) {
    display: block;
    display: -ms-flexbox;
    display: flex;
    align-items:center;
    float: left;
    height: 60px;
    &.price-column-ui{
      display: inline-block;
    }
  }

  .image-container-ui, .product-desc-ui, .price-label-ui {
    display: none;
  }

  .product-code-ui{
    font-size: 14px;
    max-width: 100%;
    .code-ui.show-attributes-on-products-page-ui{
      display: none;
    }
    .product-attributes-listed-ui{
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .code-ui{
        display: inline-block;
      }
      &:not(.show-all-attributes-on-quick-view-ui) .last-quick-view-attribute-ui{
        & ~ span{
          display: none;
        }
        span{
          display: none;
        }
      }
    }
  }

  .product-code-ui, .product-flags-ui {
    display: inline-block;
    float: left;
  }

  .product-flags-ui {
    padding-left: 10px;
  }

  .product-item-ui {
    .add-to-cart-ui, .change-cart-arrows-ui, .choose-cart-form-ui {
      display: none;
    }
  }

  .stock-label-ui {
    display: none;
  }

  .price-column-ui {
    text-align: right;
    padding-right: 10%;
  }

  .expandable-mechanism-container-ui, .final-price-column-ui, .product-attributes-listed-in-grid-view-ui{
    display: none;
  }
}

/* list and grid views - common styles */
.list-view-lq , .grid-view-lq {
  .product-item-ui{
    &::after {
      content:'';
      display:block;
      clear:both;
    }
    .product-name-ui{
      font-size: 18px;
      font-weight: 500;
    }
    .product-code-ui{
      font-size: 14px;
      .product-attributes-listed-ui{
        display: none;
      }
    }
  }

  .stock-label-ui, .price-label-ui{
    color: $productsListLabels;
  }

  .product-flags-ui {
    position: absolute;
    left: 5px;
    top: 5px;
    width: $imageWidthOnList;
  }

  .name-and-code-ui {
    width: calc(100% - #{$priceColumnWidthOnList});
    float: left;
  }

  .product-code-ui {
    margin:12px 0px 20px 0;
    display: block;
    font-weight: 500;
  }

  .price-column-ui {
    width: $priceColumnWidthOnList;
    float: right;
    font-size: 1.3rem;
    padding-top: 15px;
    padding-right: 15px;
    text-align: right;
  }

  .unit-name-ui {
    width:140px;
  }

  .stock-level-ui {
    position:absolute;
    bottom:0;
    right:515px;
    bottom: 15px;
    > * {
      vertical-align:middle;
    }
  }

  &.prices-hidden-ui .stock-level-ui {
    right:0;
    bottom: 0;
    padding:15px;
  }

  .product-desc-ui {
    line-height:1.5em;
    max-height: calc(#{$linesOfDescription} * 1.5em);
    overflow: hidden;
  }

  .stepper-and-adding-ui .error-ui {
    top: -20px;
    bottom:auto;
  }
}


/* list view */
.list-view-lq {
  .product-item-ui {
    border: 1px solid $lightBorderColor;
    margin-bottom: 10px;
    padding-left: calc(#{$imageWidthOnList} + 40px);
    min-height: 150px;
  }
  .name-and-code-ui {
    padding-top: 20px;
    width: calc(100% - 20px);
  }
  .product-name-ui{
    color: $primaryColorFont;
  }
  .product-code-ui{
    color: $productsListLabels;
    height: 24px;
  }
  .image-container-ui {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 110px;
    width: $imageWidthOnList;
    i, .no-image-ui{
      font-size: 100px;
    }
  }
  .product-flags-ui{
    top: -22px;
    left: -21px;
  }
  .expand-data-ui{
    padding: 0;
  }
  .product-desc-ui, .product-attributes-listed-in-grid-view-ui{
    display: none;
  }
  .expandable-ui{
    .product-desc-ui{
      display: inline-block;
      width: calc(100% - 380px);
      max-height: none;
      margin: 50px 50px 20px 0;
      vertical-align: top;
      color: $productsListLabels;
      &.with-attributes-ui{
        width: calc(100% - 760px);
      }
    }
    .product-attributes-listed-in-list-view-ui{
      display: inline-block;
      width: 326px;
      vertical-align: top;
      margin: 50px 50px 20px 0;
      .clear-after-ui{
        margin-bottom: 10px;
      }
      .f-left-ui{
        width: 125px;
        color: $productsListLabels;
      }
      .f-right-ui{
        width: 161px;
      }
      &:not(.show-all-attributes-on-list-view-ui) .clear-after-ui.last-list-view-attribute-ui ~ .clear-after-ui{
        display: none;
      }
    }
    .attributes-ui{
      display: inline-block;
      width: 325px;
      vertical-align: top;
      margin: 50px 0 20px;
      .clear-after-ui{
        margin-bottom: 10px;
      }
      .f-left-ui{
        width: 125px;
        color: $productsListLabels;
      }
      .f-right-ui{
        width: 158px;
      }
      img{
        vertical-align: middle;
        max-height: 25px;
      }
    }
  }
  .stepper-and-adding-ui{
    position:absolute;
    top: 20px;
    right: 20px;
    height: 110px;
  }
  .add-to-cart-ui{
    padding: 5px 10px;
    min-height: auto;
    margin-top: 76px;
    i{
      font-size: 20px;
      margin-right: 5px;
    }
    .lower-text-ui{
      display: inline-block;
      font-size: 14px;
    }
    .bigger-text-ui{
      display: inline-block;
      margin-left: 5px;
      text-transform: lowercase;
    }
  }
  .editing-order-ui{
    .lower-text-ui, .bigger-text-ui{
      font-size: 12px;
    }
  }
  .choose-variant-ui{
    position: absolute;
    right: 0;
    width: 158px;
    bottom: 0;
    padding: 5px 0;
    z-index: 2;
    span{
      font-size: 12px;
    }
  }
  .choose-variant-icon-ui{
    font-size: 24px;
    padding-right: 10px;
  }
  .btn-ui{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 158px;
    font-size: 14px;
    text-align: center;
  }
  .final-price-column-ui{
    display: inline-block;
    position: absolute;
    width: 125px;
    right: 220px;
    top: 65px;
    .price-ui{
      margin-top: 10px;
      color: $primaryColorFont;
      font-weight: 700;
    }
  }
  .amount-stepper-ui{
    position: absolute;
    right: 190px;
    display: inline-block;
    width: 160px;
    bottom: 0;
  }
  .unit-name-ui{
    color: $productsListLabels;
    font-size: smaller;
    position: absolute;
    bottom: 40px;
    right: 222px;
  }
  .price-column-ui{
    display: inline-block;
    position: absolute;
    width: 125px;
    right: 600px;
    top: 100px;
    font-size: 1rem;
    padding: 0;
    text-align: left;
    .price-ui{
      font-size: larger;
      font-weight: 700;
    }
    .price-label-ui{
      position: absolute;
      top: -34px;
      left: 0;
    }
    .old-price-ui{
      position: absolute;
      top: -17px;
    }
  }
  .stock-level-ui{
    display: none;
  }
  @media only screen and (min-width: 1280px) and (max-width: 1599px) {
    .product-item-ui{
      padding-left: 200px;
      .product-code-ui{
        margin-top: 0;
      }
    }
    .image-container-ui{
      width: 160px;
    }
    .price-column-ui{
      right: 565px;
    }
    .final-price-column-ui{
      right: 210px;
    }
    .amount-stepper-ui{
      right: 175px;
    }
    .unit-name-ui{
      right: 208px;
    }
    .expandable-mechanism-container-ui{
      margin: 70px 0px 20px -180px;
    }
    .expandable-ui{
      .product-desc-ui{
        width: calc(100% - 340px);
        margin: 20px 20px 0 0;
      }
      .attributes-ui{
        margin: 20px 0 0 0;
        width: 315px;
        .f-right-ui{
          width: 156px;
        }
      }
    }
  }
}

/* grid view */
.grid-view-lq {
  .product-item-ui {
    width: 100% / $gridColumns;
    float: left;
    height: $gridItemHeight;
    padding: $gridItemSpacing;
    &:nth-child(even) {
      padding-right: $gridItemSpacing;
    }
    &:nth-child(odd) {
      padding-left: $gridItemSpacing;
      border-left: 1px solid $lightBorderColor;
    }
    &:not(:nth-last-child(-n+#{$gridColumns})) {
      border-bottom: 1px solid $lightBorderColor;
    }
    .product-name-ui{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .image-container-ui {
    width: 100%;
    height: 306px;
    img {
      margin-left:0;
    }
  }

  .name-and-code-ui {
    width: calc(100% - #{$priceColumnWidthOnList});
  }

  .product-desc-ui {
    display:none;
  }

  .price-column-ui {
    position:absolute;
    top:$gridItemSpacing;
    right:$gridItemSpacing;
    padding:0;
  }

  .stepper-and-adding-ui {
    text-align: right;
    position: absolute;
    padding:0;
    right: $gridItemSpacing;
    bottom: $gridItemSpacing;
  }

  .choose-variant-ui{
    position: relative;
    z-index: 2;
    font-size: 14px;
  }

  .amount-stepper-ui {
    justify-content:flex-end;
    display:flex;
  }

  .stock-level-ui {
    right: $gridItemSpacing;
    bottom: 200px;
  }

  .unit-name-ui {
    width: 100%;
    padding: 12px 0;
  }

  .stepper-and-adding-ui .error-ui {
    padding-right: 0;
    top: -30px;
    max-width: 100%;
    line-height: 1;
    text-align: right;
    white-space: normal;
  }

  .expandable-mechanism-container-ui, .final-price-column-ui{
    display: none;
  }

  .product-attributes-listed-in-grid-view-ui{
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 99%;
    background: $bgColor;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0 30px;
    transition: all ease 300ms;
    .clear-after-ui{
      margin-bottom: 10px;
    }
    .f-left-ui{
      width: 150px;
      color: $productsListLabels;
    }
    .f-right-ui{
      width: calc(100% - 150px);
    }
    &:not(.show-all-attributes-on-grid-view-ui) .clear-after-ui.last-grid-view-attribute-ui ~ .clear-after-ui{
      display: none;
    }
  }

  .product-attributes-listed-in-grid-view-ui:hover, .product-item-ui:hover .product-attributes-listed-in-grid-view-ui{
    height: auto;
    padding: 0 30px 20px;
    border-bottom: 1px solid $lightBorderColor;
    box-shadow: 0 14px 12px 0 $gridAndListHoverShadowColor;
  }
}

/* filters */
.product-filters-ui {
  width:100%;
  padding-top: 30px;

  .price-filter-ui {
    padding: 0 20px 20px 20px;
    > * {
      vertical-align: middle;
    }
    .price-label-ui {
      padding-bottom:10px;
    }
  }

  .filter-item-ui {
    border-bottom: 1px solid $lightBorderColor;
  }

  .filter-drop-ui {
    width: 100%;
    text-align: left;
    padding: 10px 20px;
    color: $primaryColorFont;
  }

  .filter-value-list-ui {
    padding: 0 20px 0 20px;
    overflow:hidden;
    + .filter-value-list-ui {
      transition:height $animations-time;
    }
  }

  .filter-drop-ui, .expandable-ui {
    background:transparent;
    transition:height $animations-time, background $animations-time;
  }

  .expanded-lq {
    background: $openedFiltersSectionBg;
  }

  .label-ui {
    line-height: 2.5em;
  }

  .show-more-ui {
    font-size:0.9rem;
    float: right;
  }

  .filters-apply-button-ui {
    position:fixed;
    bottom:0;
    left:0;
    width: $category-column-width;
    height: $filtersButtonHeight;
  }

  .price-range-ui input {
    max-width:28%;
  }
}

.selected-filters-ui {
  margin-bottom:20px;
}

.selected-filter-item-ui {
  display: inline-block;
  border: 1px solid $lightBorderColor;
  padding: 7px 14px;
  background: $selectedFilterButtonBg;
  color: $primaryColorFont;
  .filter-delete-ui {
    margin-right: 7px;
  }
  &.search-phrase-item-ui:hover {
    background: $searchPhraseButtonHover;
    color: $primaryColorFont;
  }
}

.search-phrase-mark-ui, .search-phrase-item-ui {
  background: $searchPhraseMark;
}

.add-variants-to-cart-from-products-list-popup-background-ui{
  cursor: pointer;
  z-index: 149;
  .message-popup-ui{
    width: auto;
    max-width: 80vw;
    cursor: default;
  }
  .attribute-button-ui{
    background-color: $attributesButtonBg;
    color: $attributesButtonFont;
    border: 1px solid $lightBorderColor;
    padding: 10px;
    transition: all 300ms ease;
    &:not(.last-lvl-ui){
      &:hover, &.active-lq{
        border: 1px solid $primaryColor;
      }
    }
    &.active-lq{
      cursor: default;
    }
    &.last-lvl-ui{
      padding: 0;
      cursor: default;
    }
  }
  .table-ui{
    display: block;
    border: none;
    margin-top: 20px;
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
  }
  .table-row-ui{
    display: block;
    cursor: pointer;
  }
  .table-cell-ui{
    display: inline-block;
    margin-right: -4px;
    width: 11%;
    vertical-align: middle;
    @media only screen and (min-width: 1830px) {
      width: 15%;
    }
  }
  .attribute-name-ui{
    margin-top: 20px;
    background-color: transparent;
    cursor: auto;
    font-weight: 700;
    > div {
      font-weight: normal;
      &.name-column-ui{
        font-weight: 700;
      }
    }
  }
  .attributes-list-ui{
    cursor: auto;
    border: 1px solid $lightBorderColor;
    &:hover{
      cursor: auto;
      border: 1px solid $lightBorderColor;
    }
  }
  .name-column-ui.solo-price-ui{
    width: 34%;
  }
  .brutto-price-column-ui, .netto-price-column-ui{
    width: 17%;
    &.many-units-ui{
      width: 17%;
    }
    &.no-stock-ui{
      width: 24%;
    }
    &.many-units-ui.no-stock-ui{
      width: 21%;
    }
  }
  .brutto-price-column-ui.many-units-ui{
    width: 16%;
  }
  .previous-price-ui {
    position:absolute;
    text-decoration: line-through;
    font-size:10px;
    line-height:10px;
    color: $primaryColorFont;
    &.suggested-retail-price-ui{
      text-decoration: none;
    }
  }
  .brutto-ui, .netto-ui{
    font-weight: 700;
  }
  .netto-ui{
    font-size: 21px;
    color: $nettoPrice;
  }
  .stock-column-ui{
    width: 13%;
  }
  .unit-column-ui{
    width: 13%;
  }
  .many-units-ui{
    width: 18%;
    @media only screen and (min-width: 1830px) {
      width: 14%;
    }
  }
  .quantity-column-ui{
    width: 19%;
    .change-quantity-ui{
      width: 30px;
      height: 30px;
    }
    [name="quantity"]{
      width: 40px;
      height: 30px;
    }
  }
  .options-column-ui{
    width: 44px;
    button{
      padding: 0;
      &.no-animation-lq{
        transition:none;
      }
      &.cant-toggle-lq{
        cursor: default;
        color: $lightBorderColor;
      }
    }
  }
  .select-background-ui select{
    padding: 3px 40px 3px 10px;
  }
  .more-attributes-ui{
    padding: 0 10px 10px;
    .attribute-editable-ui{
      vertical-align: top;
      margin: 0 10px 0 0;
      width: 180px;
      .select-background-ui, input{
        width: 100%;
        margin-top: 3px;
      }
    }
  }
}

W pliku __settings.liquid na samym końcu polskich tłumaczeń dodaj poniższy kod:

{% assign attributesOnProductsPage = "Atrybuty na listach towarów" -%}
{% assign showAttributesOnProductsPage = "Prezentuj atrybuty na listach towarów" -%}
{% assign attributesQuantityOnQuickView = "Ilość prezentowanych atrybutów w widoku Szybkie zakupy" -%}
{% assign attributesQuantityOnListView = "Ilość prezentowanych atrybutów w widoku Lista" -%}
{% assign attributesQuantityOnGridView = "Ilość prezentowanych atrybutów w widoku Kafelki" -%}
{% assign all = "wszystkie" -%}
{% assign multiVariantProducts = "Towary wielowariantowe" -%}
{% assign multiVariantProductsInfo = "Pozwalaj na zakup towarów wielowariantowych z listy towarów" -%}

Dalej w pliku __settings.liquid na samym końcu angielskich tłumaczeń dodaj poniższy kod:

{% assign attributesOnProductsPage = "Attributes on products page" -%}
{% assign showAttributesOnProductsPage = "Show attributes on products page" -%}
{% assign attributesQuantityOnQuickView = "Attributes quantity on Quick shopping view" -%}
{% assign attributesQuantityOnListView = "Attributes quantity on List view" -%}
{% assign attributesQuantityOnGridView = "Attributes quantity on Grid view" -%}
{% assign all = "all" -%}
{% assign multiVariantProducts = "Multivariant products" -%}
{% assign multiVariantProductsInfo = "Allow adding to cart multivariant products on products list" -%}

Następnie w tym samym pliku (__settings.liquid) dodaj analogicznie do innych opcji poniższy kod:

Teraz w tym samym pliku (__settings.liquid) w sekcji ze skryptami dodaj poniższy kod:

	if($('#showAttributesOnProductsPage-yes').prop('checked')){
		$('.attributesQuantitySections').show();
	} else {
		$('.attributesQuantitySections').hide();
	}

	$('[name=showAttributesOnProductsPage]').on('change', function(){
		if($('#showAttributesOnProductsPage-yes').prop('checked')){
			$('.attributesQuantitySections').show();
		} else {
			$('.attributesQuantitySections').hide();
		}
	});

Obsługa zawężania punktów Poczty Polskiej do określonego typu punktów

Wskazówka

Obsługa atrybutów na liście towarów

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwać w nim zawężanie punktów Poczty Polskiej do określonego typu punktów.

Wskazówka

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

Szafir

W pliku js/collection-points.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę:

data:el.data('pointdata')

Następnie w pliku order/delivery-partials/collection-points.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę:

data-pointdata="{{ order.SelectedDelivery.CollectionPointMapData | H }}"

Agat

W pliku js/collection-points.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę

data:el.data('pointdata')

Następnie w pliku partials/cart/collection-points.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę:

data-pointdata="{{ cart.SelectedDelivery.CollectionPointMapData | H }}"

Bursztyn

W pliku js/collectionpoints.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę:

data:el.data('pointdata')

Następnie w pliku order/cart.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę

data-pointdata="{{ cart.SelectedDelivery.CollectionPointMapData | H }}"

Opal

W pliku js/collection-points.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę:

data:el.data('pointdata')

Następnie w pliku order/cart.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę:

data-pointdata="{{ cart.SelectedDelivery.CollectionPointMapData | H }}"

Topaz

W pliku js/collectionpoints.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę:

data:el.data('pointdata')

Następnie w pliku static-elements/cart/cart.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę:

data-pointdata="{{ cart.SelectedDelivery.CollectionPointMapData | H }}"

Obsługa dodatkowych danych teleadresowych

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwać w nim dodatkowe dane teleadresowe.

Wskazówka

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

Szafir

W pliku common/address-form.html wyszukaj frazę {% if addressVisible -%}. Wszystko nad linijką z tą frazą zamień na ten kod:


{% assign emailReadonly = false -%}
{% assign emailRequired = false -%}
{% assign TINTooltipVisible = false -%}

{% if include contains 'retail' or include == 'company' -%}
	{% if include == 'company' -%}
		{% assign chosenType = config.Registration.Company -%}
		{% assign company = true -%}
		{% assign TINVisible = true -%}
		{% assign tin = customer.TIN -%}
		{% assign vateu = customer.VATEU -%}
		{% assign countryISOCode = config.Countries[0].ISOCode -%}
	{% else -%}
		{% assign chosenType = config.Registration.Retail -%}
		{% if include contains '=' -%}
			{% assign includeArr = include | Split:'=' -%}
			{% assign countryISOCode = includeArr[1] -%}
		{% else -%}
			{% assign countryISOCode = config.Countries[0].ISOCode -%}
		{% endif -%}
		{% assign countryChangeReload = true -%}
		{% assign dataContainer = '.sign-up-address-lq' -%}
		{% assign dataInclude = 'retail=' -%}
	{% endif -%}
	{% assign addressVisible = chosenType.AddressVisible -%}
	{% assign addressRequired = chosenType.AddressRequired -%}
	{% assign phoneVisible = chosenType.PhoneVisible -%}
	{% assign phoneRequired = chosenType.PhoneRequired -%}
	{% assign address = customer.Address -%}
{% elseif include contains 'add-da' -%}
	{% if customer.Company -%}
		{% assign company = true -%}
		{% assign TINVisible = false -%}
	{% endif -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = true -%}
	{% assign includeArr = include | Split:'=' -%}
	{% assign countryISOCode = includeArr[1] -%}
	{% assign countryChangeReload = true -%}
	{% assign dataContainer = '.add-da-lq' -%}
	{% assign dataInclude = 'add-da=' -%}
{% elseif include == 'orderDa' -%}
	{% if order.Customer.Company -%}
		{% assign company = true -%}
		{% assign TINVisible = false -%}
	{% endif -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%}
    {% if usr.Authenticated -%}
        {% assign emailReadonly = true -%}
    {% endif -%}
	{% if order != '' -%}
    	{% assign emailRequired = true -%}
    	{% assign email = order.Customer.Email -%}
		{% assign address = order.Customer.DeliveryAddress -%}
	{% elseif customer.DeliveryAddress.Name != '' -%}
		{% assign address = customer.DeliveryAddress -%}
	{% else -%}
		{% assign address = customer.Address -%}
	{% endif -%}
	{% assign countryISOCode = order.Customer.DeliveryAddress.Country -%}
	{% if order.SelectedDelivery.CollectionPointTypeId == 2 -%}
		{% assign showMapTrigger = true -%}
	{% endif -%}
{% elseif include == 'buyerAddress' -%}
	{% if order.Customer.Company -%}
		{% assign company = true -%}
		{% assign TINVisible = false -%}
	{% endif -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%}
    {% if usr.Authenticated -%}
        {% assign emailReadonly = true -%}
    {% endif -%}
	{% if order != '' -%}
    	{% assign emailRequired = true -%}
    	{% assign email = order.Customer.Email -%}
		{% assign address = order.Customer.Buyer -%}
	{% elseif customer.DeliveryAddress.Name != '' -%}
		{% assign address = customer.DeliveryAddress -%}
	{% else -%}
		{% assign address = customer.Address -%}
	{% endif -%}
	{% assign countryISOCode = order.Customer.DeliveryAddress.Country -%}
	{% if order.SelectedDelivery.CollectionPointTypeId == 2 -%}
		{% assign showMapTrigger = true -%}
	{% endif -%}
{% elseif include contains 'inv-add' or page.QueryString contains 'invoice-address' -%}
	{% if page.QueryString contains 'invoice-address'-%}
		{% if page.QueryString contains 'company' -%}
			{% assign companyCheck = true -%}
		{% endif -%}
	{% else -%}
		{% if order.Customer.Company -%}
			{% assign companyCheck = true -%}
		{% endif -%}
	{% endif -%}
	{% if companyCheck -%}
		{% assign company = true -%}
	{% endif -%}
	{% assign TINVisible = true -%}
	{% if order.Customer.TIN != '' -%}
		{% assign tin = order.Customer.TIN -%}
		{% assign vateu = order.Customer.VATEU -%}
	{% else -%}
		{% assign tin = customer.TIN -%}
		{% assign vateu = customer.VATEU -%}
	{% endif -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = false -%}
	{% assign phoneRequired = false -%}
	{% if order == null -%}
        {% assign address = customer.Address -%}
	{% else -%}
		{% assign address = order.Customer.InvoiceAddress -%}
	{% endif -%}
	{% if include contains 'inv-add=' -%}
		{% assign includeArr = include | Split:'=' -%}
		{% assign countryISOCode = includeArr[1] -%}
		{% assign countryChangeReload = true -%}
		{% assign dataContainer = '.ia-lq' -%}
		{% assign dataInclude = 'inv-add=' -%}
	{% else -%}
		{% if address.Country != '' -%}
			{% assign countryISOCode = address.Country -%}
		{% else -%}
			{% assign countryISOCode = config.DefaultCountry -%}
		{% endif -%}
	{% endif -%}
	{% assign autoPost = true -%}
    {% if usr.Authenticated -%}
        {% assign emailReadonly = true -%}
    {% endif -%}
{% elseif include == 'order-da-popup-ret' -%}
	{% assign TINVisible = false -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%}
	{% assign emailRequired = true -%}
	{% assign email = order.Customer.Email -%}
	{% if order != '' -%}
		{% assign address = order.Customer.DeliveryAddress -%}
	{% elseif customer.DeliveryAddress.Name != '' -%}
		{% assign address = customer.DeliveryAddress -%}
	{% else -%}
		{% assign address = customer.Address -%}
	{% endif -%}
	{% assign countryISOCode = order.Customer.DeliveryAddress.Country -%}
	{% if order.SelectedDelivery.CollectionPointTypeId == 2 -%}
		{% assign showMapTrigger = true -%}
	{% endif -%}
	{% assign dontShowCountry = true -%}
{% elseif include == 'order-da-popup-comp' -%}
	{% assign company = true -%}
	{% assign TINVisible = false -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%}
	{% assign emailRequired = true -%}
	{% assign email = order.Customer.Email -%}
	{% if order != '' -%}
		{% assign address = order.Customer.DeliveryAddress -%}
	{% elseif customer.DeliveryAddress.Name != '' -%}
		{% assign address = customer.DeliveryAddress -%}
	{% else -%}
		{% assign address = customer.Address -%}
	{% endif -%}
	{% assign countryISOCode = order.Customer.DeliveryAddress.Country -%}
	{% if order.SelectedDelivery.CollectionPointTypeId == 2 -%}
		{% assign showMapTrigger = true -%}
	{% endif -%}
	{% assign dontShowCountry = true -%}
{% elseif include == 'order-buyer-popup-ret' -%}
	{% assign TINVisible = false -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%}
	{% assign emailRequired = false -%}
	{% assign email = order.Customer.Email -%}
	{% if order != '' -%}
		{% assign address = order.Customer.Buyer -%}
	{% elseif customer.DeliveryAddress.Name != '' -%}
		{% assign address = customer.DeliveryAddress -%}
	{% else -%}
		{% assign address = customer.Address -%}
	{% endif -%}
	{% assign countryISOCode = order.Customer.DeliveryAddress.Country -%}
	{% if order.SelectedDelivery.CollectionPointTypeId == 2 -%}
		{% assign showMapTrigger = true -%}
	{% endif -%}
	{% assign dontShowCountry = true -%}
{% elseif include == 'order-buyer-popup-comp' -%}
	{% assign company = true -%}
	{% assign TINVisible = false -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%}
	{% assign emailRequired = false -%}
	{% assign email = order.Customer.Email -%}
	{% if order != '' -%}
		{% assign address = order.Customer.Buyer -%}
	{% elseif customer.DeliveryAddress.Name != '' -%}
		{% assign address = customer.DeliveryAddress -%}
	{% else -%}
		{% assign address = customer.Address -%}
	{% endif -%}
	{% assign countryISOCode = order.Customer.DeliveryAddress.Country -%}
	{% if order.SelectedDelivery.CollectionPointTypeId == 2 -%}
		{% assign showMapTrigger = true -%}
	{% endif -%}
	{% assign dontShowCountry = true -%}
{% elseif include == 'order-invoice-popup-ret' or include contains 'inv-country-ret=' -%}
    {% assign company = false -%}
	{% assign TINVisible = true -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = false -%}
	{% assign phoneRequired = false -%}
	{% if order == null -%}
		{% assign address = customer.Address -%}
	{% else -%}
		{% assign address = order.Customer.InvoiceAddress -%}
	{% endif -%}
    {% assign countryChangeReload = true -%}
    {% assign dataContainer = '.invoice-address-form-in-popup-lq.retail-lq' -%}
    {% assign dataInclude = 'inv-country-ret=' -%}
	{% if include contains 'inv-country-ret=' -%}
		{% assign includeArr = include | Split:'=' -%}
		{% assign countryISOCode = includeArr[1] -%}
	{% else -%}
		{% if address.Country != '' -%}
			{% assign countryISOCode = address.Country -%}
		{% else -%}
			{% assign countryISOCode = config.DefaultCountry -%}
		{% endif -%}
	{% endif -%}
	{% assign autoPost = true -%}
	{% assign recipe = true -%}
	{% assign showRecipe = true -%}
{% elseif include == 'order-invoice-popup-comp' or include contains 'inv-country-comp=' -%}
	{% assign company = true -%}
	{% assign TINVisible = true -%}
	{% if order.Customer.TIN != '' -%}
		{% assign tin = order.Customer.TIN -%}
		{% assign vateu = order.Customer.VATEU -%}
	{% else -%}
		{% assign tin = customer.TIN -%}
		{% assign vateu = customer.VATEU -%}
	{% endif -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = false -%}
	{% assign phoneRequired = false -%}
	{% if order == null -%}
		{% assign address = customer.Address -%}
	{% else -%}
		{% assign address = order.Customer.InvoiceAddress -%}
	{% endif -%}
    {% assign countryChangeReload = true -%}
    {% assign dataContainer = '.invoice-address-form-in-popup-lq.company-lq' -%}
    {% assign dataInclude = 'inv-country-comp=' -%}
	{% if include contains 'inv-country-comp=' -%}
		{% assign includeArr = include | Split:'=' -%}
		{% assign countryISOCode = includeArr[1] -%}
	{% else -%}
		{% if address.Country != '' -%}
			{% assign countryISOCode = address.Country -%}
		{% else -%}
			{% assign countryISOCode = config.DefaultCountry -%}
		{% endif -%}
	{% endif -%}
	{% assign autoPost = true -%}
	{% if countryISOCode == 'PL' and settings.downloadDataFromGUS == 'yes' and settings.editDataFromGUS == 'no' -%}
		{% assign readonly = true -%}
	{% endif -%}
	{% if countryISOCode == 'PL' and settings.downloadDataFromGUS == 'yes' -%}
		{% assign gus = true -%}
	{% endif -%}
	{% assign recipe = true -%}
	{% assign showRecipe = false -%}
{% elseif include contains 'customer-data' -%}
	{% if customer.Company -%}
		{% assign company = true -%}
		{% assign TINVisible = true -%}
		{% assign tin = customer.TIN -%}
		{% assign vateu = customer.VATEU -%}
	{% endif -%}
	{% assign emailRequired = true -%}
	{% assign email = customer.Address.Email -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = true -%}
	{% assign address = customer.Address -%}
	{% assign includeArr = include | Split:'=' -%}
	{% assign countryISOCode = includeArr[1] -%}
	{% assign countryChangeReload = true -%}
	{% assign dataContainer = '.customer-data-address-lq' -%}
	{% assign dataInclude = 'customer-data=' -%}
	{% if countryISOCode == 'PL' and settings.downloadDataFromGUS == 'yes' and settings.editDataFromGUS == 'no' and customer.Company -%}
		{% assign readonly = true -%}
	{% endif -%}
	{% if countryISOCode == 'PL' and settings.downloadDataFromGUS == 'yes' -%}
		{% assign gus = true -%}
	{% endif -%}
{% elseif include contains '|' -%}
	{% comment -%}{% endcomment -%}
	{% if customer.Company -%}
		{% assign company = true -%}
		{% assign TINVisible = false -%}
	{% endif -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = true -%}
	{% assign incSplit = include | Split:'|' -%}
	{% assign daId = incSplit[0] | ToInt -%}
	{% assign address = customer.DeliveryAddresses[daId] -%}
	{% assign incSplitSize = incSplit | Size -%}
	{% if incSplitSize > 1 -%}
		{% assign countryISOCode = incSplit[1] -%}
	{% endif -%}
	{% assign countryChangeReload = true -%}
	{% assign dataContainer = '.da-lq' -%}
	{% capture dataInclude -%}{{address.Id}}|{% endcapture -%}
{% else -%}
	{% if customer.Company -%}
		{% assign company = true -%}
		{% assign TINVisible = true -%}
		{% assign tin = customer.TIN -%}
		{% assign vateu = customer.VATEU -%}
	{% endif -%} 
	{% assign emailRequired = true -%}
	{% assign email = customer.Address.Email -%}
	{% assign addressVisible = true -%}
	{% assign addressRequired = true -%}
	{% assign phoneVisible = true -%}
	{% assign phoneRequired = true -%}
	{% assign address = customer.Address -%}
	{% assign countryISOCode = config.Countries[0].ISOCode -%}
{% endif -%}

{% assign cityRequired = config.Countries[countryISOCode].RequiredFields.City -%}
{% assign streetRequired = config.Countries[countryISOCode].RequiredFields.Street -%}
{% assign streetNoRequired = config.Countries[countryISOCode].RequiredFields.StreetNo -%}
{% assign zipCodeRequired = config.Countries[countryISOCode].RequiredFields.ZipCode -%}
{% assign TINRequired = config.Countries[countryISOCode].RequiredFields.TIN -%}

{% if include contains 'inv-add' or page.QueryString contains 'invoice-address' -%}
	{% if customer.Company -%}
		{% assign TINRequired = true -%}
	{% else -%}
		{% assign TINRequired = false -%}
	{% endif -%}
{% endif -%}
{% if include == 'order-invoice-popup-ret' or include contains 'inv-country-ret=' -%}
	{% assign TINRequired = false -%}
{% elseif include == 'order-invoice-popup-comp' or include contains 'inv-country-comp=' -%}
	{% assign TINRequired = true -%}
{% endif -%}

Następnie w pliku order/delivery-partials/address-form.html podmień całą jego zawartość na ten kod:


{% assign type = include -%}
{% assign typeForJS = 0 -%}
{% assign areCountries = false -%}
{% assign addressesAmount = customer.DeliveryAddresses | Size -%}

{% comment -%}
{% if addressesAmount ==  1 -%}
    {% if customer.DeliveryAddresses[0].Country == order.Customer.DeliveryAddress.Country -%}
        {% assign areCountries = true -%}
    {% endif -%}
{% endif -%}
{% endcomment -%}

{% if addressesAmount > 1 %}
    {% assign countryCode = config.DefaultCountry -%}
    {% if order.Customer.DeliveryAddress.Country != '' -%}
        {% assign countryCode = order.Customer.DeliveryAddress.Country -%}
    {% endif -%}
    {% for address in customer.DeliveryAddresses -%}
        {% if address.Country == countryCode -%}
            {% assign areCountries = true -%}
            {% break -%}
        {% endif -%}
    {% endfor -%}
{% endif -%}


    {% if type == 'orderDa' -%}
        
    {% elseif type == 'inv-add' -%}
        
        {% assign typeForJS = 1 -%}
    {% else -%}
        
        {% assign typeForJS = 2 -%}
    {% endif -%}
    
        {% assign addressesAmount = customer.DeliveryAddresses | Size -%}
        {% if areCountries and order.SelectedDelivery.CollectionPointTypeId == 0 -%}
            {% if type == 'orderDa' or type == 'buyerAddress' -%}
                
            {% endif -%}
        {% endif -%}
        
    
    {% if type == 'inv-add' -%}
        
        
        {% assign address = order.Customer.InvoiceAddress -%}
        {% if address.Country != '' -%}
            {% assign countryISOCode = address.Country -%}
        {% else -%}
            {% assign countryISOCode = config.DefaultCountry -%}
        {% endif -%}
        {% capture inc -%}inv-add={{countryISOCode}}{% endcapture -%}
        
            {% include 'common/address-form.html' with inc -%}
        
    {% else -%}
        
            {% include 'common/address-form.html' with type -%}
        
    {% endif -%}

Teraz w pliku order/delivery-partials/address-list-item.html znajdź frazę {{address.State}}. Linijkę z tą frazą zastąp poniższym kodem:


{{address.State}} {{address.Country}}

Następnie w pliku w pliku order/delivery-partials/address-presentation.html całą zawartość pliku zastąp tym kodem:


{% assign type = include -%}

{% if type == 'orderDa' -%}
    {% if deliveryAddress -%}
        {% assign address = deliveryAddress -%}
    {% else -%}
        {% assign address = order.Customer.DeliveryAddress -%}
    {% endif -%}
{% elseif type == 'inv-add' -%}
    {% if invoiceAddress -%}
        {% assign address = invoiceAddress -%}
    {% else -%}
        {% assign address = order.Customer.InvoiceAddress -%}
    {% endif -%}
{% elseif type == 'buyerAddress' -%}
    {% if buyerAddress -%}
        {% assign address = buyerAddress -%}
    {% else -%}
        {% assign address = order.Customer.Buyer -%}
    {% endif -%}
{% endif -%} 

{% assign areCountries = false -%}
{% assign addressesAmount = customer.DeliveryAddresses | Size -%}

{% comment -%}
{% if addressesAmount ==  1 -%}
    {% if customer.DeliveryAddresses[0].Country != order.Customer.DeliveryAddress.Country -%}
        {% assign areCountries = true -%}
    {% endif -%}
{% endif -%}
{% endcomment -%}

{% if addressesAmount > 1 %}
    {% assign countryCode = config.DefaultCountry -%}
    {% if order.Customer.DeliveryAddress.Country != '' -%}
        {% assign countryCode = order.Customer.DeliveryAddress.Country -%}
    {% endif -%}
    {% for address in customer.DeliveryAddresses -%}
        {% if address.Country == countryCode -%}
            {% assign areCountries = true -%}
            {% break -%}
        {% endif -%}
    {% endfor -%}
{% endif -%}

{% if settings.blockAddingAndEditingDeliveryAddress == 'no' -%}
    {% assign canEditOrAddDeliveryAddress = true -%}
{% elseif settings.blockAddingAndEditingDeliveryAddressFor == 'withLimits' and customer.CreditLimit == null -%}
    {% assign canEditOrAddDeliveryAddress = true -%}
{% else -%}
    {% assign canEditOrAddDeliveryAddress = false -%}
{% endif -%}
{% if settings.blockCompanyDataEdition == 'no' -%}
    {% assign canEditCustomerDetails = true -%}
{% elseif settings.blockCompanyDataEditionFor == 'withLimits' and customer.CreditLimit == null -%}
    {% assign canEditCustomerDetails = true -%}
{% else -%}
    {% assign canEditCustomerDetails = false -%}
{% endif -%}
{% assign canEditDA = false -%}
{% assign canEditCD = false -%}
{% assign canEditAnything = false -%}
{% assign cantEditSomething = false -%}
{% if canEditOrAddDeliveryAddress and type == 'orderDa' -%}
    {% assign canEditDA = true -%}
{% endif -%}
{% if canEditCustomerDetails and type == 'inv-add' -%}
    {% assign canEditCD = true -%}
{% endif -%}
{% if canEditDA or canEditCD -%}
    {% assign canEditAnything = true -%}
{% endif -%}
{% if canEditDA == false or canEditCD == false -%}
    {% assign cantEditSomething = true -%}
{% endif -%}



    {% if type == 'orderDa' or type == 'buyerAddress' -%}
        {% if areCountries and order.SelectedDelivery.CollectionPointTypeId == 0 and usr.Authenticated -%}
            
        {% endif -%}
    {% endif -%}
    {% unless type == 'inv-add' and order.Customer.CustomerDetailsEditable == false -%}
        
    {% endunless -%}


{% assign noBorder = false -%}
{% if settings.buyerData == "yes" %}
    {% if type == 'orderDa' or type == 'buyerAddress' %}
        {% assign noBorder = true -%}
    {% endif -%}
{% endif -%}


    
        
            {{address.Name}}
        

        {% if address.Name2 != '' %}
            {{address.Name2}}
        {% endif -%}

        
            {{address.Street}}
            {{address.StreetNo}}{% if address.UnitNo != ''-%}/{{address.UnitNo}}{% endif -%}
        
         
        
            {{address.ZipCode}} {{address.City}}
        

        
            {{address.State}} {{address.Country}}
        

        {% if type == 'inv-add' and order.Customer.TIN != '' -%}
            {{translations.TIN}} 
            
                {% if config.ENTERPRISE and order.Customer.VATEU != '' -%}
                    {{order.Customer.VATEU}}
                {% endif -%}

                {{order.Customer.TIN}}
            
        {% endif %}
    

    {% if type == 'orderDa' or type == 'buyerAddress' -%}
        
            
            
                {{order.Customer.Email}}
            
        

        {% if address.PhoneNo != '' -%}
            
                
                
                    {{address.PhoneNo}}
                
            
        {% endif -%}

        
            
        
    {% endif %}

Teraz w pliku order/delivery-partials/delivery-section.html znajdź frazę {% assign index = 0 -%}. Wszystko nad linijką z tą frazą zastąp poniższym kodem:


{% assign deliveryAddress = order.Customer.DeliveryAddress -%}
{% assign invoiceAddress = order.Customer.InvoiceAddress -%}
{% assign buyerAddress = order.Customer.Buyer -%}

{% if customer-profile != null -%}
    {% assign deliveryAddress = customer-profile.Order.DeliveryAddress -%}
    {% assign invoiceAddress = customer-profile.Order.InvoiceAddress -%}
    {% assign buyerAddress = customer-profile.Order.Customer.Buyer -%}
{% endif -%}

Dalej w pliku order/delivery-partials/delivery-section.html znajdź frazę delivery-address-lq. W podmień kod w tym divie na te poniżej:


			{% if settings.buyerData == "yes" %}
				{% if order.Customer.Buyer == null -%}
					
				{% endif -%}
				
					
						{% if order.SelectedDelivery.CollectionPointTypeId == 0 -%}
							{{translations.ShippingAddress}}
						{% else -%}
							{{translations.MyData}}
						{% endif -%}
					
					{{translations.BuyerData}}
				
			{% else %}
				
					{% if order.SelectedDelivery.CollectionPointTypeId == 0 -%}
						{{translations.ShippingAddress}}
					{% else -%}
						{{translations.MyData}}
					{% endif -%}
				
			{% endif %}
			
				{% assign lackOfPhone = false -%}
				{% assign countryMismatch = false -%}

				{% if order.SelectedDelivery.PhoneRequired and deliveryAddress.PhoneNo == '' -%}
					{% assign lackOfPhone = true -%}
				{% endif -%}

				{% if page.Cookies.delivCountryChanged == 'true' -%}
					{% assign countryMismatch = true -%}
				{% endif -%}

				{% if deliveryAddress.Name == '' or lackOfPhone or countryMismatch -%}
					{% assign showForm = true -%}
				{% endif -%}

				{% if showForm -%}
					{% if order.Customer.Company and canEditOrAddDeliveryAddress == false -%}
						{% include 'order/delivery-partials/address-presentation.html' with 'orderDa' -%}
					{% else -%}
						{% include 'order/delivery-partials/address-form.html' with 'orderDa' -%}
					{% endif -%}
				{% else -%}
					{% include 'order/delivery-partials/address-presentation.html' with 'orderDa' -%}
				{% endif -%}
			
			
				{% if buyerAddress.Name == ''  -%}
					{% assign showForm = true -%}
				{% endif -%}

				{% if showForm -%}
					{% include 'order/delivery-partials/address-form.html' with 'buyerAddress' -%}
				{% else -%}
					{% include 'order/delivery-partials/address-presentation.html' with 'buyerAddress' -%}
				{% endif -%}

Następnie w pliku order/cart.html znajdź frazę forms-container-ui forms-container-lq. Zamień wszystko w tym divie na ten kod:



                                                                                    
                                                                                        {% if settings.buyerData == "yes" %}
                                                                                            {% if order.Customer.Buyer == null -%}
                                                                                                
                                                                                            {% endif -%}
                                                                                            
                                                                                                
                                                                                                    {{ translations.DeliveryData }}
                                                                                                
                                                                                                
                                                                                                    {{ translations.BuyerData }}
                                                                                                
                                                                                            
                                                                                        {% else %}
                                                                                            {{ translations.DeliveryData }}
                                                                                        {% endif %}
                                                                                    
                                                                                    {% if config.CompanyOnly == false -%}
                                                                                        
                                                                                            {% include 'common/address-form.html' with 'order-da-popup-ret' -%}
                                                                                        
                                                                                        
                                                                                            {% include 'common/address-form.html' with 'order-buyer-popup-ret' -%}
                                                                                        
                                                                                    {% endif -%}
                                                                                    
                                                                                        {% include 'common/address-form.html' with 'order-da-popup-comp' -%}
                                                                                    
                                                                                    
                                                                                        {% include 'common/address-form.html' with 'order-buyer-popup-comp' -%}
                                                                                    
                                                                                
                                                                                
                                                                                    {{ translations.InvoiceData }}
                                                                                    {{ translations.RecipeData }}
                                                                                    
                                                                                        
                                                                                        
                                                                                        {{ translations.WantToGetRecipe }}
                                                                                    
                                                                                    
                                                                                        
                                                                                        
                                                                                        {{ translations.WantToGetInvoice }}
                                                                                    
                                                                                    {% if config.CompanyOnly == false -%}
                                                                                        
                                                                                            {% include 'common/address-form.html' with 'order-invoice-popup-ret' -%}
                                                                                        
                                                                                    {% endif -%}
                                                                                    
                                                                                        {% include 'common/address-form.html' with 'order-invoice-popup-comp' -%}

Teraz w pliku __settings.liquid dodaj analogicznie do pozostałych kolejną sekcję field:



	{{buyerData}}

	
		{{buyerDataInfo}}

		
			
				
					
					{{yesTranslation}}
				

				
					
					{{noTranslation}}

Teraz w pliku js/init-ui1.js znajdź frazę function Order(configObj) {. Linijkę niżej dodaj poniższy kod:


this.buyerAddressReplaceableSelector = configObj.buyerAddressReplaceableSelector;
this.buyerAddressTemplateInclude = configObj.buyerAddressTemplateInclude;
this.buyerAddresFilled = ($(configObj.buyerAddressReplaceableSelector + ' [name="name"]').length == 0) ? true : false;

Dalej w pliku js/init-ui1.js znajdź frazę this.confirmAddress. Całą zawartość znalezionej funkcji podmień poniższym kodem:


if (addressType == 0) {
                    var container = $(this.deliveryAddressReplaceableSelector);
                } else if (addressType == 1){
                    var container = $(this.invoiceAddressReplaceableSelector);
                } else {
                    var container = $(this.buyerAddressReplaceableSelector);
                }
                var isValid = window.app.validationBeforePost(e) == '' ? true : false;

                if (isValid) {
                    var form = container.find('.form-lq');
                    var data = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();

                    if (!errorClass) {
                        var errorClass = '';
                    }

                    if (addressType === 0) {
                        data.push({ name: '__include', value: "'"+this.deliveryAddressTemplateInclude+"'" });
                    } else if (addressType === 1) {
                        data.push({ name: '__include', value: "'"+this.invoiceAddressTemplateInclude+"'" });
                    } else {
                        data.push({ name: '__include', value: "'"+this.buyerAddressTemplateInclude+"'" });
                    }

                    if (templateUrl) {
                        data.push({ name: '__template', value: templateUrl });
                    }

                    data.push({ name: '__csrf', value: __CSRF });

                    var thisRef = this;
                    var confirmPromise;
                    var confirmResponseFunc = function (res) {
                        if (res.action.Result) {
                            app.setCookie('delivCountryChanged', 'true', -1);
                            if (res.template) {
                                container.html(res.template);
                            }

                            if (addressType == 0) {
                                // thisRef.deliveryAddressId = -1;
                                // window.app.setCookie('deliveryAddressId', -1);
                                thisRef.deliveryAddresFilled = true;
                            } else if (addressType == 1) {
                                thisRef.invoiceAddresFilled = true;
                            } else {
                                thisRef.buyerAddresFilled = true;
                            }

                            if (!thisRef.deliveryAddresFilled || (thisRef.isInvoice && !thisRef.invoiceAddresFilled)) {
                                thisRef.orderValidator.removeClass(thisRef.hiddingClass);
                            } else {
                                thisRef.orderValidator.addClass(thisRef.hiddingClass);
                            }
                        } else {
                            form.find('input:not([type="hidden"]), select, textarea').each(function() { window.app.validation(null, $(this)) });
                        }
                    };

                    if (addressType == 0 || addressType == 2) {
                        confirmPromise = $.post('', data, function (res) { confirmResponseFunc(res) });
                    } else {
                        confirmPromise = thisRef.selectInvoice(form)
                            .then($.post('', data, function (res) { confirmResponseFunc(res) }));
                    }

                    if (callback) {
                        confirmPromise.then(function () { callback(isValid) });
                    }

                    return confirmPromise;
                } else {
                    if (callback) {
                        callback(isValid);
                    }
                    return null;
                }

Następnie nadal w pliku js/init-ui1.js znajdź frazę Order/DeliveryAddressUpdate. Linijkę z tą frazą zamień na poniższy kod:


if($('.order-address-data-tab-lq + .order-address-data-tab-lq').hasClass('active-lq')){
                        data['__action'] = 'Order/BuyerUpdate';
                    } else {
                        data['__action'] = 'Order/DeliveryAddressUpdate';
                    }

Dalej w pliku js/init-ui1.js znajdź frazę //ORDER's binding. Wszystko pod tym komentarzem aż do komentarza //confirm address zamień na poniższy kod:


window.order = new Order(
            {
                deliveryAddressReplaceableSelector: '.delivery-address-lq .address-template-container-lq.delivery-lq',
                deliveryAddressTemplateInclude: 'orderDa',
                invoiceAddressReplaceableSelector: '.invoice-address-lq .address-template-container-lq',
                invoiceAddressTemplateInclude: 'inv-add',
                buyerAddressReplaceableSelector: '.delivery-address-lq .address-template-container-lq.buyer-lq',
                buyerAddressTemplateInclude: 'buyerAddress',
                collectionPointType: $('[data-type]').data('type'),
                collectionPointFormSelector: '#ifMapContainer',
                noteReplaceableSelector: '.note-lq',
                headerAttributesSetFormSelector: '.header-attributes-set-form-lq',
                positionAttributesSetSelector: '.products-table-lq',
                addingOrderFormSelector: '.adding-order-form-lq',
                needRecalculateClass: 'need-recalculate-lq',
                orderValidatorSelector: '.order-validation-lq',
                hiddingClass: 'hidden-lq'
            }
        );

        $(document).ajaxSuccess(function(a, b, c, d) {
            setTimeout(function () {
                if(d && d.template != null) {
                    window.order = new Order(
                        {
                            deliveryAddressReplaceableSelector: '.delivery-address-lq .address-template-container-lq.delivery-lq',
                            deliveryAddressTemplateInclude: 'orderDa',
                            invoiceAddressReplaceableSelector: '.invoice-address-lq .address-template-container-lq',
                            invoiceAddressTemplateInclude: 'inv-add',
                            buyerAddressReplaceableSelector: '.delivery-address-lq .address-template-container-lq.buyer-lq',
                            buyerAddressTemplateInclude: 'buyerAddress',
                            collectionPointType: $('[data-type]').data('type'),
                            collectionPointFormSelector: '#ifMapContainer',
                            noteReplaceableSelector: '.note-lq',
                            headerAttributesSetFormSelector: '.header-attributes-set-form-lq',
                            positionAttributesSetSelector: '.products-table-lq',
                            addingOrderFormSelector: '.adding-order-form-lq',
                            needRecalculateClass: 'need-recalculate-lq',
                            orderValidatorSelector: '.order-validation-lq',
                            hiddingClass: 'hidden-lq'
                        }
                    );
                }
            }, 1);
        });

        // //hide doubled delivery methods
        // order.hideDoubbledMethods($('.delivery-method-lq'), $('[data-products-total-value]').data('products-total-value'));

        if($('.products-table-lq').index() != -1){
            var productsTable = $('.products-table-lq');
            window.UIFeatures.attachElement('.products-table-header-lq', null, productsTable.offset().top + productsTable.height());
        }

        //add coupon
        body.on('click', '.add-coupon-lq', function (e) {
            window.order.addCoupon(e);
        })

        //update delivery and payment matrix
        body.on('change', '.change-delivery-lq', function (e) {
            window.order.updateDeliveryMatrix(this, '.delivery-form-lq', '.collection-points-lq', e);
        });

        //redraw points after update if needed
        body.on('deliveryChange', function (e, pointType) {
            if (pointType == 1) {
                $('[data-type]').data('type', pointType).attr('data-type', pointType);
                if(window.google) {
                    app.getCollectionPoints();
                }
            }
        });

        //change address template (from presentation to edition)
        body.on('click', '.other-address-lq', function () {
            var container = $(this).parents('.address-template-container-lq');
            var addressType = $(this).parents('.address-template-container-lq').data('address-type');
            if(addressType == 0){
                var templateInclude = 'orderDa';
            } else if(addressType == 1){
                var templateInclude = 'inv-add';
            } else {
                var templateInclude = 'buyerAddress';
            }
            window.order.replacePartialTemplate(container, 'order/delivery-partials/address-form.html', templateInclude);
        });

        //change address presentation template to addresses list
        body.on('click', '.change-delivery-address-lq', function (e) {
            var container = $(this).parents('.address-template-container-lq');
            window.order.replacePartialTemplate(container, 'order/delivery-partials/addresses-list.html', 'orderDa');
        });

        //change address list to single address presentation
        body.on('click', '.back-to-presentation-lq', function (e) {
            var container = $(this).parents('.address-template-container-lq');
            if($('.order-address-data-tab-lq + .order-address-data-tab-lq').hasClass('active-lq')){
                var include = 'buyerAddress';
            } else {
                var include = 'orderDa';
            }
            window.order.replacePartialTemplate(container, 'order/delivery-partials/address-presentation.html', include);
        });

Teraz w pliku js/init-ui1.js dodaj kod:



function toggleOrderAddress(e) {
    $('.order-address-data-tab-lq').toggleClass('active-lq');
    $(e.currentTarget).parents('.delivery-address-lq').find('.address-template-container-lq').toggleClass('hidden-lq');
};

$('body').on('click', '.order-address-data-tab-lq:not(.active-lq)', function (e) {
    toggleOrderAddress(e);
});

function toggleOrderAddressNotAuthenticated(e) {
    $('.order-address-data-tab-not-authenticated-lq').toggleClass('active-lq');
    if($('.order-delivery-data-popup-radio-lq[value=true]').prop('checked')){
        $('.buyer-address-form-in-popup-lq.company-lq').toggleClass('hidden-lq');
        $('.delivery-address-form-in-popup-lq.company-lq').toggleClass('hidden-lq');
    } else {
        $('.buyer-address-form-in-popup-lq.retail-lq').toggleClass('hidden-lq');
        $('.delivery-address-form-in-popup-lq.retail-lq').toggleClass('hidden-lq');
    }
};

$('body').on('click', '.order-address-data-tab-not-authenticated-lq:not(.active-lq)', function (e) {
    toggleOrderAddressNotAuthenticated(e);
});

Następnie w pliku js/init-ui2.js znajdź frazę saveDeliveryDataPopup(e) {. Podmień kod tej funkcji na ten:


if($('.order-address-data-tab-not-authenticated-lq').length > 0){
        var buyerOn = true;
    } else {
        var buyerOn = false;
    }
    var company = $('.order-delivery-data-popup-radio-lq:checked').val();
    if(company == 'true'){
        var DAform = $('.delivery-address-form-in-popup-lq.company-lq');
        if(buyerOn){
            var buyerForm = $('.buyer-address-form-in-popup-lq.company-lq');
        }
    } else {
        var DAform = $('.delivery-address-form-in-popup-lq.retail-lq');
        if(buyerOn){
            var buyerForm = $('.buyer-address-form-in-popup-lq.retail-lq');
        }
    }
    var DAdata = DAform.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
    DAdata.push({ name: '__csrf', value: __CSRF });
    DAdata.push({ name: '__action', value: 'Order/DeliveryAddressUpdate' });
    if(buyerOn){
        var buyerData = buyerForm.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
        buyerData.push({ name: '__csrf', value: __CSRF });
        buyerData.push({ name: '__action', value: 'Order/BuyerUpdate' });
        buyerData.push({ name: '__template', value: 'order/order-template.html' });
    } else {
        DAdata.push({ name: '__template', value: 'order/order-template.html' });
    }
    if(company == 'true'){
        var invoiceForm = $('.invoice-address-form-in-popup-lq.company-lq .form-lq:not(.hidden-lq)');
    } else {
        var invoiceForm = $('.invoice-address-form-in-popup-lq.retail-lq .form-lq:not(.hidden-lq)');
    }
    if(invoiceForm.hasClass('invoice-lq')){
        var invoiceData = invoiceForm.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
        invoiceData.push({ name: '__csrf', value: __CSRF });
        invoiceData.push({ name: '__action', value: 'Order/InvoiceAddressUpdate' });
        invoiceData.push({ name: '__collection', value: 'order.SelectedDelivery.PhoneRequired' });
        invoiceData.push({ name: 'company', value: company });
        invoiceData.push({ name: 'invoice', value: 'true' });
    }
    if((buyerOn && (app.validationBeforePost(e, buyerForm) != 'error' || (app.validationBeforePost(e, buyerForm) == 'error' && buyerForm.find('[name=name]').val() == ''))) || !buyerOn){
        var buyerValidation = true;
    } else {
        var buyerValidation = false;
    }
    if(app.validationBeforePost(e, DAform) != 'error' && app.validationBeforePost(e, invoiceForm) != 'error' && buyerValidation){
        $.post('', invoiceData).then(function (result) {
            if(result.collection){
                var phone = DAform.find('[name=phoneNo]');
                phone.prop('required',true);
                var error = phone.data('error');
                phone.parent().append(''+error+'');
                phone.parent().find('label').append(' *');
            }
            $.post('', DAdata, function (result) {
                if(buyerOn){
                    $.post('', buyerData, function (result) {
                        $('.order-template-lq').html(result.template);
                        $('.during-ajax-modal-lq').addClass('hidden-lq');
                        $('body').removeClass('modal-open-ui');
                    });
                } else {
                    $('.order-template-lq').html(result.template);
                    $('.during-ajax-modal-lq').addClass('hidden-lq');
                    $('body').removeClass('modal-open-ui');
                }
            });
        });
    } else if(app.validationBeforePost(e, DAform) == 'error' && buyerOn){
        $(e.currentTarget).find('.order-address-data-tab-not-authenticated-lq').eq(0).trigger('click');
    } else if(!buyerValidation){
        $(e.currentTarget).find('.order-address-data-tab-not-authenticated-lq').eq(1).trigger('click');
    }

Dalej w pliku js/init-ui2.js znajdź frazę setOrderDeliveryDataPopupRadio(e) {. Podmień kod tej funkcji na ten:


var company = $(e.currentTarget).val();
    if(company == 'true'){
        if($('.order-address-data-tab-not-authenticated-lq').eq(1).hasClass('active-lq')){
            $('.delivery-address-form-in-popup-lq.company-lq').addClass('hidden-lq');
            $('.buyer-address-form-in-popup-lq.company-lq').removeClass('hidden-lq');
        } else {
            $('.delivery-address-form-in-popup-lq.company-lq').removeClass('hidden-lq');
            $('.buyer-address-form-in-popup-lq.company-lq').addClass('hidden-lq');
        }
        $('.delivery-address-form-in-popup-lq.retail-lq').addClass('hidden-lq');
        $('.buyer-address-form-in-popup-lq.retail-lq').addClass('hidden-lq');
        $('.invoice-address-form-in-popup-lq.retail-lq').addClass('hidden-lq');
        $('.invoice-address-form-in-popup-lq.company-lq').removeClass('hidden-lq');
        $('[name=toggle-recipe-and-invoice][value=invoice]').prop('checked', true).trigger('change');
    } else {
        if($('.order-address-data-tab-not-authenticated-lq').eq(1).hasClass('active-lq')){
            $('.delivery-address-form-in-popup-lq.retail-lq').addClass('hidden-lq');
            $('.buyer-address-form-in-popup-lq.retail-lq').removeClass('hidden-lq');
        } else {
            $('.delivery-address-form-in-popup-lq.retail-lq').removeClass('hidden-lq');
            $('.buyer-address-form-in-popup-lq.retail-lq').addClass('hidden-lq');
        }
        $('.delivery-address-form-in-popup-lq.company-lq').addClass('hidden-lq');
        $('.buyer-address-form-in-popup-lq.company-lq').addClass('hidden-lq');
        $('.invoice-address-form-in-popup-lq.company-lq').addClass('hidden-lq');
        $('.invoice-address-form-in-popup-lq.retail-lq').removeClass('hidden-lq');
        $('[name=toggle-recipe-and-invoice][value=recipe]').prop('checked', true).trigger('change');
    }

Teraz w pliku scss/globals/_globals2.scss dodaj kod:


.order-address-data-tab-ui{
  width: 50%;
  line-height: 1;
  margin-top: 28px;
  padding: 10px;
  border: 1px solid $lightBorderColor;
  border-bottom: none;
  text-align: center;
  background: $lightBorderColor;
  cursor: pointer;
  &.left-ui{
    float: left;
  }
  &.right-ui{
    float: right;
  }
  &.active-lq{
    font-weight: 700;
    background: #fff;
    cursor: default;
  }
  &.not-authenticated-ui{
    line-height: 1.5em;
    margin-top: 0;
  }
}
.order-ui .not-authenticated-in-order-container-ui .form-title-ui.not-authenticated-ui{
  margin-top: -10px;
  margin-bottom: 27px;
  padding: 0;
}

Dodanie informacji o powiązanych zamówieniach na szczegółach zamówienia w profilu klienta

Dodanie

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać w nim informacje o powiązanych zamówieniach na szczegółach zamówienia w profilu klienta.

Wskazówka

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

Szafir

W pliku customer-profile/orders/order-details.html wyszukaj frazę {% if config.Orders.AttachmentsEnabled -%}/strong>. Pod tym warunkiem dodaj kolejny warunek: {% if order.RelatedOrders -%} {{ translations.RelatedOrders }} {{ translations.Number | Capitalize }} {{ translations.DocumentDate }} {{ translations.Status }} {% for relatedOrder in order.RelatedOrders -%} {{relatedOrder.Id}} {% if relatedOrder.Parent -%}({{ translations.Main | Downcase }}){% endif -%} {{relatedOrder.Date | Date:dateFormat}} {{relatedOrder.StatusText}} {% endfor -%} {% endif -%} Teraz w pliku scss/globals/_globals2.scss dodaj kod: .eshop-order-ui{ .related-document-labels-ui .column-ui + .column-ui{ margin-left: 0; } .related-document-labels-ui, .related-document-ui { .document-number-column-ui{ width: 70px; } .document-date-column-ui{ width: 140px; } .document-netto-column-ui{ width: calc(100% - 249px); } } }

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ć 275x475. 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: "275x475" - 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] -%}

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

{{translations.InvalidEmail}}

{% assign configConsents = config.TOS.Consents.Newsletter -%}
{% for tos in configConsents -%} {% assign channelsSize = tos.Channels | Size -%}

{% if tos.Statement %}
{% if tos.Required -%}* {% endif -%}{{ tos.Text }}
{% else %}
{% if tos.Required -%}* {% endif -%}{{ tos.Text }} {% if tos.Required -%}
{{ translations.Com_FieldIsMandatory }}
{% endif -%}
{% endif -%} {% if channelsSize > 0 -%}
{% for chn in tos.Channels -%} {% if tos.Statement == false -%}
{% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}
{% else -%}
{% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}
{% endif -%} {% endfor -%}
{{ translations.ChannelWarning }}

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

Przyklejone nagłówki w szablonie Topaz

W niniejszym artykule dowiesz się, w jaki sposób zmodyfikować wariant 1 lub 2 nagłówka w Topazie, by były one "przyklejonymi" nagłówkami podczas przewijania strony.

Instrukcje dla poszczególnych wariantów nagłówków

Pierwszy wariant nagłówka

Drugi wariant nagłówka

"Przyklejenie" nagłówka sprawia, że przy przewijaniu strony jest on na stałe przyczepiony do górnej części ekranu, tak, by dostęp do menu był wygodny z każdego miejsca na stronie.
Wskazówka
W wersji 2021 powstał również trzeci wariant nagłówka. "Przyklejenie" tego nagłówka jest już zaimplementowane i nie trzeba dokonywać żadnych modyfikacji kodu.

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

Modyfikacje dla pierwszego wariantu nagłówka
Pierwszym krokiem jest modyfikacja pliku html z nagłówkiem. W tym celu w plikach szablonu otwórz plik elements->header->header-1.html. Jeśli w folderze elements->header posiadasz inny plik, to znaczy, że w kreatorze wybrany został inny wariant nagłówka. Kod w powyższym pliku podmień na następujący:
{% assign categories = page.GroupNodes %} {% assign lngCount = config.Languages | Size -%} {% assign currentLang = config.Languages[page.LanguageId] -%}

{{ translations.Hea_Menu }} {% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}}
{{ translations.Com_Search }} {% if usr.Authenticated -%} {{ translations.Hea_CustomerProfile }}
{{ translations.Cpr_Logout }}
{% else -%} {{ translations.Log_Login }} {% endif -%} {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%})

{{ translations.Hea_Menu }} {% if header.Nodes[0] -%} {{ translations.Com_Categories }} {% endif -%}

{% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize > 0 -%}
{{ category | A }}
{% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%} {% if undercategoriesSize > 0 -%}
{{undercategory.Name}} {% if undercategory.Nodes -%}
{% for underundercategory in undercategory.Nodes -%} {% assign underundercategoriesSize = category.Groups | Size -%} {% if underundercategoriesSize > 0 -%} {{underundercategory.Name}} {% endif -%} {% endfor -%}
{% endif -%}
{% endif -%} {% endfor -%}

{% for undercategory in category.Groups -%} {% assign categoriesSize = undercategory.Nodes | Size -%} {% if categoriesSize == 0 -%}
{{ undercategory | A }}
{% endif -%} {% endfor -%}

{% endif -%} {% endfor -%}

{% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize == 0 -%}
{{ category | A }}
{% endif -%} {% endfor -%}

{% assign name = 'menuBanner' -%} {% if config.Banners[name].Images[0].Link != '' -%} {% endif -%}
{% if config.Banners[name].Images[0] -%} {% assign banner = config.Banners[name].Images[0] -%} {% if banner -%} {% assign bannerAlt = banner.Alt | H -%} {{banner.Url | Img: '', bannerAlt}} {% endif -%}

{{config.Banners[name].Images[0].Heading}}

{{config.Banners[name].Images[0].Text}}

{% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
220x295
{% endif -%}
{% if config.Banners[name].Images[0].Link != '' -%} {% endif -%}

{{ translations.Hea_Pages }}

{{config.DefinedPages.About.Name}}

{{config.DefinedPages.Payment.Name}}

{{config.DefinedPages.Shipping.Name}}

{{config.DefinedPages.Terms.Name}}

{{ config.DefinedPages.Contact | A }} {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} {{ translations.Lookbook }}

{% for lookbook in config.Lookbook.List -%}
{{lookbook.Text}}
{% endfor -%}

{% elseif lookbooksQuantity == 1 or fakeLookbook -%} {{ config.DefinedPages.Lookbook | A }} {% endif -%}

{% if config.Shop.Contact.PhoneNo != '' -%} {{config.Shop.Contact.PhoneNo}} {% endif -%} {% if config.Shop.Contact.Email != '' -%} {{ config.Shop.Contact.Email }} {% endif -%} {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

{{ translations.Prf_Language }} {% for language in config.Languages -%} {{ language.Language }} {% endfor -%}

{{ translations.Com_Currency }} {% for currency in config.Currencies -%} {{ currency.Code }} {% endfor -%}

{% if usr.Authenticated == false -%} {{translations.Com_Login}} / {{translations.Registration}} {% endif -%}

{% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%}
{% if msg.Title != '' -%}
{% if msg.Url != '' -%} {{ msg.Title }} {% else -%} {{ msg.Title }} {% endif -%}
{% endif -%}
{{ msg.Message }}

{% endif -%} {% endif -%} {% endfor -%} {% if page.PageId == 6 and page.QueryString contains "?fav=1" -%} {% assign headerMobileReturnButton = 1 -%} {% elseif page.PageId == 4 -%} {% assign headerMobileReturnButton = 1 -%} {% else -%} {% assign headerMobileReturnButton = 0 -%} {% endif -%}
{% if page.PageId == 4 -%}{{translations.CartContent}} ({{cart.Products | Size }}){% endif -%}

Następnie należy zmodyfikować pliki css. W tym celu najpierw otwórz plik css/layout0.css. Wyszukaj blok kodu zaczynający się od ".headerSection{color:{{settings.headerFontColor}};" a kończący się na ".headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}". Usuń cały ten blok kodu, a w jego miejsce wklej nastepujący:
.headerBackground{background-color:{{settings.headerBgColor}};height:120px;width:100%;margin:0;padding:0}.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:120px;box-sizing:border-box;position:relative;z-index:13}.headerSection.frozenHeader{position:fixed !important;top:0;box-shadow:2px 1px 4px 0 #b0b0b0}.headerSection.frozenHeader>.scrollHeader{padding-top:0 !important;padding-bottom:65px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__logo{top:17px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__iconsMenu{bottom:-55px !important}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:120px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;z-index:1;display:flex;align-items:center;justify-content:center}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{max-height:36px;width:auto;max-width:100px}.headerSection .headerSection__logo.longLogo{top:0;left:150px}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__row{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .mainNavigation{display:none}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative;padding:10px 0 0}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-2px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__navLinks.longLogo{top:5px}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px;position:absolute;bottom:-37px;right:0;z-index:1}.headerSection .headerSection__iconsMenu .mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .iconsMenuItem__text i{font-style:normal}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__iconsMenu.longLogo{bottom:-70px}.headerSection .headerSection__searchForm{position:absolute;top:100px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;display:none;padding:30px 15px;margin:0;overflow:hidden;box-sizing:border-box;text-align:center;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .headerSection__searchForm__searchButtonMobile{display:none}.headerSection .scrollSearchForm{top:70px !important}.headerSection .headerSection__searchForm__phrase{max-width:436px;width:100%;height:36px;padding:0 0 11px;box-sizing:border-box;border-bottom:1px solid {{settings.linkFontColor}};color:{{settings.headerFontColor}};background-color:transparent}.headerSection .headerSection__searchForm__btn{position:absolute;top:30px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:none;display:none}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:45px;position:relative;box-sizing:border-box;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;position:absolute;top:-40px;right:0}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.breadcrumbsFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;margin:10px 0 5px;opacity:.5}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}
W tym samym katalogu otwórz plik layout-m0.css. Wyszukaj linijkę "@media only screen and (max-width: 767px){.headerSection{height:60px}". Usuń ją, a w jej miejsce wklej następującą:
@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}.headerSection .header__icon svg{width:18px;height:18px}.headerSection .header__icon.header__login{display:none}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__shopData{position:absolute;top:30px;right:30px;margin-right:55px}.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:none}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 35px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none;position:fixed;top:0;bottom:56px;overflow-y:auto;overflow-x:hidden;z-index:1}.headerSection .headerSection__mainMenu{position:absolute;top:50px;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{text-align:left;position:absolute;padding:15px;width:105px;box-sizing:border-box;left:20px;top:-40px;font-size:16px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};background-color:{{settings.headerBgColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn span{display:none}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn svg{margin-bottom:-3px;margin-top:50px}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 22px)}.headerSection .headerSection__mainMenu .mainNavigation__category a{font-weight:600}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:50px 40px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block;margin-top:5px}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text i{display:none}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:15px}.headerSection .mobileMenuIcon .iconsMenuItem__text{text-transform:uppercase}.headerSection .mobileMenuIcon svg{top:3px;margin:4px 0 0;width:20px;height:20px}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;font-size:10px;position:static;bottom:22px;right:35px}.headerSection .headerSection__searchForm{position:fixed;top:45px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;max-width:100%;height:100%;padding:35px 0 0;margin:-45px 0 0 0}.headerSection .headerSection__searchForm svg{fill:{{settings.linkFontColor}};display:block;margin-left:33px;margin-bottom:25px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__btn{background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__phrase{margin:10px 0;width:calc(100% - 71px);max-width:calc(100% - 71px)}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:15px;position:relative;border-bottom:1px solid {{settings.borderColor}};margin-left:23px;padding-bottom:15px}.headerSection .headerSection__shopData .mobileSvgIcon{margin-left:0}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:block}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}.headerSection .hideOnMobile{display:none}}.mobileCartReturnButton{background-color:{{settings.primaryPageBgColor}};padding:31px 0 20px;display:block;width:100%;position:absolute;top:0;z-index:15}.mobileCartReturnButton svg{width:16px;height:16px;fill:{{settings.linkFontColor}};padding-left:30px;padding-right:17px}.mobileCartReturnButton .mobileCartItemsCounter{font-size:14px;font-weight:300;color:{{settings.primaryFontColor}};position:absolute;top:30px}
Dalej, w tym samym katalogu otwórz plik layout-d0.css. Znajdź w nim linijkę, zaczynającą się od: "@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}". Usuń ją i wklej w jej miejsce następującą:
@media screen and (min-width: 769px) and (max-width: 1000px){.headerSection.frozenHeader>.scrollHeader{flex-direction:row;justify-content:flex-start}.headerSection.frozenHeader>.scrollHeader .headerSection__row{justify-content:flex-start;flex-wrap:wrap;margin-top:14px}.headerSection.frozenHeader>.scrollHeader .headerMainMenu-js{margin-left:2%}.headerSection.frozenHeader .headerSection__iconsMenu{position:fixed;top:20px;right:3%}.headerSection.frozenHeader .mainNavigation__links{position:fixed;top:70px;left:3%}}@media screen and (min-width: 769px) and (max-width: 840px){.headerSection.frozenHeader .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:8px !important}}@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:15px;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:15px;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:15px}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .imageLink{width:fit-content;height:fit-content}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden;background-color:#f2f2f2;position:relative}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content{position:absolute;top:50%;left:3%;max-height:50%}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__title{margin:0;padding:0;color:{{settings.bannerFontColor}};font-size:16px;font-weight:500}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0;font-size:14px}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__categories ul li ul li{padding-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{text-transform:none;width:100%;font-weight:500;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover{color:{{settings.headerFontColor}};font-weight:600}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__underundercategory a{font-weight:300}.headerSection .mainNavigation__links .mainNavigation__category a{font-size:12px;font-weight:500;width:100%;display:inline-block}}@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}@media screen and (min-width: 950px){.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:inline-block}}@media screen and (min-width: 1000px){.headerSection .mainNavigation__links{min-width:880px;left:-150px}.headerSection .headerSection__iconsMenu{bottom:-62px;right:0}.headerSection .headerSection__mainMenu__navLinks{top:-7px;left:150px}.headerSection .headerSection__logo{left:0;top:25px;position:absolute}}@media screen and (min-width: 1220px){.headerSection .mainNavigation__links{min-width:1100px}}@media screen and (min-width: 1400px){.headerSection.headerSection__bg>.headerSection__row{max-width:1400px;margin:0 auto}.headerSection .mainNavigation__links{left:0}}@media screen and (max-width: 1000px){.frozenHeader .headerSection__logo{margin-top:5px !important}}
Pozostało zmodyfikować pliki js. Otwórz plik js/layout0.js A w nim linijkę "var headerFunctions = {". Należy usunąć cały blok kodu, początwszy od tej linijki, aż do "};". Aby łatwiej zlokalizować ostatnią linię do usunięcia, następna po niej brzmi: "ui.showFooterSection = function() {". W miejsce powyższego bloku kodu należy wkleić następujący:
var headerFunctions = { init: function () { headerFunctions.events(); }, // Function that sets the menu position according to the width of the logo setMenuPosition: function() { var logo = $('img[src="logo.png"]'); var logoWidth = logo.width(); if(logoWidth > 120) { logo.parent().addClass('longLogo'); $('.headerSection__mainMenu__navLinks').addClass('longLogo'); $('.headerSection__iconsMenu').addClass('longLogo'); } }, events: function () { var pageHeader = $('.pageHeader-js'); pageHeader.on('click', '.showSearchSection-js', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $('.searchFormPhrase-js').focus(); }); pageHeader.on('click', '.showMenuSection-js', function() { $('.pageHeader-js .headerMainMenu-js').toggle(200); }); pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() { $('.pageHeader-js .headerMainMenu-js').hide(200); }); $(document).on('click', function (e) { //categories list if ($(e.target).closest('.openCategoryMenu-js').length === 0 && $(e.target).closest('.mainNavigation-js').length === 0 && $(e.target).closest($('.mainNavigation-js').children()).length === 0 && $(e.target).closest('.openPagesMenu-js').length === 0) { if($('.mainNavigation-js').css('display') != 'none') { $('.mainNavigation-js').toggle(200); $('.openCategoryMenu-js').removeClass('activeButton-js'); } } //pages list if($(e.target).closest('.openPagesMenu-js').length === 0 && $(e.target).closest('.sitesNavigation-js').length === 0 && $(e.target).closest($('.sitesNavigation-js').children()).length === 0 && $(e.target).closest('.openCategoryMenu-js').length === 0) { if($('.sitesNavigation-js').css('display') != 'none') { $('.sitesNavigation-js').toggle(200); $('.openPagesMenu-js').removeClass('activeButton-js'); } } //search form if( $(e.target).closest('.showSearchSection-js').length === 0 && $(e.target).closest('.headerSearchForm-js').length === 0 && $(e.target).closest('.searchForm__searchAutocomplete-js').length === 0 && $(e.target).closest($('.searchForm__searchAutocomplete-js').children()).length === 0) { if($('.headerSearchForm-js').css('display') != 'none') { $('.searchForm__searchAutocomplete-js').remove(); $('.headerSearchForm-js').toggle(200); } } }); pageHeader.on('click', '.mainMenuMobileCloseSearchBtn-js', function() { $('.pageHeader-js .headerSearchForm-js').hide(200); }); pageHeader.on('input', '.searchFormPhrase-js', function() { if($(this).val().length > 0) { $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden'); } else { $('.headerSection__searchForm__searchButtonMobile').addClass('hidden'); } }); pageHeader.on('click', '.openCategoryMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').toggle(200); $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); app.loadImages(); }); pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openPagesMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .sitesNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openLookbooksMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('change', '.customerLanguageChange-js', function(e) { if($(this).is(':checked')) {app.customerLanguageChange(e)} }); pageHeader.on('change', '.customerCurrencyChange-js', function(e) { if($(this).is(':checked')) {app.customerCurrencyChange(e)} }); pageHeader.on('click', '.openUndercategoryMenu-js', function(e) { var undercategory = $(e.currentTarget).closest('li').find('ul').first(); $(undercategory).toggle(200); }); $('img[data-src="logo.png"]').on('load', function(e) { headerFunctions.setMenuPosition(); }); $(window).ready(function(e) { $('html, body').animate({scrollTop : 0},10); $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 10); }); $(window).scroll(function(e) { if($(this).scrollTop() > 100 && $(this).width() > 768) { $('.headerBackground').removeClass('hidden'); $('.headerSection').addClass('frozenHeader'); $('.headerSection__shopData').addClass('hidden'); $('.headerSection__row').first().addClass('scrollHeader'); $('.headerSection').css('height', '70px'); $('.headerSection__searchForm').addClass('scrollSearchForm'); } else if ($(this).scrollTop() == 0 && $(this).width() > 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection__searchForm').removeClass('scrollSearchForm'); $('.headerSection').css('height', '120px'); } }); $(window).on('resize', function(e) { if($(window).width() < 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection__searchForm').removeClass('scrollSearchForm'); $('.headerSection').css('height', '60px'); } else { if($(this).scrollTop() > 100 && $(this).width() > 768) { $('.headerBackground').removeClass('hidden'); $('.headerSection').addClass('frozenHeader'); $('.headerSection__shopData').addClass('hidden'); $('.headerSection__row').first().addClass('scrollHeader'); $('.headerSection').css('height', '70px'); $('.headerSection__searchForm').addClass('scrollSearchForm'); } else if ($(this).scrollTop() == 0 && $(this).width() > 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection__searchForm').removeClass('scrollSearchForm'); $('.headerSection').css('height', '120px'); } } }); } };
Pozostała jeszcze mała modyfikacja kodu w porównywarce towarów, ponieważ przyklejony nagłówek jest przysłonięty przez porównywarkę. W tym celu otwórz plik js/layout1.js a w nim wyszukaj linię " if (window.pageYOffset > (topPosition)) {". Linia ta znajduje się w funkcji, której poczatkiem jest linia "$(window).on('scroll', function() {" a końcem linia "});". Sama funkcja ma ok. 13 linii długości. Usuń ją, a w jej miejsce wklej poniższy kod:
$(window).on('scroll', function() { if($('.frozenHeader').index()) { var headerHeight = parseInt($('.frozenHeader').css('height') + 5); } if (window.pageYOffset > (topPosition)) { topSection.style.position = 'sticky'; topSection.style.zIndex = '12'; if($('.frozenHeader').index()) { topSection.style.top = headerHeight + "px"; } else { topSection.style.top = 75 + "px"; } } else { topSection.style.position = 'inherit'; topSection.style.top = 'none'; topSection.style.zIndex = 'inherit'; } });
Gotowe ! W ten sposób problem nachodzenia porównywarki na przyklejony nagłówek zostaje wyeliminowany. To wszystkie kroki do wykonania przyklejonego nagłówka, gdy wybrałeś w Kreatorze pierwszy wariant nagłówka. Kolejne kroki instrukcji są przygotowane z myślą o drugim wariancie nagłówka. 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.
Modyfikacje dla drugiego wariantu nagłówka
Pierwszym krokiem jest modyfikacja pliku html z nagłówkiem. W tym celu w plikach szablonu otwórz plik elements->header->header-2.html. Jeśli w folderze elements->header posiadasz inny plik, to znaczy, że w kreatorze wybrany został inny wariant nagłówka. Kod w powyższym pliku podmień na następujący:
{% assign categories = page.GroupNodes %} {% assign lngCount = config.Languages | Size -%} {% assign currentLang = config.Languages[page.LanguageId] -%}

{% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}}

{{ translations.Hea_Menu }} {% if usr.Authenticated -%} {{ translations.Hea_CustomerProfile }}
{{ translations.Cpr_Logout }}
{% else -%} {{ translations.Log_Login }} {% endif -%} {{ translations.Com_Search }} {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%})

{% if header.Nodes[0] -%} {{ translations.Com_Categories }} {% endif -%}

{% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize > 0 -%}
{{ category | A }}
{% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%} {% if undercategoriesSize > 0 -%}
{{undercategory.Name}} {% if undercategory.Nodes -%}
{% for underundercategory in undercategory.Nodes -%} {% assign underundercategoriesSize = category.Groups | Size -%} {% if underundercategoriesSize > 0 -%} {{underundercategory.Name}} {% endif -%} {% endfor -%}
{% endif -%}
{% endif -%} {% endfor -%}

{% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%} {% if undercategoriesSize == 0 -%}
{{undercategory.Name}}
{% endif -%} {% endfor -%}

{% endif -%} {% endfor -%}

{% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize == 0 -%}
{{ category | A }}
{% endif -%} {% endfor -%}

{% assign name = 'menuBanner' -%} {% if config.Banners[name].Images[0].Link != '' -%} {% endif -%}
{% if config.Banners[name].Images[0] -%} {% assign banner = config.Banners[name].Images[0] -%} {% if banner -%} {% assign bannerAlt = banner.Alt | H -%} {{banner.Url | Img: '', bannerAlt}} {% endif -%}

{{config.Banners[name].Images[0].Heading}}

{{config.Banners[name].Images[0].Text}}

{% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
220x295
{% endif -%}
{% if config.Banners[name].Images[0].Link != '' -%} {% endif -%}

{{ translations.Hea_Pages }}

{{config.DefinedPages.About.Name}}

{{config.DefinedPages.Payment.Name}}

{{config.DefinedPages.Shipping.Name}}

{{config.DefinedPages.Terms.Name}}

{{ config.DefinedPages.Contact | A }} {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} {{ translations.Lookbook }}

{% for lookbook in config.Lookbook.List -%}
{{lookbook.Text}}
{% endfor -%}

{% elseif lookbooksQuantity == 1 or fakeLookbook -%} {{ config.DefinedPages.Lookbook | A }} {% endif -%}

{% if config.Shop.Contact.PhoneNo != '' -%} {{config.Shop.Contact.PhoneNo}} {% endif -%} {% if config.Shop.Contact.Email != '' -%} {{ config.Shop.Contact.Email }} {% endif -%} {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

{{ translations.Prf_Language }} {% for language in config.Languages -%} {{ language.Language }} {% endfor -%}

{{ translations.Com_Currency }} {% for currency in config.Currencies -%} {{ currency.Code }} {% endfor -%}

{% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%}
{% if msg.Title != '' -%}
{% if msg.Url != '' -%} {{ msg.Title }} {% else -%} {{ msg.Title }} {% endif -%}
{% endif -%}
{{ msg.Message }}

{% endif -%} {% endif -%} {% endfor -%} {% if page.PageId == 6 and page.QueryString contains "?fav=1" -%} {% assign headerMobileReturnButton = 1 -%} {% elseif page.PageId == 4 -%} {% assign headerMobileReturnButton = 1 -%} {% else -%} {% assign headerMobileReturnButton = 0 -%} {% endif -%}
{% if page.PageId == 4 -%}{{translations.CartContent}} ({{cart.Products | Size }}){% endif -%}

Następnie należy zmodyfikować pliki css. W tym celu najpierw otwórz plik css/layout0.css. Wyszukaj blok kodu zaczynający się od „.headerSection{color:{{settings.headerFontColor}}” a kończący się na „headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Usuń cały ten blok kodu, a w jego miejsce wklej nastepujący:
.headerBackground{width:100%;background-color:{{settings.headerBgColor}};height:150px;margin:0;padding:0}.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:150px;box-sizing:border-box;position:relative;z-index:13}.headerSection.frozenHeader{position:fixed !important;top:0;box-shadow:2px 1px 4px 0 #b0b0b0}.headerSection.frozenHeader>.scrollHeader{padding-top:18px !important;padding-bottom:65px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__logo{top:17px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__iconsMenu{bottom:-55px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__mainMenu__navLinks .openCategoryMenu-js{position:fixed;top:25px;margin-left:9%}@media screen and (max-width: 1200px){.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__mainMenu__navLinks .openCategoryMenu-js{margin-left:13%}}.headerSection.frozenHeader>.scrollHeader .searchForm__searchAutocomplete{top:30px !important}.headerSection.frozenHeader .mainNavigation__links{top:-55px !important}.headerSection.frozenHeader .mainNavigation__sites{display:none !important}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:150px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-top:2px}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{max-height:36px;max-width:100px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .headerSection__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;position:relative}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2),.headerSection .mainNavigation{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{height:36px;position:relative;box-sizing:border-box;width:30%;max-width:420px}.headerSection .headerSection__searchForm__searchButtonMobile,.headerSection .headerSection__searchForm .closeSearchButton{display:none}.headerSection .headerSection__searchForm__phrase{max-width:420px;width:100%;height:36px;padding:12px 10px 11px;box-sizing:border-box;border:1px solid {{settings.borderColor}};color:{{settings.headerFontColor}};background-color:rgba(255,255,255,0.25)}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.headerFontColor}};opacity:.7}.headerSection .headerSection__searchForm__btn{position:absolute;top:0;right:-35px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:1px solid {{settings.borderColor}}}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{display:block;margin:0 auto;padding:20px 0;top:45px;z-index:9;width:100%;position:absolute;box-sizing:border-box}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;width:80%;max-width:500px;margin:0 auto;padding:15px 20px;background-color:{{settings.headerBgColor}};border-bottom:1px solid #f2f2f2;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2);font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;top:7px;position:relative;color:{{settings.headerFontColor}}}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.headerFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;opacity:.5;margin:10px 0 5px}@media screen and (min-width: 768px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:0}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .imageLink{width:fit-content;height:fit-content}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden;position:relative}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content{position:absolute;top:50%;left:3%;max-height:50%}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__title{margin:0;padding:0;color:{{settings.bannerFontColor}};font-size:16px;font-weight:500}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0;font-size:14px}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__categories ul li ul li{padding-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{text-transform:none;color:{{settings.headerFontColor}};width:100%;font-weight:500;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover{color:{{settings.headerFontColor}};font-weight:600}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__underundercategory a{font-weight:300}.headerSection .mainNavigation__links .mainNavigation__category a{color:{{settings.headerFontColor}};font-size:12px;font-weight:500;width:100%;display:inline-block}}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (max-width: 949px){.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:inline-block}}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}
W tym samym katalogu otwórz plik layout-m0.css. Wyszukaj linijkę „@media only screen and (max-width: 768px){.headerSection{height:60px}”. Usuń ją, a w jej miejsce wklej następującą:
@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon svg{width:15px;height:15px}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 20px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none}.headerSection .headerSection__mainMenu{position:fixed;top:0;bottom:56px;overflow:auto;z-index:1;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{display:block;text-align:left;position:relative;padding:15px;width:50px;box-sizing:border-box;left:-15px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 20px)}.headerSection .headerSection__mainMenu .mainNavigation__category a{font-weight:600}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:10px 20px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .headerSection__row{flex-direction:row}.headerSection .headerSection__iconsMenu .hideOnMobile{display:none !important}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text,.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:block;margin-top:5px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:0}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;margin-top:-9px;font-size:10px}.headerSection .headerSection__searchForm{position:fixed;top:0;padding-top:25px;left:0;right:0;width:100%;max-width:100%;bottom:0;overflow:auto;height:auto;background-color:{{settings.primaryPageBgColor}};z-index:1}.headerSection .headerSection__searchForm .closeSearchButton{display:block;margin-bottom:25px;margin-left:20px}.headerSection .headerSection__searchForm .closeSearchButton:hover{cursor:pointer}.headerSection .headerSection__searchForm .closeSearchButton svg{width:18px;height:18px;fill:{{settings.linkFontColor}}}.headerSection .headerSection__searchForm__btn{display:none;background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__phrase{margin:10px 20px 10px 20px;width:calc(100% - 40px);max-width:calc(100% - 40px);border-left:none;border-right:none;border-top:none;padding-bottom:14px;border-bottom:1px solid {{settings.primaryFontColor}}}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:-5px;padding-bottom:15px;margin-left:20px;margin-right:20px;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__shopData .mobileSvgIcon{margin-left:0}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__searchForm__phrase{background-color:rgba(255,255,255,0.4);color:{{settings.secondaryFontColor}}}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.secondaryFontColor}}}.headerSection .searchForm__searchAutocomplete{position:fixed;display:block;top:110px;left:0;width:100%}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}}@media only screen and (max-width: 360px){.headerSection.headerSection__bg>.headerSection__row{padding:15px}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{padding:10px 20px 40px}.headerSection .headerSection__shopData{left:0}}.mobileCartReturnButton{background-color:{{settings.primaryPageBgColor}};padding:31px 0 20px;display:block;width:100%;position:absolute;top:0;z-index:15}.mobileCartReturnButton svg{width:16px;height:16px;fill:{{settings.linkFontColor}};padding-left:30px;padding-right:17px}.mobileCartReturnButton .mobileCartItemsCounter{font-size:14px;font-weight:300;color:{{settings.primaryFontColor}};position:absolute;top:30px}
Dalej, w tym samym katalogu otwórz plik layout-d0.css. Znajdź w nim linijkę, zaczynającą się od: „@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}”. Usuń ją i wklej w jej miejsce następującą:
@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}@media screen and (min-width: 950px){.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:inline-block}}@media screen and (min-width: 1000px){.headerSection .mainNavigation__links{min-width:880px}}@media screen and (min-width: 1220px){.headerSection .mainNavigation__links{min-width:1100px}}@media screen and (min-width: 1400px){.headerSection.headerSection__bg>.headerSection__row{max-width:1400px;margin:0 auto}}
Pozostało zmodyfikować pliki js. Otwórz plik js/layout0.js A w nim linijkę „var headerFunctions = {„. Należy usunąć cały blok kodu, początwszy od tej linijki, aż do „};”. Aby łatwiej zlokalizować ostatnią linię do usunięcia, następna po niej brzmi: „ui.showFooterSection = function() {„. W miejsce powyższego bloku kodu należy wkleić następujący:
var headerFunctions = { init: function () { headerFunctions.events(); }, events: function () { var pageHeader = $('.pageHeader-js'); pageHeader.on('click', '.showSearchSection-js', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); $('.searchFormPhrase-js').focus(); }); pageHeader.on('click', '.showMenuSection-js', function() { $('.pageHeader-js .headerMainMenu-js').toggle(200); }); pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() { $('.pageHeader-js .headerMainMenu-js').hide(200); }); pageHeader.on('click', '.closeSearchButton > svg', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); }); pageHeader.on('input', '.searchFormPhrase-js', function() { if($(this).val().length > 0) { $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden'); } else { $('.headerSection__searchForm__searchButtonMobile').addClass('hidden'); } }); pageHeader.on('click', '.openCategoryMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').toggle(200); $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); app.loadImages(); }); pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openPagesMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .sitesNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openLookbooksMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('change', '.customerLanguageChange-js', function(e) { if($(this).is(':checked')) {app.customerLanguageChange(e)} }); pageHeader.on('change', '.customerCurrencyChange-js', function(e) { if($(this).is(':checked')) {app.customerCurrencyChange(e)} }); pageHeader.on('click', '.openUndercategoryMenu-js', function(e) { var undercategory = $(e.currentTarget).closest('li').find('ul').first(); $(undercategory).toggle(200); }); $(window).ready(function(e) { $('html, body').animate({scrollTop : 0},10); $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 10); }); $(window).scroll(function(e) { if($(this).scrollTop() > 150&& $(this).width() > 768) { $('.headerBackground').removeClass('hidden'); $('.headerSection').addClass('frozenHeader'); $('.headerSection__shopData').addClass('hidden'); $('.headerSection__row').first().addClass('scrollHeader'); $('.headerSection').css('height', '70px'); $('.mainMenu__navLink').not('.openCategoryMenu-js').addClass('hidden'); } else if ($(this).scrollTop() == 0 && $(this).width() > 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection').css('height', '150px'); $('.mainMenu__navLink').not('.openCategoryMenu-js').removeClass('hidden'); } }); $(window).on('resize', function(e) { if($(window).width() < 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection').css('height', '60px'); } else { if($(this).scrollTop() > 130 && $(this).width() > 768) { $('.headerBackground').removeClass('hidden'); $('.headerSection').addClass('frozenHeader'); $('.headerSection__shopData').addClass('hidden'); $('.headerSection__row').first().addClass('scrollHeader'); $('.headerSection').css('height', '70px'); $('.mainMenu__navLink').not('.openCategoryMenu-js').addClass('hidden'); } else if ($(this).scrollTop() == 0 && $(this).width() > 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection').css('height', '150px'); $('.mainMenu__navLink').not('.openCategoryMenu-js').removeClass('hidden'); } } }); $(document).on('click', function (e) { //categories list if ($(e.target).closest('.openCategoryMenu-js').length === 0 && $(e.target).closest('.mainNavigation-js').length === 0 && $(e.target).closest($('.mainNavigation-js').children()).length === 0 && $(e.target).closest('.openPagesMenu-js').length === 0) { if($('.mainNavigation-js').css('display') != 'none') { $('.mainNavigation-js').toggle(200); $('.openCategoryMenu-js').removeClass('activeButton-js'); } } //pages list if($(e.target).closest('.openPagesMenu-js').length === 0 && $(e.target).closest('.sitesNavigation-js').length === 0 && $(e.target).closest($('.sitesNavigation-js').children()).length === 0 && $(e.target).closest('.openCategoryMenu-js').length === 0) { if($('.sitesNavigation-js').css('display') != 'none') { $('.sitesNavigation-js').toggle(200); $('.openPagesMenu-js').removeClass('activeButton-js'); } } //search form - autocomplete if($(e.target).closest('.searchForm__searchAutocomplete-js').length === 0 && $(e.target).closest($('.searchForm__searchAutocomplete-js').children()).length === 0) { if($('.searchForm__searchAutocomplete-js').css('display') != 'none') { $('.searchForm__searchAutocomplete-js').toggle(200); } } }); } };
Pozostała jeszcze mała modyfikacja kodu w porównywarce towarów, ponieważ przyklejony nagłówek jest przysłonięty przez porównywarkę. W tym celu otwórz plik js/layout1.js a w nim wyszukaj linię ” if (window.pageYOffset > (topPosition)) {„. Linia ta znajduje się w funkcji, której poczatkiem jest linia „$(window).on(’scroll', function() {” a końcem linia „});”. Sama funkcja ma ok. 13 linii długości. Usuń ją, a w jej miejsce wklej poniższy kod:
$(window).on('scroll', function() { if($('.frozenHeader').index()) { var headerHeight = parseInt($('.frozenHeader').css('height') + 5); } if (window.pageYOffset > (topPosition)) { topSection.style.position = 'sticky'; topSection.style.zIndex = '12'; if($('.frozenHeader').index()) { topSection.style.top = headerHeight + "px"; } else { topSection.style.top = 75 + "px"; } } else { topSection.style.position = 'inherit'; topSection.style.top = 'none'; topSection.style.zIndex = 'inherit'; } });
Gotowe ! W ten sposób problem nachodzenia porównywarki na przyklejony nagłówek zostaje wyeliminowany. To wszystkie kroki do wykonania przyklejonego nagłówka, gdy wybrałeś w Kreatorze wariant drugi nagłówka. Instrukcja dla wariantu pierwszego znajduje się na początku niniejszego artykułu. 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.

Nagłówek zawierający wielopoziomowe pionowe menu w szablonie Topaz

W niniejszym artykule dowiesz się, w jaki sposób zmodyfikować pliki swojego szablonu tak, by obsługiwał on nowy nagłówek zawierajacy wielopoziomowe pionowe menu.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.
UWAGA! Niektóre z instrukcji różnią się w zależności od obecnie posiadanego nagłówka (wariant 1 lub wariant 2), jednak wklejany kod w obu przypadkach będzie identyczny. Uważnie czytaj, czy dana instrukcja odnosi się do obecnie posiadanego przez Ciebie nagłówka! Dla uproszczenia, nowy wariant nagłówka będzie w niniejszym artykule nazywany "trzecim wariantem nagłówka".
1. Plik HTML
Zaczynamy od usunięcia kodu HTML z obecnym nagłówkiem. W tym celu otwórz katalog elements/header i usuń plik o nazwie header-1.html (jeśli posiadasz drugi wariant nagłówka, plik nazywa się header-2.html). W tym samym katalogu utwórz nowy plik o nazwie header-3.html i wklej do niego następujący kod:
{% assign categories = page.GroupNodes %} {% assign lngCount = config.Languages | Size -%} {% assign currentLang = config.Languages[page.LanguageId] -%} {% assign header3 = true -%}

{% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}}
{% if customer.Authenticated == true -%} {% endif -%}
{{customer.WishListCount}}

{{ customer.Cart.Count }}
{{ translations.Crt_YourCart }} {{customer.Cart.Value | ToPrice}} {{customer.Currency}}

{{translations.Com_Categories}}

{% assign i = 0 -%} {% assign allCategoriesCounter = header.Nodes | Size -%} {% assign count = header.Nodes | Size | Minus: 1 -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if count == i -%}
{% else -%}

{% endif -%} {% assign i = i | Plus: 1 -%}
{{ category | A }}
{% if categoriesSize > 0 -%} {% endif -%}

{% endfor -%}

{% assign j = 0 -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% assign j = j | Plus: 1 -%} {% if categoriesSize > 0 -%}
{% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%}
{{undercategory.Name}} {% if undercategory.Nodes -%} {% for underundercategory in undercategory.Nodes -%} {% assign underundercategoriesSize = category.Groups | Size -%} {% if underundercategoriesSize > 0 -%} {{underundercategory.Name}} {% endif -%} {% endfor -%} {% endif -%}
{% endfor -%}
{{ translations.SeeAllCategories }}

{% endif -%} {% endfor -%}

{{translations.Hea_Pages}}

{{config.DefinedPages.About.Name}}

{{config.DefinedPages.Payment.Name}}

{{config.DefinedPages.Shipping.Name}}

{{config.DefinedPages.Terms.Name}}

{{translations.Lookbook}}

{{translations.Hea_Contact}}

{% if config.Shop.Contact.PhoneNo != '' -%}
{{config.Shop.Contact.PhoneNo}}
{% endif -%} {% if config.Shop.Contact.Email != '' -%}
{{config.Shop.Contact.Email}}
{% endif -%}
{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

{{ translations.Prf_Language }} {% for language in config.Languages -%}
{{ language.Language }}
{% endfor -%}

{{ translations.Com_Currency }} {% for currency in config.Currencies -%}
{{ currency.Code }}
{% endfor -%}

{% assign name = 'menuBanner' -%} {% assign banner = config.Banners[name] -%}
{% assign imagesNumber = banner.Images | Size -%} {% assign images = banner.Images -%} {% for img in images -%}
{% if img.Link != '' -%} {% endif -%}

{% if img.Heading != '' -%}
{{img.Heading}}
{% endif -%} {% if img.Text != '' -%}
{{img.Text}}
{% endif -%}
{% if img.Link != '' -%} {{translations.Check}} {% endif -%} {% if img.Link != '' -%} {% endif -%}
{% endfor -%} {% if imagesNumber == 0 %}

{{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}

{% if header3 == true -%} 1118 x 534 {% else -%} 1920x680 {% endif -%}

{% endif %}

{% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%}

{{ category | A }}
{% if categoriesSize > 0 -%} {% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%} {% if undercategoriesSize > 0 -%} {{undercategory.Name}} {% if undercategory.Nodes -%} {% for underundercategory in undercategory.Nodes -%} {% assign underundercategoriesSize = category.Groups | Size -%} {% if underundercategoriesSize > 0 -%} {{underundercategory.Name}} {% endif -%} {% endfor -%} {% endif -%} {% endif -%} {% endfor -%} {% endif -%}

{% endfor -%}

{{translations.Hea_Pages}}
{{config.DefinedPages.About.Name}} {{config.DefinedPages.Payment.Name}} {{config.DefinedPages.Shipping.Name}} {{config.DefinedPages.Terms.Name}}

{{translations.Hea_Contact}}

{{translations.Lookbook}}

{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

{% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%}
{% if msg.Title != '' -%}
{% if msg.Url != '' -%} {{ msg.Title }} {% else -%} {{ msg.Title }} {% endif -%}
{% endif -%}
{{ msg.Message }}

{% endif -%} {% endif -%} {% endfor -%}
2. Pliki CSS
Następnie trzeba podmienić kod w plikach css. NAGŁÓWEK 1: Najpierw otwórz plik css/layout0.css, wyszukaj w nim blok kodu, który zaczyna się od ".headerSection{color:{{settings.headerFontColor}};" a kończy na ".headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}". Ten blok kodu należy skasować i w jego miejsce wkleić poniższy: NAGŁÓWEK 2: Najpierw otwórz plik css/layout0.css, wyszukaj w nim blok kodu, który zaczyna się od ".headerBackground{width:100%;background-color:{{settings.headerBgColor}};" a kończy na ".headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}". Ten blok kodu należy skasować i w jego miejsce wkleić poniższy:
.headerBg{background-color:{{settings.headerBgColor}};width:100%}.headerSection__background{height:100px;position:absolute;top:0;background-color:{{settings.headerBgColor}}}.headerSticky{position:sticky;top:0;width:100%;margin:0 auto;background-color:{{settings.headerBgColor}};z-index:100}.header__page-padding{width:94vw}.wideLogo{margin-left:38% !important}.wideLogoLogin{margin-left:38% !important}.headerSection{user-select:none;color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;max-width:1400px;margin:0 auto;padding:0;height:70px;box-sizing:border-box;position:relative;z-index:13}.headerSection__row{display:block;width:100%;max-width:1400px;margin:0 auto;height:100px;padding:10px 0 29px;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection__logo{height:36px;width:auto;text-align:left;z-index:1;display:inline-flex;max-width:100px;float:left;margin-top:20px;align-items:center;justify-content:center}.headerSection__logo img,.headerSection__logo svg{max-height:36px;width:auto;max-width:100px}.headerSection__searchForm{background-color:{{settings.headerBgColor}};width:30%;padding:20px 5px 12px;margin:0 40px 0 42%;overflow:hidden;display:inline-block;text-align:left;border-bottom:1px solid {{settings.secondaryFontColor}};position:relative}.headerSection__searchForm input{width:90%;color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}}}.headerSection__searchForm input:focus{color:{{settings.headerFontColor}}}.headerSection__searchForm__btn{width:20px;height:20px;position:absolute;right:8px;top:25px;background-color:{{settings.headerBgColor}};border:none;outline:none}.headerSection__searchForm__btn svg{width:20px;height:20px;position:absolute;fill:{{settings.secondaryFontColor}};top:0;left:0;outline:none}.headerSection__searchForm__btn svg:hover{cursor:pointer;fill:{{settings.linkFontColor}}}.headerSection__icons{width:auto;background-color:{{settings.headerBgColor}};padding:20px 0 5px;margin:0 0 5px auto;overflow:hidden;display:inline-block;position:absolute;right:0;text-align:right}.headerSection__icons__icon{margin:0 10px;position:relative}.headerSection__icons__icon svg{fill:{{settings.secondaryFontColor}};width:25px;height:25px;outline:none}.headerSection__icons__icon svg:hover{cursor:pointer;transition:200ms;fill:{{settings.linkFontColor}}}.headerSection__icons__icon .itemsCounter{border-radius:50%;width:15px;height:15px;text-align:center;font-size:9px;position:absolute;z-index:2;bottom:0;right:0;background-color:{{settings.linkFontColor}};color:#ffffff}.headerSection__icons .cartInfo{margin-left:10px;display:inline-block;font-size:12px;text-align:right}.headerSection__icons .cartInfo__info{color:{{settings.secondaryFontColor}};display:block}.headerSection__icons .cartInfo__value{color:{{settings.linkFontColor}};display:block;font-weight:600}.headerSection__secondRow{display:flex;justify-content:space-between;flex-direction:row}.headerSection__pages{color:{{settings.headerFontColor}};display:inline-flex;text-transform:uppercase;width:50%}.headerSection__pages__categories{flex:20%;text-align:left;margin-top:1px}.headerSection__pages__categories .showCategories:hover{cursor:pointer}.headerSection__pages__categories .showCategories svg{fill:{{settings.linkFontColor}};transform:rotate(90deg);position:relative;top:3px}.headerSection__pages__categories .categoryMenu{display:block;background-color:{{settings.headerBgColor}};position:absolute;top:60px;width:21.5%;left:-20px;max-height:543px;overflow-y:auto}.headerSection__pages__categories .categoryMenu__categories ul{list-style-type:none;padding-left:20px;margin-block-start:0}.headerSection__pages__categories .categoryMenu__categories ul .compactList{padding-top:5px !important;padding-bottom:5px !important}.headerSection__pages__categories .categoryMenu__categories ul li{padding-bottom:15px;padding-top:15px;display:block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category{text-align:left;font-size:15px;color:{{settings.secondaryFontColor}};position:relative;text-transform:none;display:block}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category:hover{color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category div{display:block;max-width:80%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category svg{width:20px;height:20px;fill:{{settings.linkFontColor}};padding-right:20px;position:absolute;right:0px;top:2px}.headerSection__pages__categories .categoryMenu__categories ul .last{border:none !important}.headerSection__pages__categories .categoryMenu__allCategories{text-transform:none;width:70%;background-color:{{settings.headerBgColor}};display:flex;left:20%;top:60px;position:absolute;top:60px;padding:35px 25px 25px;justify-content:flex-start;flex-wrap:wrap;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer{display:block;flex:0 1 25%}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .undercategory{font-weight:600;font-size:14px;display:block;text-align:left;padding:20px 0 10px;color:{{settings.headerFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .undercategory:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory{font-size:12px;padding:10px 0;color:{{settings.secondaryFontColor}};text-align:left;display:block;padding:5px 0}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory:hover{color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton{flex:100%;display:block;font-size:14px;padding:30px 0 10px;text-align:center;color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton:hover{cursor:pointer}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton .text{position:relative}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton .text svg{fill:{{settings.linkFontColor}};position:absolute;top:-1px;padding-left:5px}.headerSection__pages__other{flex:20%;text-align:right}.headerSection__pages__other span:hover,.headerSection__pages__other a:hover{cursor:pointer;color:{{settings.linkFontColor}}}.headerSection__pages__other svg{fill:{{settings.linkFontColor}};transform:rotate(90deg);position:relative;top:3px}.headerSection__pages__other .otherPages{display:none;text-transform:none;width:auto;background-color:{{settings.headerBgColor}};left:20%;position:absolute;top:60px;padding:10px 35px;justify-content:flex-start;flex-wrap:wrap;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection__pages__other .otherPages ul{padding:0}.headerSection__pages__other .otherPages ul li{font-size:14px;color:{{settings.secondaryFontColor}};text-align:left;list-style-type:none;padding:10px}.headerSection__pages__other .otherPages ul li:hover{color:{{settings.linkFontColor}};cursor:pointer}.headerSection__contact{display:inline-flex;width:30%;justify-content:flex-end}.headerSection__contact__details{margin-left:20px;cursor:pointer}.headerSection__contact__details svg{fill:{{settings.linkFontColor}};width:13px;height:13px}.headerSection__contact__details .rotateSvg{transform:rotate(100deg)}.headerSection__contact__details .contactDetails{color:{{settings.secondaryFontColor}};font-size:12px;margin-left:5px}.headerSection__contact__details .languages{text-transform:uppercase}.headerSection__contact .languageAndCurrencyChange{display:none}.headerSection__contact .languageAndCurrencyChange .languageAndCurrencyChangeMenu{display:flex;position:absolute;box-sizing:border-box;width:225px;background-color:#FFFFFF;border-radius:5px;top:35px;right:-2px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2;padding:10px 0}.headerSection__contact .languageAndCurrencyChange .menu{width:50%}.headerSection__contact .languageAndCurrencyChange .menu .title{color:{{settings.secondaryFontColor}};font-weight:500;font-size:12px;display:inline-block;width:100%;margin:10px 0 5px;opacity:.5;text-align:center}.headerSection__contact .languageAndCurrencyChange .menu .lang,.headerSection__contact .languageAndCurrencyChange .menu .currency{text-align:left;padding-bottom:5px;font-size:14px}.headerSection__contact .languageAndCurrencyChange .menu .lang label,.headerSection__contact .languageAndCurrencyChange .menu .currency label{color:{{settings.secondaryFontColor}}}.headerSection__contact .languageAndCurrencyChange .menu .lang{padding-left:30px}.headerSection__contact .languageAndCurrencyChange .menu .currency{padding-left:20px}.headerSection .openCloseCategoryMenu:hover{cursor:pointer;color:{{settings.linkFontColor}}}@media screen and (max-width: 1600px){.headerSection{padding-left:3%;padding-right:3%}.categoryMenu{max-height:505px !important}}.frozenHeaderCategories{position:absolute;display:inline-block;top:35px;margin-left:40px;text-transform:uppercase}.frozenHeaderCategories .categoriesButton{color:{{settings.headerFontColor}}}.frozenHeaderCategories .categoryMenu{top:100px !important;left:5.5% !important;position:fixed !important}.frozenHeaderCategories .categoryMenu__allCategories{position:fixed;top:100px !important;left:26% !important;width:64% !important}.menuBanner{margin:0 auto;background-color:#f2f2f2;height:auto}.menuBanner__list{width:100%;height:100%}.menuBanner__wrapper{width:100%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.menuBanner a{position:absolute;bottom:8%;left:10%;text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.menuBanner figure{margin:0}.menuBanner__image img{box-sizing:border-box;padding:0;margin:0;object-fit:cover;min-height:170px;max-width:100%;width:100%;object-position:50% 50%}.menuBanner__image img[src="css/img/alo.gif"]{width:100% !important;height:100% !important}.menuBanner__image_placeholder img{object-fit:contain;background-color:#f2f2f2;max-height:680px}.menuBanner__info{position:absolute;left:10%;bottom:33%;width:80%}.menuBanner__title{margin:0;padding:0;font-weight:300;color:{{settings.bannerFontColor}};display:block;font-size:48px}.menuBanner__title.menuBanner__title__small{line-height:1.5;font-size:14px;margin-top:10px}.menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0}.menuBanner__size{position:absolute;font-size:30px;color:#808080;text-align:center;top:50%;left:50%;transform:translate(-50%, -50%);margin:0}.menuBanner .slick-track{height:100%}.menuBanner .slick-arrow{background-color:{{settings.sliderBgColor}};padding:20px}.menuBanner .slick-arrow:hover{background-color:{{settings.sliderHoverBgColor}}}.menuBanner .slick-arrow:before{color:white;position:absolute;right:0;left:10px;top:47%;transform:translateY(-50%);font-size:20px}@media only screen and (max-width: 599px){.menuBanner .slick-arrow:before{font-size:15px}}.menuBanner .slick-prev,.menuBanner .slick-next{font-size:0;line-height:0;position:absolute;top:51%;display:block;width:30px;height:155px;padding:0;-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);transform:translate(0, -50%);cursor:pointer;border:none;outline:none;background-color:{{settings.sliderBgColor}};opacity:.6;z-index:8}.menuBanner .slick-prev :hover,.menuBanner .slick-next :hover{background-color:{{settings.sliderHoverBgColor}}}.menuBanner .slick-list{padding:0 !important;height:100%}.menuBanner .slick-prev:hover,.menuBanner .slick-next:hover{outline:none}.menuBanner .slick-prev.slick-disabled:before,.menuBanner .slick-next.slick-disabled:before,.menuBanner .slick-prev.slick-disabled,.menuBanner .slick-next.slick-disabled{outline:none;display:none}.menuBanner .slick-prev:before,.menuBanner .slick-next:before{color:{{settings.sliderArrowColor}};fill:{{settings.sliderArrowColor}};opacity:.8}.menuBanner .slick-prev{left:0;border-radius:0 25px 25px 0}.menuBanner [dir='rtl'] .slick-prev{right:0;left:auto}.menuBanner .slick-next{right:0;border-radius:25px 0 0 25px}.menuBanner .slick-arrow.slick-next:before{left:3px}.menuBanner [dir='rtl'] .slick-next:before,.menuBanner .slick-prev:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.menuBanner .slick-next:before,.menuBanner [dir='rtl'] .slick-prev:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.menuBanner .slick-prev:before,.menuBanner .slick-next:before{width:4px;height:4px;content:" "}.menuBanner [dir='rtl'] .slick-next{right:auto;left:0}.menuBanner [dir='rtl'] .slick-next:before,.menuBanner .slick-prev:before,.menuBanner .slick-next:before,.menuBanner [dir='rtl'] .slick-prev:before{width:10px;height:10px}.menuBanner .slick-arrow:hover:before{border-color:{{settings.sliderHoverArrowColor}}}@media screen and (max-width: 480px){.menuBanner .menuBanner__info{bottom:55%}.menuBanner .menuBanner__title{font-size:20px}}.headerSection__bannerBg{width:100%;height:fit-content;background-color:{{settings.headerBgColor}} !important;margin-top:0 !important}.headerSection__banner{display:block;width:100%;margin:0 auto;height:fit-content;max-width:1400px;margin:0 auto;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative;background-color:{{settings.headerBgColor}}}.headerSection__banner .menuBanner{background-color:{{settings.headerBgColor}} !important}.headerSection__banner .menuBanner__wrapper{height:fit-content;width:79.9% !important;float:right;margin-left:auto;margin-right:0}.headerSection__banner .menuBanner__wrapper .imageLink{left:inherit;bottom:inherit;width:inherit;box-sizing:inherit;padding:inherit;display:contents;position:relative}.headerSection__banner .menuBanner__image_placeholder img{max-height:534px !important}@media screen and (max-width: 1600px){.headerSection__banner{padding-left:3%;padding-right:3%}.header__page-padding{padding-left:3%;padding-right:3%}}.searchForm__loader-js{top:25px !important}.searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:30px;position:relative;box-sizing:border-box}.searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.configMessages__header{min-height:67px !important}.message-popup-background{margin-top:0 !important}
NAGŁÓWEK 1: W tym samym katalogu otwieramy plik layout-m0.css. Wyszukujemy w nim blok kodu zaczynający się od "@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}". Usuwamy go, i w jego miejsce wklejamy poniższy: NAGŁÓWEK 2: W tym samym katalogu otwieramy plik layout-m0.css. Wyszukujemy w nim blok kodu zaczynający się od "@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon". Usuwamy go, i w jego miejsce wklejamy poniższy:
@media screen and (max-width: 768px){.headerSection{height:100px}.headerSection__logo{margin-top:0 !important}.headerSticky{position:inherit !important;width:100%;z-index:10;height:75px}.headerSticky .header__page-padding{padding-left:3%;padding-right:3%}.headerThirdType{display:none}.hideOnMobile{display:none}.headerSection__secondRow{display:none}.headerSection__icons{display:none}.opensearchMenu{display:block;position:absolute;right:15px;top:20px}.wideLogo{margin-left:0 !important}.searchFormMobileContainer{display:none;width:calc(100vw - 40px);height:100vh;background-color:{{settings.primaryPageBgColor}};z-index:100;position:fixed;padding:40px 20px;top:0;left:0;margin:0 !important}.searchFormMobileContainer svg{fill:{{settings.linkFontColor}};position:absolute}.searchFormMobileContainer .headerSection__searchForm__phrase{background-color:{{settings.headerBgColor}};width:100%;padding-bottom:10px;margin:50px auto 0;overflow:hidden;display:inline-block;text-align:left;border-bottom:1px solid {{settings.secondaryFontColor}};position:relative}.searchFormMobileContainer .headerSection__searchForm__btn{position:absolute;top:90px;right:25px}.mobileCategories{display:none;text-transform:uppercase;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:{{settings.headerBgColor}};z-index:10;font-size:14px}.mobileCategories .rotate{transform:rotate(-90deg) !important}.mobileCategories__menu{padding:20px;color:{{settings.secondaryFontColor}}}.mobileCategories__menu ul{padding:0}.mobileCategories__menu .closeCategoryMenu{fill:{{settings.linkFontColor}};cursor:pointer}.mobileCategories__menu .categoryMobile{width:100%;display:block;position:relative}.mobileCategories__menu .categoryMobile .category .langAndCurrencyIcon{fill:{{settings.linkFontColor}};width:14px;height:14px;display:inline-block;position:inherit;margin-right:10px}.mobileCategories__menu .categoryMobile .category .categoryTitle{width:100%;display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category svg{position:absolute;top:13px;right:10px;transform:rotate(90deg);fill:{{settings.linkFontColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile{display:block;position:relative}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .undercategoryMobile{display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underunderCategoryContainerMobile{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underundercategoryMobile{display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underundercategoryMobile svg{position:absolute;top:13px;right:10px;transform:rotate(90deg);fill:{{settings.linkFontColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange{position:relative}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange svg{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .languageAndCurrencyChangeMenu{display:flex;box-sizing:border-box;width:60%;text-transform:uppercase;padding:10px 0;margin:0 auto}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu{width:50%}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .title{color:{{settings.secondaryFontColor}};font-weight:500;font-size:12px;display:inline-block;width:100%;margin:10px 0 5px;opacity:.5;text-align:left;padding-left:20px}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .lang,.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .currency{text-align:left;padding-bottom:5px;font-size:14px}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .lang label,.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .currency label{color:{{settings.secondaryFontColor}}}.mobileCategories__menu .categoryMobile .category>div,.mobileCategories__menu .categoryMobile .category svg{display:inline}.mobileCategories__menu ul li{list-style-type:none}.searchForm__searchAutocomplete{box-shadow:none;z-index:101}.searchForm__searchAutocomplete .searchAutocomplete__product{max-width:none;width:100%}.searchForm__loader-js{top:70px !important;right:0 !important;left:0 !important;margin:0 auto !important;transform:none !important}}.menuBanner__title{font-size:28px}.menuBanner__title.menuBanner__title__small{font-size:13px}.menuBanner__info{bottom:unset;top:80px}@media screen and (max-width: 480px){.menuBanner__image{width:100%;height:300px;object-fit:cover;object-position:center}}@media screen and (max-width: 1390px){.headerSection__banner .menuBanner__wrapper{width:100% !important}}@media screen and (max-width: 768px){.mobileCategories{overflow-y:scroll}.mobileCategories .mobileCategories__menu ul{padding-bottom:80px}}
NAGŁÓWEK 1:Dalej, w tym samym katalogu otwieramy plik layout-d0.css. Wyszukujemy w nim linię zaczynającą się od "@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}". Usuwamy całą linię a w jej miejsce wklejamy poniższy kod: NAGŁÓWEK 2:Dalej, w tym samym katalogu otwieramy plik layout-d0.css. Wyszukujemy w nim linię zaczynającą się od "@media screen and (min-width: 790px){.headerSection .mainNavigation__links". Usuwamy całą linię a w jej miejsce wklejamy poniższy kod:
@media screen and (min-width: 769px){.searchFormMobileContainer{display:none}.mobileCategories{display:none}.opensearchMenu{display:none}}@media screen and (max-width: 1280px){.headerSection__icons{width:auto !important}.categoryMenu__allCategories{left:auto !important;right:0;width:75% !important}.categoryMenu__allCategories .undercategoryContainer{flex:0 1 33% !important}}@media screen and (min-width: 769px) and (max-width: 1070px){.categoryMenu{width:40% !important}.hideOnMobile{display:none}}@media screen and (min-width: 769px) and (max-width: 1350px){.headerSection__contact{width:50%;margin-left:10px}}@media screen and (min-width: 769px) and (max-width: 1280px){.headerSection__searchForm{margin-left:20%;width:35%}.wideLogo{margin-left:18% !important}.wideLogoLogin{margin-left:12% !important}}@media screen and (max-width: 950px){.headerSection__pages__categories{flex:26% !important}}@media screen and (max-width: 850px){.headerSection__contact__details{margin-left:10px}}@media screen and (max-width: 1390px){.categoryMenu{left:0 !important}}@media screen and (min-width: 768px) and (max-width: 1000px){.frozenHeaderCategories{margin-left:20px !important}}@media screen and (max-width: 1390px){.headerSection__banner .menuBanner__wrapper{width:100% !important}}

3. Podpięcie pliku z nowym nagłówkiem
Kolejnym krokiem jest umożliwienie wyświetlania naszego nowego nagłówka. W tym celu, w głównym katalogu otwieramy plik _layout.html. Linię o treści "{% include 'elements/header/header-1.html' -%}" podmieniamy na "{% include 'elements/header/header-3.html' -%}". NAGŁÓWEK 2: W przypadku drugiego nagłówka, linia ta brzmi: "{% include 'elements/header/header-2.html' -%}".
4. Zmiany w plikach JS
Następnie musimy podmienić kod w plikach js. W tym celu otwieramy plik js/layout0.js a w nim wyszukujemy linię "var headerFunctions = {". Musimy usunąć cały blok kodu. Ostatnią linią w tym bloku jest "};". Żeby łatwiej było zlokalizować cały kod do usunięcia, następna linia po ostatniej skasowanej powinna wyglądać tak: "ui.showFooterSection = function() {". W miejsce usuniętego bloku kodu, wklejamy poniższy:
" var headerFunctions = { init: function () { headerFunctions.events(); headerFunctions.setBreadcrumbsMargin(); headerFunctions.frozenHeaderCategories(); }, // Function that sets the menu position according to the width of the logo setMenuPosition: function() { var logo = $('img[src="logo.png"]'); var logoWidth = logo.width(); if(logoWidth > 120) { logo.parent().addClass('longLogo'); $('.headerSection__mainMenu__navLinks').addClass('longLogo'); $('.headerSection__iconsMenu').addClass('longLogo'); } }, events: function () { var pageHeaderTop = $('.headerSticky'); var pageHeader = $('.headerSection'); var mobileCategories = $('.mobileCategories'); var pageId = $('body').find('input[name="pageId"]').attr('value'); let mobileLang = false; pageHeader.on('click', '.openLanguageAndCurencyMenu-js', function(e) { $('.languageAndCurrencyChange').toggle(200); $(this).toggleClass('activeButton-js'); }); pageHeader.on('change', '.customerLanguageChange-js', function(e) { if($(this).is(':checked')) {app.customerLanguageChange(e)} }); pageHeader.on('change', '.customerCurrencyChange-js', function(e) { if($(this).is(':checked')) {app.customerCurrencyChange(e)} }); pageHeader.on('click', '.openCloseCategoryMenu .categoriesButton', function(e) { if(pageId != 1 && pageId != 22) { $('.categoryMenu-js').toggleClass('hidden'); if($('.categoryMenu-js').hasClass('hidden')) { $('.categoryMenu__allCategories').css('display', 'flex'); $('.categoryMenu__allCategories').addClass('hidden'); } } else { if($(window).width() < 1391) { if($('.categoryMenu-js').hasClass('hidden')) { $('.categoryMenu-js').removeClass('hidden'); } else { $('.categoryMenu__allCategories').css('display', 'flex'); $('.categoryMenu__allCategories').addClass('hidden'); $('.categoryMenu-js').addClass('hidden'); } } } }); pageHeader.on('click', '.categoriesButton', function(e) { if (($(window).width() > 1390) && (!($('.categoryMenu__categories').hasClass('hidden')))){ $('.categoryMenu__allCategories').css('display', 'flex'); $('.categoryMenu__allCategories').addClass('hidden'); } }); pageHeader.on('mouseover', '.categoryMenu__categories ul li', function(e) { var categoryId = $(this).find('input[name="categoryId"]').attr('value'); var undercategory = $('input[name="undercategoryId"]'); undercategory.each(function() { if($(this).attr('value') == categoryId) { $(this).next().removeClass('hidden'); } else { $(this).next().addClass('hidden'); } }) }); pageHeader.on('click', '.otherPages-js', function(e) { $('.otherPages').toggle(200); }); pageHeaderTop.on('click', '.opensearchMenu-js', function(e) { $('.headerSection__searchForm').addClass('searchFormMobileContainer'); $('.closesearchMenu-js').removeClass('hidden'); $('.searchFormMobileContainer').toggle(200); if($(window).width() <= 768) { preventScrolling(); $('.go-to-top__btn-js').addClass('hidden'); } }); pageHeaderTop.on('click', '.closesearchMenu-js', function(e) { $.when($('.searchFormMobileContainer').toggle(200)).done(function() { $('.headerSection__searchForm').removeClass('searchFormMobileContainer'); $('.closesearchMenu-js').addClass('hidden'); }); if($(window).width() <= 768) { $('body').toggleClass('noscroll'); $('.go-to-top__btn-js').removeClass('hidden'); } }); mobileCategories.on('click', '.closeCategoryMenu-js', function(e) { $.when($('.mobileCategories').toggle(200)).done(function() { $('.mobileCategories').toggleClass('hidden'); }); $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons'); $('.menuButton').toggleClass('menuActive'); if($('.headerSection').css('z-index') == 0) { $('.headerSection').css('z-index', 13); } else { $('.headerSection').css('z-index', 0); } }); mobileCategories.on('click', '.openUnderCategory-js', function(e) { var submenu = $(this).parent().find($('.undercategoryContainerMobile')); if($(this).hasClass('mobileLang') && mobileLang == false) { mobileLang = true; $('.languageAndCurrencyChange').clone().appendTo('.mobileLangContainer'); } $(this).toggleClass('rotate'); submenu.toggle(200); }); mobileCategories.on('click', '.openUnderUnderCategory-js', function(e) { var subsubmenu = $(this).parent().find($('.underundercategoryContainerMobile')); $(this).toggleClass('rotate'); subsubmenu.toggle(200); }); mobileCategories.scroll(function() { if($(this).length) { if(!($(this).hasClass('hidden'))) { if ($(this).scrollTop() > 10) { $('.go-to-top__btn-js').fadeIn(); } else { $('.go-to-top__btn-js').fadeOut(); } } } }); $(window).ready(function(e) { $('html, body').animate({scrollTop : 0},10); }); $(window).on('scroll', function(e) { if($(this).scrollTop() > 0 ) { $('.headerSticky').css('box-shadow', '2px 1px 4px 0 #b0b0b0'); } else { $('.headerSticky').css('box-shadow', 'none'); } }); $(window).on('load', function(e) { var logoWidth = parseInt($('.headerSection__logo img').css('width')); var isCustomerLogged = $('body').find('input[name="isAuthenticatedCustomer"]').attr('value'); if(logoWidth > 36) { if(isCustomerLogged == 1) { $('.headerSection__searchForm').addClass('wideLogoLogin'); } else { $('.headerSection__searchForm').addClass('wideLogo'); } } if($(window).width() <= 768) { $('.headerSection__searchForm').addClass('searchFormMobileContainer'); $('.closesearchMenu-js').removeClass('hidden'); } else { $('.headerSection__searchForm').removeClass('searchFormMobileContainer'); $('.closesearchMenu-js').addClass('hidden'); if($(window).width() > 768 && $(window).width() <= 1390) { $('.categoryMenu-js').addClass('hidden'); $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); } else { if(pageId == 1 || pageId == 22) { $('.categoryMenu-js').removeClass('hidden'); } else { $('.categoryMenu-js').addClass('hidden'); $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); } } } }); $(window).on('resize', function(e) { if($(window).width() <= 768) { $('.headerSection__searchForm').addClass('searchFormMobileContainer'); $('.closesearchMenu-js').removeClass('hidden'); $('.headerSection__searchForm').css('display', 'none'); $('body').removeClass('noscroll'); } else { $('.headerSection__searchForm').removeClass('searchFormMobileContainer'); $('.closesearchMenu-js').addClass('hidden'); $('.headerSection__searchForm').css('display', 'inline-block'); $('.categoryMenu__allCategories').addClass('hidden'); if($(window).width() > 768 && $(window).width() <= 1390) { if(!($('.mobileCategories').hasClass('hidden'))) { $('.mobileCategories').toggle(200); $('.mobileCategories').addClass('hidden'); $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons'); $('.menuButton').toggleClass('menuActive'); if($('.headerSection').css('z-index') == 0) { $('.headerSection').css('z-index', 13); } else { $('.headerSection').css('z-index', 0); } } $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); $('.categoryMenu-js').addClass('hidden'); $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); } else { if(pageId == 1 || pageId == 22) { $('.categoryMenu-js').removeClass('hidden'); } else { $('.categoryMenu-js').addClass('hidden'); $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); } } } }); $('.menuBanner').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, autoplay: true, autoplaySpeed: 8000 }); var isCategoriesClonned = false; $(window).on('scroll', function(e) { if ($(window).scrollTop() > 70 && isCategoriesClonned == false){ isCategoriesClonned = true; $('.headerSection__pages__categories').clone().appendTo('.frozenHeaderCategories'); $('.frozenHeaderCategories').find('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); $('.frozenHeaderCategories').find('.categoryMenu__allCategories').addClass('hidden'); $('.frozenHeaderCategories').find('.categoryMenu-js').addClass('hidden'); } else if ($(window).scrollTop() <= 70 && isCategoriesClonned == true) { isCategoriesClonned = false; $('.frozenHeaderCategories .headerSection__pages__categories').remove(); if(pageId != 1 && pageId != 22) { $('.categoryMenu__allCategories').addClass('hidden'); $('.categoryMenu-js').addClass('hidden'); } } }); }, setBreadcrumbsMargin: function() { $('.breadcrumbs-wrapper').css('margin-top', '0', '!important'); }, frozenHeaderCategories: function() { var pageHeaderTop = $('.headerSticky'); pageHeaderTop.on('click', '.frozenHeaderCategories .openCloseCategoryMenu .categoriesButton', function(e) { $('.frozenHeaderCategories .categoryMenu-js').toggleClass('hidden'); if($('.frozenHeaderCategories .categoryMenu-js').hasClass('hidden')) { $('.frozenHeaderCategories .categoryMenu__allCategories').css('display', 'flex'); $('.frozenHeaderCategories .categoryMenu__allCategories').addClass('hidden'); } }) pageHeaderTop.on('mouseover', '.categoryMenu__categories ul li', function(e) { var categoryId = $(this).find(' input[name="categoryId"]').attr('value'); var undercategory = $('input[name="undercategoryId"]'); undercategory.each(function() { if($(this).attr('value') == categoryId) { $(this).next().removeClass('hidden'); } else { $(this).next().addClass('hidden'); } }) }); $(document).on('click', function (e) { var pageId = $('body').find('input[name="pageId"]').attr('value'); if($(e.target).closest('.otherPages-js').length === 0 && $(e.target).closest('.otherPages').length === 0 && $(e.target).closest('.showCategories').length === 0 && $(e.target).closest($('.otherPages-js').children()).length === 0 && $(e.target).closest($('.otherPages').children()).length === 0) { if($('.otherPages').css('display') != 'none') { $('.otherPages').toggle(200); } } if($(e.target).closest('.categoryMenu__allCategories').length === 0 && $(e.target).closest($('.categoryMenu__allCategories').children()).length === 0) { $('.categoryMenu__allCategories').each(function(e) { if($(this).css('display') != 'none') { $(this).addClass('hidden'); } }); if($(e.target).closest('.categoryMenu-js').length === 0 && $(e.target).closest('.categoryMenu__categories').length === 0 && $(e.target).closest('.showCategories').length === 0 && $(e.target).closest('.categoryMenu-js > ul').length === 0 && $(e.target).closest($('.categoryMenu-js > ul').children()).length === 0) { if($('.categoryMenu-js').css('display') != 'none' && pageId != 1 && pageId != 22) { $('.categoryMenu-js').addClass('hidden'); } if($('.categoryMenu-js').css('display') != 'none' && (pageId == 1 || pageId == 22) && $(window).scrollTop() > 70) { $('.frozenHeaderCategories .categoryMenu-js').addClass('hidden'); } } } }); } }; "
UWAGA! W powyższym kodzie do wklejenia, usuń znaki " na początku i końcu bloku kodu!
5. Dodanie nowego bannera
Kolejną kwestią jest utworzenie nowego bannera, który bedzie wyświetlany obok listy kategorii. W tym celu otwieramy Panel Administracyjny, zakładki Wygląd sklepu -> Ustawienia, wybieramy właściwy szablon i przechodzimy do zakładki Bannery. Sprawdzamy, czy mamy banner o nazwie menuBanner. Jeśli tak, to otwieramy go. Jeśli nie, klikamy na dużą ikonkę z plusem, w celu utworzenia nowego bannera. Musimy nadać mu nazwę menuBanner. W bannerze do nowego wariantu nagłówka, zalecany rozmiar obrazka wynosi 1118x534. W innym przypadku, obrazek może miec problemy ze skalowaniem. Możemy również uzupełnić pozostałe pola bannera, takie jak m.in. nagłówek, tekst, czy link. Są one obsługiwane w nowym nagłówku.
6. Dodatkowe zmiany w plikach JS
Pozostaje dodać małe zmiany w plikach js. Otwórz plik js/layout0.js. 1. Wyszukaj linię "$('.headerSearchForm-js').parent().append(autocompleteList);". Skasuj ją i podmień na następujący kod:
if($('.headerThirdType'.length)) { $('.headerSearchForm-js').append(autocompleteList); } else { $('.headerSearchForm-js').parent().append(autocompleteList); }
2. Wyszukaj linię "productWishListAdd: function (e) {". Funkcja ta kończy się linią "},". Tuż przed końcem funkcji (przed linią },) wklej poniższy kod:
if($('.headerThirdType')) { var items = parseInt( $('.favCounter').text()) +1; $('.favCounter').text(items); if(parseInt($('.favCounter').text()) > 0) { $('.favCounter').removeClass('hidden'); } else { $('.favCoutner').addClass('hidden'); } }
3. Funkcja przed tą, przed chwilą edytowaną, nazywa się productWishListRemove. W niej podobnie jak poprzednio odszukaj jej koniec (linia "},") i tuż przed końcem dodaj kod:
if($('.headerThirdType')) { var items = parseInt( $('.favCounter').text()) +1; $('.favCounter').text(items); if(parseInt($('.favCounter').text()) > 0) { $('.favCounter').removeClass('hidden'); } else { $('.favCoutner').addClass('hidden'); } }
4. Wyszukaj linię "$('.showBottomMenuSection-js').on('click', function(e) {". Jest to funkcja, która kończy się linią "});". Usuń ją i wklej następujący kod w jej miejsce:
$('.showBottomMenuSection-js').on('click', function(e) { if($('.headerThirdType').length) { $('.go-to-top__btn-js').fadeOut(); $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons'); $('.menuButton').toggleClass('menuActive'); if($('.mobileCategories').hasClass('hidden')) { $('.mobileCategories').toggleClass('hidden'); $('.mobileCategories').toggle(200); $('body').css('overflow', 'unset'); $('body').css('overflow-y', 'hidden'); } else { $.when($('.mobileCategories').toggle(200)).done(function() { $('.mobileCategories').toggleClass('hidden'); $('body').css('overflow-y', 'visible'); $('body').css('overflow', 'visible'); }); } if($('.headerSection').css('z-index') == 13) { $('.headerSection').css('z-index', 0); } else { $('.headerSection').css('z-index', 13); } } else { $('.pageHeader-js .headerMainMenu-js').toggle(200); $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons'); $('.menuButton').toggleClass('menuActive'); if($('.headerSection').css('z-index') == 13) { $('.headerSection').css('z-index', 20); } else { $('.headerSection').css('z-index', 13); } } });
5. Wyszukaj linię "updateProductsInCart: function () {". Funkcja ta kończy się linią "},". Usuń linię powyżej ("});") i wklej poniższy kod:
if($('.headerThirdType')) { $('.cartCounter').text(newValue); if(parseInt($('.cartCounter').text()) > 0) { $('.cartCounter').removeClass('hidden'); } else { $('.cartCounter').addClass('hidden'); } ui.changeCartValueInHeader(); } }); stockLevelValue -= addedItems; $('#stockLevelValueInput').val(stockLevelValue);
6. Poniżej znajduje się funkcja, która rozpoczyna się od "incrementProductsInCart: function () {". Podobnie jak poprzednio, ale bez usuwania niczego, przed jej ostatnią linijką ("},") wklej ten kod:
if($('.headerThirdType')) { $('.cartCounter').text(newValue); if(parseInt($('.cartCounter').text()) > 0) { $('.cartCounter').removeClass('hidden'); } else { $('.cartCounter').addClass('hidden'); } }
7. Poniżej znajduje się funkcja, która rozpoczyna się od "decrementProductsInCart: function () {" i po raz kolejny, analogicznie, przed ostatnią linijką, wklej ten kod:
if($('.headerThirdType')) { $('.cartCounter').text(newValue); if(parseInt($('.cartCounter').text()) > 0) { $('.cartCounter').removeClass('hidden'); } else { $('.cartCounter').addClass('hidden'); } }
8. Wyszukaj linię "$('.go-to-top__btn-js').click(function(){". Funkcja ta kończy się linią "});". Skasuj całą funkcję a w jej miejsce wklej poniższy kod:
$('.go-to-top__btn-js').click(function(){ if($('.mobileCategories').length) { if(!($('.mobileCategories').hasClass('hidden'))) { $('.mobileCategories').animate({scrollTop : 0},800); } else { $('html, body').animate({scrollTop : 0},800); $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800); } } else { $('html, body').animate({scrollTop : 0},800); $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800); } return false; });
9. Pod dodaną w jednym z poprzednich punktu linią "$('#stockLevelValueInput').val(stockLevelValue);" znajduje się linia "},". Pod nią wklej poniższy kod:
changeCartValueInHeader: function() { var requestCartValue = $.ajax({ url: window.location.href, method: "GET", data: { __collection: 'customer.Cart.Value' } }); var requestCustomerCurrency = $.ajax({ url: window.location.href, method: "GET", data: { __collection: 'customer.Currency' } }); var newCartValue; var customerCurrency; requestCustomerCurrency.done(function(res) { customerCurrency = res.collection; requestCartValue.done(function(res2) { newCartValue = +res2.collection; if($('.cartInfo__value').length) { var newCartValueString = newCartValue.toString(); var isDecimalSeparator = false; var beforeDot; var afterDot; for(let i=0;i<newCartValueString.length;i++) { if(newCartValueString[i] == '.') { isDecimalSeparator = true; beforeDot = newCartValueString.slice(0,i); afterDot = newCartValueString.slice(i+1, newCartValueString.length); } } if(isDecimalSeparator == true) { beforeDot = beforeDot.replace(/(?!^)(?=(?:\d{3})+(?:\.|$))/gm, ' '); if(afterDot.length == 1) { afterDot = afterDot.concat('0'); } } else { beforeDot = newCartValueString.replace(/(?!^)(?=(?:\d{3})+(?:\.|$))/gm, ' '); afterDot = '00'; } $('.cartInfo__value').text(beforeDot + ',' + afterDot + ' ' + customerCurrency); } }); }); },
10. W pliku js/layout1.js wyszukaj funkcję, zaczynającą się od "productWishListDelete: function (e) {". Funkcja kończy się linią "},". Przed jej końcem wklej poniższy kod:
if($('.headerThirdType')) { var items = parseInt( $('.favCounter').text()) -1; $('.favCounter').text(items); if(parseInt($('.favCounter').text()) > 0) { $('.favCounter').removeClass('hidden'); } else { $('.favCounter').addClass('hidden'); } }
11. W pliku js/layout1.js wyszukaj linię "function addToCart(e) {". Tuż nad nią dodaj następujące linijki:
var stockLevelValue; var addedItems;
12. Kilka linijek wyżej znajduje się linia "$('.attributes-select:not(:last-child)').after(' ');". Pod nią wklej następujący kod:
body.on('click', '.stayOnPage-js', function(e) { if(stockLevelValue <= 0) { location.reload(); } });
13. Wróćmy do funkcji addToCart (punkt 10). Jedna z początkowych linii tej funkcji brzmi "value.value = (value.value).replace('.',',')". Tuż pod nią wklej poniższe linie kodu:
stockLevelValue = parseInt($('#stockLevelValueInput').attr('value')); addedItems = value.value;
a w wyszukanej przed chwilą linii, na jej końcu dodaj średnik (jeśli go nie ma). 14. Wyszukaj linię "if ($('input[name="basic-unit-ratio"]').index() >= 0) {". Tuż nad nią wklej:
$('#stockLevelValueInput').val(value);
15. W pliku js/layout1.js Wyszukaj linię "recalculate: function (itemNr, itemQty) {". Tuż nad nią znajduje się linia "},". Tuż nad nią wklej:
ui.changeCartValueInHeader();
16. Wyszukaj linię "$('body').on('click', '.js-change-value', function (e) {". Pod nią znajduje się linia "cartFunctions.orderChangeValue(e);". Tuż pod nią wklej tę samą linię co w punkcie poprzednim. 17. Wyszukaj linię "$('body').on('change', '.js-value', function (e) {". Pod nią znajduje się linia "cartFunctions.orderChangeValue(e);". Tuż pod nią wklej tę samą linię co w punkcie poprzednim.
7. Dodanie tłumaczeń
Nowy nagłówek wymaga zmiany w tłumaczeniach. Otwieramy Panel Administracyjny -> Wygląd sklepu -> Ustawienia. Wybieramy własciwy szablon i klikamy zakładkę "Tłumaczenia". Dodajemy nowe tłumaczenie: Id: SeeAllCategories Tekst: Zobacz wszystkie kategorie
8. Dodanie opcji zmiany stylu kategorii (kompaktowy lub wygodny)
Domyślnym sposobem prezentacji kategorii w nowym nagłówku jest wygodny. Pokazuje on mniej kategorii bez przewijania, ale za to odstępny między nimi są większe. Istnieje także opcja trybu kompaktowego. Możemy w prosty sposób dodać opcję przełączania między trybami w Panelu Administracyjnym. Aby to zrobić, otwórz plik __settings.liquid. Pod jedną z pierwszych linii kodu ("{% when '1' %}") wklej poniższe linie kodu:
{% assign HeaderThirdType = "Widok pierwszego poziomu menu głównego (dla trzeciego typu nagłówka)" -%} {% assign HeaderThirdTypeComfortable = "Wygodny (do 10 kategorii w pierwszym poziomie)" -%} {% assign HeaderThirdTypeCompact = "Kompaktowy (do 16 kategorii w pierwszym poziomie)" -%}
Powyżej dodane zostały tłumaczenia polskie wyboru opcji. Teraz należy dodać angielskie. W tym celu wyszukaj linię "{% else %}" i poniższe linie wklej tuż pod wyszukaną przed chwilą:
{% assign HeaderThirdType = "View of the first level of the main menu (for the third type of header)" -%} {% assign HeaderThirdTypeComfortable = "Comfortable (up to 10 categories in the first level)" -%} {% assign HeaderThirdTypeCompact = "Compact (up to 16 categories in the first level)" -%}
W tym samym pliku poniżej znajduje się cały ciąg pól oznaczonych jako:
*treść*
Łatwo je rozpoznać, ponieważ ich struktura jest niemal podobna, różnią się tylko poszczególnymi opcjami i tłumaczeniami. Pomiędzy sekcjami, w dowolnym miejscu (ale nie w środku innej sekcji!) wklej ten kod:

{{HeaderThirdType}}

{{HeaderThirdTypeComfortable}}

{{HeaderThirdTypeCompact}}

Teraz otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia, wybierz odpowiedni szablon i zjedź nieco niżej. Znajdziesz tam dodaną przed chwilą opcję wyboru. Wybierz opcję, która Ci odpowiada i zapisz. Gdy zechcesz zmienić ustawienia po czasie, nie będzie z tym żadnego problemu. To już wszystkie zmiany, jakie należy wprowadzić, aby korzystać z nowej wersji nagłówka. 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.

Prezentacja rabatów w profilu klienta w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować szablon Topaz, aby umożliwić wyświetlanie rabatów w profilu klienta.

Wskazówka
Poniższa instrukcja działa dla każdego widoku szablonu Topaz, niezależnie od wybranych wersji elementów.

Zakładka Promocje będzie wyświetlać się tylko wtedy, gdy w banerze o nazwie CustomerProfileBanner będzie znajdował się przynajmniej jeden obrazek. W tym celu należy w panelu administracyjnym dodać taki banner. Wejdź w zakładkę Bannery i kliknij w przycisk Dodaj. W polu Nazwa wpisz CustomerProfileBanner. W miejscu Obrazki dodaj odpowiedni obrazek a następnie kliknij w przycisk Zapisz w prawym górnym rogu.

Następnie dodaj odpowiednie tłumaczenia.

Id: Product, Tekst: Towar

Id: Category, Tekst: Kategoria

Id: Quantity, Tekst: Ilość

Id: Netto, Tekst: Netto

Id: BundleThreshold, Tekst: Próg pakietowy

Id: Threshold, Tekst: Próg

Id: AllProducts, Tekst: Wszystkie produkty

Id: Back, Tekst: Powrót

Id: CurrentPromotions, Tekst: Aktualne <b>promocje</b>

Id: YourDiscounts, Tekst: Twoje <b>rabaty</b>

Id: ValidTo, Tekst: Ważny do

Id: ValidLifetime, Tekst: Ważny bezterminowo

Id: ValidFrom, Tekst: Ważny od

Id: Promotions, Tekst: Promocje

Id: ForRegularCustomer, Tekst: Dla stałego klienta

Id: ForNewCustomer, Tekst: Dla nowego klienta

Id: NoDiscountsInfo, Tekst: Aktualnie nie mamy rabatów przygotowanych dla Ciebie.

Wskazówka
Tłumaczenia możesz dodać w panelu administracyjnym, wchodząc na zakładkę Tłumaczenia a następnie klikając w przycisk Dodaj. Po uzupełnieniu pól kliknij w przycisk Dodaj.

Kolejnym krokiem jest modyfikacja kodu szablonu. W pierwszej kolejności należy dodać zakładkę Promocje w profilu klienta. W plikach szablonu w folderze static-elements/customer-profile znajduje się plik o nazwie customer-profile.html. Narzędziem wyszukiwania wyszukaj w nim frazę inputs-container-js. Nad znalezioną linią powinien znajdować się tag <ul/>. Nad tym tagiem wklej poniższy kod.
{% if config.Banners['CustomerProfileBanner'].Images[0]-%} <li class="discounts-js" data-template="discounts/discounts"> <span>{{ translations.Promotions }}</span> </li> {% endif -%}
Następnie należy dodać pliki odpowiedzialne za wyświetlanie promocji po kliknięciu w zakładkę. W folderze partials/customer dodaj folder o nazwie discounts a w nim trzy pliki:

discount-details.html

discount-elements.html

discounts.html

W pliku discount-details.html wklej poniższy kod. {% assign discount = customer-profile.DiscountERPDetails -%} {% if discount.Description != '' and discount.Description != null -%} {{discount.Description}} {% endif -%} {% if discount.Thresholds -%} {% for threshold in discount.Thresholds -%} <div class="discounts__narrow-container" > <strong>{{translations.Threshold}}: </strong> {% if threshold.ThresholdType == 1 -%} {{threshold.Threshold | ToPrice}} {{threshold.ThresholdSymbol}} {% else -%} {{threshold.Threshold}} {% endif -%} </div> <div class="discounts__narrow-container"><strong>{{translations.QuantityThreshold}}:</strong> {{threshold.ThresholdMinPositionsCount}}</div> <div class="discounts__elements" > {% include 'partials/customer/discounts/discount-elements.html' with threshold -%} </div> {% endfor -%} {% else -%} <div class="discounts__elements"> {% include 'partials/customer/discounts/discount-elements.html' with discount -%} </div> {% endif -%} <button class="primary-action-button discountsDetailsButton-js">{{translations.Back}}</button> W pliku discount-elements.html wklej poniższy kod. {% assign discount = customer-profile.DiscountERPDetails -%} {% if include -%} {% assign elementsParent = include -%} {% else -%} {% assign elementsParent = discount -%} {% endif -%} {% assign anyGroup = false -%} {% assign anyProduct = false -%} {% assign anyThreshold = false -%} {% assign anyBundleThreshold = false -%} {% assign anyBundleQuantity = false -%} {% assign anyTotalPrice = false -%} {% assign anySubtotalPrice = false -%} {% for element in elementsParent.Elements -%} {% if element.Group != null -%} {% assign anyGroup = true -%} {% endif -%} {% if element.Product != null -%} {% assign anyProduct = true -%} {% endif -%} {% if element.Threshold != null and element.Threshold > 0 -%} {% assign anyThreshold = true -%} {% endif -%} {% if element.BundleThreshold != null and element.BundleThreshold > 0 -%} {% assign anyBundleThreshold = true -%} {% endif -%} {% if element.BundleQuantity != null and element.BundleQuantity > 0 -%} {% assign anyBundleQuantity = true -%} {% endif -%} {% if element.FixedPrice -%} {% assign anyFixedPrice = true -%} {% if element.TotalPrice != null and element.TotalPrice > 0 -%} {% assign anyTotalPrice = true -%} {% endif -%} {% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%} {% assign anySubtotalPrice = true -%} {% endif -%} {% endif -%} {% endfor -%} <div class="discounts__row discounts__row__header"> <div class="discounts__rowTitle"> {% if anyGroup and anyProduct -%} {{translations.Product}}/{{translations.Category}} {% elseif anyGroup -%} {{translations.Category}} {% else -%} {{translations.Product}} {% endif -%} </div> {% if anyBundleQuantity -%} <div class="discounts__rowTitle"> {{translations.Quantity}} </div> {% endif -%} {% unless anyFixedPrice and anySubtotalPrice == false -%} <div class="discounts__rowTitle"> {% if anyFixedPrice and anySubtotalPrice -%} {{translations.Pro_Price}} {{translations.Netto | Downcase }} {% else -%} {{translations.Crt_Discount}} {% endif -%} </div> {% endunless -%} {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%} <div class="discounts__rowTitle"> {% if anyFixedPrice and anyTotalPrice -%} {{translations.Pro_Price}} {{translations.Com_Brutto | Downcase}} {% elseif anyBundleThreshold -%} {{translations.BundleThreshold}} {% else -%} {{translations.Threshold}} {% endif -%} </div> {% endif -%} </div> {% for element in elementsParent.Elements -%} <div class="discounts__row"> <div class="discounts__cell"> {% if element.Group != null -%} {% if element.Group.Url -%} <a href="{{ element.Group.Url }}"> {% endif -%} {{ element.Group.Name }} {% if element.Group.Url -%} </a> {% endif -%} {% elseif element.Product != null -%} {% if element.Product.Url -%} <a href="{{ element.Product.Url }}"> {% endif -%} {{ element.Product.NameNoHtml }} {% if element.Product.Url -%} </a> {% endif -%} {% else -%} {{ translations.AllProducts }} {% endif -%} </div> {% if anyBundleQuantity -%} <div class="discounts__cell"> {% if element.BundleQuantity > 0 -%} <span class="discounts__mobile"> {{translations.Quantity}} </span> <span> {{ element.BundleQuantity | Normalize }} </span> {% endif -%} </div> {% endif -%} {% unless anyFixedPrice and anySubtotalPrice == false -%} <div class="discounts__cell"> <span class="discounts__mobile"> {% if element.FixedPrice -%} {% if element.SubtotalPrice > 0 -%} {{ translations.Pro_Price | Downcase }} {{ translations.Netto | Downcase }} {% endif -%} {% else -%} {{ translations.Crt_Discount | Downcase }} {% endif -%} </span> <span> {% if element.FixedPrice -%} {% if element.SubtotalPrice > 0 -%} {{ element.SubtotalPrice | ToPrice }} {% endif -%} {% else -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.Value | ToPrice }} {% else -%} {{ element.Value | Normalize }} {% endif -%} {% endif -%} {{ element.ValueSymbol }} </span> </div> {% endunless -%} {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%} <div class="discounts__cell"> <span class="discounts__mobile"> {% if element.FixedPrice -%} {% if element.TotalPrice > 0 -%} {{ translations.Pro_Price | Downcase }} {{ translations.Com_Brutto | Downcase }} {% endif -%} {% elseif element.BundleThreshold > 0 -%} {{ translations.BundleThreshold | Downcase }} {% elseif element.Threshold > 0 -%} {{ translations.Threshold | Downcase }} {% endif -%} </span> <span> {% if element.FixedPrice -%} {% if element.TotalPrice > 0 -%} {{ element.TotalPrice | ToPrice }} {% endif -%} {{ element.ValueSymbol }} {% elseif element.BundleThreshold > 0 -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.BundleThreshold | ToPrice }} {% else -%} {{ element.BundleThreshold | Normalize }} {% endif -%} {{ element.BundleThresholdSymbol }} {% elseif element.Threshold > 0 -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.Threshold | ToPrice }} {% else -%} {{ element.Threshold | Normalize }} {% endif -%} {{ element.ThresholdSymbol }} {% endif -%} </span> </div> {% endif -%} </div> {% endfor -%} W pliku discounts.html wklej poniższy kod. {% assign name = 'CustomerProfileBanner' -%} {% if config.Banners[name] -%} {% assign banner = config.Banners[name] -%} <div class="discounts discountsMainTemplate-js"> <h2 class="discounts__header" >{{translations.CurrentPromotions}}</h2> <div class="customerProfileBanner banner-discounts"> {% assign imagesNumber = banner.Images | Size -%} {% assign images = banner.Images -%} {% for img in images -%} <div class="banner-discounts__wrapper"> <figure class="banner-discounts__image"> <img alt="{{img.Alt | H}}" src="css/img/alo.gif" data-lazy="{{img.Url}}"> </figure> <div class="banner-discounts__info"> {% if img.Heading != '' -%} <p class="banner-discounts__title">{{img.Heading}}</p> {% endif -%} {% if img.Text != '' -%} <p class="banner-discounts__title banner-discounts__title__small">{{img.Text}}</p> {% endif -%} </div> {% if img.Link != '' -%} <a aria-label="check" href="{{img.Link}}" class="primary-action-button" {% if img.TargetBlank == true -%} target="_blank" {% endif -%}> {{translations.Check}} </a> {% endif -%} </div> {% endfor -%} {% if imagesNumber == 0 %} <div class="banner-discounts__wrapper"> <figure class="banner-discounts__image banner-discounts__image_placeholder"> {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}} </figure> <p class="banner-discounts__size">{% if header3 == true -%} 1118 x 534 {% else -%} 1920x680 {% endif -%}</p> </div> {% endif %} </div> <h2 class="discounts__header" >{{translations.YourDiscounts}}</h2> <div class="discounts__container"> {% assign discountsERP = customer-profile.DiscountsERP -%} {% assign discountString = customer-profile.DiscountQueryGET | H -%} {% assign paginationPageNo = discountsERP.PageNo -%} {% if paginationPageNo == 1 -%} {% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%} {% if orderValuesSize > 0 -%} {% assign anyDiscount = true -%} {% for orderValue in customer-profile.DiscountsEshop.OrderValue -%} <div class="discounts__item"> <div class="discounts__value"> {{ orderValue.Discount | Normalize }} % </div> <div class="discounts__info"> <div class="discounts__name"> {{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }} </div> <div class="discounts__date"> {% if orderValue.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%} </div> </div> </div> {% endfor -%} {% endif -%} {% if customer-profile.DiscountsEshop.Regular -%} {% assign anyDiscount = true -%} {% assign regular = customer-profile.DiscountsEshop.Regular -%} <div class="discounts__item"> <div class="discounts__value"> {{ regular.Discount | Normalize }} % </div> <div class="discounts__info"> <div class="discounts__name"> {{ translations.ForRegularCustomer }} </div> <div class="discounts__date"> {% if regular.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%} </div> </div> </div> {% endif -%} {% if customer-profile.DiscountsEshop.FirstOrder -%} {% assign anyDiscount = true -%} {% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%} <div class="discounts__item"> <div class="discounts__value"> {{ firstOrder.Discount | Normalize }} % </div> <div class="discounts__info"> <div class="discounts__name"> {{translations.ForNewCustomer}} </div> <div class="discounts__date"> {% if firstOrder.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%} </div> </div> </div> {% endif -%} {% endif -%} {% if discountsERP.TotalItems > 0 -%} {% assign anyDiscount = true -%} {% for discount in discountsERP.Discounts -%} <div class="discounts__item"> <div class="discounts__value discounts__value__details discountsDetails-js discounts-clickable" data-url="{{ page.Url }}?{{ discountString }}={{ discount.Id }}" data-template="partials/customer/discounts/discount-details.html"> {{ translations.Details }} </div> <div class="discounts__info"> <div class="discounts__name"> {% if discount.Name != null -%} {{ discount.Name }} {% else -%} {{ translations.AllProducts }} {% endif -%} </div> <div class="discounts__date"> {% if discount.DateTill -%} {% if discount.DateFrom -%} <div>{{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }}</div> {% endif -%} {{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%} </div> </div> </div> {% endfor -%} </div> {% endif -%} {% endif -%} {% if discountsERP.TotalItems > 10 -%} <nav> {% assign tabName = 'discounts/discounts' -%} {% assign sectionName = 'DiscountsERP' -%} {% include 'partials/customer/profile-pagination.html' -%} </nav> {% endif -%} </div> {% unless anyDiscount -%} {{ translations.NoDiscountsInfo }} {% endunless -%} <div class="discounts discounts__details-container discountsDetailsTemplate-js hidden"> </div>

Aby dodać odpowiednie style do zakładki z promocjami znajdź folder css/partials/customer i dodaj w nim folder o nazwie discounts a w nim plik o nazwie discounts-g.css. Do tego pliku wklej poniższy kod.
.banner-discounts{margin:0 auto;background-color:#f2f2f2;height:auto}.banner-discounts__list{width:100%;height:100%}.banner-discounts__wrapper{width:100%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.banner-discounts a{position:absolute;bottom:8%;left:10%;text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.banner-discounts figure{margin:0}.banner-discounts__image img{box-sizing:border-box;padding:0;margin:0;object-fit:cover;min-height:170px;max-width:100%;width:100%;object-position:50% 50%}.banner-discounts__image img[src="css/img/alo.gif"]{width:100%!important;height:100%!important}.banner-discounts__image_placeholder img{object-fit:contain;background-color:#f2f2f2;max-height:680px}.banner-discounts__info{position:absolute;left:10%;bottom:33%;width:80%}.banner-discounts__title{margin:0;padding:0;font-weight:300;color:{{settings.bannerFontColor}};display:block;font-size:48px}.banner-discounts__title.banner-discounts__title__small{line-height:1.5;font-size:14px;margin-top:10px}.banner-discounts__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0}.banner-discounts__size{position:absolute;font-size:30px;color:gray;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}.banner-discounts .slick-track{height:100%}.banner-discounts .slick-arrow{background-color:{{settings.sliderBgColor}};padding:20px}.banner-discounts .slick-arrow:hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-arrow:before{color:#fff;position:absolute;right:0;left:10px;top:47%;transform:translateY(-50%);font-size:20px}@media only screen and (max-width:599px){.banner-discounts .slick-arrow:before{font-size:15px}}.banner-discounts .slick-prev,.banner-discounts .slick-next{font-size:0;line-height:0;position:absolute;top:51%;display:block;width:30px;height:155px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;border:none;outline:none;background-color:{{settings.sliderBgColor}};opacity:.6;z-index:8}.banner-discounts .slick-prev :hover,.banner-discounts .slick-next :hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-list{padding:0!important;height:100%}.banner-discounts .slick-prev:hover,.banner-discounts .slick-next:hover{outline:none}.banner-discounts .slick-prev.slick-disabled:before,.banner-discounts .slick-next.slick-disabled:before,.banner-discounts .slick-prev.slick-disabled,.banner-discounts .slick-next.slick-disabled{outline:none;display:none}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{color:{{settings.sliderArrowColor}};fill:{{settings.sliderArrowColor}};opacity:.8}.banner-discounts .slick-prev{left:0;border-radius:0 25px 25px 0}.banner-discounts [dir='rtl'] .slick-prev{right:0;left:auto}.banner-discounts .slick-next{right:0;border-radius:25px 0 0 25px}.banner-discounts .slick-arrow.slick-next:before{left:3px}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{width:4px;height:4px;content:" "}.banner-discounts [dir='rtl'] .slick-next{right:auto;left:0}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{width:10px;height:10px}.banner-discounts .slick-arrow:hover:before{border-color:{{settings.sliderHoverArrowColor}}}@media screen and (max-width:480px){.banner-discounts .banner-discounts__info{bottom:55%}.banner-discounts .banner-discounts__title{font-size:20px}}.headerSection__bannerBg{width:100%;height:fit-content;background-color:{{settings.headerBgColor}}!important;margin-top:0!important}.headerSection__banner{display:block;width:100%;margin:0 auto;height:fit-content;max-width:1400px;margin:0 auto;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative;background-color:{{settings.headerBgColor}}}.headerSection__banner .banner-discounts{background-color:{{settings.headerBgColor}}!important}.headerSection__banner .banner-discounts__wrapper{height:fit-content;width:79.9%!important;float:right;margin-left:auto;margin-right:0}.headerSection__banner .banner-discounts__image_placeholder img{max-height:534px!important}@media screen and (max-width:1600px){.headerSection__banner{padding-left:3%;padding-right:3%}}.banner-discounts__title{font-size:28px}.banner-discounts__title.banner-discounts__title__small{font-size:13px}.banner-discounts__info{bottom:unset;top:80px}@media screen and (max-width:480px){.banner-discounts__image{width:100%;object-fit:cover;object-position:center}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}.discounts__header{padding:20px 0;font-weight:400}.discounts__container{margin-bottom:30px;display:flex;flex-wrap:wrap}.discounts__item{width:40%;padding:20px 20px 0 0;margin-right:60px;display:flex;height:80px}.discounts__name{text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.discounts__info{padding:7px;font-size:15px;width:calc(100% - 100px - 60px)}.discounts__date{color:#959494;padding-top:5px}.discounts__value{margin-right:10px;width:100px;max-height:50px;padding:20px 10px 0 10px;text-align:center;color:{{settings.primaryBtnFontColor}};border:2px solid{{settings.primaryBtnBorderColor}};background-color:{{settings.primaryBtnBgColor}};font-size:20px}.discounts__value.discounts-clickable{cursor:pointer}.discounts__value.discounts-clickable:hover{background-color:{{settings.primaryBtnHoverBgColor}};border:2px solid{{settings.primaryBtnHoverBorderColor}};color:{{settings.primaryBtnHoverFontColor}}}.discounts__value__details{font-size:17px}.discounts__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #f2f2f2;margin-bottom:5px;font-size:13px;font-weight:300;align-items:center}.discounts__row:last-of-type{border-bottom:none;margin-bottom:20px}.discounts__rowTitle{font-size:15px;text-align:left;font-weight:400}.discounts__rowTitle:first-child{width:35%}.discounts__cell:first-child{width:35%}@media (min-width:767px){.discounts__mobile{display:none}}@media screen and (max-width:1200px){.discounts__header{text-align:center}.discounts__item{width:90%;margin-left:auto;margin-right:auto}}@media screen and (max-width:767px){.discounts__row{flex-wrap:wrap}.discounts__row__header{display:none}.discounts__rowTitle{width:auto!important}.discounts__cell{padding-right:20px;padding-top:10px;width:auto!important}.discounts__details-container{padding:20px}}@media only screen and (max-width:480px){.discounts__item{width:90%;padding:20px 0 20px 0;height:70px}.discounts__value{width:100px;font-size:17px}.discounts__info{padding:5px;font-size:14px}.discounts__date{padding-top:5px}}
Ostatnim krokiem jest dodanie kodu JavaScript. Znajdź plik layout1.js i na końcu pliku wklej poniższy kod.
function customerProfileBannerSlick() { $(".customerProfileBanner").not('.slick-initialized').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, autoplay: true, autoplaySpeed: 8000 }); } $('li.discounts-js').on('click', function(e) { $(function() { var checkDiv = setInterval(function(){ if($('.customerProfileBanner').length > 0) { customerProfileBannerSlick(); } }, 100); }); }); $('body').on('click', '.discountsDetails-js', function(e) { $('.discountsDetailsTemplate-js').removeClass('hidden'); $('.discountsMainTemplate-js').addClass('hidden'); window.scroll(top); var discountDetailsUrl = $(e.currentTarget).data('url'); var discountDetailsTemplate = $(e.currentTarget).data('template'); var content = $('.discountsDetailsTemplate-js'); $.get(discountDetailsUrl, { __collection:'customer-profile.DiscountERPDetails', __template:discountDetailsTemplate }, function(result){ if(result && result.collection && result.template){ content.html(result.template); } }); }); $('body').on('click', '.discountsDetailsButton-js', function(e) { $('.discountsDetailsTemplate-js').addClass('hidden'); $('.discountsMainTemplate-js').removeClass('hidden'); });

Zmiana sposobu prezentacji kanałów w zgodach marketingowych w szablonie Agat

Wskazówka

W tym artykule dowiesz się jak zmodyfikować szablon Agat, aby przekształcić obsługę kanałów w zgodach marketingowych na bardziej czytelną. Wyrażanie zgody w przypadku istnienia wielu kanałów będzie wyglądało następująco: W pierwszej kolejności dodaj odpowiednie tłumaczenia.

Id: Consents_InTheFormOf, Tekst: w postaci

Wskazówka
Tłumaczenia możesz dodać w panelu administracyjnym, wchodząc na zakładkę Tłumaczenia a następnie klikając w przycisk Dodaj. Po uzupełnieniu pól kliknij w przycisk Dodaj.
W katalogu js znajdź plik init.js. Narzędziem wyszukiwania wyszukaj frazę self.uicheckIfParentChecked. Znaleziona linia znajduje się w obszarze 6 linii kodu (widoczne poniżej), które należy usunąć.
$('body').on('click', '.channel-checkbox', function (e) { self.uicheckIfParentChecked(e); }); $('body').on('click', '.multiple-choice .input-group > label .switch-input[name=tos]', function (e) { self.uicheckIfTosChannelChecked(e); });
W głównym katalogu szablonu znajdź plik __loginconsents.liquid. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę clickableTOSExists. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć a następnie w tym miejscu wkleić poniższy.
{% assign channelsSize = tos.Channels | Size -%} {% if channelsSize == 0 -%} <div class="input-group switches"> {% if tos.Statement %} <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p> {% else %} {% assign clickableTOSExsits = true -%} <label class="switch"> <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span> <input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} /> <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endif -%} </div> {% elsif channelsSize > 0 -%} <div class="input-group switches"> {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%} {% if onlyEmail == false -%} <span class="channel-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span> {% endif -%} {% for chn in tos.Channels -%} <label class="switch channel-switch"> <span class="switch-name">{{tos.Text | Remove: '.'}} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span> <input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} /> {% if onlyEmail == false -%} <input class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} /> {% else -%} <input type="hidden" name="channelKey" value="{{ chn.Key }}" checked /> <input class="switch-input" type="checkbox" checked /> {% endif -%} <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endfor -%} {% endif -%} </div> {% endfor -%} </div> {% if clickableTOSExists -%}
Kolejne zmiany będą wprowadzone w katalogu partials. Wewnątrz tego katalogu, w katalogu cart znajdź plik delivery-and-payment.html. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę required-fields-info. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć i w tym miejscu wkleić poniższy.
{% assign channelsSize = tos.Channels | Size -%} {% if channelsSize == 0 -%} <li class="{% if tos.Required -%} required-consent{% endif -%}"> <div class="input-group switches"> {% if tos.Statement %} <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p> {% else %} <span class="main-consent-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span> <label class="switch"> <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span> <input aria-label="tos" class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} /> <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endif -%} </div> </li> {% elsif channelsSize > 0 -%} <li class="multiple-choice {% if tos.Required -%} required-consent{% endif -%}"> <div class="input-group switches"> {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%} {% if onlyEmail == false -%} <span class="channel-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span> {% endif -%} {% for chn in tos.Channels -%} <label class="switch channel-switch "> <span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span> <input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} disabled /> {% if onlyEmail == false -%} <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} /> {% else -%} <input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}" /> <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" /> {% endif -%} <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endfor -%} </div> </li> {% endif -%} {% endfor -%} </ul> <div class="input-group required-fields-info">
W katalogu partials/common znajdź plik footer.html. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę required-fields-info. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć i w tym miejscu wkleić poniższy.
{% assign channelsSize = tos.Channels | Size -%} {% if channelsSize == 0 -%} <li class="{% if tos.Required -%} required-consent{% endif -%}"> <div class="input-group switches"> {% if tos.Statement %} <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p> {% else %} <span class="main-consent-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span> <label class="switch"> <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span> <input aria-label="tos" class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} /> <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endif -%} </div> </li> {% elsif channelsSize > 0 -%} <li class="multiple-choice {% if tos.Required -%} required-consent{% endif -%}"> <div class="input-group switches"> {% if tos.Statement %} <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p> {% endif -%} {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%} {% if onlyEmail == false -%} <span class="channel-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span> {% endif -%} {% for chn in tos.Channels -%} <label class="switch channel-switch "> <span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span> <input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} disabled /> {% if onlyEmail == false -%} <input aria-label="cnannelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} /> {% else -%} <input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}" /> <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" /> {% endif -%} <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endfor -%} </div> </li> {% endif -%} {% endfor -%} </ul> <div class="input-group required-fields-info">
W tym samym katalogu znajdź plik registration-consents.html. Kod w pliku należy usunąć i wkleić poniższy.
<ul> {% for tos in config.TOS.Consents.Registration -%} {% assign channelsSize = tos.Channels | Size -%} {% if channelsSize == 0 -%} <li class="{% if tos.Required -%} required-consent{% endif -%}"> <div class="input-group switches"> {% if tos.Statement %} <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p> {% else %} <span class="main-consent-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span> <label class="switch"> <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span> <input aria-label="tos" class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%}/> <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endif -%} </div> </li> {% elsif channelsSize > 0 -%} <li class="multiple-choice {% if tos.Required -%} required-consent{% endif -%}"> <div class="input-group switches"> {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%} {% if onlyEmail == false -%} <span class="channel-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span> {% endif -%} {% for chn in tos.Channels -%} <label class="switch channel-switch"> <span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span> <input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} disabled/> {% if onlyEmail == false -%} <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} /> {% else -%} <input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}"/> <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox"/> {% endif -%} <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endfor -%} </div> </li> {% endif -%} {% endfor -%} </ul> <div class="input-group required-fields-info"> * {{ translations.Com_RequiredFields }} </div>
Ostatnim modyfikowanym plikiem będzie plik customer-consents.html w katalogu customer. Kod w pliku należy usunąć i wkleić poniższy.
{% assign anythingToAccept = false -%} {% for tos in customerProfile.Consents -%} {% if tos.Checked == false or tos.Updated.Text %} {% assign anythingToAccept = true -%} {% endif -%} {% endfor %} {% include 'partials/common/date-format.html' -%} <div class="all-users-consents"> <h2 class="main-title">{{ translations.UserConsents }}</h2> {% if anythingToAccept == true %} <div class="consents-box"> <span class="box-heading">{{ translations.Com_ToAcceptation }}</span> <ul> {% for tos in customerProfile.Consents %} {% assign channelsSize = tos.Channels | Size -%} {% assign updatedChannelsSize = tos.Updated.Channels | Size -%} {% assign updatedContentsSize = tos.Updated.Contents | Size -%} {% if tos.Checked == false or tos.Updated.Text %} {% if channelsSize == 0 -%} <li class="{% if tos.Updated.Text %} updated-consent {% endif -%}"> {% if tos.Statement -%} <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button> <p class="statement-consent">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p> {% else -%} {% if tos.Checked == false -%} <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button> {% elsif tos.Updated.Text and updatedChannelsSize == 0 -%} <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button> <span class="consent-small-heading">{{ translations.NewConsentContent }}:</span> <span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text }}</span> <span class="consent-small-heading old-consent">{{translations.OldConsentContent}}:</span> <span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span> {% endif -%} {% endif -%} </li> {% elsif channelsSize > 0 -%} {% for chn in tos.Channels -%} <li class="{% if tos.Updated.Text %} updated-consent {% endif -%}"> {% if tos.Updated.Text and updatedChannelsSize == 0 -%} <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button> <span class="consent-small-heading">{{ translations.NewConsentContent }}:</span> <span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text }}</span> <span class="consent-small-heading old-consent">{{translations.OldConsentContent}}:</span> {% endif -%} <span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span> {% if chn.Checked %} <button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button> {% else %} <button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button> {% endif -%} </li> {% endfor -%} {% endif -%} {% endif %} {% endfor %} </ul> </div> {% endif -%} <div class="consents-box"> <span class="box-heading">{{ translations.Com_Accepted }}</span> <ul> {% for tos in customerProfile.Consents -%} {% assign channelsSize = tos.Channels | Size -%} {% if tos.Checked %} {% if channelsSize == 0 -%} <li> {% if tos.Required -%} <span class="withdraw-warning"> <span class="fa fa-exclamation-triangle"></span> <span>{{ translations.WithdrawWarning }}</span> </span> {% endif -%} {% if tos.Statement-%} <span class="accept-date">{{translations.AcceptationDate}}: {{tos.Date | Date:dateFormat}}</span> <button aria-label="consentWithdraw" class="consent-withdraw" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Withdraw }}</button> <p class="statement-consent">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p> {% else %} {% if tos.Checked %} <span class="accept-date">{{translations.AcceptationDate}}: {{tos.Date | Date:dateFormat}}</span> <button aria-label="consentWithdraw" class="consent-withdraw" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Withdraw }}</button> {% elsif tos.Checked == false %} <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button> {% endif -%} <span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span> {% endif -%} </li> {% elsif channelsSize > 0 -%} <li> {% for chn in tos.Channels -%} {% if tos.Required -%} <span class="withdraw-warning"> <span class="fa fa-exclamation-triangle"></span> <span>{{ translations.WithdrawWarning }}</span> </span> {% endif -%} <span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span> {% if chn.Checked %} <span class="accept-date">{{translations.AcceptationDate}}: {{chn.Date | Date:dateFormat}}</span> <button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button> {% else %} <button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button> {% endif -%} {% endfor -%} </li> {% endif -%} {% if updatedChannelsSize > 0 -%} <ul> {% for chn in tos.Updated.Channels -%} <li> {% if tos.Updated.Text -%} <span class="consent-small-heading">{{translations.NewConsentContent}}:</span> <span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}} }}</span> <span class="consent-small-heading old-consent">{{ translations.OldConsentContent }}:</span> {% endif -%} {% if chn.Checked %} <button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button> {% else %} <button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button> {% endif -%} </li> {% endfor -%} </ul> {% endif -%} {% if updatedContentsSize > 0 -%} <ul> {% for contents in tos.Updated.Contents -%} <li> <span>{{ contents.Name }}</span> {{ contents.ContentHtml }} </li> {% endfor -%} </ul> {% endif -%} {% endif -%} {% endfor %} </ul> </div> </div>

Wykorzystanie filtrów Img oraz Img2 w szablonach

Wykorzystanie filtrów Img i Img2 w szablonach niesie za sobą korzyści, takie jak możliwość wyświetlenia nie tylko wewnętrznych obrazków, ale też z adresu url. W tym artykule dowiesz się, jak zmienić kod szablonów, aby w wybranych miejscach używały filtrów Img lub Img2.

Filtry Img i Img2 oraz jak ich używać zostały opisane w tym artykule w zakładce HTML.

Mogą być używane dla:

obrazków towaru (na liście towarów, szczegółach towarów, koszyku, zamówieniu, reklamacji, itd.)

obrazków na blogu

obrazków producentów

obrazków marek

Jeżeli chcesz, aby w danym miejscu szablon wykorzystywał filtr Img, w pierwszej kolejności musisz zlokalizować kod odpowiadający za wyświetlanie tego obrazka. W tym celu można w przeglądarce kliknąć prawym przyciskiem myszy na obrazek, który nas interesuje, a następnie kliknąć w Zbadaj. Znajdź div lub inny element, który zawiera ten obrazek i skopiuj jego klasę lub inny charakterystyczny atrybut. Później przy pomocy narzędzia wyszukiwania wyszukaj tę frazę w kodzie szablonu w plikach z rozszerzeniem .html.

Przykład w szablonie Agat na szczegółach towaru:

Po zbadaniu zdjęcia towaru na szczegółach towaru w przeglądarce, wyświetlił się następujący kod elementu:

Charakterystycznym elementem okazała się klasa product-image. Po wyszukaniu tej frazy znaleziono poniższy kawałek kodu w pliku product-page.html.
<figure class="product-image"> {% if productD.ImageId != -1 -%} <div class="zoom" data-zoom-img-style="url(img/{{image.Id}}/{{image.Link}}.jpg)"></div> <img alt="{{image.Alt}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg"> {% else -%} <i class="fa fa-picture-o" aria-hidden="true"></i> {% endif -%} </figure>
Najważniejszą linią kodu jest linia odpowiedzialna za wyświetlenie obrazka, czyli:
<img alt="{{image.Alt}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg">
Jak widać zdjęcie jest wyświetlanie nie przy pomocy filtra, który tworzy tag img, lecz poprzez ustawienie tagu img wraz z atrybutami w kodzie szablonu. Link, Id i inne atrybuty pobierane są w tym przypadku ze zmiennej image. Dodatkowo można zauważyć, że link zapisany jest w atrybucie data-lazy. Jak wynika z artykułu dotyczącego filtrów, podlinkowanego wyżej, filtr Img2 wstawia link do obrazka do atrybutu data-lazy, natomiast filtr Img do atrybutu data-src. W związku z powyższym w tym przypadku zostanie wykorzystany filtr Img2 a kod z jego użyciem będzie wyglądał następująco:
<figure class="product-image"> {% if productD.ImageId != -1 -%} <div class="zoom" data-zoom-img-style="url({% if image.Id !=0 -%} img/{{image.Id}}/{{image.Link}}.jpg {% elseif image.ExternalUrl -%} {{image.ExternalUrl}} {% endif -%})"></div> {{image|Img2:''}} {% else -%} <i class="fa fa-picture-o" aria-hidden="true"></i> {% endif -%} </figure>

Prezentacja własnych punktów odbioru osobistego w formie mapy

Spis treści

Ustawienia ogólne

Szablon Szafir

Szablon Agat

Szablon Opal

Szablon Bursztyn

Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Ustawienia ogólne
Niezbędne ustawienia do włączenia widoku własnych punktów odbioru na mapie: 1. Dodanie w panelu sklepu klucza aplikacji do Google Maps API (Wygląd Sklepu > Ustawienia) 2. Zaznaczenie opcji wyświetlania punktów odbioru osobistego na mapie (Wygląd Sklepu > Ustawienia) 3. Dodanie własnych punktów odbioru (Ustawienia > Płatności i dostawy > Odbiór osobisty)
Wskazówka
Wypełniając formularz nowego punktu, trzeba pamiętać o polach „Szerokość/długość geograficzna”
4. Włączyć opcję odbioru osobistego w panelu (Ustawienia > Płatności i dostawy > Odbiór osobisty) 5. Dodać dostawę za pomocą własnych punktów odbioru do sposobów dostawy 6. Dodać dostawę do macierzy dostaw oraz określić metody płatności za ten rodzaj dostawy 7. Dokonać niezbędnych modyfikacji w kodzie szablonu wg poniższych instrukcji.
Szablon Szafir

Wskazówka
Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść pliki „collection-points-scripts.html” i „collection-points-styles.html” w głównym folderze szablonu.

Umieść plik „collection-points.js” w folderze „js”.

Umieść plik “collection-points.css” w folderze “css”.

Podmień plik “collection-points.html”, który znajduje się w folderze „order/delivery-partials”.

W pliku „__layout.html”, na końcu sekcji „<head>” dodaj poniższą linijkę:
{% include 'collection-points-styles.html' %}

W pliku „__layout.html”, na końcu sekcji „<body>” dodaj poniższą linijkę:
{% include 'collection-points-scripts.html' %}

Szablon Agat

Wskazówka
Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collection-points.css” w folderze “css”.

Umieść plik “collection-points.js” w folderze “js”.

Podmień plik “order.js”, który znajduje się w folderze “js”.

Podmień plik “delivery-adress.html”, który znajduje się w folderze “partials/cart”.

Podmień plik “init.js”, który znajduje się w folderze “js”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:
{% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="css/collection-points.css"> {% endif -%}

Szablon Opal

Wskazówka
Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collection-points.js” w folderze “js”.

Umieść plik “collection-points.css” w folderze “css”.

Podmień plik “order.js”, który znajduje się w folderze “js”.

Podmień plik “data-form.html”, który znajduje się w folderze “order/cst-data”.

Podmień plik “cart.html”, który znajduje się w folderze “order”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:
{% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="css/collection-points.css"> {% endif -%}

Do pliku “order-cart.html”, wklej poniższy kod:
{% extends '_layout.html' -%} {% block PageContent -%} <script src="{{ cart.CollectionPointMapUrl }}"></script> <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script> <script src="js/collection-points.js?v={{ lqTS }}"></script> {% include 'order-cart-container.html'%} {% endblock -%} {% block PageBodyEnd -%} <script>__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script> <script src="js/order.js?v={{ lqTS }}" charset="utf-8" type="text/javascript"></script> {% endblock -%}

Szablon Bursztyn

Wskazówka
Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collectionpoints.js” w folderze “js”.

Umieść plik “collectionpoints.css” w folderze “css”.

Podmień plik “order.js”, który znajduje się w folderze “js”.

Podmień plik “cart.html”, który znajduje się w folderze “order”.

Podmień plik “order-short-info.html”, który znajduje się w folderze “order”.

Podmień plik “cart-products-partial.html”, który znajduje się w folderze “order”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:
{% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="css/collectionpoints.css"> {% endif -%}

Do pliku “order-cart.html”, wklej poniższy kod:
{% extends '_layout.html' -%} {% block PageContent -%} <script src="{{ cart.CollectionPointMapUrl }}"></script> <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script> <script src="js/collectionpoints.js?v={{ lqTS }}"></script> {% include 'order-cart-container.html'%} {% endblock -%} {% block PageBodyEnd %} <script type="text/javascript">__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script> <script src="js/order.js?v={{ lqTS }}"></script> {% endblock %}

Obsługa elementu tekstowego w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał element tekstowy.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

Element tekstowy z obrazem
W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Kliknij dodaj i następnie wybierz typ tekstowy. Wprowadź nazwę textelement-2. Z dostępnych obiektów, wybierz nowo utworzony obiekt i wprowadź wybraną przez siebie treść w formacie: Nagłówek pierwszego poziomu Nagłówek drugiego poziomu Zawartość pierwszej kolumny Zawartość drugiej kolumny link-do-zdjecia.jpg Na końcu zapisz zmiany. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna. Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie tekstu i obrazu na stronie głównej sklepu. Kolejnym krokiem jest dodanie na stronę główną sklepu podglądu tekstu. W celu wykonania tej operacji, przejdź do plików sklepu (Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML), a następnie kliknij przycisk DODAJ. W polu Ścieżka wpisz elements/textelement, a w polu nazwa pliku, textelement-2.html. W nowo utworzonym pliku dodaj poniższy kod: {% assign name = include-%} {% assign content = [name].Content-%}
Po wprowadzeniu powyższego kodu, otwieramy plik home-page.html znajdujący się w głównym katalogu. Należy dodać w nim linijkę: {% include 'elements/textelement/textelement-2.html' with 'textelement-2' -%}
Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie elementu tekstowego na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji. Następnie należy otworzyć katalog css a w nim plik layout0.css. Na jego końcu wklejamy następujący kod: .textElement-2{color:{{settings.primaryFontColor}};max-width:1400px;margin:0 auto;padding-top:50px}.textElement-2__element-wrapper{display:grid;grid-template-columns:1fr 4fr}.textElement-2__content-wrapper{margin-left:64px}.textElement-2__image{margin:auto;max-height:290px}.textElement-2__header{font-size:40px;font-weight:300}.textElement-2__secondHeader{font-size:40px;font-weight:300}.textElement-2__column-wrapper{margin-top:27px;display:grid;grid-template-columns:2fr 1fr;gap:44px;text-align:justify} @media screen and (max-width: 768px) {.textElement-2{text-align:center;display:block;padding:0}.textElement-2__element-wrapper{display:block}.textElement-2__content-wrapper{margin-left:0}.textElement-2__image{display:block;width:auto;max-height:200px;margin-bottom:20px}.textElement-2__header{margin:0 10%;font-size:20px}.textElement-2__secondHeader{margin:0 10%;font-size:20px}.textElement-2__column-wrapper{grid:unset;gap:20px;margin:20px 10% 0 10%;font-size:15px}.textElement-2__column .textElement-2__secondColumn{text-align:justify}} Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout0.js. Przy pomocy narzędzia wyszukiwania, szukamy frazy headerFunctions.init();. Następujący kod należy wkleić bezpośrednio pod znalezioną linią: if($('body').find('#textElement').index() >= 0) { textElementFunctions.init(); }
Na koniec pozostając w tym samym katalogu otwieramy plik layout1.js. Na jego końcu wklejamy następujacy kod: var textElementFunctions = { init: function () { textElementFunctions.setTextElement(); }, setTextElement: function() { let textElementList = $("div[class^='textElement-']"); textElementList.each( function() { let content = $(this).find("input").val(); if (content === null || content === undefined) return null; let textElementValues = textElementFunctions.getTextElementValue(content); if (!textElementFunctions.isTextElementEmpty(textElementValues)) { $(this).find("#textElementHeader").html(textElementValues.header1); $(this).find("#textElementSecondHeader").html(textElementValues.header2); $(this).find("#textElementColumn").html(textElementValues.column1); $(this).find("#textElementSecondColumn").html(textElementValues.column2); $(this).find("#textElementThirdColumn").html(textElementValues.column3); $(this).find("#textElementImage").attr("src",textElementValues.image); } else { $(this).css("display", "none"); } }); }, getTextElementValue: function(content) { const headerRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header1>'); const header2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header2>'); const columnRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column1>'); const column2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column2>'); const column3Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column3>'); const imageRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/image>'); let header1, header2, column1, column2, column3, image = null; header1 = textElementFunctions.checkMatch(content, headerRegex) !== null? textElementFunctions.checkMatch(content, headerRegex).substring(0, 50) : null; header2 = textElementFunctions.checkMatch(content, header2Regex) !== null? textElementFunctions.checkMatch(content, header2Regex).substring(0, 50): null; column1 = textElementFunctions.checkMatch(content, columnRegex); column2 = textElementFunctions.checkMatch(content, column2Regex); column3 = textElementFunctions.checkMatch(content, column3Regex); image = textElementFunctions.checkMatch(content, imageRegex); return { header1: header1, header2: header2, column1: column1, column2: column2, column3: column3, image: image, }; }, checkMatch: function(content, regex) { if (content) if (content.match(regex)) if (content.match(regex).hasOwnProperty(1)) return content.match(regex)[1]; return null; }, isTextElementEmpty: function(textElementValues) { for(const [index, item] of Object.entries(textElementValues)) { if(item !== null) return false; } return true; } }

Element tekstowy bez obrazu
W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Kliknij dodaj i następnie wybierz typ tekstowy. Wprowadź nazwę textelement-1. Z dostępnych obiektów, wybierz nowo utworzony obiekt i wprowadź wybraną przez siebie treść w formacie: Nagłówek pierwszego poziomu Nagłówek drugiego poziomu Zawartość pierwszej kolumny Zawartość drugiej kolumny Zawartość trzeciej kolumny
Na końcu zapisz zmiany. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna. Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie tekstu i obrazu na stronie głównej sklepu. Kolejnym krokiem jest dodanie na stronę główną sklepu podglądu tekstu. W celu wykonania tej operacji, przejdź do plików sklepu (Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML), a następnie kliknij przycisk DODAJ. W polu Ścieżka wpisz elements/textelement, a w polu nazwa pliku, textelement-1.html. W nowo utworzonym pliku dodaj poniższy kod: {% assign name = include-%} {% assign content = [name].Content-%}
Po wprowadzeniu powyższego kodu, otwieramy plik home-page.html znajdujący się w głównym katalogu. Należy dodać w nim linijkę: {% include 'elements/textelement/textelement-1.html' with 'textelement-1' -%}
Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie elementu tekstowego na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji. Następnie należy otworzyć katalog css a w nim plik layout0.css. Na jego końcu wklejamy następujący kod: .textElement-1{color:{{settings.primaryFontColor}};max-width:1400px;margin:0 auto;padding-top:50px}.textElement-1__header{font-size:40px;font-weight:300}.textElement-1__secondHeader{font-size:40px;font-weight:300}.textElement-1__column-wrapper{margin-top:27px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;text-align:justify} @media screen and (max-width: 769px) {.textElement-1{text-align:center;margin-bottom:30px}.textElement-1__header{margin:0 10%;font-size:20px}.textElement-1__secondHeader{margin:0 10%;font-size:20px}.textElement-1__column-wrapper{grid:unset;gap:20px;font-size:15px;margin:20px 10% 0 10%}.textElement-1__column .textElement-1__secondColumn .textElement-1__thirdColumn{text-align:justify;margin-bottom:15px}} Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout0.js. Przy pomocy narzędzia wyszukiwania, szukamy frazy headerFunctions.init();. Następujący kod należy wkleić bezpośrednio pod znalezioną linią: if($('body').find('#textElement').index() >= 0) { textElementFunctions.init(); }
Na koniec pozostając w tym samym katalogu otwieramy plik layout1.js. Na jego końcu wklejamy następujacy kod: var textElementFunctions = { init: function () { textElementFunctions.setTextElement(); }, setTextElement: function() { let textElementList = $("div[class^='textElement-']"); textElementList.each( function() { let content = $(this).find("input").val(); if (content === null || content === undefined) return null; let textElementValues = textElementFunctions.getTextElementValue(content); if (!textElementFunctions.isTextElementEmpty(textElementValues)) { $(this).find("#textElementHeader").html(textElementValues.header1); $(this).find("#textElementSecondHeader").html(textElementValues.header2); $(this).find("#textElementColumn").html(textElementValues.column1); $(this).find("#textElementSecondColumn").html(textElementValues.column2); $(this).find("#textElementThirdColumn").html(textElementValues.column3); $(this).find("#textElementImage").attr("src",textElementValues.image); } else { $(this).css("display", "none"); } }); }, getTextElementValue: function(content) { const headerRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header1>'); const header2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header2>'); const columnRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column1>'); const column2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column2>'); const column3Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column3>'); const imageRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/image>'); let header1, header2, column1, column2, column3, image = null; header1 = textElementFunctions.checkMatch(content, headerRegex) !== null? textElementFunctions.checkMatch(content, headerRegex).substring(0, 50) : null; header2 = textElementFunctions.checkMatch(content, header2Regex) !== null? textElementFunctions.checkMatch(content, header2Regex).substring(0, 50): null; column1 = textElementFunctions.checkMatch(content, columnRegex); column2 = textElementFunctions.checkMatch(content, column2Regex); column3 = textElementFunctions.checkMatch(content, column3Regex); image = textElementFunctions.checkMatch(content, imageRegex); return { header1: header1, header2: header2, column1: column1, column2: column2, column3: column3, image: image, }; }, checkMatch: function(content, regex) { if (content) if (content.match(regex)) if (content.match(regex).hasOwnProperty(1)) return content.match(regex)[1]; return null; }, isTextElementEmpty: function(textElementValues) { for(const [index, item] of Object.entries(textElementValues)) { if(item !== null) return false; } return true; } }

Dodanie kilku opcji wielkości menu kategorii

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać w nim kilka opcji wielkości menu kategorii.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir
W pliku common/categories-navigation/sliding-navigation-partial.html na samym początku zastąp linijkę:

poniższym kodem:

Teraz w pliku scss/components/_categories-navigation.scss odnajdź klasę category-content-ui i zawartość jej styli podmień poniższym kodem:
.category-content-ui { position: relative; width: 100%; transition: height $animations-time; background-color: $bgColor; &.big-ui{ .has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{ width: calc(100% - 60px); } .category-label-ui{ font-size: 16px; padding-left: 20px; } .category-arrow:not(.prev-level-ui), .prev-level-ui i{ width: 60px; } .category-label-ui, .category-arrow{ min-height: 55px; } } &.medium-ui{ .has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{ width: calc(100% - 47px); } .category-label-ui{ font-size: 14px; padding-left: 15px; } .category-arrow:not(.prev-level-ui), .prev-level-ui i{ width: 47px; } .category-label-ui, .category-arrow{ min-height: 44px; } } &.small-ui{ .has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{ width: calc(100% - 34px); } .category-label-ui{ font-size: 12px; padding-left: 10px; } .category-arrow:not(.prev-level-ui), .prev-level-ui i{ width: 34px; } .category-label-ui, .category-arrow{ min-height: 34px; } } }
Następnie w pliku __settings.liquid do tłumaczeń polskich dodaj:
{% assign categoryMenu = "Menu kategorii" -%} {% assign categoryMenuInfo = "Wielkość linków kategorii" -%} {% assign big = "Duże" -%} {% assign medium = "Średnie" -%} {% assign small = "Małe" -%}
Teraz w tym samym pliku (__settings.liquid) w części w której są elementy fieldset dodaj analogicznie poniższy kod:
{{categoryMenu}}
{{categoryMenuInfo}}

{{big}}

{{medium}}

{{small}}

W Panelu Administracyjnym w zakładce Wygląd sklepu -> Ustawienia -> Ustawienia szablonu pojawi się nowa sekcja z 3 opcjami wielkości menu do wyboru. Po każdej zmianie w ustawieniach należy zapisać zmiany ikonką dyskietki znajdującą się w prawym górnym rogu.

Dodanie opcji wyłączenia obsługi zapytań ofertowych

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać opcję wyłączenia obsługi zapytań ofertowych.
Szafir
W plikach common/header/client-area.html, customer-profile/menu.html, customer-profile/orders/order-details.html, product/product-presentation-data.html (w tym ostatnim pliku dana fraza występuje 2 razy) zastąp frazę:
{% if config.B2B -%}
poniższym kodem:
{% if config.B2B and settings.inquiries == 'yes' -%}
Pozostając w pliku product/product-presentation-data.html zastąp linijkę:
{% if config.B2B and activeProduct.Price != null and activeProduct.Availability.Status != 3 and customer.HidePrices == false and activeProduct.AskForPrice == false and noSimpleProduct -%}
poniższym kodem:
{% if config.B2B and activeProduct.Price != null and activeProduct.Availability.Status != 3 and customer.HidePrices == false and activeProduct.AskForPrice == false and noSimpleProduct and settings.inquiries == 'yes' -%}
Teraz w pliku common/navigation-bars/cart-navigation-bar.html zastąp linijkę:
{% if order.OrderStep == 'Start' and config.B2B and productsSize > 0 and customer.Cart.EditedOrderId == null -%}
poniższym kodem:
{% if order.OrderStep == 'Start' and config.B2B and productsSize > 0 and customer.Cart.EditedOrderId == null and settings.inquiries == 'yes' -%}
Następnie w pliku _layout.html zastąp linijkę:
{% if config.B2B and page.PageId != config.DefinedPages.Order.Id -%}
poniższym kodem:
{% if config.B2B and page.PageId != config.DefinedPages.Order.Id and settings.inquiries == 'yes' -%}
Następnie w pliku __settings.liquid do tłumaczeń polskich dodaj:
{% assign inquiries = "Zapytania o wycenę" -%} {% assign inquiriesInfo = "Prezentuj funkcje związane ze składaniem Zapytań o wycenę" -%}
Teraz w tym samym pliku (__settings.liquid) w części w której są elementy fieldset dodaj analogicznie poniższy kod:
{{inquiries}}

{{inquiriesInfo}}

{{yesTranslation}}

{{noTranslation}}

W Panelu Administracyjnym w zakładce Wygląd sklepu -> Ustawienia -> Ustawienia szablonu pojawi się nowa sekcja, dzięki której będzie można włączyć lub wyłączyć zapytania ofertowe, oraz wszystko co z nimi związane.

Dodanie szczegółowej weryfikacji spełnienia wymogów bezpieczeństwa hasła

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać szczegółową weryfikację spełnienia wymogów bezpieczeństwa hasła.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir
W plikach common/address-form-register-full.html, customer-profile/customer-details/change-password-form.html, reminder.html, sign-in-customer-profile.html, sign-in.html, sign-up-no-address.html (w niektórych z tych plików występuje kilka razy) zastąp frazę: {{ translations.FillProperPassword }} poniższym kodem: {{ translations.PasswordMustHave }}: {{ translations.Min8Char }} {{ translations.BigLetter }} {{ translations.SmallLetter }} {{ translations.Digit }} {{ translations.SpecialChar }} Teraz w pliku js/init.js wyszukaj frazę // password (nie // password mismatch) i zastąp cały warunek: if(name == 'password' || name == 'passwordRepeat' || name == 'oldPassword'){ var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/; if(!regex.test(input.val())){ parent.find('.validation-password-lq').removeClass('hidden-lq'); input.addClass('validation-error-lq'); input.addClass('validation-error-ui'); } else { parent.find('.validation-password-lq').addClass('hidden-lq'); input.removeClass('validation-error-ui'); } } poniższym kodem: if(name == 'password' || name == 'passwordRepeat' || name == 'oldPassword'){ var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/; if(!regex.test(input.val())){ parent.find('.validation-password-lq').removeClass('hidden-lq'); input.addClass('validation-error-lq'); input.addClass('validation-error-ui'); var min8CharRegex = /^[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/; var bigLetterRegex = /^(?=.*[A-Z])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/; var smallLetterRegex = /^(?=.*[a-z])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/; var digitRegex = /^(?=.*\d)[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/; var specialCharRegex = /^(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/; if(!min8CharRegex.test(input.val())){ parent.find('.min-8-char-lq').removeClass('passed-validation-ui'); parent.find('.min-8-char-lq i').removeClass('passed-validation-icon-ui'); } else { parent.find('.min-8-char-lq').addClass('passed-validation-ui'); parent.find('.min-8-char-lq i').addClass('passed-validation-icon-ui'); } if(!bigLetterRegex.test(input.val())){ parent.find('.big-letter-lq').removeClass('passed-validation-ui'); parent.find('.big-letter-lq i').removeClass('passed-validation-icon-ui'); } else { parent.find('.big-letter-lq').addClass('passed-validation-ui'); parent.find('.big-letter-lq i').addClass('passed-validation-icon-ui'); } if(!smallLetterRegex.test(input.val())){ parent.find('.small-letter-lq').removeClass('passed-validation-ui'); parent.find('.small-letter-lq i').removeClass('passed-validation-icon-ui'); } else { parent.find('.small-letter-lq').addClass('passed-validation-ui'); parent.find('.small-letter-lq i').addClass('passed-validation-icon-ui'); } if(!digitRegex.test(input.val())){ parent.find('.digit-lq').removeClass('passed-validation-ui'); parent.find('.digit-lq i').removeClass('passed-validation-icon-ui'); } else { parent.find('.digit-lq').addClass('passed-validation-ui'); parent.find('.digit-lq i').addClass('passed-validation-icon-ui'); } if(!specialCharRegex.test(input.val())){ parent.find('.special-char-lq').removeClass('passed-validation-ui'); parent.find('.special-char-lq i').removeClass('passed-validation-icon-ui'); } else { parent.find('.special-char-lq').addClass('passed-validation-ui'); parent.find('.special-char-lq i').addClass('passed-validation-icon-ui'); } } else { parent.find('.validation-password-lq').addClass('hidden-lq'); input.removeClass('validation-error-ui'); } } Następnie w pliku scss/globals._globals2.scss dodaj na końcu poniższy kod: .validation-password-lq i{ border: 1px solid $dangerColor; border-radius: 50%; font-size: 6px; padding: 3px; &::before{ content: "\e622"; } &.passed-validation-icon-ui{ border: 1px solid $successColor; background-color: $successColor; color: #fff; &::before{ content: "\e64c"; } } } .passed-validation-ui{ color: $successColor; } Ostatnim krokiem będzie dodanie w Panelu Administracyjnym tłumaczeń do nowych wymogów. Tłumaczenia dodajemy w zakładce Wygląd sklepu -> Ustawienia -> Tłumaczenia. Tłumaczenia które należy dodać to: PasswordMustHave: Hasło musi mieć Min8Char: Minimum 8 znaków BigLetter: Dużą literę SmallLetter: Małą literę Digit: Cyfrę SpecialChar: Znak specjalny

Modyfikacja listy towarów w Topazie - filtrowanie bez przeładowania strony

Od wersji 2021.2 w szablonie Topaz zmodyfikowane zostały listy produktów. Dotychczas filtrując poszczególne towary, należało nacisnąć przycisk "filtruj" co przeładowywało stronę i wyświetlało przefiltrowane produkty. Obecnie filtrowanie odbywa się w sposób dynamiczny, bez odświeżania strony. Lista towarów aktualizuje się od razu po wybraniu odpowiedniego filtra. Niniejsza instrukcja objaśnia, w jaki sposób zmodyfikować szablon Topaz, by osiągnąć opisywany efekt. Artykuł podzielony będzie na trzy sekcje.

Pierwsza dotyczy modyfikacji we wspólnych częściach dla obu wariantów listy towarów.

Druga dotyczy wyłącznie pierwszego widoku listy towarów (w plikach szablonu: elements/products-list/products-1.html)

Trzecia sekcja dotyczy wyłącznie drugiego widoku (w tym samym katalogu plik products-2.html)

Modyfikacje dla obu wersji listy towarów

1. Plik base_layout.html
Otwórz plik base_layout.html w głównym katalogu z plikami szablonu. Wyszukaj linię __translations = {. Pod nią znajdują się wymienione tłumaczenia, które trafiają do funkcji js. Do ostatniego na tej liście dopisz przecinek na końcu, i pod spodem wklej: NotifyAboutAvailability: "{{translations.NotifyAboutAvailability}}", Com_LogInToSeePrice: "{{translations.Com_LogInToSeePrice}}", Com_AskForPrice: "{{translations.Com_AskForPrice}}", Com_From: "{{ translations.Com_From }}" Nad wyszukaną wcześniej linią __translations = {, wklej poniższy kod: __isEnterprise = '{{config.ENTERPRISE}}'; __hidePrices = '{{customer.HidePrices}}';
2. Plik product-item.html
Otwórz plik partials/product-item.html. Wyszukaj w nim linię:

<code lang="ruby"> </code>

Przed aria-label, a po otwarciu tagu a, dopisz class="product-url" .
Modyfikacje dla pierwszego wariantu

Modyfikacja HTML
Otwieramy plik elements/products-list/products-1.html. a) Wyszukujemy linię rozpoczynającą się od:. Usuwamy w tej linii następujący fragment kodu: {% if value.Count == 0 -%} disabled {% endif -%} To samo wykonujemy kilka linii poniżej, w linii zaczynającej się od . b) Wyszukujemy linię z elementem div, posiadającym klasę primary-action-button. Na liście jego klas dodajemy klasę hidden. c) Wyszukujemy linię {% if anythingSelected -%} Kasujemy ją i odpowiadającą jej linię {% endif -%} (kilkanaście linii niżej, tuż nad {% assign productsItems = products.Products -%}. d) Wyszukujemy div'a o id reset-filters. Na jego liście klas musimy dodać warunek {% if anythingSelected == false -%} hidden {% endif -%} e) Wyszukujemy div'a z klasą removeFilter-js. Są dwa div'y o tej klasie. Nam chodzi o div'a znajdującego się w warunku {% if fo.PriceFrom != null and fo.PriceTo != null -%}. Na liście klas tego div'a dodajemy sliderPriceFilter. f) Wyszukujemy linię {% if minProductNo < 1 -%}. Tuż nad nią znajduje się element span. Przerabiamy go w następujący sposób: . g) Wyszukujemy linię {% if valuesSize > 4 -%}. W kodzie są dwie takie linie, bierzemy pierwszą - nad nią znajduje się {% assign valuesSize = filter.Values | Size -%}. Usuwamy tę znalezioną linię i kilka kolejnych, kod do usunięcia wygląda tak: {% if valuesSize > 4 -%} {% assign redundantValues = filter.Values | Skip:4 -%} {% assign visibleValues = filter.Values | Take:4 -%} {% else -%} {% assign visibleValues = filter.Values -%} {% endif -%} h) Tuż pod usuniętym kodem znajduje się tag li z klasą filter-group-wrapper. Musimy usunąć go całego, a w jego miejsce wkleić poniższy kod:

{{ filter.Heading }}

{{ value.Text }} ({{ value.Count }})

{% if counter > 4 and counter == filterSize -%}
{% endif -%} {% assign counter = counter | Plus: 1 -%} {% endfor -%} {% if filterSize > 3 -%} {{ translations.Com_More }} {{ translations.Com_Less }} {% endif -%}

Modyfikacja JS
Otwórz plik js/layout1.js. Wyszukaj linię kodu o treści var productListFunctions = {. Zaznacz cały blok kodu, począwszy od tej linii po klamrę zamykającą (pojedyncza klamra, nad którą 3 linie powyżej znajduje się $('body').on('mouseleave', '.product-item', function() {). Usuń ten blok kodu a w jego miejsce wklej następujący:

var ajax_lock = false; var productListFunctions = { init: function () { productListFunctions.events(); productListFunctions.applyResetFilters(); productListFunctions.setPriceSlider(); if(localStorage.getItem('productListType') != null){ productListFunctions.changeListView(); } productListFunctions.removeEmptyFilters(); $('.redundant').slideToggle(); }, applyResetFilters: function() { $.pushObj = function (t, o) { var p; for (p in o) t.push({ name: p, value: o[p] }); }$(".product-list__filters .filter-group-wrapper .filter-group .redundant").each(function(i, element) { // check if in hidden filter values (redundant) are checked ones // if yes they should be displayed if ($(element).children().children().children().children("input[checked]").length) { $(element).toggle(); $(element.parentNode).children(".filter-more").toggle(); $(element.parentNode).children(".filter-less").toggle(); } });$(".product-list__filters .filter-group-wrapper .filter-group input[checked]").each(function(i, element) { $(element).parent().addClass('custom-checkbox--checked'); }); }, resetFilters: function() { $($('.searchFilters-js').find('input:checked').prop('checked', false)); $('.productsList__priceSlider__minPrice-js').val($('.productsList__priceSlider__minPrice-js').attr('min')); $('.productsList__priceSlider__from-js').text($('.productsList__priceSlider__minPrice-js').attr('min')); $('.productsList__priceSlider__maxPrice-js').val($('.productsList__priceSlider__maxPrice-js').attr('max')); $('.productsList__priceSlider__to-js').text($('.productsList__priceSlider__maxPrice-js').attr('max')); productListFunctions.setPriceSlider(); $('.getSearchFilters-js').click(); }, removeFilter: function (e) { var filterId = $(e.currentTarget).data('filter-id');if (filterId === 'price') { $('.productsList__priceSlider__minPrice-js').val($('.productsList__priceSlider__minPrice-js').attr('min')); $('.productsList__priceSlider__from-js').text($('.productsList__priceSlider__minPrice-js').attr('min')); $('.productsList__priceSlider__maxPrice-js').val($('.productsList__priceSlider__maxPrice-js').attr('max')); $('.productsList__priceSlider__to-js').text($('.productsList__priceSlider__maxPrice-js').attr('max')); productListFunctions.setPriceSlider(); $('.getSearchFilters-js').click(); } else { $($('.searchFilters-js').find('input:checked[value="' + filterId + '"]')[0]).prop("checked", false); $('.getSearchFilters-js').click(); } }, reloadFilters: function () { productListFunctions.refreshPagination(); var filters; var countSelected = 0; var isSelected = []; $.get('', {__collection: 'products.FilteringOptions.Filters'}, function(data) { filters = data.collection; }).done(function() { for(f in filters) { isSelected[f] = false; for(val in filters[f].Values) { if(filters[f].Values[val].Selected) { isSelected[f] = true; } } if(isSelected[f] == true) { countSelected++; } }$('.filter-group').each(function() { if($(this).find('label')) { var sum; for(f in filters) { sum = 0; if($(this).find('label').attr('for').toLowerCase().includes(filters[f].Field.toLowerCase())) { var labels = $(this).find('.filter-label'); labels.each(function(label) { if(countSelected == 1 && isSelected[f] == true) { labels.eq(label).text(filters[f].Values[label].Text + ' (' + filters[f].Values[label].TotalCount + ')'); } else { labels.eq(label).text(filters[f].Values[label].Text + ' (' + filters[f].Values[label].Count + ')'); } }); } } } }); $('.removeFilter-js').remove(); var minPrice = $('.productsList__priceSlider__minPrice-js'); var maxPrice = $('.productsList__priceSlider__maxPrice-js'); if(minPrice.val() !== minPrice.attr('min') || maxPrice.val() !== maxPrice.attr('max')) { $('.selectedFilters-js').append('
' + minPrice.val() + ' - ' + maxPrice.val() + ' ' + __curr + '
'); } for(f in filters) { for(val in filters[f].Values) { if(filters[f].Values[val].Selected == true) { $('.selectedFilters-js').append('
' + filters[f].Values[val].Text + '
'); } } } if($('.removeFilter-js').length > 0) { $('#reset-filters').removeClass('hidden'); } else { $('#reset-filters').addClass('hidden'); } }); setTimeout(function() { productListFunctions.removeEmptyFilters(); },1000); }, removeEmptyFilters:function() { $('.filter-group').each(function() { var label = $(this).find('.filter-label'); label.each(function() { var number = $(this).text().substring( $(this).text().lastIndexOf("(")+1, $(this).text().lastIndexOf(")") ); var filterInput = $(this).parent().parent().find('.filter-input'); if(number == 0 && filterInput.prop('checked') == false) { filterInput.attr('disabled', 'disabled'); } else { filterInput.removeAttr('disabled'); } }); }); }, refreshPagination: function() { var URLstring = window.location.origin + window.location.pathname $.get('', {__collection: 'products'}, function(result) { var pagination = result.collection; var pageCount = pagination.PageCount; var totalItems = pagination.TotalItems; var selectedSorting = pagination.SelectedSorting; if(pageCount > 1) { if($('.product-list__grid-wrapper').children('.product-list__pagination').length < 1) { $('.product-list__grid-wrapper').append('
'); $('.product-list__pagination').append(' '); } else { $('.product-list__pagination > *').remove(); $('.product-list__pagination').append(' '); } $('.pagination').append('

'); $('.pagination').append('

1

'); for(let i=2;i<=pageCount;i++) { $('.pagination').append('

' + i + '

'); if (i==7) break; } $('.pagination').append('

'); } else { $('.product-list__pagination > *').remove(); } if(totalItems > 12) { var items = 12; } else { var items = totalItems; } $('#items-counter').text('1 - ' + items + ' ' + __translations.Com_From + ' ' + totalItems); }); }, getSearchFilters: function() { var minPrice = $('.productsList__priceSlider__minPrice-js'); var maxPrice = $('.productsList__priceSlider__maxPrice-js');if(minPrice.val() == minPrice.attr('min')) { minPrice.prop('disabled', true); } else { minPrice.prop('disabled', false); }if(maxPrice.val() == maxPrice.attr('max')) { maxPrice.prop('disabled', true); } else { maxPrice.prop('disabled', false); }var d = $('.product-list__filters .filter-group-wrapper input').serializeArray(); $.pushObj(d, { __action: 'get/SearchFilters' });return $.ajax({ url: window.location.href, method: "GET", action: 'get/SearchFilters', data: d, template: 'elements/products-list/products-1.html', success: function(data) { window.history.replaceState('', '', data.action.Redirect302); } }); }, resetProductList: function() { productListFunctions.applyResetFilters(); $('.product-item').remove(); $.get('', {__collection:'products.Products'}, function(res) { for(let i=0;i<res.collection.length;i++) { $.get('', { __template: 'partials/product-item.html'}, function (data) { $.when($('.product-list__grid').append(data.template)).done(function(){ var product = res.collection[i]; var productContainer = $('.product-item').eq(i); var noProductInStock;productContainer.find('.product-item__description h2 p').text(product.NameNoHtml); productContainer.find('.shortDescription').text(product.ShortDescription); productContainer.find('.product-url').attr('href', product.Url); for(let j=0; j<2; j++) { if(product.Flags[j]) { productContainer.find('.product-flags').append('' + product.Flags[j].Text + ''); } } if (product.Images != null && product.Images[0] != null && product.Images[0].Id != -1) { productContainer.find('.product-item__image').removeClass('product-item__noImage').html(''); productContainer.find('.product-item__image').append(''); } if (product.StockLevel != null && product.StockLevel.QuantityControl == true && product.StockLevel.Value == 0) { noProductInStock = true; } else { noProductInStock = false; } if(product.Availability.Status == 3 || noProductInStock == true || (product.StockLevel != null && product.StockLevel.Control == true) && (product.StockLevel != null && product.StockLevel.Value == 0)) { productContainer.find('.price').text(__translations.NotifyAboutAvailability); } else if (__hidePrices == false && product.Price >= 0 && product.Availability.Status == 0 || product.Availability.Status == 1 || product.Availability.Status == 2) { if (product.PreviousPrice > product.Price) { productContainer.find('.product-item__description').append(''); productContainer.find('.red-price').text(product.Price.toFixed(2).replace('.', ',') + ' ' + __curr); productContainer.find('.product-item__description').append(''); productContainer.find('.old-price').text(product.PreviousPrice.toFixed(2).replace('.', ',') + ' ' + __curr); productContainer.find('.price').remove(); } else if (product.RegularPrice > product.Price && __isEnterprise) { productContainer.find('.product-item__description').append(''); productContainer.find('.red-price').text(product.Price.toFixed(2).replace('.', ',') + ' ' + __curr); productContainer.find('.product-item__description').append(''); productContainer.find('.old-price').text(product.RegularPrice.toFixed(2).replace('.', ',') + ' ' + __curr); productContainer.find('.price').remove(); } else { productContainer.find('.price').text(product.Price.toFixed(2).replace('.', ',') + ' ' + __curr); } } else if (__hidePrices == true) { productContainer.find('.price').addClass('.loginToSeePrice').text(__translations.Com_LogInToSeePrice); } else if (product.Price == null) { productContainer.find('.price').text(__translations.Com_AskForPrice); } }); }); } }); }, parseQuery: function(qstr) { var query = {}, a, i, b; if (qstr.length <= 1) return {}; a = qstr.substr(1).split('&'); for (i = 0; i < a.length; i++) { b = a[i].split('='); query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || ''); } return query; }, setPriceSlider: function() { if ($('.productsList__priceSlider-js').length > 0 && $('.productsList__priceSlider-js').not('.ui-slider')) { var minValue = $('.productsList__priceSlider__minPrice-js').val(); var maxValue = $('.productsList__priceSlider__maxPrice-js').val(); var minRange = $('.productsList__priceSlider__minPrice-js').attr('min'); var maxRange = $('.productsList__priceSlider__maxPrice-js').attr('max'); $('.productsList__priceSlider-js').slider({ range: true, min: parseInt(minRange , 10), max: parseInt(maxRange, 10), values: [minValue, maxValue], change: function(event) { setTimeout(function() {$('.getSearchFilters-js').click();}, 1000);}, slide: function (event, ui) { $('.productsList__priceSlider__minPrice-js').val(ui.values[0]); $('.productsList__priceSlider__maxPrice-js').val(ui.values[1]); $('.productsList__priceSlider__from-js').text(ui.values[0]); $('.productsList__priceSlider__to-js').text(ui.values[1]); } }); } }, changeListView: function(type) { var listType = type !== undefined ? type : localStorage.getItem('productListType') === 'grid' ? 'grid' : 'list'; var changeListViewBtn = $('.changeListView-js'); var icon = changeListViewBtn.find('use')[0]; var productsList = $('.product-list__grid-js'); var changeViewBtn = document.querySelector('.changeListView-js'); if (listType === 'grid') { changeViewBtn.dataset.type = 'list'; localStorage.setItem('productListType', 'grid'); $(icon).attr('xlink:href', 'css/img/icons-sprite.svg#th-list-' + __iconStyle); productsList.addClass('product-list__gridView-js').removeClass('product-list__listView-js'); } else if (listType === 'list') { changeViewBtn.dataset.type = 'grid'; localStorage.setItem('productListType', 'list'); $(icon).attr('xlink:href', 'css/img/icons-sprite.svg#th-large-' + __iconStyle); productsList.removeClass('product-list__gridView-js').addClass('product-list__listView-js'); } }, putSecondImage: function(e) { if($("#secondImageOnList").attr("value") == "yes") { setTimeout(function(){ if (window.mouseOver) { var imgEl = e.find("img"); if(imgEl.length == 1) { var url = e.find('a[aria-label="productUrl"]').attr("href"); $.get(url, {__collection:'product-details.Product.Images'}, function(a) { var imgs = a.collection; if(imgs.length > 1) { if(imgs[1].Id != 0){ e.find(".product-item__image").append(''); } else if (imgs[1].ExternalUrl){ e.find(".product-item__image").append(''); } e.addClass("hover"); } }); } }}, 250); } }, events: function () { $(".display-details__sorting").off("click").on("click", function(e) { var dropdownDiv = $(e.currentTarget).children(".dropdown-menu"); if (dropdownDiv) dropdownDiv.stop().slideToggle(); }); $(".product-list__filters-trigger").on("click", function () { $(".product-list__filters").toggle(300); $(".product-list__grid-wrapper").toggleClass('filtersOpen-js'); if ($('body').find('.filtersOpen-js').index() >= 0) { $(".product-list__filters-trigger span:first-child").text(__translations.HideFilters); } else { $(".product-list__filters-trigger span:first-child").text(__translations.ShowFilters); } }); $('.display-details__sorting .dropdown-menu__links li').on('click', function (e) { var sortItem = $(this); var qs = productListFunctions.parseQuery(location.search); if (qs.pageId) delete qs.pageId; $.get('', { __collection: 'products.SortingQueryGET' }, function (res) { qs[res.collection] = sortItem.data('value'); location.href = (location.pathname + '?' + $.param(qs)); }); }); $(".product-list__filters .filter-group-wrapper .filter-toggle").on('click', function(e) { var redundantSwitches = $(e.target.parentNode).children('.redundant'); var buttonToShowName = e.target.classList.contains('filter-more') ? '.filter-less' : '.filter-more'; $(e.target).toggle(); $(e.target.parentNode).children(buttonToShowName).toggle(); redundantSwitches.stop().slideToggle("slow"); }); $('body').on('click', '.product-list__filters .filter', function (e) { if (ajax_lock || $(this).find('*').prop('disabled') == true) { e.preventDefault(); e.stopPropagation(); return; } else { $('.filter, .productsList__priceSlider-js > *').addClass('disabled'); e.preventDefault(); e.stopPropagation(); if($(this).find('input').prop('checked') == true) { $(this).find('input').prop('checked', false); } else { $(this).find('input').prop('checked', true); } ajax_lock = true; $('.product-item').remove(); $.when(productListFunctions.getSearchFilters()).done(function() { productListFunctions.resetProductList(); setTimeout(function() { ajax_lock = false; $.when(productListFunctions.reloadFilters()).done(function() { $('.filter, .productsList__priceSlider-js > *').removeClass('disabled'); }); }, 2000); }); } }); $('body').on('click', '.product-list__filters .getSearchFilters-js', function (e) { if (ajax_lock) { e.preventDefault(); e.stopPropagation(); return; } else { $('.filter, .productsList__priceSlider-js > *').addClass('disabled'); e.preventDefault(); e.stopPropagation(); ajax_lock = true; $('.product-item').remove(); $.when(productListFunctions.getSearchFilters()).done(function() { setTimeout(function() { productListFunctions.resetProductList(); }, 2000); setTimeout(function() { ajax_lock = false; $.when(productListFunctions.reloadFilters()).done(function() { $('.filter, .productsList__priceSlider-js > *').removeClass('disabled'); }); }, 2000); }) } }); $('.product-list').on('click', '#reset-filters', function() { productListFunctions.resetFilters(); }); $('.product-list').on('click', '.removeFilter-js', function(e) { productListFunctions.removeFilter(e); }); $('.product-list').on('click', '.changeListView-js', function(e) { productListFunctions.changeListView(e.currentTarget.dataset.type); }); $('body').on('mouseenter', '.product-item', function() { var e = $(this) window.mouseOver = true; productListFunctions.putSecondImage(e); }); $('body').on('mouseleave', '.product-item', function() { window.mouseOver = false; }); $(document).on('click', function (e) { if($(e.target).closest('.display-details__sorting').length === 0 && $(e.target).closest($('.display-details__sorting').children()).length === 0 && $(e.target).closest('.dropdown-menu').length === 0 && $(e.target).closest($('.dropdown-menu').children()).length === 0) { if($('.dropdown-menu').css('display') != 'none') { $('.dropdown-menu').slideToggle(200); } } }); } };

Modyfikacja css
Pozostaje drobna zmiana w pliku ze stylami. Otwórz css/layout0.css. Wyszukaj .filter input[disabled]+label{opacity:0.5;cursor:not-allowed}. Usuń ze znalezionego fragmentu ;cursor:not-allowed. To wszystkie kroki dla pierwszego wariantu listy towarów szablonie Topaz. Kolejne podpunkty dotyczą drugiego wariantu.
Modyfikacje dla drugiego wariantu

Modyfikacja HTML
a) Wyszukaj linię {% if minProductNo < 1 -%}. Nad nią znajduje się element span. Dopisz do niego id="items-counter". b) Wyszukaj element li z klasą filter-group-wrapper" (bez klasy price-filter). Usuń cały blok kodu (aż do zamknięcia tagu li). Zastąp go następującym:

{{ filter.Heading }}

{% assign filterSize = filter.Values | Size | Minus: 1 -%} {% assign counter = 0 -%} {% for value in filter.Values -%} {% if counter == 4 -%}
{% endif -%}

{{ value.Text }} ({{ value.Count }})

{% if counter > 4 and counter == filterSize -%}
{% endif -%} {% assign counter = counter | Plus: 1 -%} {% endfor -%} {% if filterSize > 3 -%} {{ translations.Com_More }} {{ translations.Com_Less }} {% endif -%}

c) Powyżej wklejonego bloku kodu znajduje się warunek {% if valuesSize > 4 -%}. Usuń go całego (od znalezionej linii do {% endif -%}).d) Wyszukujemy div'a z klasą primary-action-button. Na liście klas dopisujemy klasę hidden.e) Wyszukujemy div'a o id reset-filters. Na liście klas dodajemy {% if anythingSelected == false -%} hidden {% endif -%}.f) Wyszukujemy linię zawierającą kod: data-filter-id="price". Na liście klas tego div'a dopisujemy sliderPriceFilter.
Modyfikacja JS
Otwieramy plik js/layout1.js Wyszukujemy var productListFunctions = {. Cały znaleziony blok kodu (kończy się znakiem }, 3 linie powyzej znajduje się linia $('body').on('mouseleave', '.product-item', function() {) należy skasować, a w jego miejsce wkleić następujący:

var ajax_lock = false; var productListFunctions = { init: function () { productListFunctions.events(); productListFunctions.applyResetFilters(); productListFunctions.setPriceSlider(); if(localStorage.getItem('productListType') != null){ productListFunctions.changeListView(); } productListFunctions.removeEmptyFilters(); $('.redundant').slideToggle(); }, applyResetFilters: function() { $.pushObj = function (t, o) { var p; for (p in o) t.push({ name: p, value: o[p] }); }$(".product-list__filters .filter-group-wrapper .filter-group .redundant").each(function(i, element) { // check if in hidden filter values (redundant) are checked ones // if yes they should be displayed if ($(element).children().children().children().children("input[checked]").length) { $(element).toggle(); $(element.parentNode).children(".filter-more").toggle(); $(element.parentNode).children(".filter-less").toggle(); } });$(".product-list__filters .filter-group-wrapper .filter-group input[checked]").each(function(i, element) { $(element).parent().addClass('custom-checkbox--checked'); }); }, resetFilters: function() { $($('.searchFilters-js').find('input:checked').prop('checked', false)); $('.productsList__priceSlider__minPrice-js').val($('.productsList__priceSlider__minPrice-js').attr('min')); $('.productsList__priceSlider__from-js').text($('.productsList__priceSlider__minPrice-js').attr('min')); $('.productsList__priceSlider__maxPrice-js').val($('.productsList__priceSlider__maxPrice-js').attr('max')); $('.productsList__priceSlider__to-js').text($('.productsList__priceSlider__maxPrice-js').attr('max')); productListFunctions.setPriceSlider(); $('.getSearchFilters-js').click(); }, removeFilter: function (e) { var filterId = $(e.currentTarget).data('filter-id');if (filterId === 'price') { $('.productsList__priceSlider__minPrice-js').val($('.productsList__priceSlider__minPrice-js').attr('min')); $('.productsList__priceSlider__from-js').text($('.productsList__priceSlider__minPrice-js').attr('min')); $('.productsList__priceSlider__maxPrice-js').val($('.productsList__priceSlider__maxPrice-js').attr('max')); $('.productsList__priceSlider__to-js').text($('.productsList__priceSlider__maxPrice-js').attr('max')); productListFunctions.setPriceSlider(); $('.getSearchFilters-js').click(); } else { $($('.searchFilters-js').find('input:checked[value="' + filterId + '"]')[0]).prop("checked", false); $('.getSearchFilters-js').click(); } }, reloadFilters: function () { productListFunctions.refreshPagination(); var filters; var countSelected = 0; var isSelected = []; $.get('', {__collection: 'products.FilteringOptions.Filters'}, function(data) { filters = data.collection; }).done(function() { for(f in filters) { isSelected[f] = false; for(val in filters[f].Values) { if(filters[f].Values[val].Selected) { isSelected[f] = true; } } if(isSelected[f] == true) { countSelected++; } }$('.filter-group').each(function() { if($(this).find('label')) { var sum; for(f in filters) { sum = 0; if($(this).find('label').attr('for').toLowerCase().includes(filters[f].Field.toLowerCase())) { var labels = $(this).find('.filter-label'); labels.each(function(label) { if(countSelected == 1 && isSelected[f] == true) { labels.eq(label).text(filters[f].Values[label].Text + ' (' + filters[f].Values[label].TotalCount + ')'); } else { labels.eq(label).text(filters[f].Values[label].Text + ' (' + filters[f].Values[label].Count + ')'); } }); } } } }); $('.removeFilter-js').remove(); var minPrice = $('.productsList__priceSlider__minPrice-js'); var maxPrice = $('.productsList__priceSlider__maxPrice-js'); if(minPrice.val() !== minPrice.attr('min') || maxPrice.val() !== maxPrice.attr('max')) { $('.selectedFilters-js').append('
' + minPrice.val() + ' - ' + maxPrice.val() + ' ' + __curr + '
'); } for(f in filters) { for(val in filters[f].Values) { if(filters[f].Values[val].Selected == true) { $('.selectedFilters-js').append('
' + filters[f].Values[val].Text + '
'); } } } if($('.removeFilter-js').length > 0) { $('#reset-filters').removeClass('hidden'); } else { $('#reset-filters').addClass('hidden'); } }); setTimeout(function() { productListFunctions.removeEmptyFilters(); },1000); }, removeEmptyFilters:function() { $('.filter-group').each(function() { var label = $(this).find('.filter-label'); label.each(function() { var number = $(this).text().substring( $(this).text().lastIndexOf("(")+1, $(this).text().lastIndexOf(")") ); var filterInput = $(this).parent().parent().find('.filter-input'); if(number == 0 && filterInput.prop('checked') == false) { filterInput.attr('disabled', 'disabled'); } else { filterInput.removeAttr('disabled'); } }); }); }, refreshPagination: function() { var URLstring = window.location.origin + window.location.pathname $.get('', {__collection: 'products'}, function(result) { var pagination = result.collection; var pageCount = pagination.PageCount; var totalItems = pagination.TotalItems; var selectedSorting = pagination.SelectedSorting; if(pageCount > 1) { if($('.product-list__grid-wrapper').children('.product-list__pagination').length < 1) { $('.product-list__grid-wrapper').append('
'); $('.product-list__pagination').append(' '); } else { $('.product-list__pagination > *').remove(); $('.product-list__pagination').append(' '); } $('.pagination').append('

'); $('.pagination').append('

1

'); for(let i=2;i<=pageCount;i++) { $('.pagination').append('

' + i + '

'); if (i==7) break; } $('.pagination').append('

'); } else { $('.product-list__pagination > *').remove(); } if(totalItems > 12) { var items = 12; } else { var items = totalItems; } $('#items-counter').text('1 - ' + items + ' ' + __translations.Com_From + ' ' + totalItems); }); }, getSearchFilters: function() { var minPrice = $('.productsList__priceSlider__minPrice-js'); var maxPrice = $('.productsList__priceSlider__maxPrice-js');if(minPrice.val() == minPrice.attr('min')) { minPrice.prop('disabled', true); } else { minPrice.prop('disabled', false); }if(maxPrice.val() == maxPrice.attr('max')) { maxPrice.prop('disabled', true); } else { maxPrice.prop('disabled', false); }var d = $('.product-list__filters .filter-group-wrapper input').serializeArray(); $.pushObj(d, { __action: 'get/SearchFilters' });return $.ajax({ url: window.location.href, method: "GET", action: 'get/SearchFilters', data: d, template: 'elements/products-list/products-1.html', success: function(data) { window.history.replaceState('', '', data.action.Redirect302); } }); }, resetProductList: function() { productListFunctions.applyResetFilters(); $('.product-item').remove(); $.get('', {__collection:'products.Products'}, function(res) { for(let i=0;i<res.collection.length;i++) { $.get('', { __template: 'partials/product-item.html'}, function (data) { $.when($('.product-list__grid').append(data.template)).done(function(){ var product = res.collection[i]; var productContainer = $('.product-item').eq(i); var noProductInStock;productContainer.find('.product-item__description h2 p').text(product.NameNoHtml); productContainer.find('.shortDescription').text(product.ShortDescription); productContainer.find('.product-url').attr('href', product.Url); for(let j=0; j<2; j++) { if(product.Flags[j]) { productContainer.find('.product-flags').append('' + product.Flags[j].Text + ''); } } if (product.Images != null && product.Images[0] != null && product.Images[0].Id != -1) { productContainer.find('.product-item__image').removeClass('product-item__noImage').html(''); productContainer.find('.product-item__image').append(''); } if (product.StockLevel != null && product.StockLevel.QuantityControl == true && product.StockLevel.Value == 0) { noProductInStock = true; } else { noProductInStock = false; } if(product.Availability.Status == 3 || noProductInStock == true || (product.StockLevel != null && product.StockLevel.Control == true) && (product.StockLevel != null && product.StockLevel.Value == 0)) { productContainer.find('.price').text(__translations.NotifyAboutAvailability); } else if (__hidePrices == false && product.Price >= 0 && product.Availability.Status == 0 || product.Availability.Status == 1 || product.Availability.Status == 2) { if (product.PreviousPrice > product.Price) { productContainer.find('.product-item__description').append(''); productContainer.find('.red-price').text(product.Price.toFixed(2).replace('.', ',') + ' ' + __curr); productContainer.find('.product-item__description').append(''); productContainer.find('.old-price').text(product.PreviousPrice.toFixed(2).replace('.', ',') + ' ' + __curr); productContainer.find('.price').remove(); } else if (product.RegularPrice > product.Price && __isEnterprise) { productContainer.find('.product-item__description').append(''); productContainer.find('.red-price').text(product.Price.toFixed(2).replace('.', ',') + ' ' + __curr); productContainer.find('.product-item__description').append(''); productContainer.find('.old-price').text(product.RegularPrice.toFixed(2).replace('.', ',') + ' ' + __curr); productContainer.find('.price').remove(); } else { productContainer.find('.price').text(product.Price.toFixed(2).replace('.', ',') + ' ' + __curr); } } else if (__hidePrices == true) { productContainer.find('.price').addClass('.loginToSeePrice').text(__translations.Com_LogInToSeePrice); } else if (product.Price == null) { productContainer.find('.price').text(__translations.Com_AskForPrice); } }); }); } }); }, parseQuery: function(qstr) { var query = {}, a, i, b; if (qstr.length <= 1) return {}; a = qstr.substr(1).split('&'); for (i = 0; i < a.length; i++) { b = a[i].split('='); query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || ''); } return query; }, setPriceSlider: function() { if ($('.productsList__priceSlider-js').length > 0 && $('.productsList__priceSlider-js').not('.ui-slider')) { var minValue = $('.productsList__priceSlider__minPrice-js').val(); var maxValue = $('.productsList__priceSlider__maxPrice-js').val(); var minRange = $('.productsList__priceSlider__minPrice-js').attr('min'); var maxRange = $('.productsList__priceSlider__maxPrice-js').attr('max'); $('.productsList__priceSlider-js').slider({ range: true, min: parseInt(minRange , 10), max: parseInt(maxRange, 10), values: [minValue, maxValue], change: function(event) { setTimeout(function() {$('.getSearchFilters-js').click();}, 1000);}, slide: function (event, ui) { $('.productsList__priceSlider__minPrice-js').val(ui.values[0]); $('.productsList__priceSlider__maxPrice-js').val(ui.values[1]); $('.productsList__priceSlider__from-js').text(ui.values[0]); $('.productsList__priceSlider__to-js').text(ui.values[1]); } }); } }, changeListView: function(type) { var listType = type !== undefined ? type : localStorage.getItem('productListType') === 'grid' ? 'grid' : 'list'; var changeListViewBtn = $('.changeListView-js'); var icon = changeListViewBtn.find('use')[0]; var productsList = $('.product-list__grid-js'); var changeViewBtn = document.querySelector('.changeListView-js'); if (listType === 'grid') { changeViewBtn.dataset.type = 'list'; localStorage.setItem('productListType', 'grid'); $(icon).attr('xlink:href', 'css/img/icons-sprite.svg#th-list-' + __iconStyle); productsList.addClass('product-list__gridView-js').removeClass('product-list__listView-js'); } else if (listType === 'list') { changeViewBtn.dataset.type = 'grid'; localStorage.setItem('productListType', 'list'); $(icon).attr('xlink:href', 'css/img/icons-sprite.svg#th-large-' + __iconStyle); productsList.removeClass('product-list__gridView-js').addClass('product-list__listView-js'); } }, putSecondImage: function(e) { if($("#secondImageOnList").attr("value") == "yes") { setTimeout(function(){ if (window.mouseOver) { var imgEl = e.find("img"); if(imgEl.length == 1) { var url = e.find('a[aria-label="productUrl"]').attr("href"); $.get(url, {__collection:'product-details.Product.Images'}, function(a) { var imgs = a.collection; if(imgs.length > 1) { if(imgs[1].Id != 0){ e.find(".product-item__image").append(''); } else if (imgs[1].ExternalUrl){ e.find(".product-item__image").append(''); } e.addClass("hover"); } }); } }}, 250); } }, events: function() { $('body').on('click', '.product-list__filters .filter', function (e) { if (ajax_lock || $(this).find('*').prop('disabled') == true) { e.preventDefault(); e.stopPropagation(); return; } else { $('.filter, .productsList__priceSlider-js > *').addClass('disabled'); e.preventDefault(); e.stopPropagation(); if($(this).find('input').prop('checked') == true) { $(this).find('input').prop('checked', false); } else { $(this).find('input').prop('checked', true); } ajax_lock = true; $('.product-item').remove(); $.when(productListFunctions.getSearchFilters()).done(function() { productListFunctions.resetProductList(); setTimeout(function() { ajax_lock = false; $.when(productListFunctions.reloadFilters()).done(function() { $('.filter, .productsList__priceSlider-js > *').removeClass('disabled'); }); }, 2000); }); } }); $('body').on('click', '.product-list__filters .getSearchFilters-js', function (e) { if (ajax_lock) { e.preventDefault(); e.stopPropagation(); return; } else { $('.filter, .productsList__priceSlider-js > *').addClass('disabled'); e.preventDefault(); e.stopPropagation(); ajax_lock = true; $('.product-item').remove(); $.when(productListFunctions.getSearchFilters()).done(function() { setTimeout(function() { productListFunctions.resetProductList(); }, 2000); setTimeout(function() { ajax_lock = false; $.when(productListFunctions.reloadFilters()).done(function() { $('.filter, .productsList__priceSlider-js > *').removeClass('disabled'); }); }, 2000); }) } }); $(".display-details__sorting").off("click").on("click", function(e) { var dropdownDiv = $(e.currentTarget).children(".dropdown-menu"); if (dropdownDiv) dropdownDiv.stop().slideToggle(200); }); $(".product-list__filters-trigger").on("click", function() { var openFiltersBtn = $(".product-list__filters-trigger span:first-child"); $(".product-list__filters").stop().slideToggle(200); if (openFiltersBtn.text() === __translations.ShowFilters) { openFiltersBtn.text(__translations.HideFilters); } else { openFiltersBtn.text(__translations.ShowFilters); } }); $('.display-details__sorting .dropdown-menu__links li').on('click', function (e) { var sortItem = $(this); var qs = productListFunctions.parseQuery(location.search); if (qs.pageId) delete qs.pageId; $.get('', { __collection: 'products.SortingQueryGET' }, function (res) { qs[res.collection] = sortItem.data('value'); location.href = (location.pathname + '?' + $.param(qs)); }); }); $(".product-list__filters .filter-group-wrapper .filter-toggle").on('click', function(e) { var redundantSwitches = $(e.target.parentNode).children('.redundant'); var buttonToShowName = e.target.classList.contains('filter-more') ? '.filter-less' : '.filter-more'; $(e.target).toggle(); $(e.target.parentNode).children(buttonToShowName).toggle(); redundantSwitches.stop().slideToggle("fast"); }); $('.product-list').on('click', '#reset-filters', function() { productListFunctions.resetFilters(); }); $('.product-list').on('click', '.removeFilter-js', function(e) { productListFunctions.removeFilter(e); }); $('.product-list').on('click', '.changeListView-js', function(e) { productListFunctions.changeListView(e.currentTarget.dataset.type); }); $('body').on('mouseenter', '.product-item', function() { var e = $(this) window.mouseOver = true; productListFunctions.putSecondImage(e); }); $('body').on('mouseleave', '.product-item', function() { window.mouseOver = false; }); $(document).on('click', function (e) { if($(e.target).closest('.display-details__sorting').length === 0 && $(e.target).closest($('.display-details__sorting').children()).length === 0 && $(e.target).closest('.dropdown-menu').length === 0 && $(e.target).closest($('.dropdown-menu').children()).length === 0) { if($('.dropdown-menu').css('display') != 'none') { $('.dropdown-menu').slideToggle(200); } } }); } };

Modyfikacja css
Pozostaje drobna zmiana w pliku ze stylami. Otwórz css/layout0.css. Wyszukaj .filter input[disabled]+label{opacity:0.5;cursor:not-allowed}. Usuń ze znalezionego fragmentu ;cursor:not-allowed. To wszystkie kroki dla drugiego wariantu listy towarów szablonie Topaz.

Jak wstawić dodatkową Wtyczkę (Widget) w szablonie Topaz?

Dodatkowy widget np. Ceneo Zaufane Opinie, Facebook Messenger lub inne można samodzielnie zaimplementować w kodzie szablonu. Wystarczy kilka prostych kroków, dzięki którym będzie można wyświetlić swoim Klientom dodatkowy widget na każdej stronie w e-Sklepie. Wszystkie wtyczki posiadają indywidualny skrypt, który należy wkleić w odpowiednim miejscu w kodzie szablonu. Obsługa w szablonie Topaz: Krok 1. W panelu administracyjnym e-Sklepu należy przejść do sekcji Wygląd sklepu/Ustawienia/(opcja trzy kropki w górnym prawym rogu) Edytuj ustawienia zaawansowane/ (ponownie opcja trzy kropki w górnym prawym rogu) Edytuj HTML. Krok 2. Odnaleźć plik base_layout.html i przejść do jego edycji. Krok 3. Skopiować skrypt danego widgetu, a następnie wkleić go w odpowiedniej sekcji pod koniec pliku. Poniżej wklejonego skryptu mają zostać tylko linijki zawierające zamknięcie tagu html, zamknięcie tagu body oraz zamknięcie( {% endif -%} ) jednego warunku. Powyżej wklejonego kodu powinno być zamknięcie ( {% endif -%} ) warunku {% if config.External.SalesManago -%}. Krok 4. Zapisać i opublikować zmiany.
Uwaga
Powyższa instrukcja dotyczy szablonu Topaz. Należy także pamiętać, iż różnego rodzaju wtyczki mogą wymagać odrębnej implementacji w różnych plikach szablonu. Zawsze należy zapoznać się z dokumentacją oraz wymaganiami dostawcy wtyczki. Jeżeli powyższa instrukcja nie jest wystarczająca dla wyświetlenia dodatkowej wtyczki w szablonie należy skontaktować się z Partnerem Comarch, w celu uzyskania dodatkowej pomocy.

Wskazówka
Chcesz dodać do e-Sklepu wtyczkę Facebook Messenger Chat? Skorzystaj z odrębnie przygotowanej instrukcji dostępnej w artykule Obsługa wtyczki Czatu Facebooka w szablonach.

Obsługa walut "słownych" w szablonach

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsłużyć w nim waluty "słowne". W każdym szablonie w wielu miejscach znajdują się wywołania property Currency. To property odpowiada za symbol walut (np. PLN). Jeśli chcemy aby w szablonie wyświetlał się słowny odpowiednik symbolu walut (np. zł), należy w danym miejscu w kodzie zmienić property Currency na CurrencyExt. Tego nowego property można użyć w poniższych obszarach: - customer - customerprofile/customer-profile (zamówienia, reklamacje/zwroty, oferty i wszystkie maile z tym związane, nowe rabaty) - cart/order - currencyExt (jest to słowny odpowiednik {{currency}})
Uwaga
Nazwy obiektów różnią się w zależności od wybranego szablonu.

Obsługa Google Translate w szablonach

W niniejszym artykule dowiesz się jak integrować swój szablon z usługą automatycznego tłumaczenia - Google Translate.

Spis treści

Szafir

Topaz

Agat

Bursztyn

Opal

Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Szafir

Wskazówka
Folder z dokumentacją szablonu otworzysz w panelu e-Sklep w menu: Wygląd sklepu/ Ustawienia, następnie (w prawym górnym rogu) wybierz ikonkę "Więcej" i wejdź w Edytuj ustawienia zaawansowane. Ponownie wybierz ikonkę "Więcej" i wejdź w Edytuj HTML.
Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką common/header/header-top-bar.html. Za pomocą narzędzia wyszukiwania znajdź trzecie wystąpienie frazy languagesSize. Bezpośrednio pod znalezioną linią wklej następujący kod:

<div id="google_translate_element" style="display: inline-block;"></div>

Przejdź z powrotem do głównego folderu szablonu i otwórz plik _layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod: Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką elements/header/header-1.html. Za pomocą narzędzia wyszukiwania znajdź frazę headerSection__shopData. Bezpośrednio pod znalezioną linią wklej następujący kod:

<div id="google_translate_element" style="display: inline-block;"></div>

Przejdź z powrotem do głównego folderu szablonu i otwórz plik base_layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod:

<div id="google_translate_element" style="display: inline-block;"></div> <code class="lang:ruby decode:true"><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'bg,cs,de,en,hr,hu,it,lt,ro,ru,sk,sl,uk', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-13192131-1'}, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="true" defer="true"></script> </code>

Wersja druga (header-2)
Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką elements/header/header-2.html. Za pomocą narzędzia wyszukiwania znajdź frazę headerSection__shopData. Bezpośrednio pod znalezioną linią wklej następujący kod:

<div id="google_translate_element" style="display: inline-block;"></div>

Przejdź z powrotem do głównego folderu szablonu i otwórz plik base_layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod:

<code class="lang:ruby decode:true"><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'bg,cs,de,en,hr,hu,it,lt,ro,ru,sk,sl,uk', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-13192131-1'}, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="true" defer="true"></script> </code>

Wersja trzecia (header-3)
Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką elements/header/header-3.html. Za pomocą narzędzia wyszukiwania znajdź frazę headerSection__bannerBg. Cztery linie nad znalezioną linią (trzy linie nad znalezioną frazą składają się z tagów) wklej następujący kod:

<div id="google_translate_element" style="display: inline-block;"></div>

Przejdź z powrotem do głównego folderu szablonu i otwórz plik base_layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod:

<code class="lang:ruby decode:true"><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'bg,cs,de,en,hr,hu,it,lt,ro,ru,sk,sl,uk', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-13192131-1'}, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="true" defer="true"></script> </code>

Agat
Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką partials/common/header.html. Za pomocą narzędzia wyszukiwania znajdź frazę lang-and-currency. Bezpośrednio pod znalezioną linią wklej następujący kod:

<div id="google_translate_element" style="display: inline-flex;"></div>

Przejdź z powrotem do głównego folderu szablonu i otwórz plik _layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod:

<code class="lang:ruby decode:true"><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'bg,cs,de,en,hr,hu,it,lt,ro,ru,sk,sl,uk', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-13192131-1'}, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="true" defer="true"></script> </code>

Bursztyn
Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką page/header.html. Za pomocą narzędzia wyszukiwania znajdź frazę secondary-nav. Dwie linie pod znalezioną wklej następujący kod (pod tagiem <ul>):

<div id="google_translate_element" style="display: inline-block; margin-right: 15px;"></div>

Przejdź z powrotem do głównego folderu szablonu i otwórz plik _layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod:

<code class="lang:ruby decode:true"><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'bg,cs,de,en,hr,hu,it,lt,ro,ru,sk,sl,uk', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-13192131-1'}, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="true" defer="true"></script> </code>

Opal
Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką page/header.html. Za pomocą narzędzia wyszukiwania znajdź frazę right-box. Dwie linie pod znalezioną wklej następujący kod (pod tagiem):

<div id="google_translate_element" style="display: inline-block; vertical-align: super; margin-right: 10px;"></div>

Przejdź z powrotem do głównego folderu szablonu i otwórz plik _layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod:

<code class="lang:ruby decode:true"><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'bg,cs,de,en,hr,hu,it,lt,ro,ru,sk,sl,uk', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-13192131-1'}, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="true" defer="true"></script> </code>

Dodanie obsługi filtrów na stronie głównej

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać w nim obsługę filtrów na stronie głównej. Poniższy przykład jest jednym z wielu możliwych scenariuszy, Należy modyfikować kod we we własnym zakresie i dostosować go do własnych potrzeb.
Uwaga
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Przykład modyfikacji szablonu Szafir

Wskazówka
Instrukcja dotyczy modyfikacji szablonu Szafir. W przypadku innych szablonów Comarch lub innego własnego, modyfikowanego - nie należy tej instrukcji traktować w stosunku 1:1, a jedynie jako źródło analogicznego postępowania.
Krok 1. W panelu administracyjnym e-Sklepu przejdź do sekcji Wygląd sklepu/Ustawienia/(prawy górny róg) Edytuj ustawienia zaawansowane/(prawy górny róg) Edytuj HTML. Krok 2. Przejdź do pliku home.html i na samym początku zastąp linijkę:
poniższym kodem:
{% assign categories = homepage-filters.Content | Split: '||||||' -%} {% assign categoryIndex = 0 -%}
{% for category in categories -%} {% assign categoryIndex = categoryIndex | Plus:1 -%} {% assign categoryArr = category | Split: '|||||' -%} {% assign categoryInfoArr = categoryArr[0] | Split: '|' -%} {% assign categoryLabel = categoryInfoArr[0] -%}
{{categoryLabel}}
{% endfor -%}
{% assign categoryIndex = 0 -%} {% for category in categories -%} {% assign categoryIndex = categoryIndex | Plus:1 -%} {% assign categoryArr = category | Split: '|||||' -%} {% assign categoryInfoArr = categoryArr[0] | Split: '|' -%} {% assign categoryId = categoryInfoArr[1] -%}

{% assign filters = categoryArr[1] | Split: '||||' -%} {% for filter in filters -%} {% assign filterArr = filter | Split: '|||' -%} {% assign filterInfoArr = filterArr[0] | Split: '|' -%} {% assign filterLabel = filterInfoArr[0] -%} {% assign filterName = filterInfoArr[1] | StripNewlines -%}
{{filterLabel}}
{% endfor -%}
{{translations.SearchAdvanced}}

{% endfor -%}
Krok 3. Z listy dostępnych plików przejdź do folderu js, a następnie w dowolnym pliku JS (np. js/init.js) dodaj kod:
function toggleHomepageFilter(e) { var index = $(e.currentTarget).data('index'); $('.filter-bar-lq').removeClass('active-filter-bar-lq'); $(e.currentTarget).addClass('active-filter-bar-lq'); $('.homepage-filters-container-lq').addClass('hidden-lq'); $('.homepage-filters-container-lq[data-index='+index+']').removeClass('hidden-lq'); }; $('body').on('click', '.filter-bar-lq:not(.active-filter-bar-lq)', function (e) { toggleHomepageFilter(e); }); function getHomepageFilterValues(e) { var currentFilter = $(e.currentTarget); var currentFilterName = currentFilter.attr('name'); var filtersContainer = $(e.currentTarget).parents('.homepage-filters-container-lq'); var id = filtersContainer.find('.post-homepage-filters-lq').data('id'); var data = []; var selects = filtersContainer.find('select'); selects.each(function () { if($(this).val() != '' && $(this).attr('name') != currentFilterName){ var name = $(this).attr('name'); var val = $(this).val(); data.push({name: name, value: val}); } }); data.push({name: "__action", value: 'Get/SearchFilters'}); var param = $.param(data, true); $.get(',2,' + id, param, function (result) { $.get(result.action.Redirect302, {__collection: 'products.FilteringOptions.Filters'}, function (res) { var filtersSortingOrder = $('.homepage-lq').data('filters-sorting-order').split('|'); var notSortedFilters = res.collection; var sortedFilters = []; for(var i=0; i<notSortedFilters.length; i++){ sortedFilters.push({Field: notSortedFilters[i].Field, Values: []}); for(var j=0; j<filtersSortingOrder.length; j++){ var sortingFilterName = filtersSortingOrder[j].trim(); for(var k=0; k<notSortedFilters[i].Values.length; k++){ if(sortingFilterName == notSortedFilters[i].Values[k].Text){ sortedFilters[i].Values.push(notSortedFilters[i].Values[k]); } } } } for(var i=0; i<sortedFilters.length; i++){ if(sortedFilters[i].Field == currentFilterName){ var values = sortedFilters[i].Values; var selectedOptionValue = currentFilter.val(); currentFilter.find('option:not([value=""])').remove(); for(var j=0; j<values.length; j++){ if(values[j].Count > 0){ var option = ''+values[j].Text+''; currentFilter.append(option); } } var newOptions = currentFilter.find('option'); newOptions.each(function(){ if($(this).val() == selectedOptionValue){ $(this).prop('selected', true); } }) } } }); }); }; $('body').on('mouseenter', '.get-homepage-filter-values-lq', function (e) { getHomepageFilterValues(e); }); function postHomepageFilters(e) { var id = $(e.currentTarget).data('id'); var data = []; var selects = $(e.currentTarget).parents('.homepage-filters-container-lq').find('select'); selects.each(function () { if($(this).val() != ''){ var name = $(this).attr('name'); var val = $(this).val(); data.push({name: name, value: val}); } }); data.push({name: "__action", value: 'Get/SearchFilters'}); var param = $.param(data, true); $.get(',2,' + id, param, function (result) { app.replace(result.action.Redirect302); }); }; $('body').on('click', '.post-homepage-filters-lq', function (e) { postHomepageFilters(e); });
Krok 4. Przejdź do folderu scss, a następnie do podfolderu globals, gdzie w pliku _globals-m.scss dodaj kod:
.filter-bars-container-ui{ display: flex; } .filter-bar-ui { width: 50%; border: none; text-align: center; padding: 10px; border-bottom: 1px solid $lightBorderColor; background: $menuBackgroundColor; display: flex; align-items: center; justify-content: center; } .active-filter-bar-lq, .filter-bar-ui:hover { background: $breadcrumbsAndSomeLists; border-bottom: 1px solid $breadcrumbsAndSomeLists; color: #fff; }
Krok 5. Będąc w fodlerze scss, przejdź do podfolderu partials, następnie dodaj poniższy kod w pliku _home.scss:
.homepage-filters-container-ui{ position: absolute; top: -2px; left: 0; z-index: 11; width: 100%; padding: 20px 0 5px; background: rgba(#5B6569, 0.5); border-top: 2px solid $breadcrumbsAndSomeLists; text-align: center; } .homepage-filters-ui{ text-align: center; } .homepage-filter-ui{ width: 28%; display: inline-block; padding-left: 20px; margin-bottom: 20px; button{ width: 100%; height: 66px; margin-right: -15px; } label:not(.checkbox-ui):not(.radio-ui){ color: #fff; margin-left: 6px; } } @media only screen and (max-width: 1279px) { .homepage-filters-container-ui{ position: static; width: 100%; background: $breadcrumbsAndSomeLists; padding: 5px 0; a{ display: block; color: #fff; padding: 20px; text-align: center; } } .homepage-filters-ui{ text-align: left; } .homepage-filter-ui{ width: calc(50% - 12px); display: inline-block; float: none; margin-bottom: 0; &:nth-child(1), &:nth-child(6){ width: 100%; padding: 0 20px; } button { height: 56px; margin-top: 20px; } label:not(.checkbox-ui):not(.radio-ui){ margin-left: 0; } } }

Uwaga
Pamiętaj, aby odpowiednio skompilować oraz zminifikować modyfikowane pliki. Więcej na ten temat przeczytasz tutaj.

Wskazówka
Pamiętaj także, aby wszelkie zmiany zapisać, a następnie opublikować.

Panel Administracyjny
Krok 1. W Panelu Administracyjnym przejdź do zakładki Wygląd sklepu/Ustawienia/(prawy górny róg) Edytuj ustawienia zaawansowane/Zakładka Obiekty. Krok 2. Dodaj nowy obiekt klikając przycisk Dodaj. Wybierz typ Tekst i nazwij go homepage-filters. Gdy się pojawi na liście obiektów kliknij na niego, aby edytować jego ustawienia. Krok 3. W polu treść sprecyzuj, jakiej kategorii towarów ma dotyczyć filtrowanie (możesz utworzyć kilka osobnych zakładek), oraz jakich atrybutów filtrujących będzie można użyć. Poniżej przykładowa treść:
Nazwa Kategorii1|ID kategorii1 ||||| Nazwa Filtra1|FILTR1 |||| Nazwa Filtra2|FILTR2 |||| Nazwa Filtra3|FILTR3 |||| Nazwa Filtra4|FILTR4 |||| Nazwa Filtra5|FILTR5 |||||| Nazwa Kategorii2|ID kategorii2 ||||| Nazwa Filtra6|FILTR6 |||| Nazwa Filtra7|FILTR7 |||| Nazwa Filtra8|FILTR8 |||| Nazwa Filtra9|FILTR9

Wskazówka

Nazwa Kategorii1,2,3,... - Nazwa Kategorii w e-Sklepie, na podstawie której zostanie utworzony filtr na stronie głównej.

ID Kategorii1,2,3,... - jest to ID wybranej kategorii w e-Sklepie, na podstawie której zostanie utworzony filtr.

Nazwa Filtra1,2,3,... - w tym miejscu podaj nazwę filtra, jaki chcesz aby został wyświetlony na stronie głównej.

FILTR1,2,3,... - wartość Field w obiekcie, w którym znajdują się filtry dla danej kategorii.

Wskazówka
Zwróć uwagę na ilość "|" belek między nazwami kategorii oraz filtrami. Jest ona istotna, aby prawidłowo utworzyć filtry.
Krok 4. Udostępnij obiekt na stronie głównej w szablonie. Gdy utworzysz treść dla obiektu przejdź do zakładki Strony i zaznacz parametr Strona główna. Krok 5. Do listy obiektów (Wygląd sklepu/Ustawienia/(prawy górny róg)Edytuj ustawienia zaawansowane/Zakładka Obiekty) dodaj nowy obiekt o typie tekst oraz nazwie filters-sorting-order. Krok 6. Podobnie jak w kroku 3 uzupełnij treść dla nowo dodanego obiektu. W treści należy wprowadzić wszystkie wartości, dla każdego filtra, którego chcemy wyświetlać Klientom w e-Sklepie. Kolejność, w jakiej wprowadzisz wartości będzie taka sama na stronie głównej e-Sklepu. Poniżej przykładowa treść:
Wartość 1| Wartość 2| Wartość 3|

Wskazówka
Ostatnia wartość powinna również zawierać belkę "|".
Krok 7. Udostępnij obiekt na stronie głównej w szablonie. Gdy utworzysz treść dla obiektu przejdź do zakładki Strony i zaznacz parametr Strona główna (patrz pkt. 4).
Wskazówka
Pamiętaj, aby wszelkie zmiany zapisać, a następnie opublikować.

Obsługa załączników na formularzu kontaktowym

Z tego artykułu dowiesz się jak dodać w szablonie obsługę załączników na formularzu kontaktowym.
Uwaga
Instrukcja przeznaczona dla sklepów od wersji 2022.0 ze starszymi szablonami.

Wskazówka
Artykuł przeprowadzi Cię przez proces modyfikacji plików js. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Szafir
W pliku common/navigation-bars/navigation-contact.html znajdź frazę contact-form-required-fields-ui i linijkę niżej wklej poniższy kod:
{% if config.Contact.AttachmentsEnabled -%}

{{ translations.AddAttachement }} {% capture maxSize -%}{{config.Contact.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Contact.AttachmentsMaxCount) -%}

{% endfor -%}
{% endif -%} Następnie w pliku js/init-ui2.js znajdź frazę function sendContactForm(e) i usuń całą tą funkcję wraz z jej wywołaniem które jest zaraz pod nią. Przejdź do pliku js/init.js i znajdź frazę List of events. Linijkę wyżej wklej poniższy kod:
sendContactForm: function(e) { if(app.validationBeforePost(e) != 'error'){ $('.during-ajax-modal-lq').removeClass('hidden-lq'); var form = $(e.currentTarget).parents('.form-lq'); var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); var fileList = window.attachementsInComplaint; if(fileList != undefined){ var filesSize = fileList.length; } var fd = new FormData(); fd.append('__csrf', __CSRF); for(var i=0; i<dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize > 0) { window.AttachementsErrors = 0; function addAttachementError(file, message) { if(window.AttachementsNotAdded == undefined){ window.AttachementsNotAdded = []; } var attachement = '

'+file.name+': '+message+'
'; window.AttachementsNotAdded.push(attachement); window.AttachementsErrors += 1; }; var input = form.find('[name=file]').eq(0); var extensions = input.attr('accept').split(', '); var fileSize = input.data('file-size'); for (var i=0; i<filesSize; i++) { var file = fileList.pop(); if(file.size < fileSize){ var extensionArr = file.name.split('.'); var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase(); var wrongExtension = true; for(var j=0; j<extensions.length; j++){ if(extension == extensions[j]){ fd.append('file'+i, file); var wrongExtension = false; } } if(wrongExtension){ var message = input.data('invalid-file'); addAttachementError(file, message); } } else { var message = input.data('size-exceeded'); addAttachementError(file, message); } } if(window.AttachementsNotAdded){ var popup = '
'+ '
'+ '
'+ __translations.AttachementsNotAdded+ ''+ '
'+ window.AttachementsNotAdded.join('')+ '
'+ '
'; $('body').append(popup); $('body').addClass('modal-opened-ui'); window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined; } } $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { $('.during-ajax-modal-lq').addClass('hidden-lq'); $('.add-attachement-in-complaint-lq').val(''); if (data.action.Result) { var message = form.data('success'); app.temporaryMessage(form, message); $.each(inputs, function (index, value) { if ($(value).attr('name') !== 'contactId' && $(value).attr('name') !== '__action') { $(value).val(''); } }); form.find('.message-lq').remove(); } else { var message = ' ' + result.action.Message + ' '; if(result.action.Code != 100){ app.message(form, message); } } } }); $(e.currentTarget).removeClass('error-lq'); } else { $(e.currentTarget).addClass('error-lq'); } }, Pozostając w tym samym pliku (js/init.js) po wklejeniu powyższego kodu zejdź trochę niżej do funkcji events i analogicznie do pozostałych wywołań dodaj poniższy kod:
$('body').on('click', '.send-contact-form-lq', function(e) { app.sendContactForm(e); });

Wskazówka
Aby załączniki pokazały się w szablonie należy aktywować parametr "Załączniku do formularza kontaktowego" z poziomu Panelu Administracyjnego/Ustawienia/Ustawienia sklepu/Ogólne.

Obsługa nowych zestawów

Z tego artykułu dowiesz się jak dodać w szablonie obsługę nowych zestawów.
Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Szafir
W pliku product/product-presentation-data.html znajdź frazę {% if product.Sets != null and product.Sets != empty -%}. Powinna występować 3 razy. W każdym z nich zmień Sets na SetsExt. Następnie będąc przy ostatnim wystąpieniu tej frazy (która jest warunkiem) podmień calą zawartość tego warunku poniższym kodem:

{{ translations.BuyInSet }}
{% for set in product.SetsExt -%} {% assign setPrice = '' -%} {% assign setPreviousPrice = '' -%}

{{ set.SetName }}

{% for setElement in set.Elements -%} {% for setProduct in setElement.Products -%} {% assign index = forloop.index -%} {% if index == 1 -%} {% if setProduct.Value -%} {% if setPrice == '' -%} {% assign setPrice = setProduct.Value -%} {% else -%} {% assign setPrice = setPrice | Plus: setProduct.Value -%} {% endif -%} {% endif -%} {% if setProduct.PreviousValue -%} {% if setPreviousPrice == '' -%} {% assign setPreviousPrice = setProduct.PreviousValue -%} {% else -%} {% assign setPreviousPrice = setPreviousPrice | Plus: setProduct.PreviousValue -%} {% endif -%} {% endif -%} {% endif -%}

{{ setProduct | Img:'medium' }}
{% if setProduct.FreeProduct -%} {{ translations.Free }}! {% endif %} {% if setProduct.Quantity != 1 -%} {% assign quantity = setProduct.Quantity -%} {% unless config.Products.DecimalUnits -%} {% assign quantity = setProduct.Quantity | Normalize -%} {% endunless -%} {{ quantity }}{{ setProduct.Unit }} {% endif -%}

{{ setProduct.NameNoHtml }}
{% if setProduct.AttributesPolyvalent -%} {% for attribute in setProduct.AttributesPolyvalent -%}
{{ attribute.Name }}
{% endfor -%} {% endif -%} {% if setProduct.AttributesEditable -%} {% for attribute in setProduct.AttributesEditable -%}
{{ attribute.Name }} * {% case attribute.Format -%} {% when 1 -%} {% when 2 -%} {% when 3 -%} {% when 4 -%} {% endcase -%}
{{ translations.FillAttributeValue }}

{% endfor -%} {% endif -%} {% if setProduct.Supplies.Key != null -%}
{% include 'product/set-product-supplies.html' with setProduct -%}
{% endif -%} {% assign setElementProductsSize = setElement.Products | Size -%} {% if setElementProductsSize > 1 -%} {% endif -%}
{% endfor -%} {% endfor -%}
{% for setElement in set.Elements -%}

{% for setProduct in setElement.Products -%}

{{ setProduct | Img:'medium' }}
{% if setProduct.FreeProduct -%} {{ translations.Free }}! {% endif %} {% if setProduct.Quantity != 1 -%} {% assign quantity = setProduct.Quantity -%} {% unless config.Products.DecimalUnits -%} {% assign quantity = setProduct.Quantity | Normalize -%} {% endunless -%} {{ quantity }}{{ setProduct.Unit }} {% endif -%}

{{ setProduct.NameNoHtml }}

{% endfor -%}

{% endfor -%}
{% unless customer.HidePrices -%}

{{ setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %}{% endif -%}
{% if customer.Cart.SubtotalPrices -%}
{{ translations.Netto | Downcase }}
{% else -%}
{{ translations.Brutto | Downcase }}
{% endif -%}
{{ setPrice | Minus: setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}
{% if customer.Cart.SubtotalPrices -%}
{{ translations.Netto | Downcase }}
{% else -%}
{{ translations.Brutto | Downcase }}
{% endif -%} {% if customer.Cart.SubtotalPrices -%}
{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}

{{ translations.Netto | Downcase }}
{% else -%}
{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}

{{ translations.Brutto | Downcase }}
{% endif -%}
{% if setPrice > 0 -%} {% endif -%}
{% endunless -%}

{% endfor -%}

Następnie w pliku js/init.js znajdź frazę:
if(form.hasClass('add-set-to-cart-lq')){
Jest to jeden z warunków w funkcji post. Podmień calą jego zawartość poniższym kodem:
var set = {setId:Number($(e.currentTarget).data('set-id')), quantity:1, products:[]}; var setProducts = form.find('.set-product-lq'); var setProductsForDataLayer = []; var setProductsForFBPixel = []; var totalValue = 0; setProducts.each(function () { var setProduct = { setElementId: Number($(this).data('set-element-id')), setProductId: Number($(this).data('set-product-id')) }; if($(this).find('[name=attributePolyvalent]').length > 0){ var attributesPolyvalent = []; $(this).find('[name=attributePolyvalent]').each(function(){ var attribute = { id: Number($(this).data('id')), valueId: Number($(this).val()) }; attributesPolyvalent.push(attribute); }); setProduct.attributesPolyvalent = attributesPolyvalent; } if($(this).find('[name=attributeEditable]').length > 0){ var attributesEditable = []; $(this).find('[name=attributeEditable]').each(function(){ var attribute = { id: Number($(this).data('id')), value: $(this).val() }; attributesEditable.push(attribute); }); setProduct.attributesEditable = attributesEditable; } set.products.push(setProduct); var setProductDL = { id: $(this).data('id').toString(), name: $(this).data('name'), price: $(this).data('price-full'), quantity: $(this).data('quantity') }; var setProductFBP = { id: $(this).data('id').toString(), content_name: $(this).data('name'), value: Number($(this).data('price').toString().replace(',','.')), quantity: $(this).data('quantity') }; totalValue = totalValue + (Number($(this).data('price').toString().replace(',','.')) * Number($(this).data('quantity').toString().replace(',','.'))); setProductsForDataLayer.push(setProductDL); setProductsForFBPixel.push(setProductFBP); }); var data = [ {name: "__csrf", value: __CSRF}, {name: "__action", value: 'Cart/SetExtAdd'}, {name: "set", value: JSON.stringify(set)} ]; if(window.app.getCookie('lastCartId') == undefined || window.app.getCookie('lastCartId') == -1){ data.push({name: "__collection", value: 'customer.Cart.Id'}); } var dataLayerProds = { "products": setProductsForDataLayer }; if(typeof fbq !== 'undefined') { fbq('track', 'AddToCart', { value: totalValue, currency: __curr, content_type: 'product', contents: setProductsForFBPixel } ); }
Teraz w tym samym pliku (js/init.js) znajdź frazę List of events i linijkę wyżej wklej poniższy kod:
openSetElementProductsPopup: function(setElementId) { $('[data-set-element-products-popup='+setElementId+']').removeClass('hidden-lq'); app.loadImages(); $('body').addClass('modal-opened-ui'); }, changeSetElementProduct: function(e) { var setElementId = $(e.currentTarget).parents('[data-set-element-products-popup]').data('set-element-products-popup'); var setProductId = $(e.currentTarget).data('set-product-id'); var form = $(e.currentTarget).parents('.form-lq'); if($(window).width() > 1279) { form.find('.set-slider-lq').slick('slickUnfilter'); } form.find('[data-set-element-id='+setElementId+']').addClass('set-product-hidden-lq'); form.find('[data-set-element-id='+setElementId+'][data-set-product-id='+setProductId+']').removeClass('set-product-hidden-lq'); if($(window).width() > 1279) { form.find('.set-slider-lq').slick('slickFilter',':not(:has(.set-product-hidden-lq))'); } app.loadImages(); var oldPrice = 0; var newPrice = 0; form.find('.set-product-lq:not(.set-product-hidden-lq)').each(function(){ oldPrice = Number((Number(oldPrice) + Number($(this).data('set-product-previous-value').replace(',','.'))).toFixed(__decimalPlacesPrice)); newPrice = Number((Number(newPrice) + Number($(this).data('set-product-value').replace(',','.'))).toFixed(__decimalPlacesPrice)); }); var savedMoney = Number((newPrice - oldPrice).toFixed(__decimalPlacesPrice)); form.find('.old-price-lq .value-lq').html(oldPrice.toPrice()); form.find('.saved-money-lq .value-lq').html(savedMoney.toPrice()); form.find('.brutto-lq .value-lq').html(newPrice.toPrice()); form.find('.netto-lq .value-lq').html(newPrice.toPrice()); $('body').removeClass('modal-opened-ui'); },
Dalej w tym samym pliku (js/init.js) kilka linijek niżej (w funkcji events) dodaj analogicznie do pozostałych wywołań poniższy kod:
$('body').on('click', '.open-set-element-products-popup-lq', function(e) { app.openSetElementProductsPopup($(e.currentTarget).parents('[data-set-element-id]').data('set-element-id')); }); $('body').on('click', '.change-set-element-product-lq', function(e) { app.changeSetElementProduct(e); });
Przejdź do pliku js/init-ui2.js i znajdź frazę:
$('body').on('click', '.hide-lq', function(e) {
Na końcu wyżej wymienionej funkcji oraz następnej, która jest pod nią:
($('body').on('click', '.hide-container-lq', function(e) {)
wklej poniższy kod:
if($(e.currentTarget).parents('.sets-lq').length > 0){ $('body').removeClass('modal-opened-ui'); }
Pozostając w tym samym pliku (js/init-ui2.js) znajdź linijkę:
UIFeatures.initSlider('.set-slider-lq', {infinite: false, dots: false, slidesToShow: 4, responsive: [{breakpoint: 1279, settings: "unslick"}]});
i zamień ją na poniższy kod:
if(!$('.set-slider-lq').hasClass('slick-initialized')){ UIFeatures.initSlider('.set-slider-lq', {infinite: false, dots: false, slidesToShow: 4, responsive: [{breakpoint: 1279, settings: "unslick"}]}); if($(window).width() > 1279) { $('.set-slider-lq').slick('slickFilter',':not(:has(.set-product-hidden-lq))'); } }
Teraz w pliku scss/globals/_globals1.scss na samym końcu dodaj poniższy kod:
.change-set-element-product-ui{ display: inline-block; cursor: pointer; figure{ padding: 0; width: 200px; height: 200px; } }
Następnie w pliku scss/globals/_globals-m.scss znajdź klase .set-product-ui{ i podmień jej zawartość poniższym kodem:
&:before{ font-family: 'themify'; content: "\e61a"; color: $labelsColor; font-size: 20px; margin: 25px; display: block; } &:first-child:before, &.set-product-hidden-lq:before{ content: none; } a{ width: 70px; display: inline-block; vertical-align: middle; } .name-ui{ display: inline-block; width: calc(100% - 90px); margin: 0 0 0 15px; vertical-align: middle; text-align: left; line-height: 1.2; font-size: 14px; }
Pozostając w tym samym pliku (scss/globals/_globals-m.scss) zaraz pod pierwszą linijką wklej poniższy kod:
.set-product-hidden-lq{ display: none; }

Umieszczenie przycisku Leasing Grenke na szczegółach towaru

Wskazówka

Umieszczenie przycisku Leasing Grenke na szczegółach towaru
W tym artykule dowiesz się, jak w łatwy sposób dodać przycisk Leasing Grenke na szczegółach towaru w e-Sklepie.
Wskazówka
W przykładach użyta jest grafika w5.jpg. Jeśli preferujesz inną, to wystarczy w poniższym przykładzie zmienić ją na jedną z dostępnych tutaj.

1. Szafir
Wchodzimy w zakładkę Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML / product/ product-presentation-data.html wyszukaj frazę w kodzie(CTRL+F) {% if canBuy -%}, gdzie znajduje się przycisk dodawania do koszyka. Bezpośrednio pod tą linijką wklej kod: {% if currencyExt.Code == 'PLN' and activeProduct.Price > 0 -%}{% unless config.ENTERPRISE == false and customer.SubtotalPrices == false -%} {% endunless -%}{% endif -%}
2. Agat
Wchodzimy w zakładkę Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML / partials/ product/ product-popup.html wyszukaj frazę w kodzie(CTRL+F) Pro_addToCart. To etykieta przycisku dodawania do koszyka w szablonie Agat. Linijkę niżej znajduje się domknięcie przycisku czyli (/span). Wklej pod tym zamknięciem kod: {% if currencyExt.Code == 'PLN' and product-details.Product.Price > 0 -%}{% unless config.ENTERPRISE == false and customer.SubtotalPrices == false -%} {% endunless -%}{% endif -%}
3. Bursztyn lub Opal
Wchodzimy w zakładkę Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML plik productdetails.html wyszukaj frazę w kodzie(CTRL+F) Com_AskForPrice. To etykieta przycisku zapytania o cenę. Linijkę niżej znajduje się domknięcie przycisku: (/div). Wklej pod tym zamknięciem kod: {% if currencyExt.Code == 'PLN' and productdetails.Product.Price > 0 -%}{% unless config.ENTERPRISE == false and customer.SubtotalPrices == false -%} {% endunless -%}{% endif -%}
4. Topaz
Wchodzimy w zakładkę Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML / elements/ product/ product-details-1.html (lub elements/ product/ product-details-2.html - w zależności od Twojej wersji szablonu) wyszukaj w kodzie(CTRL+F) {% include 'partials/common/after-adding-to-cart-popup.html' %}. Bezpośrednio nad nią wklej kod: {% if currencyExt.Code == 'PLN' and product-details.Product.Price > 0 -%}{% unless config.ENTERPRISE == false and customer.SubtotalPrices == false -%} {% endunless -%}{% endif -%}

Umieszczenie przycisków iLease - wygodne finansowanie dla firm oraz iRaty - swobodne raty online na szczegółach towaru

Wskazówka

Umieszczenie przycisków iLease - wygodne finansowanie dla firm oraz iRaty - swobodne raty online na szczegółach towaru
W tym artykule dowiesz się, jak w łatwy sposób dodać przyciski iLeasing oraz iRaty na szczegółach towaru w e-Sklepie.
Wskazówka
Poradnik dotyczy standardowych, niemodyfikowanych szablonów w wersji 2019.3 lub nowszej.

Wskazówka
W przykładach użyta jest grafika 09.png. Jeśli preferujesz inną, to wystarczy w poniższych przykładach zamienić cyfrę 9 na wybraną z przedziału 1-8. W panelu partnera płatności ratalnych (tu możesz się zalogować), w sekcji Integracje możesz zobaczyć wszystkie opcje i wybrać tą, która odpowiada Ci najbardziej.

1. Szafir
W pliku product/product-presentation-data.html wyszukaj frazę {% if canBuy -%}, gdzie znajduje się przycisk dodawania do koszyka. Bezpośrednio pod tą linijką wklej kod: {% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: product.VAT | DividedBy: 100 -%} {% assign totalPrice = product.Price | Times: tempVat -%} {% assign subtotalPrice = product.Price -%} {% else -%} {% assign totalPrice = product.Price -%} {% assign tempVat = 100 | Plus: product.VAT | DividedBy: 100 -%} {% assign subtotalPrice = product.Price | DividedBy: tempVat -%} {% endif -%}

Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

2. Agat
W pliku partials/product/product-popup.html wyszukaj frazę Pro_addToCart. To etykieta przycisku dodawania do koszyka w szablonie Agat. Linijkę niżej znajduje się domknięcie przycisku czyli (/span). Wklej pod tym zamknięciem fragment kodu z przyciskami (pierwszy przycisk to iRaty, drugi to iLeasing): Sklep w wersji Light lub Standard: {% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: product.VAT | DividedBy: 100 -%} {% assign totalPrice = product.Price | Times: tempVat -%} {% assign subtotalPrice = product.Price -%} {% else -%} {% assign totalPrice = product.Price -%} {% assign tempVat = 100 | Plus: product.VAT | DividedBy: 100 -%} {% assign subtotalPrice = product.Price | DividedBy: tempVat -%} {% endif -%}
Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje. Nie zapomnij o warunku, który jest na początku kodu.
Sklep w wersji Enterprise lub B2B:
Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

3. Bursztyn lub Opal
W pliku productdetails.html wyszukaj frazę Com_AskForPrice. To etykieta przycisku zapytania o cenę. Linijkę niżej znajduje się domknięcie przycisku: (/div). Wklej pod tym zamknięciem fragment kodu z przyciskami (pierwszy przycisk to iRaty, drugi to iLeasing): Sklep w wersji Light lub Standard: {% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign totalPrice = _pd.Price | Times: tempVat -%} {% assign subtotalPrice = _pd.Price -%} {% else -%} {% assign totalPrice = _pd.Price -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%} {% endif -%}
Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje. Nie zapomnij o warunku, który jest na początku kodu.
Sklep w wersji Enterprise lub B2B:
Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty).Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

4. Topaz

Wskazówka
W celu sprawdzenia jaka wersja wyglądu elementu ze szczegółami towaru jest przez nas posiadana, należy przejść do katalogu elements a następnie product. Nazwa pliku znajdujacego się w katalogu odpowiada wersji. Proszę wykonać instrukcje znajdujące się poniżej w zależności od wersji.

Wersja product-details-1
W pliku elements/product/product-details-1.html wyszukaj frazę {% include 'partials/common/after-adding-to-cart-popup.html' %}. Bezpośrednio nad nią wklej fragment kodu z przyciskami (pierwszy przycisk to iRaty, drugi to iLeasing): {% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign totalPrice = _pd.Price | Times: tempVat -%} {% assign subtotalPrice = _pd.Price -%} {% else -%} {% assign totalPrice = _pd.Price -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%} {% endif -%}
Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.
Sklep w wersji Enterprise lub B2B:
Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty).Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

Wersja product-details-2
W pliku elements/product/product-details-2.html wyszukaj frazę {% include 'partials/common/after-adding-to-cart-popup.html' %}. Bezpośrednio nad nią wklej fragment kodu z przyciskami (pierwszy przycisk to iRaty, drugi to iLeasing): {% if customer.Authenticated and customer.Company -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign totalPrice = _pd.Price | Times: tempVat -%} {% assign subtotalPrice = _pd.Price -%} {% else -%} {% assign totalPrice = _pd.Price -%} {% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%} {% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%} {% endif -%}
Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.
Sklep w wersji Enterprise lub B2B:
Wskazówka
W miejsce XXXX należy wpisać ID partnera.

Wskazówka
Kod zawiera oba przyciski (iLeasing i iRaty).Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

Lista plików w Strefie klienta w szablonie Szafir

Lista plików w strefie klienta w szablonie Szafir

W tym artykule dowiesz się jak dodać listę plików w strefie klienta w swoim szablonie.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order
Pierwszym krokiem będzie dodanie kodu w pliku customer-profile/pagination.html. W tym celu za pomocą narzędzia wyszukiwania znajdź frazę {% endif -%}, a linijkę wyżej wklej następujący kod: {% elseif page.QueryString contains 'to-download-erp' -%} {% assign buttonClass = 'to-download-button-lq' -%} {% assign inputClass = 'to-download-input-lq' -%} {% assign urlType = 'to-download-erp=true' -%} Następnie proszę otworzyć plik customer-profile/menu.html, następnie wyszukać w nim za pomocą narzędzia wyszukiwania frazę <li class="load-erp-data-lq i zastąpić znalezioną linijkę następującą: <li class="load-erp-data-lq {% unless page.QueryString contains 'tab=invoices' or page.QueryString contains 'tab=executed-complaints' or page.QueryString contains 'tab=active-complaints' or page.QueryString contains 'tab=sor' or page.QueryString contains 'tab=wm' or page.QueryString contains 'tab=to-download' or page.QueryString == '?tab=discounts' -%} active-lq {% endunless -%}" data-template="customer-profile/orders/orders.html"> Również w tym samym pliku proszę wyszukać frazę {% if settings.discountsPresentationInCustomerProfileInPromotionsTab == 'yes' %} a bezpośrednio nad nią wkleić następujący kod: {% if config.B2B -%} <li class="load-erp-data-lq {% if page.QueryString contains 'tab=to-download' -%} active-lq {% endif -%}" data-template="customer-profile/to-download/to-download.html"> <i class="ti-download"></i> {{ translations.Downloads }} </li> {% endif -%} Następnym krokiem będzie dodanie odpowiednich styli. W tym celu przejdź do pliku scss/globals/_globals2.scss, a na samym końcu tego pliku wklej: .to-download-table-ui{ a{ color: $primaryColorFont; } .column-ui{ width: 50%; vertical-align: middle; } } Teraz należy przejść do folderu customer-profile, w nim utworzyć folder o nazwie to-download. W nowo utworzonym folderze proszę utworzyć plik to-download.html, a w nim umieścić następujący kod: <nav class="customer-profile-header-menu-ui"> <ul> <li><a href="{{ page.BaseHref }}{{ config.DefinedPages.Home }}"><i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.BackToShopping }}</span></a></li> <li class="active-ui only-text-ui">{{ translations.Downloads }}</li> </ul> </nav> {% include 'customer-profile/menu.html' -%} <div class="with-column-ui"> <div class="container-ui"> {% if customer.CompanyErpId <= 0 -%} {{ translations.AccessDenied }} {% else %} <div class="erp-data-ui erp-data-lq"> <div class="to-download-table-ui to-download-table-lq table-lq" data-sp="CDN.eshop_GetCustomerFiles"> <div class="column-name-ui"> <div class="column-ui">{{ translations.FileName }}</div> <div class="column-ui">{{ translations.Downloads }}</div> </div> <div class="row-ui" rv-each-o="List"> <a rv-href="o.UrlValue" rv-if="o.IsUrl" target="_blank"> <div class="column-ui"> <i class="file-to-download-icon-lq icon-ui" rv-data-extension="o.Extension"></i> { o.Name } </div> <div class="column-ui"><i class="ti-download"></i> {{ translations.DownloadFile }}</div> </a> <div class="download-file-from-to-download-lq" rv-data-id="o.ID" rv-data-extension="o.Extension" rv-unless="o.IsUrl"> <div class="column-ui"> <i class="file-to-download-icon-lq icon-ui" rv-data-extension="o.Extension"></i> { o.Name } </div> <div class="column-ui"><i class="ti-download"></i> {{ translations.DownloadFile }}</div> </div> </div> </div> {% include 'customer-profile/pagination.html' -%} </div> {% endif -%} </div> </div> Kolejnym krokiem jest dodanie kodu JavaScript. W tym celu przejdź do pliku js/init-ui2.js, przy pomocy narzędzia wyszukiwania znajdź frazę function getData(). Należy usunąć cały kod począwszy od znalezionej linii, aż do klamerki (włącznie) znajdującej się dwie linijki pod frazą div.find('.pager-lq').css('display', 'inline-flex');. W miejsce usuniętego kodu proszę wkleić: $.fn.erpData = function () { return this.each(function () { var div = $(this); var table = div.children('.table-lq'); if(!table.hasClass('to-download-table-lq')){ var dateTo = $('.get-erp-data-lq[name=dateTo]'); } var spin = $('.ng-spinner-lq'); var sp = table.data('sp'); var ds = { List: null, Pager: null, PageNo: 1 }; rivets.bind(div, ds); function getDateStr(d) { return new Date((d - d.getTimezoneOffset() * 60000)).toISOString().slice(0, -14); } function getDateEl(el) { try { var val = el.val(); if (val == '') return null; var d = new Date(val); el.val(getDateStr(d)); return getDateStr(d).replace(/-/g, ''); } catch (ex) { el.val(''); return null; } } function getData() { spin.css('visibility', 'visible'); if($('[type=date]').val() == ''){ var date = new Date().toISOString().slice(0, -14); $('[type=date]').val(date); } if(!table.hasClass('to-download-table-lq')){ var dt = getDateEl(dateTo); var parameters = { DateTo: dt, LanguageId: __lngId, PageNo: ds.PageNo } } else { var parameters = { LanguageId: __lngId, PageNo: ds.PageNo } } $.post(null, { __action: 'sync/exec', __csrf: __CSRF, worker: 'erpData', message: JSON.stringify({ command: sp, parameters: parameters }) }, function (d) { spin.css('visibility', 'hidden'); if (!d.action.Result) { return; } var r = d.action.Object[0]; ds[r.Name] = r.Result; ds.Pager = Array.apply(null, Array(r.PageCount)).map(function (_, i) { return { No: i + 1, Selected: ds.PageNo == i + 1 }; }); if(r.PageCount > 1){ ds.FewPages = true; } var elements = r.Result; var elementsQuantity = elements.length; for(var i=0; i<elementsQuantity; i++){ if(elements[i].DaysAfterDueDate > 0 && (elements[i].ToPay > 0 || elements[i].ToReturn < 0)){ elements[i].DaysAfterExists = true; } if(elements[i].ToPay > 0){ elements[i].ToPayExists = true; $('.no-to-pay-lq').remove(); $('.to-pay-column-lq').removeClass('hidden-lq'); } if(elements[i].ToReturn > 0){ elements[i].ToReturnExists = true; $('.no-to-pay-lq').remove(); $('.to-pay-column-lq').removeClass('hidden-lq'); } if(elements[i].DeliveryStatus == 0){ elements[i].DeliveryStatus0 = true; } if(elements[i].DeliveryStatus == 1){ elements[i].DeliveryStatus1 = true; } if(elements[i].DeliveryStatus == 2){ elements[i].DeliveryStatus2 = true; } if(elements[i].DeliveryStatus == 3){ elements[i].DeliveryStatus3 = true; } if(elements[i].DeliveryStatus == 4){ elements[i].DeliveryStatus4 = true; } if(elements[i].PaymentStatus == 0){ elements[i].PaymentStatus0 = true; } if(elements[i].PaymentStatus == 1){ elements[i].PaymentStatus1 = true; } if(elements[i].PaymentStatus == 2){ elements[i].PaymentStatus2 = true; } if(elements[i].DeliveryStatus == 0 || elements[i].DeliveryStatus == 1 || elements[i].DeliveryStatus == 2 || elements[i].DeliveryStatus == 3 || elements[i].DeliveryStatus == 4 || elements[i].PaymentStatus == 0 || elements[i].PaymentStatus == 1 || elements[i].PaymentStatus == 2){ elements[i].StatusExists = true; } if(elements[i].DeliveryStatus == 0 || elements[i].DeliveryStatus == 1 || elements[i].DeliveryStatus == 2 || elements[i].DeliveryStatus == 3 || elements[i].DeliveryStatus == 4){ elements[i].DeliveryStatusExists = true; } if(elements[i].PaymentStatus == 0 || elements[i].PaymentStatus == 1 || elements[i].PaymentStatus == 2){ elements[i].PaymentStatusExists = true; } if(elements[i].DeliveryStatusExists && elements[i].PaymentStatusExists){ elements[i].DeliveryAndPaymentStatusExists = true; } } div.find('.page-count-lq').text(r.PageCount); if(ds.PageNo == r.PageCount){ $('.pager-lq .next-lq').attr('disabled', true).removeClass('btn-gray-ui'); } else { $('.pager-lq .next-lq').attr('disabled', false).addClass('btn-gray-ui'); } if(ds.PageNo == 1){ $('.pager-lq .prev-lq').attr('disabled', true).removeClass('btn-gray-ui'); } else { $('.pager-lq .prev-lq').attr('disabled', false).addClass('btn-gray-ui'); } $('.pager-lq [type=number]').val(ds.PageNo); if(table.hasClass('to-download-table-lq')){ $('.file-to-download-icon-lq').each(function(){ var extension = $(this).data('extension'); if(extension == 'jfif' || extension == 'jpe' || extension == 'jpeg' || extension == 'jpg'){ var icon = 'ti-image'; } else if(extension == 'csv' || extension == 'txt'){ var icon = 'ti-receipt'; } else if(extension == 'doc' || extension == 'docx' || extension == 'odt'){ var icon = 'ti-write'; } else if(extension == 'xls' || extension == 'xlsx' || extension == 'ods'){ var icon = 'ti-bar-chart'; } else if(extension == 'zip' || extension == 'rar' || extension == '7zip'){ var icon = 'ti-archive'; } else if(extension == 'pdf'){ var icon = 'ti-agenda'; } else { var icon = 'ti-file'; } $(this).addClass(icon); }); } table.show(); div.find('.pager-lq').css('display', 'inline-flex'); }); } W tym samym pliku proszę wyszukać frazę function rivetsPropertyCheck(bindedObj, property), a bezpośrednio nad nią dodać kod: function downloadFileFromToDownload(e) { var id = $(e.currentTarget).data('id'); var extension = $(e.currentTarget).data('extension'); var fileDownloaded = false; if(window.downloadedFiles){ for(i=0; i<window.downloadedFiles.length; i++){ if(window.downloadedFiles[i].id == id){ fileDownloaded = true; var blob = window.downloadedFiles[i].blob; } } } if(fileDownloaded){ var a = document.getElementById('file-'+id); var url = window.URL.createObjectURL(blob); a.href = url; a.click(); window.URL.revokeObjectURL(url); } else { var fileData = { __csrf:__CSRF, __action:'sync/exec', worker:'erpData', message:JSON.stringify({command:'CDN.eShop_GetCustomerBinaryFile', parameters:{'Id':id}}) }; $.post(null,fileData, function(d){ var file = d.action.Object[0][0]; var name = file.FileName+'.'+extension; var binaryString = file.FileData; var fileBytes = base64ToArrayBuffer(binaryString); var blob = new Blob([fileBytes], {type: "octet/stream"}); var url = window.URL.createObjectURL(blob); var a = document.createElement("a"); document.body.appendChild(a); a.setAttribute("id", "file-"+id); a.style = "display: none"; a.href = url; a.download = name; a.click(); window.URL.revokeObjectURL(url); if(window.downloadedFiles){ window.downloadedFiles.push({id:id, blob:blob}); } else { window.downloadedFiles = [{id:id, blob:blob}]; } }); } } $('body').on('click', '.download-file-from-to-download-lq', function(e) { downloadFileFromToDownload(e); }); Następnie proszę dodać tłumaczenia. W sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Id: FileName -- Tekst: Nazwa pliku

Id: DownloadFile -- Tekst: Pobierz plik

Podtrzymanie sesji użytkownika

Wskazówka

Podtrzymanie sesji użytkownika w szablonach
W szablonach Comarch sesja użytkownika jest podtrzymywana w otwartej karcie przeglądarki, dzięki czemu brak aktywności użytkownika w sklepie nie powoduje usunięcia wykonywanych czynności - np. nie jest usuwany utworzony koszyk. Domyślnie czas bezczynności sesji użytkownika wynosi 15 minut, po upływie których zostaje usunięta. Dotyczy to głównie użytkowników niezalogowanych. W tym artykule dowiesz się, jak zaimplementować podtrzymywanie sesji użytkownika w swoim modyfikowanym szablonie.
1. Szablony Szafir, Opal, Bursztyn i Agat
Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do opcji Edytuj HTML. Krok 2. W dostępnych plikach przejdź do folderu js, w którym znajduje się plik init.js. Krok 3. Przejdź do edycji pliku init.js wprowadzając poniższy skrypt na jego końcu: setInterval(() => fetch(document.baseURI + 'xhr?__action=svc/ping'), 600000); Krok 4. Dokonaj minifikacji oraz odpowiedniej kompilacji edytowanego pliku zgodnie z instrukcją. Krok 5. Zapisz i opublikuj zmiany. Gotowe! Sesja użytkowników Twojego e-Sklepu będzie aktywna przez cały czas, gdy witryna będzie wyświetlona w otwartej przeglądarce.
2. Szablon Topaz
Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do opcji Edytuj HTML. Krok 2. W dostępnych plikach przejdź do folderu js, w którym znajduje się plik layout0.js. Krok 3. Przejdź do edycji pliku layout0.js wprowadzając poniższy skrypt na jego końcu: setInterval(() => fetch(document.baseURI + 'xhr?__action=svc/ping'), 600000); Krok 4. Dokonaj minifikacji oraz odpowiedniej kompilacji edytowanego pliku zgodnie z instrukcją. Krok 5. Zapisz i opublikuj zmiany. Gotowe! Sesja użytkowników Twojego e-Sklepu będzie aktywna przez cały czas, gdy witryna będzie wyświetlona w otwartej przeglądarce.

Zmiana czcionki w szablonie

W tym artykule dowiesz się, jak w łatwy sposób zmienić czcionkę w szablonie.
Wybór czcionki

Wskazówka
Przy wyborze czcionki zwróć uwagę, aby miała licencję Apache 2.0
Wejdź tutaj i wybierz czcionkę, która Ci najbardziej odpowiada. Następnie kliknij w kafelek odpowiadający danej czcionce. Na potrzeby tego artykułu wybierzemy czcionkę Roboto. Następnie wybierz style, które Cię interesują. Po wybraniu przynajmniej jednego stylu pojawi się po prawej część kodu, którą należy skopiować do sekcji w szablonie. W naszym przypadku będzie to: link rel="preconnect" href="https://fonts.googleapis.com"> link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> Kawałek niżej będzie podana linijka, którą trzeba wkleić w każdym miejscu, w którym występuje zapis z inną czcionką. W naszym wypadku będzie to: font-family: 'Roboto', sans-serif;
Szafir
W pliku __layout.html znajdź znacznik head (3 linijka) i wklej w jego obrębie kod: link rel="preconnect" href="https://fonts.googleapis.com"> link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> Znajdź plik scss/globals/_fonts.scss i usuń go. Następnie w pliku scss/desktop1.scss usuń linijkę: @import 'globals/_fonts'; W pliku scss/components/_collection-points.scss wyszukaj frazę 'SegoeUI' i zamień wszystkie jej wystąpienia na 'Roboto', sans-serif. Następnie w plikach scss/globals/_globals1.scss, scss/globals/_globals2.scss i scss/globals/_header.scss wyszukaj frazę "SegoeUI" i zamień wszystkie jej wystąpienia w każdym z tych plików na 'Roboto', sans-serif. Na sam koniec w plikach scss/globals/_globals-m.scss, scss/globals/_globals2.scss, scss/globals/_header.scss i scss/partials/_order.scss wyszukaj frazę SegoeUI i zamień wszystkie jej wystąpienia w każdym z tych plików na 'Roboto', sans-serif.
Wskazówka
Pamiętaj, że pliki należy zminifikować. O tym jak skompilować i zminifikować pliki dowiesz się z artykułu o kompilacji i minifikacji plików.

LiveChat - obsługa wtyczki w szablonach

Wskazówka

LiveChat jest narzędziem służącym do komunikacji klientów z firmą poprzez aplikację. Widgety widoczne są przeważnie na stronach internetowych. Rozwiązanie jest coraz częściej wykorzystywane przede wszystkim przy sprzedaży online oraz customer service. Dzięki chatom komunikacja pomiędzy klientem, a firmą przebiega sprawniej. W niniejszym artykule dowiesz się, jak w prosty sposób zintegrować swój szablon z narzędziem LiveChat.
Instalacja wtyczki LiveChat w szablonach
Otwórz stronę LiveChat.com. Konieczne jest założenie konta. Oprócz adresu e-mail i hasła, należy podać m.in. link do Twojego sklepu. Po zatwierdzeniu wyświetli się okno, gdzie znajduje się instrukcja dodania wtyczki. Do wyboru są trzy opcje, wybierz Install LiveChat code manually. Po wybraniu tej opcji, wyświetli się fragment kodu z indywidualnym License ID. Kod można skopiować przyciskiem Copy code. Następnie możesz wkleić go do swojego szablonu.

Topaz – wklej kod do pliku base_layout.html. Kod możemy umieścić niemal na samym końcu pliku, najlepiej tuż nad zamknięciem tagu body.

Szafir, Agat, Bursztyn, Opal – wklej kod do pliku _layout.html. Kod możemy umieścić niemal na samym końcu pliku, najlepiej tuż nad zamknięciem tagu body.

Zmian możesz dokonać w Panelu Administracyjnym (Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/Edytuj HTML) lub przy pomocy Comarch e-Sklep Liquid Sync. Po wprowadzeniu zmian opublikuj je w Panelu Administracyjnym. Od teraz widget LiveChat będzie wyświetlał się na Twoim szablonie.
Dostosowanie wyglądu wtyczki do własnych preferencji
Wtyczkę LiveChat można dostosować m.in. pod kątem wyglądu. Aby tego dokonać, na stronie LiveChat w menu po lewej stronie ekranu wybierz opcję Settings. W wyświetlonym menu, zakładce Chat widget wybierz Customization. Możesz dostosować m.in. styl widgetu zminimalizowanego oraz zmaksymalizowanego, wybrać ciemny lub jasny motyw, podstawowy kolor widgetu, położenie widgetu na ekranie (odległość od krawędzi, wyrównanie do lewej/prawej), czy też widoczność widgetu. W zakładce Language możesz dostosować język, powitanie, domyślną nazwę Klienta na czacie oraz inne wyświetlane w widgecie teksty i napisy. Sprawdź także pozostałe zakładki i dostosuj widget LiveChat zgodnie ze swoimi preferencjami.

Obsługa i prezentacja najniższej ceny towaru w szablonach

Wstęp

W niniejszym artykule prezentujemy w jaki sposób możesz zmodyfikować swój szablon tak, aby była w nim widoczna najniższa cena towaru, jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki. Poniższa instrukcja pozwoli Ci dostosować swój szablon do przepisów wynikających z Unijnej dyrektywy Omnibus.
Wskazówka
Więcej na temat dyrektywy Omnibus przeczytasz w artykule Dyrektywa Omnibus w Comarch e-Sklep.
Od wersji 2022.3 istnieje możliwość wyświetlania minimalnej ceny towaru z ostatnich 30 dni. W obiekcie zawierającym wszystkie informacje na temat towaru zostały dodane nowe property: MinPrice, SubtotalMinPrice (cena netto dla sklepów Enterprise i B2B) oraz TotalMinPrice (cena brutto dla sklepów Enterprise i B2B).
Wskazówka
Pamiętaj, że wyżej wspomniany obiekt nosi różne nazwy, w zależności od szablonu czy od strony, na której się znajdujemy.

Kiedy widoczna jest cena minimalna?
Cena minimalna, czyli najniższa cena towaru, jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki jest dostępna wówczas, gdy produkt posiada cenę aktualną oraz poprzednią. Cenę minimalną można prezentować w wielu miejscach w szablonie, m.in.: na szczegółach towaru, na liście towarów, na porównywarce towarów, na towarach ulubionych, w sekcjach z towarami polecanymi czy ostatnio oglądanymi. Wszystko zależy od tego, który szablon posiadasz - cena poprzednia w niektórych przypadkach nie jest widoczna w wymienionych miejscach, przez co cena minimalna również nie będzie możliwa do zobaczenia.
Wprowadzanie zmian w kodzie szablonu
Zmiany związane z ceną minimalną należy wprowadzić wszędzie tam, gdzie w szablonie pokazujemy cenę poprzednią (property PreviousPrice). Przykładowy kod z minimalną ceną:
{% if customer.HidePrices == false and product.Price != null and product.PreviousPrice != null -%}
{{product.MinPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}
{% endif -%}
W powyższym przykładzie najpierw sprawdzamy, czy ceny są widoczne, a także czy produkt posiada cenę aktualną i cenę poprzednią. Jeśli wszystkie warunki są spełnione, wyświetlamy minimalną cenę w odpowiednim formacie wraz z wybraną przez Klienta walutą. Dodatkowo, obok ceny wyświetla się ikonka z symbolem "i", czyli informacja. Po najechaniu kursorem na symbol wyświetli się tooltip z informacją, czym jest widoczna cena.
Cena minimalna na liście towarów - przykład w szablonie Szafir
Przykładowy kod związany z tooltipem informacyjnym do minimalnej ceny:
{% if customer.HidePrices != true -%}
Najniższa cena towaru, jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki
{% endif -%} /* JS - wyświetlanie, ukrywanie tooltipa */ $('body').on('click', '.min-price__showTooltip', function(e) { e.preventDefault(); e.stopPropagation(); }); $('body').on('mouseenter', '.min-price__showTooltip', function(e) { e.preventDefault(); e.stopPropagation(); let tooltip = $('.minPriceTooltip-js'); let top = e.clientY - e.offsetY; let right= "unset"; let left = (e.clientX - 30) - (e.offsetX/2); if(left < 0) { left = 10; } else if (left > (($(window).width() - 200))) { left = "unset"; right = 10; } tooltip.css('top', top); tooltip.css('right', right); tooltip.css('left', left); tooltip.show(); }); $('body').on('mouseleave', '.min-price__showTooltip', function(e) { $('.minPriceTooltip-js').hide(); }); $('body').on('pointerenter', '.min-price__showTooltip', function(e) { e.preventDefault(); e.stopPropagation(); let tooltip = $('.minPriceTooltip-js'); let top = e.clientY - e.offsetY; let right= "unset"; let left = (e.clientX - 30) - (e.offsetX/2); if(left < 0) { left = 10; } else if (left > (($(window).width() - 200))) { left = "unset"; right = 10; } tooltip.css('top', top); tooltip.css('right', right); tooltip.css('left', left); tooltip.show(); }); $('body').on('pointerleave', '.min-price__showTooltip', function(e) { $('.minPriceTooltip-js').hide(); }); $(window).on('scroll', function(e) { $('.minPriceTooltip-js').hide(); });

Wskazówka
Pamiętaj, aby odpowiednio ostylować minimalną cenę, ikonkę oraz tooltipa.
W przypadku miejsc takich jak szczegóły towaru czy lista towarów, w zależności od szablonu, trzeba także dokonać pewnych zmian w funkcjach w plikach .js, a czasami również w .html. Dotyczy to jednak głównie towarów z atrybutami do wyboru lub w przypadku listy towarów, jeśli w Twoim szablonie towary są filtrowane bez odświeżania strony. W takich sytuacjach postępujemy analogicznie jak dla wszystkich miejsc związanych z ceną poprzednią (oldPrice, previousPrice itp.).

Logowanie do sklepu za pomocą konta Google i Facebook - implementacja w szablonie Szafir

Wstęp

Z tego artykułu dowiesz się jak zaimplementować opcję logowania do Twojego sklepu w szablonie Szafir za pomocą kont Google oraz Facebook. Od wersji 2022.4 w szablonie Szafir wprowadziliśmy możliwość logowania do sklepu za pomocą konta Google oraz Facebook. W celu zaimplementowania takiej możliwości w swoim sklepie należy wykonać trzy czynności dla każdej z tych platform :

Konfiguracja logowania w Panelu Administracyjnym

Zmiany w kodzie źródłowym sklepu

Przygotowanie tekstów

Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js, html i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.
Poniżej znajdują się instrukcje rozwijające wspomniane wyżej wątki.
1. Konfiguracja logowania w Panelu Administracyjnym
Informacje odnośnie tego etapu implementacji znajdują się w artykule o logowaniu do sklepu za pomocą konta Google i Facebook.
2. Zmiany w kodzie źródłowym sklepu
Poniżej znajdują się fragmenty kodu, które należy dodać w celu utworzenia nowych opcji logowania.
Pliki html

W pliku _layout.html wyszukaj frazę crossorigin="anonymous" dokładnie pod linijką z tym elementem wklej ten kod:

W pliku sign-in.html wyszukaj frazę loader-js. Fraza powinna wystąpić raz. Pod tą linijką w miejscu pomiędzy tymi dwoma elementami:

{% endif -%} Wstaw poniższy fragment kodu:
{% if config.External.Facebook or config.External.Google -%}
{{translations.Or}}
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}
{{translations.LoginWithFb}}
{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}

{% endif -%}

{% endif -%}

W pliku customer-profile/your-account/your-account.html na samym końcu w przedostatniej linijce dodaj fragment :

{{ translations.ExternalWebsites }}
{% if config.External.Facebook or config.External.Google -%}
{% if customer-profile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customer-profile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %}
{{translations.Disconnect_Fb}}
{% assign fbConnect = 1 -%} {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
{{translations.Disconnect_Google}}
{% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
{{translations.ConnectFb}}
{% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
{{translations.ConnectGoogle}}
{% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
{{translations.ConnectFb}}
{% endif %} {% if config.External.Google and config.External.Google.ClientID != '' %}
{{translations.ConnectGoogle}}
{% endif %} {% endif %}
{% endif -%}

Pliki JavaScript
W katalogu js stwórz dwa pliki JavaScript nazwij je kolejno google-login.js oraz fb-login.js. Następnie wklej do nich poniższe kody:
Plik google-login.js :

function handleCredentialResponse(response) { setTimeout(function() { $.post(null,{ __action: 'External/GoogleLogin', __csrf: __CSRF, id_token: response.credential },function(result){ if (result.action.Result) { window.location.replace(''); } else if (result.action.Code === 108) { const popup = '
' + __translations.CantLoginWithGoogle + '
'; document.body.innerHTML += popup; setTimeout(function () { $('.unsuccessfull-post-message-js').remove(); }, 3000); } else { const popup = '
' + __translations.CantLoginWithGoogle + '
'; document.body.innerHTML += popup; setTimeout(function () { $('.unsuccessfull-post-message-js').remove(); }, 3000); } }); }, 1000); } window.onload = function () { google.accounts.id.initialize({client_id: __googleID, callback: handleCredentialResponse}) google.accounts.id.renderButton( document.getElementById("google-signin"), { theme: "outline", size: "large", width: "250", logo_alignment: "center", text: "signin_with", wight: "100"} ); $('body').on('click', '#linkGoogleAccount', function(){ setTimeout(function() { $.post(null,{ __action: 'External/GoogleAccountLink', __csrf: __CSRF, userID: __googleID },function(result){ if (result.action.Result) { location.reload(); } else { const popup = '
' + __translations.FailedConnectToGoogle + '
'; document.body.innerHTML += popup; setTimeout(function () { $('.unsuccessfull-post-message-js').remove(); }, 3000); } }); }, 1000); }); $('body').on('click', '#unlinkGoogleAccount', function(){ $.post(null,{ __action: 'External/GoogleAccountUnlink', __csrf: __CSRF },function(result){ if (result.action.Result) { location.reload(); } else { const popup = '
' + __translations.FailedDisconnectFromGoogle + '
'; document.body.innerHTML += popup; setTimeout(function () { $('.unsuccessfull-post-message-js').remove(); }, 3000); } }); }); $('body').on('click', '.logout', function () { googleLogout(); }); } function googleLogout() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut(); }

Plik fb-login.js :

var fbLoginStatus; // This is called with the results from from FB.getLoginStatus(). function statusChangeCallback(response) { fbLoginStatus = response; } function _login() { FB.login(function (response) { // handle the response if (response.status === 'connected') { connectToFb(response); } }, { scope: 'public_profile,email' }); } window.fbAsyncInit = function () { FB.init({ appId: __fbId, //Your APP ID cookie: true, // enable cookies to allow the server to access the session xfbml: true, // parse social plugins on this page version: 'v2.1', // use version 2.1 status: true }); // These three cases are handled in the callback function. FB.getLoginStatus(function (response) { statusChangeCallback(response); }); FB.Event.subscribe('auth.authResponseChange', function (response) { fbLoginStatus = response; }); $('body').on('click', '.logout', function () { fbLogout(); }); $('body').on('click', '#disconnect-fb', function () { disconnectFb(); }); $('body').on('click', '#connect-fb', function (e) { connectFb(e); }); }; // Load the SDK asynchronously (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); } (document, 'script', 'facebook-jssdk')); function connectToFb(response) { FB.api('/me', { fields: 'email,name' }, function (u) { response.user = u; $.post(null, { __CSRF: __CSRF, __action: 'external/fblogin', response: JSON.stringify(response) }, function (result) { if (result.action.Result) { window.location.replace(''); } else if (result.action.Code != 100) { const popup = '
' + __translations.CantLoginWithFb + '
'; document.body.innerHTML += popup; setTimeout(function () { $('.unsuccessfull-post-message-js').remove(); }, 3000); } }); }); } function fbLogout() { FB.logout(function (response) { }); } function disconnectFb() { var data = { __csrf: __CSRF, __action: 'External/FbAccountUnlink' }; $.post(null, data, function (result) { if (result.action.Result) { location.reload(); } else { const popup = '
' + __translations.FailedDisconnectFromFb + '
'; document.body.innerHTML += popup; setTimeout(function () { $('.unsuccessfull-post-message-js').remove(); }, 3000); } }); } function connectFb(e) { if (fbLoginStatus.status === 'connected') { var userIdNum = fbLoginStatus.authResponse.userID; var data = { __csrf: __CSRF, __action: 'External/FbAccountLink', userID: userIdNum }; $.post(null, data, function (result) { if (result.action.Result) { location.reload(); } else { const popup = '
' + __translations.FailedConnectToFb + '
'; document.body.innerHTML += popup; setTimeout(function () { $('.unsuccessfull-post-message-js').remove(); }, 3000); } }); } else { const popup = '
' + __translations.NeedToConnectToFb + '
'; document.body.innerHTML += popup; setTimeout(function () { $('.unsuccessfull-post-message-js').remove(); }, 3000); } }

Pliki scss

W pliku scss/globals/_globals-m.scss na samym końcu dodaj poniższy fragment kodu:

@media only screen and (max-width: 1279px){ .connectSocialsAccount-ui{ width: 100%; .CustomerContentSection-ui{ .CustomerSocialButton-ui{ width: 100%; min-width: auto; } } } }

W pliku scss/globals/_globals1.scss znajdź fragment :

} &-button-drop-ui span{ margin-left: 13px; }
Dokładnie nad tym fragmentem wstaw poniższy kod:
.loginForm-ui{ width:100%; font-size: 16px; margin-bottom: 20px; .login-form__socialButtons__title-ui{ display:inline-block; width: 100%; text-align: center; } .socialLoginButtons-ui{ display: flex; width: 100%; align-content: center; flex-wrap: wrap; flex-direction: column; .FbLoginForm-ui { display: flex; background: #FFFFFF; color: #3c4043; width: 250px; height: 40px; border: 1px solid #dadce0; border-radius: 4px; justify-content: center; align-items: center; margin-top: 18px; cursor: pointer; .FbLoginIcon-ui { background: #FFFFFF; display: inline-block; vertical-align: middle; width: 21px; height: 21px; } .FbButtonText-ui { display: inline-block; vertical-align: middle; padding-left: 10px; font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 500; } } .FbLoginForm-ui:hover{ background-color: #f9faff; border: 1px solid #dbe1ee; transition: 0,5s; } .GLoginForm-ui { display: flex; justify-content: center; align-items: center; margin-top: 18px; } } }

Następnie dalej w tym samym pliku (scss/globals/_globals1.scss) na samym końcu dodaj poniższy fragment kodu:

.connectSocialsAccount-ui{ width: 93%; margin: auto; margin-bottom:50px; .CustomerContentSection-ui{ margin-top: 50px; display: flex; flex-direction: column; .CustomerSocialButton-ui{ display: inline-flex !important; box-shadow: 0px 1px 1px 1px lightgray; justify-content: center; align-items: center; width: calc(33% - 11px); min-width: 420px; height: auto; color: #232323; font-size: 14px; text-transform: uppercase; font-weight: 400; display: block; margin-bottom: 20px; padding: 17px; text-align: center; cursor: pointer; letter-spacing: 1px; } .CustomerSocialButtonGoogle-ui { background-color: #FFFFFF; } .CustomerSocialButtonFacebook-ui { background-color: #FFFFFF; } .CustomerSocialButton-ui:hover{ box-shadow:0 0 4px #4285F4; transition: 1s; } .GFbLinkIcon-ui{ margin-right: 10px; width: 32px; height: 32px; } } }

Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji.

3. Przygotowanie tekstów
Ostatnim etapem implementacji będzie dodanie odpowiednich tekstów do swojego szablonu. Odbywa się to poprzez opcję Tłumaczenia , która znajduje się w Panelu administracyjnym sklepu. Dokładna jej lokalizacja ukazana jest poniżej. W celu dodania tekstu klikamy przycisk dodaj. Dodajemy teksty według poniższej tabeli.

Id Tekst

ExternalWebsites Serwisy zewnętrzne

NeedToConnectToFb Musisz być zalogowany do Facebooka, aby połączyć konto.

CantLoginWithFb Błąd podczas logowania do Facebooka.

FailedDisconnectFromFb Błąd podczas odłączania konta Facebook.

FailedConnectToFb Błąd podczas łączenia z kontem Facebook.

LoginWithFb Zaloguj się przez Facebook

Disconnect_Fb Odłącz konto od Facebooka

ConnectFb Połącz konto z Facebookiem

CantLoginWithGoogle Nie udało się zalogować, spróbuj jeszcze raz!

FailedDisconnectFromGoogle Błąd podczas odłączania konta Google.

FailedConnectToGoogle Błąd podczas łączenia z kontem Google.

LoginWithGoogle Zaloguj się przez Google

Disconnect_Google Odłącz konto od Google

ConnectGoogle Połącz konto z Google

Graficzna prezentacja atrybutów - szablon Topaz

Wstęp

W szablonie Topaz od wersji 2022.4 wprowadzono możliwość graficznej prezentacji atrybutów towaru. Funkcja umożliwia prezentację atrybutów, w formie kolorów dla towarów zgrupowanych (fantomów) i tych posiadających atrybuty oraz w formie miniatur dla towarów zgrupowanych. W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał graficzną prezentację atrybutów.
Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

Zmiana ustawień w Panelu Administracyjnym
W Panelu Administracyjnym wybierz zakładkę Wygląd sklepu/Ustawienia szablonu, a następnie w prawym górnym rogu kliknij na ikonę z trzema kwadratami i wybierz opcję Edytuj ustawienia zaawansowane. Następnie w zakładce Ustawienia (JSON) w oknie JSON znajdź na końcu kodu znak "}" i wklej przed nim poniższą instrukcję, po czym zapisz zmiany.
,"grapicalVariantsPresentation":"Variants_No","variantsGroupingAttribute":"Grouping_First","grapicalVariantsPresentationColorsPL":"Błękitny||#99CCFF|||Czerwony||#FF3300|||Niebieski||#3366FF|||Brązowy||#964b00|||Czarny||#000000|||Biały||#FFFFFF|||Złoty||#ffd700|||Różowy||#ffc0cb|||Turkusowy||#76D7C4|||Pomarańczowy||#fc9303|||Zielony||#008000|||Beżowy||#c2b280|||Bordowy||#800000|||Ciemny szary||#909090|||Fioletowy||#87599d|||Granatowy||#000080|||Szary||#b4b4b4|||Zgniło zielony||#a5a542|||Żółty||#ffef00","grapicalVariantsPresentationColorsEN":"Azure||#99CCFF|||Red||#FF3300|||Blue||#3366FF|||Brown||#964b00|||Black||#000000|||White||#FFFFFF|||Gold||#ffd700|||Pink||#ffc0cb|||Turquoise||#76D7C4|||Orange||#fc9303|||Green||#008000|||Beige||#c2b280|||Burgundy||#800000|||Dark grey||#909090|||Purple||#87599d|||Navy blue||#000080|||Gray||#b4b4b4|||Rotten green||#a5a542|||Yellow||#ffef00","grapicalVariantsPresentationColorsDE":"Azurblau||#99CCFF|||Rot||#FF3300|||Blau||#3366FF|||Braun||#964b00|||Schwarz||#000000|||Weiß||#FFFFFF|||Gold||#ffd700|||Rosa||#ffc0cb|||Türkis||#76D7C4|||Orange||#fc9303|||Grün||#008000|||Beige||#c2b280|||Kastanienbraun||#800000|||Dunkelgraué||#909090|||Violett||#87599d|||Marineblau||#000080|||Grau||#b4b4b4|||Fauliges Grün||#a5a542|||Gelb||#ffef00","grapicalVariantsPresentationColorsFR":"Azur||#99CCFF|||Rouge||#FF3300|||Bleu||#3366FF|||Marron||#964b00|||Noir||#000000|||Blanc||#FFFFFF|||Or||#ffd700|||Rose||#ffc0cb|||Turquoise||#76D7C4|||Orange||#fc9303|||Vert||#008000|||Beige||#c2b280|||Bordeaux||#800000|||Gris foncé||#909090|||Violet||#87599d|||Bleu marine||#000080|||Gris||#b4b4b4|||Vert pourri||#a5a542|||Jaune||#ffef00"

Zmiany w plikach szablonu
W pliku __settings.liquid znajdź frazę:
{% when '1' -%}
Pod podaną treścią należy wkleić poniższy kod:
{% assign additionalSettings = "Dodatkowe" -%} {% assign grapicalVariantsPresentation_Title = "Graficzna prezentacja wariantów towarów" -%} {% assign grapicalVariantsPresentation_No = "Nie" -%} {% assign grapicalVariantsPresentation_Colors = "Kolory" -%} {% assign grapicalVariantsPresentation_Thumbnails = "Miniatury (tylko dla towarów zgrupowanych)" -%} {% assign grapicalVariantsPresentationColorSettings_Title = "Dodaj własne wartości atrybutów i przypisane dla nich wartości do poniższej listy" -%} {% assign multiVariantProducts = "Towary wielowariantowe" -%} {% assign variantsGroupingAttributeColors_Title = "W formie graficznej prezentowany będzie atrybut" -%} {% assign variantsGroupingAttribute_Title = "W formie graficznej prezentowany będzie atrybut grupujący" -%} {% assign variantsGroupingAttribute_First = "Pierwszy" -%} {% assign variantsGroupingAttribute_Last = "Ostatni" -%} {% assign variantsGroupingAttribute_All = "Wszystkie" -%} {% assign addColor = "Dodaj kolor" -%} {% assign grapicalVariantsPresentationColorSettings_Color = "Kolor" -%} {% assign grapicalVariantsPresentationColorSettings_Value = "Wartość" -%} {% assign delete = "Usuń" -%}
Następnie wyszukaj najbliższą frazę:
{% else %}
I wklej pod nią następujący kod:
{% assign additionalSettings = "Additional" -%} {% assign grapicalVariantsPresentation_Title = "Graphical presentation of product variants" -%} {% assign grapicalVariantsPresentation_No = "No" -%} {% assign grapicalVariantsPresentation_Colors = "Colors" -%} {% assign grapicalVariantsPresentation_Thumbnails = "Miniatures (only for grouped goods)" -%} {% assign grapicalVariantsPresentationColorSettings_Title = "Add customized attribute values and assign them to the list below" -%} {% assign multiVariantProducts = "Multivariant products" -%} {% assign variantsGroupingAttributeColors_Title = "The attribute will be presented graphically" -%} {% assign variantsGroupingAttribute_Title = "Grouping attribute will be presented in graphical form" -%} {% assign variantsGroupingAttribute_First = "First" -%} {% assign variantsGroupingAttribute_Last = "Last" -%} {% assign variantsGroupingAttribute_All = "All" -%} {% assign addColor = "Add color" -%} {% assign grapicalVariantsPresentationColorSettings_Color = "Color" -%} {% assign grapicalVariantsPresentationColorSettings_Value = "Value" -%} {% assign delete = "Delete" -%}
Teraz znajdź fragment kodu:
#lg-settings-content .mainHeader { font-size: 22px; margin: 45px auto 10px; }
A następnie zmień wartości marginesów na:
margin: 10px auto;
Kolejno wyszukaj:
#lg-settings-content .themeSettings__inputs > section
Podany fragment zastąp:
#lg-settings-content .themeSettings__inputs > section, #lg-settings-content .additionalSettingsTab section
Teraz wyszukaj:
#lg-settings-content .themeSettings__inputs .section-title
I zmień kod na poniższy:
#lg-settings-content .themeSettings__inputs .section-title, #lg-settings-content .additionalSettingsTab .section-title
Kolejno odnajdź instrukcję:
#lg-settings-content .colorInput { position: relative; box-shadow: 2px 8px 10px 0 rgba(0, 0, 0, .25); cursor: pointer; width: 80px !important; min-width: 80px !important; height: 22px; border-radius: 5px; margin: 5px 0 -5px 5px; }
A następnie zastąp ją podanym fragmentem:
#lg-settings-content .colorInput, #lg-settings-content .variantColorInput { position: relative; box-shadow: 2px 8px 10px 0 rgba(0, 0, 0, .25); cursor: pointer; width: 80px !important; min-width: 80px !important; height: 22px; border-radius: 5px; margin: 5px 0 -5px 5px; } #lg-settings-content .variantColorInput { width: 110px !important; min-width: 110px !important; } #lg-settings-content .colors-row { display: flex; width: 290px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; } #lg-settings-content .colors-row:first-child { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-weight: bold; } #lg-settings-content .colors-cell-title { display: flex; align-items: center; } #lg-settings-content .colors-cell-title p { padding: 0 5px; } #lg-settings-content .colors-cell { border-left: 1px solid #ddd; padding: 5px 0 10px; } #lg-settings-content .colors-cell-name { width: 120px; } #lg-settings-content .colors-cell-color { display: flex; width: 130px !important; } #lg-settings-content .colors-cell-delete { width: 40px; display: flex; justify-content: center; align-items: center; } #lg-settings-content .colors-cell-delete div { cursor: pointer; padding: 5px; } #lg-settings-content .add-variant-color { margin: 10px 0; }
Kolejnym etapem jest zmiana wyświetlanej treści w ustawieniach Panelu Administracyjnego. Wyszukaj fragment:
{{saveChangesTranslation}}

I poniżej powyższego kodu wklej poniższe instrukcje:
{{generalTranslation}} {{additionalSettings}}

Teraz odszukaj instrukcję:

A linijkę przed nią wklej:

{{multiVariantProducts}}

{{grapicalVariantsPresentation_Title}}

{{grapicalVariantsPresentation_No}}

{{grapicalVariantsPresentation_Colors}}

{{grapicalVariantsPresentation_Thumbnails}}

{{variantsGroupingAttribute_Title}}

{{variantsGroupingAttributeColors_Title}}

{{variantsGroupingAttribute_First}}

{{variantsGroupingAttribute_Last}}

{{variantsGroupingAttribute_All}}

{{grapicalVariantsPresentationColorSettings_Title}}
{% assign colorVariantsPresentationLanguageTableText = 'PL,EN,DE,FR,UK,RU,CS,SK,BG,DA,EL,ES,FI,IT,NO,NL,PT,RO,HR,ET,BE,IS,SV,LT,LV,HU,SR,SL,MK,TR,JA,SQ,KA' -%} {% assign colorVariantsPresentationLanguageTable = colorVariantsPresentationLanguageTableText | Split: ',' -%} {{chooseColorVariantsPresentationLanguage}}: {% for language in colorVariantsPresentationLanguageTable -%} {% assign variableName = 'grapicalVariantsPresentationColors' | Append: language -%} {% if settings[variableName] -%}
{% assign grapicalVariantsColorArr = settings[variableName] | Split: '|||' -%} {% assign variantColorIteration = 0 -%}

{{grapicalVariantsPresentationColorSettings_Color}} ({{language}})

{{grapicalVariantsPresentationColorSettings_Value}}

{{delete}}

{% for variantColor in grapicalVariantsColorArr -%} {% assign grapicalVariantColorValue = variantColor | Split: '||' -%} {% assign grapicalVariantColorHash = grapicalVariantColorValue[1] -%} {% assign grapicalVariantColorName = grapicalVariantColorValue[0] -%}

{% assign variantColorIteration = variantColorIteration |Plus:1 -%} {% endfor -%}
{% endif -%} {% endfor -%}

{{SizeChartTitle}}

{{SizeChartSectionOne}}

{{SizeChartNo}}

{{SizeChartUnderBtn}}

{{SizeChartUnderFirtsAttribute}}

{{SizeChartSectionTwo}}

{{SizeChartBennerOption}}

{{SizeChartPageOption}}

{{SizeChartSelectPageId}}

{{SizeChartPdfOption}}

Ostatnim etapem zmian w pliku jest edycja kodu JavaScript. Znajdź fragment:
function __SaveLiquidSettings(){ var o = {}; $('#lg-settings-content input[name], #lg-settings-content div[data-name]').each(function(i,el) { if($(el).attr('type') == 'radio' || $(el).attr('type') == 'checkbox') { if($(el).is(':checked')) { o[el.name] = el.value; } } else if ($(el).attr('type') == 'color') { o[el.dataset.name] = el.dataset.value; (el.dataset.value).length > 7 ? el.classList.add('transparent-js') : el.classList.remove('transparent-js'); } else { o[el.name] = el.value; } }); return o; }
A nastepnie podmień go na:
if($('#grapicalVariantsPresentation-Colors').prop('checked')){ $('.grapicalVariantsPresentationColorSettings').show(); $('.grouping-attribute-thumbnails').hide(); $('.grouping-attribute-colors').show(); } else { $('.grapicalVariantsPresentationColorSettings').hide(); } if($('#grapicalVariantsPresentation-Thumbnails').prop('checked')){ $('.grouping-attribute-thumbnails').show(); $('.grouping-attribute-colors').hide(); } if($('#grapicalVariantsPresentation-No').prop('checked')){ $('.variantsGroupingAttributeSettings').hide(); $('.grouping-attribute-thumbnails').hide(); $('.grouping-attribute-colors').hide(); } else { $('.variantsGroupingAttributeSettings').show(); } $('[name=grapicalVariantsPresentation]').on('change', function(){ if($('#grapicalVariantsPresentation-Colors').prop('checked')){ $('.grapicalVariantsPresentationColorSettings').show(); $('.variantsGroupingAttributeSettings').show(); $('.grouping-attribute-thumbnails').hide(); $('.grouping-attribute-colors').show(); } else if($('#grapicalVariantsPresentation-Thumbnails').prop('checked')) { $('.variantsGroupingAttributeSettings').show(); $('.grapicalVariantsPresentationColorSettings').hide(); $('.grouping-attribute-thumbnails').show(); $('.grouping-attribute-colors').hide(); } else { $('.grapicalVariantsPresentationColorSettings').hide(); $('.variantsGroupingAttributeSettings').hide(); $('.grouping-attribute-thumbnails').hide(); $('.grouping-attribute-colors').hide(); } }); $('#lg-settings-content .add-variant-color').on('click', function(e){ var colorsTableClass = $(e.currentTarget).prev().prev().val(); var colorsTable = $(e.currentTarget).parent().find('.' + colorsTableClass); var newColorNumber = colorsTable.find('.colors-row').length - 1; var colorsTableTitle = colorsTable.find('.colors-row-title'); colorsTableTitle.after('

'+ '
'+ '
'+ '
'+ '
'+ '

'); var openPaletteBtns = document.querySelectorAll('.openPaletteBtn-js'); var colorInputs = document.querySelectorAll('.colorInput'); var oldColor; for (let i = 0; i < openPaletteBtns.length; i++) { openPaletteBtns[i].addEventListener('click', function() { var pickerColor = colorPicker.checkIfHex(this.dataset.value); oldColor = pickerColor; colorPicker.openPalette(this); colorPicker.setTransparencyGradient(pickerColor); colorPicker.setTransparencyPicker(this.dataset.value); }); } for (let i = 0; i < colorInputs.length;i++) { colorInputs[i].addEventListener('change', function() { var hex = $(this).val(); var alphaPickerPosition = (document.querySelector('.selectedAlpha-js').style.left).replace(/\D/g, ''); var alphaValue = (1 - (alphaPickerPosition / 300)).toFixed(2); var rgbaColor = "rgba(" + colorPicker.hexToRgb(hex).r + "," + colorPicker.hexToRgb(hex).g + "," + colorPicker.hexToRgb(hex).b + "," + alphaValue + ")"; colorPicker.clearCanvas(); colorPicker.drawElements(hex); colorPicker.setTransparencyGradient(hex); openPaletteBtns[i].style.backgroundColor = rgbaColor; openPaletteBtns[i].setAttribute("data-value",rgbaColor); this.setAttribute("data-value", hex); this.setAttribute("value", hex); }); } $('.colors-delete-js').on('click', function(e) { var colorToRemove = $(e.currentTarget).parent().parent(); colorToRemove.remove(); }); }); $('.colors-delete-js').on('click', function(e) { var colorToRemove = $(e.currentTarget).parent().parent(); colorToRemove.remove(); }); $('.grapicalVariantsPresentationColorSelectLng').on('change', function() { var colorsTables = $('.grapicalVariantsPresentationColorTable'); for(var i = 0; i < colorsTables.length; i++) { $(colorsTables[i]).hide(); } var languageToDisplay = $('.grapicalVariantsPresentationColorSelectLng').val(); var tableToDisplay = '.grapicalVariantsPresentationColorTable.' + languageToDisplay; if($(tableToDisplay).length > 0) { $(tableToDisplay).show(); } else { var colorsTablesSection = $('.grapicalVariantsPresentationColorSettings'); colorsTablesSection.append('
' + '
' + '
' + ' Kolor (' + languageToDisplay + ')
' + '
' + ' Wartość
' + '
' + ' Usuń

'); } }); function __SaveLiquidSettings(){ var o = {}; var colorsVariants = []; var tempColorsVariants = []; $('#lg-settings-content input[name], #lg-settings-content div[data-name]').each(function(i,el) { if($(el).attr('type') == 'radio' || $(el).attr('type') == 'checkbox') { if($(el).is(':checked')) { o[el.name] = el.value; } } else if ($(el).attr('type') == 'colorVariant') { var colorLanguage = $(el).closest('.grapicalVariantsPresentationColorTable')[0].classList[1]; var toAdd = true; var hexColorVariant = el.dataset.value; var colorRow = el.parentElement.parentElement; var colorName = colorRow.querySelector('.variantColorInputName').value.trim(); if(colorRow.querySelector('.variantColorInputName').value !== colorName) { colorRow.querySelector('.variantColorInputName').value = colorName; } var arrayIndex = 0; var hasLanguage = false; if(!tempColorsVariants) { tempColorsVariants[0][0] = colorLanguage; colorsVariants[0][0] = colorLanguage; } else { for(var i = 0; i < tempColorsVariants.length; i++) { if(tempColorsVariants[i][0] == colorLanguage) { arrayIndex = i; hasLanguage = true; break; } } if(!hasLanguage) { tempColorsVariants.push([colorLanguage]); colorsVariants.push([colorLanguage]); arrayIndex = tempColorsVariants.length - 1; } } for(var i=1; i < tempColorsVariants[arrayIndex].length; i++) { if (tempColorsVariants[arrayIndex][i].toLowerCase() === colorName.toLowerCase()) { toAdd = false; break; } } if (!colorName) { toAdd = false; } if (toAdd) { if (colorsVariants[arrayIndex][1] && hexColorVariant) { colorsVariants[arrayIndex][1] = colorsVariants[arrayIndex][1] + '|||'; } if (colorsVariants[arrayIndex].length < 2) { colorsVariants[arrayIndex].push(colorName + '||' + hexColorVariant); } else { colorsVariants[arrayIndex][1] = colorsVariants[arrayIndex][1] + colorName + '||' + hexColorVariant; } tempColorsVariants[arrayIndex].push(colorName); } else { var elementToRemove = colorRow.querySelector('.variantColorInputName').parentElement.parentElement; elementToRemove.remove(); } } else if ($(el).attr('type') == 'color') { o[el.dataset.name] = el.dataset.value; (el.dataset.value).length > 7 ? el.classList.add('transparent-js') : el.classList.remove('transparent-js'); } else { o[el.name] = el.value; } }); if (colorsVariants !== "") { for(var i = 0; i < colorsVariants.length; i++) { o['grapicalVariantsPresentationColors' + colorsVariants[i][0]] = colorsVariants[i][1]; } } $('.selectedTheme-js').attr('id') === "themecolorDark" ? o["defaultColor"] = "#ffffff" : o["defaultColor"] = "#000000"; return o; } Kolejne zmiany w plikach szablonu Topaz dotyczą plików widoku szczegółów towaru. Kreator szablonów umożliwia wygenerowanie czterech różnych widoków szczegółów towarów, dlatego zmiany dla każdego z nich mogą się różnić. Na początku wykonaj zmiany w pliku z kodem JavaScript. Są one identyczne dla wszystkich widoków i należy ich dokonać w pliku js/layout2.js. Wyszukaj w pliku fragment:
function SetSuplFirst(drop, s, lvl, valId) { var form = drop.parent().parent().parent(); var fDrop = form.find('.attributes-select'); drop.empty(); for (var el in s) { drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el]))); }
Przedstawioną powyżej pętle for podmień na następujący kod:
var attributesColorsData = drop.data('variants-colors'); var attributesColors = []; if (attributesColorsData) { attributesColorsData = attributesColorsData.split('|||'); for (var i = 0; i < attributesColorsData.length; i++) { var attributesColor = attributesColorsData[i].split('||'); attributesColors.push([attributesColor[0],attributesColor[1]]); } } for (var el in s) { if (drop.data('variants-colors')) { if ((drop.data('colors-option') === 'Grouping_First' && drop.data('attribute-id') === drop.data('first-attribute-id')) || (drop.data('colors-option') === 'Grouping_Last' && drop.data('attribute-id') === drop.data('last-attribute-id')) || (drop.data('colors-option') === 'Grouping_All')) { var bgVariantColor = null; var borderVariantColor = null for (var i = 0; i < attributesColors.length; i++) { if (attributesColors[i][0].toLowerCase() === s[el].Value.toLowerCase()) { bgVariantColor = attributesColors[i][1]; borderVariantColor = attributesColors[i][1]; } } if (!bgVariantColor) { bgVariantColor = '#FFFFFF'; } if (bgVariantColor === '#FFFFFF' || bgVariantColor === drop.data('page-bg')) { borderVariantColor = null; } drop.append($('

' + s[el].Value + '

').data('el', JSON.stringify(s[el]))); } else { drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el]))); } } else if (drop.data('thumbnails')) { var bgVariantImage if (s[el].Product) { if (s[el].Product.ImagesExt[0].ExternalUrl) { bgVariantImage = "url(" + s[el].Product.ImagesExt[0].ExternalUrl + ")"; } else { bgVariantImage = "url(img/" + s[el].Product.ImagesExt[0].Id + "/" + s[el].Product.ImagesExt[0].Link + ")"; } } else { var chcekImagesLoopObj = s[el].Supplies[0] while (!chcekImagesLoopObj.Product) { chcekImagesLoopObj = chcekImagesLoopObj.Supplies[0]; } if (chcekImagesLoopObj.Product.ImagesExt[0].ExternalUrl) { bgVariantImage = "url(" + chcekImagesLoopObj.Product.ImagesExt[0].ExternalUrl + ")"; } else { bgVariantImage = "url(img/" + chcekImagesLoopObj.Product.ImagesExt[0].Id + "/" + chcekImagesLoopObj.Product.ImagesExt[0].Link + ")"; } } if ((drop.data('thumbnails-option') === 'Grouping_First' && drop.data('attribute-id') === drop.data('first-attribute-id')) || (drop.data('thumbnails-option') === 'Grouping_Last' && drop.data('attribute-id') === drop.data('last-attribute-id')) || (drop.data('thumbnails-option') === 'Grouping_All')) { drop.append($('

' + s[el].Value + '

').data('el', JSON.stringify(s[el]))); } else { drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el]))); } } else { drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el]))); } }
Analogiczną zmianę wykonaj w sekcji:
function SetSupl(drop, s) { var form = drop.closest('#AddToCartForm'); var fDrop = form.find('.attributes-select'); drop.empty(); for (var el in s) { drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el]))); }
Instrukcję pętli for podmień na ten sam kod, co dla fragmentu znajdującego się w funkcji SetSuplFirst. Następne zmiany dotyczyć będą pliku html. Zmiany zostaną omówione na przykładzie pliku elements/product/product-details-3.html, lecz omawiany kod będzie identyczny dla innych widoków szczegółów towaru. Róźnić się będzie jedynie nazwa edytowanego pliku, a dokładniej cyfra znajdująca się w nazwie. Na początku wyszukaj fragment:
{% if product.Archival == false -%} {% if product.Clip or product.Batch -%} {% if product.Clip or product.Batch -%} {% endif -%}

{% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%}

Przedstawiony powyżej element div (linijka od 7 do 12) zamień na następujący kod:
{% assign pageLanguageShort = page.Language | Upcase -%} {% assign settingsVariableName = 'grapicalVariantsPresentationColors' | Append: pageLanguageShort -%} {% assign grapicalVariantsPresentationColorsData = settings[settingsVariableName] -%} {% if settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%} {% assign attributesThumbnails = true -%} {% endif -%}

{% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%} {% assign firstAttribute = product.Supplies.AttributeNames|First -%} {% assign lastAttribute = product.Supplies.AttributeNames|Last -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%} {% assign firstAttribute = product.Supplies.AttributeNames|First -%} {% assign lastAttribute = product.Supplies.AttributeNames|Last -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% else -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% endif -%}
Teraz znajdź:
{% elseif product.AttributesPolyvalent != empty -%} {% for attribute in product.AttributesPolyvalent -%}

{{ attribute.Name }}
{% assign i = 0 -%} {% for value in attribute.Values -%} {{ value.Value | H }} {% assign i = i | Plus: 1 -%} {% endfor -%} {% if i >= 4 -%} {% assign diff = i | Minus: 4 -%}
{{translations.ReadMore}} +{{diff}}
{% endif -%}

I powyższy kod zamień na:
{% elseif product.AttributesPolyvalent != empty -%} {% assign loopAttributeFlag = false -%} {% assign attributeQuantity = product.AttributesPolyvalent | Size -%} {% assign loopIterationVariable = 0 -%} {% for attribute in product.AttributesPolyvalent -%}

{{ attribute.Name }}
{% assign i = 0 -%} {% assign loopIterationVariable = loopIterationVariable | Plus: 1 -%} {% if settings.variantsGroupingAttribute == 'Grouping_First' and loopIterationVariable == 1 -%} {% assign loopAttributeFlag = true -%} {% elseif settings.variantsGroupingAttribute == 'Grouping_Last' and loopIterationVariable == attributeQuantity -%} {% assign loopAttributeFlag = true -%} {% elseif settings.variantsGroupingAttribute == 'Grouping_All' -%} {% assign loopAttributeFlag = true -%} {% else -%} {% assign loopAttributeFlag = false -%} {% endif -%} {% if settings.grapicalVariantsPresentation == 'Variants_Colors' and grapicalVariantsPresentationColorsData and loopAttributeFlag -%} {% assign variantsColorArr = grapicalVariantsPresentationColorsData | Split: '|||' -%} {% for value in attribute.Values -%} {% assign bgColorValue = '' -%} {% assign borderColorValue = '' -%} {% for colorValue in variantsColorArr -%} {% assign colorValueArr = colorValue | Split: '||' -%} {% assign colorValueName = colorValueArr[0] | Downcase -%} {% assign colorValueHash = colorValueArr[1] -%} {% assign colorValueToCheck = value.Value | H | Downcase -%} {% if colorValueName == colorValueToCheck -%} {% assign bgColorValue = colorValueHash -%} {% endif -%} {% endfor -%} {% if bgColorValue == '' -%} {% assign bgColorValue = '#FFFFFF' -%} {% endif -%} {% if bgColorValue != '#FFFFFF' or bgColorValue != settings.primaryPageBgColor -%} {% assign borderColorValue = bgColorValue -%} {% endif -%}

{{ value.Value | H }}

{% assign i = i | Plus: 1 -%} {% endfor -%} {% if i >= 4 -%} {% assign diff = i | Minus: 4 -%}
{{translations.ReadMore}} +{{diff}}
{% endif -%} {% else -%} {% for value in attribute.Values -%} {{ value.Value | H }} {% assign i = i | Plus: 1 -%} {% endfor -%} {% if i >= 4 -%} {% assign diff = i | Minus: 4 -%}
{{translations.ReadMore}} +{{diff}}
{% endif -%} {% endif -%}

W przypadku kiedy szablon Topaz umożliwia zakup z listy towarów, konieczne są zmiany w pliku partials/products-list/add-to-cart-popup.html. Jeśli Twój szablon nie posiada tej opcji, możesz pominąć ten krok. Na początku wyszukaj fragment:
{% if product.Archival == false -%} {% if product.Clip or product.Batch -%} {% if product.Clip or product.Batch -%} {% endif -%}

{% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%}
{% elseif product.AttributesPolyvalent != empty -%} {% for attribute in product.AttributesPolyvalent -%}
{{ attribute.Name }}
{% for value in attribute.Values -%} {{ value.Value | H }} {% endfor -%}

A następnie zamień go na:
{% if product.Archival == false -%} {% assign pageLanguageShort = page.Language | Upcase -%} {% assign settingsVariableName = 'grapicalVariantsPresentationColors' | Append: pageLanguageShort -%} {% assign grapicalVariantsPresentationColorsData = settings[settingsVariableName] -%} {% if settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%} {% assign attributesThumbnails = true -%} {% endif -%} {% if product.Clip or product.Batch -%} {% if product.Clip or product.Batch -%} {% endif -%}

{% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%} {% assign firstAttribute = product.Supplies.AttributeNames|First -%} {% assign lastAttribute = product.Supplies.AttributeNames|Last -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%} {% assign firstAttribute = product.Supplies.AttributeNames|First -%} {% assign lastAttribute = product.Supplies.AttributeNames|Last -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% else -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% endif -%}
{% elseif product.AttributesPolyvalent != empty -%} {% assign loopAttributeFlag = false -%} {% assign attributeQuantity = product.AttributesPolyvalent | Size -%} {% assign loopIterationVariable = 0 -%} {% for attribute in product.AttributesPolyvalent -%}
{{ attribute.Name }}
{% assign loopIterationVariable = loopIterationVariable | Plus: 1 -%} {% if settings.variantsGroupingAttribute == 'Grouping_First' and loopIterationVariable == 1 -%} {% assign loopAttributeFlag = true -%} {% elseif settings.variantsGroupingAttribute == 'Grouping_Last' and loopIterationVariable == attributeQuantity -%} {% assign loopAttributeFlag = true -%} {% elseif settings.variantsGroupingAttribute == 'Grouping_All' -%} {% assign loopAttributeFlag = true -%} {% else -%} {% assign loopAttributeFlag = false -%} {% endif -%} {% if settings.grapicalVariantsPresentation == 'Variants_Colors' and grapicalVariantsPresentationColorsData and loopAttributeFlag -%} {% assign variantsColorArr = grapicalVariantsPresentationColorsData | Split: '|||' -%} {% for value in attribute.Values -%} {% assign bgColorValue = '' -%} {% assign borderColorValue = '' -%} {% for colorValue in variantsColorArr -%} {% assign colorValueArr = colorValue | Split: '||' -%} {% assign colorValueName = colorValueArr[0] | Downcase -%} {% assign colorValueHash = colorValueArr[1] -%} {% assign colorValueToCheck = value.Value | H | Downcase -%} {% if colorValueName == colorValueToCheck -%} {% assign bgColorValue = colorValueHash -%} {% endif -%} {% endfor -%} {% if bgColorValue == '' -%} {% assign bgColorValue = '#FFFFFF' -%} {% endif -%} {% if bgColorValue != '#FFFFFF' or bgColorValue != settings.primaryPageBgColor -%} {% assign borderColorValue = bgColorValue -%} {% endif -%}

{{ value.Value | H }}

{% endfor -%} {% else -%} {% for value in attribute.Values -%} {{ value.Value | H }} {% endfor -%} {% endif -%}

Na koniec znajdź jeszcze fragment:
{% if product.Archival == false -%} {% if product.Clip or product.Batch -%} {% if product.Clip or product.Batch -%} {% endif -%}
{% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%}
{% elseif product.AttributesPolyvalent != empty -%} {% for attribute in product.AttributesPolyvalent -%}
{{ attribute.Name }}
{% assign i = 0 -%} {% for value in attribute.Values -%} {{ value.Value | H }} {% assign i = i | Plus: 1 -%} {% endfor -%} {% if i >= 4 -%} {% assign diff = i | Minus: 4 -%}
{{translations.ReadMore}} +{{diff}}
{% endif -%}

I zastąp go poniższym kodem:
{% if product.Archival == false -%} {% assign pageLanguageShort = page.Language | Upcase -%} {% assign settingsVariableName = 'grapicalVariantsPresentationColors' | Append: pageLanguageShort -%} {% assign grapicalVariantsPresentationColorsData = settings[settingsVariableName] -%} {% if settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%} {% assign attributesThumbnails = true -%} {% endif -%} {% if product.Clip or product.Batch -%} {% if product.Clip or product.Batch -%} {% endif -%}
{% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%} {% assign firstAttribute = product.Supplies.AttributeNames|First -%} {% assign lastAttribute = product.Supplies.AttributeNames|Last -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%} {% assign firstAttribute = product.Supplies.AttributeNames|First -%} {% assign lastAttribute = product.Supplies.AttributeNames|Last -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% else -%} {% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%} {% endif -%}
{% elseif product.AttributesPolyvalent != empty -%} {% assign loopAttributeFlag = false -%} {% assign attributeQuantity = product.AttributesPolyvalent | Size -%} {% assign loopIterationVariable = 0 -%} {% for attribute in product.AttributesPolyvalent -%}
{{ attribute.Name }}
{% assign i = 0 -%} {% assign loopIterationVariable = loopIterationVariable | Plus: 1 -%} {% if settings.variantsGroupingAttribute == 'Grouping_First' and loopIterationVariable == 1 -%} {% assign loopAttributeFlag = true -%} {% elseif settings.variantsGroupingAttribute == 'Grouping_Last' and loopIterationVariable == attributeQuantity -%} {% assign loopAttributeFlag = true -%} {% elseif settings.variantsGroupingAttribute == 'Grouping_All' -%} {% assign loopAttributeFlag = true -%} {% else -%} {% assign loopAttributeFlag = false -%} {% endif -%} {% if settings.grapicalVariantsPresentation == 'Variants_Colors' and grapicalVariantsPresentationColorsData and loopAttributeFlag -%} {% assign variantsColorArr = grapicalVariantsPresentationColorsData | Split: '|||' -%} {% for value in attribute.Values -%} {% assign bgColorValue = '' -%} {% assign borderColorValue = '' -%} {% for colorValue in variantsColorArr -%} {% assign colorValueArr = colorValue | Split: '||' -%} {% assign colorValueName = colorValueArr[0] | Downcase -%} {% assign colorValueHash = colorValueArr[1] -%} {% assign colorValueToCheck = value.Value | H | Downcase -%} {% if colorValueName == colorValueToCheck -%} {% assign bgColorValue = colorValueHash -%} {% endif -%} {% endfor -%} {% if bgColorValue == '' -%} {% assign bgColorValue = '#FFFFFF' -%} {% endif -%} {% if bgColorValue != '#FFFFFF' or bgColorValue != settings.primaryPageBgColor -%} {% assign borderColorValue = bgColorValue -%} {% endif -%}

{{ value.Value | H }}

{% assign i = i | Plus: 1 -%} {% endfor -%} {% if i >= 4 -%} {% assign diff = i | Minus: 4 -%}
{{translations.ReadMore}} +{{diff}}
{% endif -%} {% else -%} {% for value in attribute.Values -%} {{ value.Value | H }} {% assign i = i | Plus: 1 -%} {% endfor -%} {% if i >= 4 -%} {% assign diff = i | Minus: 4 -%}
{{translations.ReadMore}} +{{diff}}
{% endif -%} {% endif -%}

Ostatnim etapem zmian w szablonie Topaz w celu graficznej prezentacji atrybutów jest zmiana plików css w szablonie. Pliki ze stylami różnią się w zależności od wybranego szczegółu towaru. Poniższe zmiany dotyczą pierwszego i drugiego widoku szczegółów towaru. Zmiany dla pozostałych widoków przedstawione są w dalszej częsci artykułu. W pliku css/layout1.css zlokalizuj podany fragment:
.product-details .input-group .wrongInput{border-bottom:1px solid #ce283e !important}.product-details .input-group .wrongInput--info{font-size:11px;text-align:left;color:#ce283e;position:absolute;left:0%;margin-top:-10px}.product-details .input-group input[name="attributeEditable"]{margin:30px 0 15px;padding-bottom:10px}.product-details .input-group .attributes-select{display:inline-block}
A następnie zaraz po ostatnim znaku powyższego kodu wklej:
.product-details .input-group .button-option-variants{height:auto;font-size:13px;padding:0 8px}.product-details .input-group .button-option-variants .button-option-variants-content{display:flex;flex-direction:column;align-items:center;padding:5px 0;margin:0 auto}.product-details .input-group .button-option-variants .button-option-variants-content__color{width:50px;height:50px;border:1px solid {{settings.secondaryFontColor}};border-radius:50%;margin-bottom:5px;background-size:cover !important}.product-details .input-group .button-option-variants .button-option-variants-content__text{line-height:1em;width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
Na koniec odnajdź fragment:
.product-details .dropdown .dropdown-content{display:none;position:absolute;background-color:{{settings.primaryPageBgColor}};box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;overflow-y:auto;max-height:190px;min-width:220px;padding:10px 15px}
I zmień wartość maksymalnej wysokości:
max-height:180px;
Następne zmiany stylistyki szablonu Topaz dotyczą wyłącznie trzeciego i czwartego widoku szczegółów towaru. W przypadku pozostałych widoków, wszystkie zmiany zostały już przedstawione. W pliku css/layout2.css należy wyszukać w pliku fragment:
.productDetails-attributes .breakLine{display:block;width:100%;height:0;margin:0}
A następnie przed powyższym kodem dodaj:
.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-variants{height:auto;font-size:13px;padding:0 6px}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-variants .button-option-variants-content{display:flex;flex-direction:column;align-items:center;padding:10px 0}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-variants .button-option-variants-content__color{width:50px;height:50px;border:1px solid {{settings.secondaryFontColor}};border-radius:50%;margin-bottom:5px;background-size:cover !important}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-variants .button-option-variants-content__text{line-height:1em;width:65px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
Teraz odnajdź w pliku instrukcje:
.choose-attribute-popup .attribute-name,.choose-attribute-popup .attr-ed-name{color:{{settings.primaryFontColor}};width:30%;font-size:14px;font-weight:bold;line-height:1.43;letter-spacing:normal;margin-bottom:10px}.choose-attribute-popup .attribute-name::first-letter,.choose-attribute-popup .attr-ed-name::first-letter{text-transform:capitalize}
I wklej przed podanym fragmentem takie instrukcje:
.choose-attribute-popup .attributes-select .button-option-variants{height:auto;font-size:13px;padding:0 6px;width:fit-content;margin:0 auto}.choose-attribute-popup .attributes-select .button-option-variants .button-option-variants-content{display:flex;flex-direction:column;align-items:center;padding:10px 0}.choose-attribute-popup .attributes-select .button-option-variants .button-option-variants-content__color{width:50px;height:50px;border:1px solid {{settings.secondaryFontColor}};border-radius:50%;margin-bottom:5px;background-size:cover !important}.choose-attribute-popup .attributes-select .button-option-variants .button-option-variants-content__text{line-height:1em;width:65px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
Następnie wyszukaj fragment:
@media screen and (min-width: 769px){.productDetails .popup-dialog .form-container{width:35rem !important;max-width:unset !important;padding:3rem 4rem 2rem}}
Aby podmienić go na poniższe wartości:
@media screen and (min-width: 769px){.productDetails .popup-dialog .form-container{width:55rem !important;max-width:unset !important;padding:3rem 4rem 2rem}}
Kolejno zlokalizuj instrukcje:
.choose-attribute-popup .form-container{padding:20px}.choose-attribute-popup .input-group{width:100%;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.choose-attribute-popup .attributes-select{display:grid;width:100%;grid-template-columns:33% 33% 33%;grid-row-gap:10px;max-width:unset}
I zastąp je następującymi:
.choose-attribute-popup .form-container{padding:20px}.choose-attribute-popup .close-button{right:40px}.choose-attribute-popup .input-group{width:100%;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.choose-attribute-popup .attributes-select{display:grid;width:100%;grid-template-columns:16% 16% 16% 16% 16% 16%;column-gap:6px;grid-row-gap:10px;max-width:unset}
Ostatnim etapem zmian w pliku jest aktualizacja podanego kodu:
.choose-attribute-popup .attr-popup-button{width:calc(100%-34px);height:16px;font-size:14px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:16px;letter-spacing:1.2px;text-align:center}.choose-attribute-popup .button-option[data-selected="true"]{border:2px solid {{settings.linkFontColor}} !important}.choose-attribute-popup .attr-values{display:grid;grid-template-columns:33% 33% 33%;grid-row-gap:10px;width:100%;background-color:{{settings.primaryPageBgColor}} !important}
Na poniższy fragment:
.choose-attribute-popup .attr-popup-button{width:50%;margin:0 auto;height:16px;font-size:14px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:16px;letter-spacing:1.2px;text-align:center}.choose-attribute-popup .button-option[data-selected="true"]{border:2px solid {{settings.linkFontColor}} !important}.choose-attribute-popup .attr-values{display:grid;grid-template-columns:16% 16% 16% 16% 16% 16%;column-gap:6px;grid-row-gap:10px;width:100%;background-color:{{settings.primaryPageBgColor}} !important}
W przypadku trzeciego i czwartego widoku szczegółów towaru, konieczne są jeszcze dodatkowe zmiany w pliku css/layout-m0.css. Na początku wyszukaj fragment:
.productDetails .popup-dialog .main-title{max-width:85%}.productDetails .popup-dialog .primary-action-button{line-height:11px}.productDetails .popup-dialog .form-container{width:95%;padding:2rem 1.5rem;overflow-y:scroll;max-height:90vh}
Teraz podmień go na poniższy kod:
.productDetails .popup-dialog .main-title{max-width:85%}.productDetails .popup-dialog .primary-action-button{line-height:11px}.productDetails .popup-dialog .form-container{width:95%;padding:2rem 1.2rem;overflow-y:scroll;overflow-x:hidden;max-height:90vh}
Na koniec odnajdź w pliku instrukcje:
@media screen and (max-width: 400px){.choose-attribute-popup .attributes-select,.choose-attribute-popup .attr-values{grid-template-columns:49% 49%}
I zastąp je następującym fragmentem:
@media screen and (max-width: 768px){.choose-attribute-popup .attributes-select,.choose-attribute-popup .attr-values{grid-template-columns:33% 33% 33%;column-gap:0}.choose-attribute-popup .button-option-variants{padding:0 4px;word-break:break-word}.close-button{right:8px !important}.attr-popup-button{width:calc(100% - 34px) !important}.button-option-variants-content{padding:8px 0}}

Migracja do nowszej biblioteki klienta Google

Wskazówka

Wstęp
W wersji 2022.4. dostosowaliśmy logowanie do e-Sklepu z pomocą nowszej biblioteki usług tożsamości Google we wszystkich standardowych szablonach Comarch. Proces jest zoptymalizowany i przyjazny dla użytkownika. Ujednolicone zostały także przyciski logowania we wszystkich szablonach Comarch. Poniżej znajdują się informację o tym w jaki sposób zaimplementować wspomnianą zmianę do wszystkich standardowych szablonów.
Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js, html i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Instrukcje do szablonów:

Szafir

Topaz

Bursztyn

Agat

Opal

Szafir
Implementacja dla szablonu Szafir ukazana jest w artykule Logowanie do sklepu za pomocą konta Google i Facebook - implementacja w szablonie Szafir, ponieważ w tym szablonie funkcja ta jest również dostępna od wersji 2022.4.
Topaz

Pliki html

Na początek w pliku base_layout.html wyszukaj fragment crossorigin="anonymous". Powinien wystąpić raz w całym pliku. Dokładnie w linijkę pod tym elementem wklej ten fragment kodu:

Następnie w pliku static-elements/login/login.html wyszukaj fragment:

{% if config.External.Facebook or config.External.Google -%}
Zamień znajdujący się pomiędzy tym fragmentem a odpowiadającym mu elementem "{% endif -%}" fragment kodu na :
{{translations.Com_Or}}
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}

{{translations.Login_Fb}}

{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}
{% endif -%}

Kolejną czynnością w plikach html dla szablonu Topaz będzie zamiana w pliku partials/customer/account-data.html całego tego fragmentu:

{% if config.External.Facebook or config.External.Google -%}

{{ translations.ExternalWebsites }} {% if customer-profile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customer-profile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.ConnectAccount}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %} {{translations.ConnectAccount}} {% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.ConnectAccount}} {% endif %} {% if config.External.Google and config.External.Google.ClientID != '' %} {{translations.ConnectAccount}} {% endif %} {% endif %}

{% endif -%} Na odpowiadający mu i poprawiony fragment:
{% if config.External.Facebook or config.External.Google -%}

{{translations.ExternalWebsites}} {% if customer-profile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customer-profile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.ConnectFb}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %} {{translations.ConnectGoogle}} {% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.ConnectFb}} {% endif %} {% if config.External.Google and config.External.Google.ClientID != '' %} {{translations.ConnectGoogle}} {% endif %} {% endif %}

{% endif -%}

Następnie należy dokonać zmian w plikach koszyka. W zależności od wybranej wariancji w kreatorze pliki będą się róźnić numerkiem na końcu. Jednak zmiany w html są identyczne dla obydwóch wariancji. W pliku elements/cart/cart-1.html lub /cart-2.html wyszukaj fragment:

{% if config.External.Facebook or config.External.Google -%}

{{translations.LoginBy}}
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %} {% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%} {% endif -%}
{% endif -%} Następnie zamień ten fragment na wskazany poniżej:
{% if config.External.Facebook or config.External.Google -%}

{{translations.Com_Or}}
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}

{{translations.Login_Fb}}

{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}
{% endif -%}

{% endif -%}
Pliki JavaScript

Zamień całą zawartość pliku js/google-login.js na ten kod:

function handleCredentialResponse(response) { setTimeout(function() { $.post(null,{ __action: 'External/GoogleLogin', __CSRF: __CSRF, id_token: response.credential },function(result){ if (result.action.Result) { window.location.replace(''); } else if (result.action.Code === 108) { var errMsg = document.querySelector('#google-signin').dataset.errorMsg; createMessage(errMsg); } else { createMessage(result); } }); }, 1000); } window.onload = function () { google.accounts.id.initialize({client_id: __googleID, callback: handleCredentialResponse}) google.accounts.id.renderButton( document.getElementById("google-signin"), { theme: "outline", size: "large", width: "250", logo_alignment: "center", text: "signin_with"} ); $('body').on('click', '#linkGoogleAccount', function(){ setTimeout(function() { $.post(null,{ __action: 'External/GoogleAccountLink', __CSRF: __CSRF, userID: __googleID },function(result){ if (result.action.Result) { location.reload(); } else { createMessage(result); } }); }, 1000); }); $('body').on('click', '#unlinkGoogleAccount', function(){ $.post(null,{ __action: 'External/GoogleAccountUnlink', __CSRF: __CSRF },function(result){ if (result.action.Result) { location.reload(); } else { createMessage(result); } }); }); $('body').on('click', '.logout', function () { googleLogout(); }); } function googleLogout() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut(); } function createMessage(obj) { if (obj.action.Code != 100) { app.showTemporaryPopup(obj.action.Message); } }

W pliku js/layout3.js wyszukaj frazę clearInterval(intervalAddress);. Pod jej pierwszym wystąpieniem dodaj fragment location.reload();, w taki sposób jak jest to przedstawione w kodzie poniżej:

clearInterval(intervalAddress); } }, 1000); location.reload();

Pliki css

W pliku css/layout0.css wyszukaj frazę login-container. Następnie zamień kod znajdujący się za tą frazą na odpowiadający mu fragment znajdujący się poniżej:

.login-container{`max-width:100%;width:30rem;padding:7rem 3rem;box-sizing:border-box;margin:0 auto}.login-container .form__input-wrapper{display:inline-block;position:relative;width:calc(100% - 30px);margin-left:30px;background-color:inherit;margin-bottom:23px}.login-container .form__icons:not(.form__preview){color:{{settings.primaryFontColor}};position:absolute;transform:translateY(-50%);top:20px;left:-30px}.login-container .form__icons.form__preview svg{fill:{{settings.linkFontColor}}}.login-container .form .form__icon_left,.login-container .form__icon_left{left:0}.login-container .form select{border-bottom:1px solid {{settings.primaryFontColor}}}.login-form__signIn{color:{{settings.primaryFontColor}};text-align:center;margin:0;font-weight:300;font-size:32px;display:block}.login-form__welcomeMsg{margin:0.6rem 0 4rem 0;color:{{settings.primaryFontColor}};opacity:0.65;text-align:center}.login-form__more-options{margin:0 0 18px;display:block;text-align:right}.login-form__registerLink{display:block;margin:20px auto 70px;text-align:center}.login-form__forget-password{font-size:12px;font-weight:300;color:{{settings.primaryFontColor}};text-decoration:none}.login-form__register{color:{{settings.linkFontColor}};font-weight:400;font-size:16px}.login-form__submit{margin:0 auto 2.5rem;width:100%;box-sizing:border-box;padding:.8rem 0;display:block;height:auto}.login-container .login-form__socialButtons{display:block;width:100%;font-size:14px;color:{{settings.primaryFontColor}};text-align:center}.login-container .login-form__socialButtons .login-form__socialButtons__buttons{display:flex;flex-direction:column}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container{display:flex;justify-content:center;align-items:center}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook{display:flex;justify-content:center;align-items:center;border:1px solid #dadce0;width:248px;min-width:248px;height:38px;margin-top:35px;cursor:pointer;background-color:#FFF;color:#3c4043;margin-left:1px;border-radius:4px;font-weight:500;letter-spacing:0.3px}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook:hover{background-color:#f9faff;border:1px solid #dbe1ee}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .button__Social__google{display:flex;justify-content:center;align-items:center;margin-top:35px;cursor:pointer;background-color:#FFF}.login-container .login-form__socialButtons .login-form__socialButtons__title{display:block;width:100%;text-align:center;margin:50px 0 15px}.login-container .login-form__socialButtons .GFbLoginIcon{width:30px;height:30px;margin-right:7px}.login-container .login-form__socialButtons .FBIcon{width:21px;height:21px}

Następnie w pliku css/layout2.css wyszukaj frazę login-form__socialButtons. Zamień kod znajdujący się za pierwszym wystąpieniem tej frazy (łącznie z tą frazą) na ten wskazany poniżej:

.login-form__socialButtons{display:block;width:100%;font-size:14px;color:{{settings.primaryFontColor}};text-align:center}.login-form__socialButtons .login-form__socialButtons__buttons{display:flex;flex-direction:column}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container{display:flex;justify-content:center;align-items:center}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook{display:flex;justify-content:center;align-items:center;border:1px solid #dadce0;width:248px;min-width:248px;height:38px;margin-top:20px;cursor:pointer;background-color:#FFF;color:#3c4043;margin-left:1px;border-radius:4px;font-weight:500;letter-spacing:0.3px}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook:hover{background-color:#f9faff;border:1px solid #dbe1ee}.login-form__socialButtons .login-form__socialButtons__buttons .button__Social__google{display:flex;justify-content:center;align-items:center;margin-top:20px;cursor:pointer;background-color:#FFF}.login-form__socialButtons .login-form__socialButtons__title{display:block;width:100%;text-align:center;margin:20px 0 0 0;font-size:20px;letter-spacing:1.2px}.login-form__socialButtons .GFbLoginIcon{width:30px;height:30px;margin-right:7px}.login-form__socialButtons .FBIcon{width:21px;height:21px}.primary-action-button .angleRight{fill:{{settings.primaryBtnFontColor}};margin-bottom:-3px;width:16px !important;height:16px !important}.primary-action-button:hover .angleRight{fill:{{settings.primaryBtnHoverFontColor}}}.primary-action-button--disabled .angleRight{fill:{{settings.primaryBtnFontColor}};margin-bottom:-3px;width:16px !important;height:16px !important}.primary-action-button--disabled:hover .angleRight{fill:{{settings.primaryBtnHoverFontColor}}}.cartContainer .validation-info__container{margin-top:6px}

Przygotowanie tekstów

Ostatnim etapem implementacji będzie dodanie odpowiednich tekstów do swojego szablonu. Odbywa się to poprzez opcję Tłumaczenia , która znajduje się w Panelu administracyjnym sklepu. Dokładna jej lokalizacja ukazana jest poniżej. W celu dodania tekstu klikamy przycisk dodaj. Dodajemy teksty według poniższej tabeli.

Id Tekst

ConnectFb Połącz konto z Facebookiem

ConnectGoogle Połącz konto z Google

Bursztyn

Pliki html

Na początek w pliku _layout.html wyszukaj fragment crossorigin="anonymous". Powinien wystąpić raz w całym pliku. Dokładnie w linijkę pod tym elementem wklej ten fragment kodu:

W pliku customer/login/login-form.html wyszukaj fragment:

{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}

{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
{% endif -%} Następnie zamień go na ten wskazany poniżej:
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}

{{translations.Login_Fb}}

{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}

{% endif -%}

W pliku customer/registation.html wyszukaj fragment :

{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' -%}

{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
{% endif -%} Następnie zastąp go kodem ukazanym poniżej :
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' -%}

{{translations.Login_Fb}}

{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}

{% endif -%}

Następnie w pliku customer/profile-account.html wyszukaj fragment :

{% if customerProfile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customerProfile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Connect_Fb}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Connect_Google}} {% endif %} {% else %} {% if config.External.Facebook.AppID != '' and config.External.Facebook %} {{translations.Connect_Fb}} {% endif %} {% if config.External.Google.ClientID != '' and config.External.Google %} {{translations.Connect_Google}} {% endif %} {% endif %}
Następnie zastąp ten fragment tym wskazanym poniżej:
{% if customerProfile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customerProfile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Connect_Fb}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Connect_Google}} {% endif %} {% else %} {% if config.External.Facebook.AppID != '' and config.External.Facebook %} {{translations.Connect_Fb}} {% endif %} {% if config.External.Google.ClientID != '' and config.External.Google %} {{translations.Connect_Google}} {% endif %} {% endif %}

Pliki JavaScript

W pliku js/order.js wyszukaj elemnt :

sessionStorage.removeItem('parcelSelected');
Powinien on wystąpić w tym pliku raz. Dokładnie w tym obszarze dokonaj zmian według fragmentu poniżej:
CreateTooltip(d.action); lazyCheck(); location.reload(); $('html, body').animate({ scrollTop: $('#order-form').offset().top }); $(document).trigger('stepChanged', [step]); sessionStorage.removeItem('parcelSelected');

Następnie w plikujs/google-login.js zastąp cały kod tym wskazanym poniżej :

function handleCredentialResponse(response) { setTimeout(function() { $.post(null,{ __action: 'External/GoogleLogin', __CSRF: __CSRF, id_token: response.credential },function(result){ if (result.action.Result) { window.location.replace(''); } else if (result.action.Code === 108) { var errMsg = document.querySelector('#google-signin').dataset.errorMsg; CreateTooltip({Type: 'err', Message: errMsg}); } else { CreateTooltip(result.action); } }); }, 1000); } window.onload = function () { google.accounts.id.initialize({client_id: __googleID, callback: handleCredentialResponse}) google.accounts.id.renderButton( document.getElementById("google-signin"), { theme: "outline", size: "large", width: "325", logo_alignment: "center", text: "signin_with"} ); $('body').on('click', '#linkGoogleAccount', function(){ setTimeout(function() { $.post(null,{ __action: 'External/GoogleAccountLink',_csrf: __CSRF, userID: __googleID},function(result){ if (result.action.Result) { location.reload(); } else { CreateTooltip(result.action); } }); }, 6000); }); $('body').on('click', '#unlinkGoogleAccount', function(){ $.post(null,{ __action: 'External/GoogleAccountUnlink', __csrf: __CSRF},function(result){ if (result.action.Result) { location.reload(); } else { CreateTooltip(result.action); } }); }); }

Pliki scss

W pliku scss/main.scss wyszukaj fragment:

.social-button { cursor: pointer; background-color: #4267b2; color: #fff; margin: 15px auto; padding: 15px 15px 10px; text-align: center; position: relative; transition: 200ms; display: block; .fa { font-size: 26px; position: relative; top: 5px; line-height: 0; margin-right: 5px; } } .client-panel { .social-button { &.google-button { background-color: #ea4335; } } } .register.container { .google-social-btn { margin-top: -15px; } } .google-social-btn { background-color: #ea4335; font-size: inherit; border: none; border-radius: 0; margin-top: 5px; &:hover { background-color: #da4639; } } .login-social-button { display: block; padding: 12px 0 13px; float: left; width: 100%; .fa-facebook-official { margin-right: 10px; } }
Następnie zamień ten fragment według tego wskazanego poniżej :
.social-button { cursor: pointer; background-color: #FFF; color: #606060; margin: 15px auto; padding: 15px 15px 10px; text-align: center; position: relative; transition: 200ms; display: block; box-shadow: 0px 1px 1px 1px lightgray; font-weight: 700; .GLoginIcon{ width: 30px; margin-right: 5px; } .FbLoginIcon{ width:33px; margin-right: 5px; } } .social-button:hover{ background-color: #E9E9E5; transition: 0,5s; } .register.container { .google-social-btn { margin-top: -15px; } } .login-social-button { font-family: system-ui; border: 1px solid #dadce0; border-radius: 4px; display: flex; justify-content: center; align-items: center; float: left; width: 325px; height: 44px; font-weight: 500; margin: 15px auto; color: #3c4043; cursor: pointer; .FbLoginIcon{ width:21px; margin-right: 5px; } } .login-social-button:hover{ background-color: #f9faff; border: 1px solid #dbe1ee; }

W pliku scss/main2.scss zamień podany fragment:

.fb-login-section { background-color: #fff; padding: 0 25px 25px; display: inline-block; margin-top: -30px; }
Na fragment wskazany poniżej:
.fb-login-section { background-color: #fff; display: inline-block; margin-top: -30px; padding: 0 25px 25px; } .fb-register-section{ background-color: #fff; display: inline-block; margin-top: -30px; padding: 0 25px 0px; }

Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji.

Agat

Pliki html

Na początek w pliku _layout.html wyszukaj fragment crossorigin="anonymous". Powinien wystąpić raz w całym pliku. Dokładnie w linijkę pod tym elementem wklej ten fragment kodu:

W pliku partials/common/login-form.html wyszukaj fragment:

{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %} {% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%} {% endif -%}
Występuje on na końu kodu. Zamień wspomniany fragment na ten przedstawiony poniżej:
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}

{{ translations.Login_Fb }}
{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
{% endif -%}

W pliku registration.html wyszukaj fragment:

{% if usr.Authenticated == 'false' and config.External.Facebook.AppID != '' and config.External.Facebook -%} {% endif -%} {% if usr.Authenticated == 'false' and config.External.Google.ClientID != '' and config.External.Google -%} {% endif -%}
Następnie zastąp go fragmentem wsazanym poniżej:
{% if usr.Authenticated == 'false' and config.External.Facebook.AppID != '' and config.External.Facebook -%}

{{ translations.Login_Fb }}
{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
{% endif -%}

W pliku customer-profile.html wyszukaj fragment :

{% if customerProfile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customerProfile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Connect_Fb}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Connect_Google}} {% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Connect_Fb}} {% endif %} {% if config.External.Google and config.External.Google.ClientID != '' %} {{translations.Connect_Google}} {% endif %} {% endif %}
Następnie podmień ten kod na:
{% if customerProfile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customerProfile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Connect_Fb}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Connect_Google}} {% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Connect_Fb}} {% endif %} {% if config.External.Google and config.External.Google.ClientID != '' %} {{translations.Connect_Google}} {% endif %} {% endif %}

W pliku partials/cart-content.html wyszukaj fragment:

{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %} {% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%} {% endif -%}
Zamień ten fragment tym wskzazanym poniżej:
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}

{{ translations.Login_Fb }}
{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
{% endif -%}
Pliki JavaScript

W pliku js/google-login.js zamień cały kod na ten wskazany poniżej:

function handleCredentialResponse(response) { setTimeout(function() { $.post(null,{ __action: 'External/GoogleLogin', __CSRF: __CSRF, id_token: response.credential },function(result){ if (result.action.Result) { window.location.replace(''); } else if (result.action.Code === 108) { var errMsg = document.querySelector('#google-signin').dataset.errorMsg; createMessage(errMsg); } else { createMessage(result); } }); }, 1000); } window.onload = function () { google.accounts.id.initialize({client_id: __googleID, callback: handleCredentialResponse}) google.accounts.id.renderButton( document.getElementById("google-signin"), { theme: "outline", size: "large", width: "355", logo_alignment: "center", text: "signin_with"} ); $('body').on('click', '#linkGoogleAccount', function(){ setTimeout(function() { $.post(null,{ __action: 'External/GoogleAccountLink', __CSRF: __CSRF, userID: __googleID },function(result){ if (result.action.Result) { location.reload(); } else { createMessage(result); } }); }, 1000); }); $('body').on('click', '#unlinkGoogleAccount', function(){ $.post(null,{ __action: 'External/GoogleAccountUnlink', __CSRF: __CSRF },function(result){ if (result.action.Result) { location.reload(); } else { createMessage(result); } }); }); $('body').on('click', '.logout', function () { googleLogout(); }); } function googleLogout() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut(); } function createMessage(obj) { if (obj.action.Code != 100) { application.createMessage(obj.action); } }

Pliki scss

W pliku scss/main.scss wyszukaj frazę span.social-button. Powinna występować raz w danym pliku. Następnie usuń z fragmentu pod tą linijką element width: 250px;, tak aby po edycji wyglądał w ten sposób:

span.social-button { margin: 5px; }

W pliku scss/main2.scss wyszukaj fragment:

.login-social-button, .client-profile .social-button { cursor: pointer; background-color: #4267b2; color: #fff; padding: 15px 15px 15px 50px; margin: 15px auto; position: relative; transition: 200ms; display: block; max-width: 400px; width: 100%; } .client-profile .social-button { display: inline-block; } .login-social-button i, .client-profile .social-button i { font-size: 32px; position: absolute; left: 13px; top: 9px; } .login-social-button:hover, .client-profile .social-button:hover { background-color: #365899; transition: 200ms; } .client-profile { .social-button { margin: 15px; &.google-button { background-color: #ea4335; } } } .google-social-btn { background-color: #ea4335; position: relative; display: block; margin: 0 auto; &:hover { background-color: #da4639; } }
Następnie zamień go na ten przedstawiony poniżej:
.login-social-button, .client-profile .social-button { cursor: pointer; background-color: #FFF; color: #7f7f7f; padding: 15px 0px 15px 0px; margin: 15px auto; position: relative; transition: 200ms; display: flex; max-width: 400px; width: 100%; justify-content: center; align-items: center; } .client-profile .social-button { display: inline-block; } .login-social-button, .client-profile .social-button{ font-size: 14px; display: flex; justify-content: center; align-items: center; top: 9px; border: 1px solid #dadce0; .GLoginIcon{ width: 30px; margin-right: 10px; } .FbLoginIcon{ width:33px; margin-right: 10px; } } .fblogin-button{ font-family: system-ui; width: 351px; height: 38px; padding: 0px; border-radius: 4px; font-weight: 500; color: #3c4043; top: 0; .FbLoginIcon{ width:21px; height: 21px; margin-right: 10px; } } .Googlelogin-button{ display: flex; justify-content: center; align-items: center; } .login-social-button:hover, .client-profile .social-button:hover { background-color: #f9faff; border: 1px solid #dbe1ee; }

Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji.

Opal

Pliki html

W pliku _layout.html wyszukaj frazę:

Dokładnie pod tym elementem wklej poniższy kod:

Następnie w plikach customer/login/login-form.html oraz customer/registration.html wyszukaj fragment:

{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %} {% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%} {% endif -%}
Zamień wspomniany fragment na ten ukazany poniżej:
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}

{{translations.Login_Fb}}`
{% endif -%} {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
{% endif -%}

W pliku customer/profile-account.html wyszukaj fragment kodu:

{% if customerProfile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customerProfile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' -%} {{translations.Connect_Fb}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' -%} {{translations.Connect_Google}} {% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Connect_Fb}} {% endif %} {% if config.External.Google and config.External.Google.ClientID != '' %} {{translations.Connect_Google}} {% endif %} {% endif %}
Zamień ten fragment na ten wskazany poniżej:
{% if customerProfile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customerProfile.LinkedAccounts -%} {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' -%} {{translations.Connect_Fb}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' -%} {{translations.Connect_Google}} {% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != '' %} {{translations.Connect_Fb}} {% endif %} {% if config.External.Google and config.External.Google.ClientID != '' %} {{translations.Connect_Google}} {% endif %} {% endif %}

Pliki JavaScript

W pliku js/google-login.js zamień cały kod na ten wskazany poniżej:

function handleCredentialResponse(response) { setTimeout(function() { $.post(null,{ __action: 'External/GoogleLogin', __csrf: __CSRF, id_token: response.credential },function(result){ if (result.action.Result) { window.location.replace(''); } else if (result.action.Code === 108) { var errMsg = document.querySelector('#google-signin').dataset.errorMsg; CreateTooltip({Type: 'err', Message: errMsg}); } else { CreateTooltip(result.action); } }); }, 1000); } window.onload = function () { google.accounts.id.initialize({client_id: __googleID, callback: handleCredentialResponse}) google.accounts.id.renderButton( document.getElementById("google-signin"), { theme: "outline", size: "large", width: "350", logo_alignment: "center", text: "signin_with"} ); $('body').on('click', '#linkGoogleAccount', function(){ setTimeout(function() { $.post(null,{ __action: 'External/GoogleAccountLink', __csrf: __CSRF, userID: __googleID },function(result){ if (result.action.Result) { location.reload(); } else { CreateTooltip(result.action); } }); }, 1000); }); $('body').on('click', '#unlinkGoogleAccount', function(){ $.post(null,{ __action: 'External/GoogleAccountUnlink', __csrf: __CSRF },function(result){ if (result.action.Result) { location.reload(); } else { CreateTooltip(result.action); } }); }); }

W pliku js/order.js wyszukaj fragment:

$('.order:not(.order-content)').replaceWith(d.template); lazyCheck(); $('html, body').animate({scrollTop: $('#order-form').offset().top}); $(document).trigger('stepChanged', [step]);
Następnie zamień ten fragment na ten wskazany poniżej:
location.reload(); lazyCheck(); $('html, body').animate({ scrollTop: $('#order-form').offset().top }); $(document).trigger('stepChanged', [step]);

Pliki scss

W pliku scss/main2.scss wyszukaj fragment kodu:

.social-button { cursor: pointer; background-color: #4267b2; color: #fff; padding: 15px 15px 10px; text-align: center; margin: 15px auto; position: relative; transition: 200ms; max-width: 350px; display: block; .fa { font-size: 26px; position: relative; top: 4px; line-height: 0; margin-right: 5px; } } .client-panel { .social-button { &.google-button { background-color: #ea4335; } } } .google-social-btn { background-color: #ea4335; font-size: inherit; border: none; border-radius: 0; margin-top: 5px; &:hover { background-color: #da4639; } } .login-social-button { display: block; padding: 14px 10px 11px; width: 100%; .fa-facebook-official { margin-right: 10px; } }
Następnie zamień ten fragment na kod wskazany poniżej:
.social-button { cursor: pointer; background-color: #FFF; color: #3c4043; padding: 15px 15px 10px; text-align: center; margin: 15px auto; position: relative; transition: 200ms; max-width: 350px; display: block; border: 1px solid #dadce0; border-radius: 4px; .GLoginIcon{ width: 30px; margin-right: 5px; } .FbLoginIcon{ width:33px; margin-right: 5px; } } .social-button:hover{ background-color: #f9faff; border: 1px solid #dbe1ee; } .facebookLogin-button{ font-family: system-ui; font-weight: 500; display: flex; justify-content: center; align-items: center; height: 38px; padding: 0; .FbLoginIcon{ width:21px; margin-right: 5px; } } .google-social-btn { display: flex; justify-content: center; align-items: center; height: 38px; }

Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji.

Przekreślenie na atrybutach towaru zgrupowanego - szablon Topaz

Wstęp

W szablonie Topaz, przy włączonej kontroli stanów magazynowych, w przypadku braku produktu towaru zgrupowanego wyświetlany jest przycisk "Powiadom mnie o dostępności". Z tego artykułu dowiesz się jak zmodyfikować swój szablon, aby dodatkowo wyświetlać przekreślenie na niedostępnych atrybutach.
Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

Zmiany w plikach szablonu
Przedstawione w artykule modyfikacje są kompatybilne ze wszystkimi czterema widokami szczegółów towaru w szablonie Topaz. Kod odpowiedzialny za przekreślenie na atrybutach, będzie prawie identyczny dla każdego z widoków. Minimalne różnice zostały odpowiednio opisane. Edycję szablonu rozpocznij od pliku js/layout2.js. Struktura części kodu, którą należy zmienić może się różnić, w zależności czy masz zaimplementowaną graficzną prezentację atrybutów. Dlatego przedstawione zostaną dwa przypadki edycji omawianego pliku. W przypadku braku implementacji graficznej prezentacji atrybutów, odnajdź fragment: function SetSuplFirst(drop, s, lvl, valId) { var form = drop.parent().parent().parent(); var fDrop = form.find('.attributes-select'); drop.empty(); for (var el in s) { drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el]))); } Kod znajdujący się w pętli for zamień na: var isUnavailable = false; var unavailableClassName = ""; if (s[el].Product) { if (s[el].Product.StockLevel && s[el].Product.StockLevel.Value === 0) { isUnavailable = true; } if (s[el].StockLevel && s[el].StockLevel.Value === 0) { isUnavailable = true; } } else { var checkStockLevelLoopObj = s[el]; var checkSuppliesStockLevelLoopObj = s[el]; while (typeof checkStockLevelLoopObj.Product === 'undefined') { checkSuppliesStockLevelLoopObj = checkStockLevelLoopObj.Supplies; checkStockLevelLoopObj = checkStockLevelLoopObj.Supplies[0]; } if (checkSuppliesStockLevelLoopObj.length > 1) { for (var supply in checkSuppliesStockLevelLoopObj) { if (checkSuppliesStockLevelLoopObj[supply].Product && checkSuppliesStockLevelLoopObj[supply].Product.StockLevel && checkSuppliesStockLevelLoopObj[supply].Product.StockLevel !== 0) { break; } else { if (checkSuppliesStockLevelLoopObj[supply].Product && !checkSuppliesStockLevelLoopObj[supply].Product.StockLevel) { break; } else { isUnavailable = true; } } if (checkSuppliesStockLevelLoopObj[supply].StockLevel && checkSuppliesStockLevelLoopObj[supply].StockLevel.Value !== 0) { break; } else { if (!checkSuppliesStockLevelLoopObj[supply].StockLevel) { break; } else { isUnavailable = true; } } } } else { if (checkStockLevelLoopObj.Product && checkStockLevelLoopObj.Product.StockLevel && checkStockLevelLoopObj.Product.StockLevel === 0) { isUnavailable = true; } if (checkStockLevelLoopObj.StockLevel && checkStockLevelLoopObj.StockLevel.Value === 0) { isUnavailable = true; } } } if (isUnavailable) { unavailableClassName = " button-option-unavailable"; } drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el]))); Następnie wyszukaj fragment: function SetSupl(drop, s) { var form = drop.closest('#AddToCartForm'); var fDrop = form.find('.attributes-select'); drop.empty(); for (var el in s) { drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el]))); } I instrukcje w pętli for zastąp tym samym kodem co w przypadku przedstawionej wyżej modyfikacji funkcji SetSuplFirst. Dla przypadku zaimplementowanej graficznej prezentacji atrybutów, zlokalizuj fragment: function SetSuplFirst(drop, s, lvl, valId) { var form = drop.parent().parent().parent(); var fDrop = form.find('.attributes-select'); //pobieram wszystkie kontenery dla poziomów drop.empty(); var attributesColorsData = drop.data('variants-colors'); var pageLanguage = drop.data('page-language'); var attributesColors = []; if (attributesColorsData) { attributesColorsData = attributesColorsData.split('|||'); for (var i = 0; i < attributesColorsData.length; i++) { var attributesColor = attributesColorsData[i].split('||'); var attributeColorName = attributesColor[0].split('|'); switch (pageLanguage) { case 1: attributeColorName = attributeColorName[0]; break; case 2: attributeColorName = attributeColorName[1]; break; case 3: attributeColorName = attributeColorName[2]; break; case 5: attributeColorName = attributeColorName[3]; break; default: break; } attributesColors.push([attributeColorName,attributesColor[1]]); } } for (var el in s) { if (drop.data('variants-colors')) { if ((drop.data('colors-option') === 'Grouping_First' && drop.data('attribute-id') === drop.data('first-attribute-id')) || (drop.data('colors-option') === 'Grouping_Last' && drop.data('attribute-id') === drop.data('last-attribute-id')) || (drop.data('colors-option') === 'Grouping_All')) { Teraz w pętli for (var el in s), przed pierwszą instrukcją sterującą if wklej: var isUnavailable = false; var unavailableClassName = ""; if (s[el].Product) { if (s[el].Product.StockLevel && s[el].Product.StockLevel.Value === 0) { isUnavailable = true; } if (s[el].StockLevel && s[el].StockLevel.Value === 0) { isUnavailable = true; } } else { var checkStockLevelLoopObj = s[el]; var checkSuppliesStockLevelLoopObj = s[el]; while (typeof checkStockLevelLoopObj.Product === 'undefined') { checkSuppliesStockLevelLoopObj = checkStockLevelLoopObj.Supplies; checkStockLevelLoopObj = checkStockLevelLoopObj.Supplies[0]; } if (checkSuppliesStockLevelLoopObj.length > 1) { for (var supply in checkSuppliesStockLevelLoopObj) { if (checkSuppliesStockLevelLoopObj[supply].Product && checkSuppliesStockLevelLoopObj[supply].Product.StockLevel && checkSuppliesStockLevelLoopObj[supply].Product.StockLevel !== 0) { break; } else { if (checkSuppliesStockLevelLoopObj[supply].Product && !checkSuppliesStockLevelLoopObj[supply].Product.StockLevel) { break; } else { isUnavailable = true; } } if (checkSuppliesStockLevelLoopObj[supply].StockLevel && checkSuppliesStockLevelLoopObj[supply].StockLevel.Value !== 0) { break; } else { if (!checkSuppliesStockLevelLoopObj[supply].StockLevel) { break; } else { isUnavailable = true; } } } } else { if (checkStockLevelLoopObj.Product && checkStockLevelLoopObj.Product.StockLevel && checkStockLevelLoopObj.Product.StockLevel === 0) { isUnavailable = true; } if (checkStockLevelLoopObj.StockLevel && checkStockLevelLoopObj.StockLevel.Value === 0) { isUnavailable = true; } } } if (isUnavailable) { unavailableClassName = " button-option-unavailable"; } Następnie, w obrębie wspomnianej wyżej pętli for, wyszukaj wszystkie wystąpienia kodu zawierające fragment: drop.append($(' I dla wszystkich znalezionych przypadków, na końcu fragmentów takich jak przedstawiony powyżej, dodaj kod: ' + unavailableClassName + ' Na koniec zmian w pliku, odnajdź poniższe instrukcje: function SetSupl(drop, s) { var form = drop.closest('#AddToCartForm'); var fDrop = form.find('.attributes-select'); //pobieram wszystkie kontenery dla poziomów drop.empty(); var attributesColorsData = drop.data('variants-colors'); var pageLanguage = drop.data('page-language'); var attributesColors = []; if (attributesColorsData) { attributesColorsData = attributesColorsData.split('|||'); for (var i = 0; i < attributesColorsData.length; i++) { var attributesColor = attributesColorsData[i].split('||'); var attributeColorName = attributesColor[0].split('|'); switch (pageLanguage) { case 1: attributeColorName = attributeColorName[0]; break; case 2: attributeColorName = attributeColorName[1]; break; case 3: attributeColorName = attributeColorName[2]; break; case 5: attributeColorName = attributeColorName[3]; break; default: attributeColorName = attributeColorName[0]; break; } attributesColors.push([attributeColorName,attributesColor[1]]); } } for (var el in s) { if (drop.data('variants-colors')) { if ((drop.data('colors-option') === 'Grouping_First' && drop.data('attribute-id') === drop.data('first-attribute-id')) || (drop.data('colors-option') === 'Grouping_Last' && drop.data('attribute-id') === drop.data('last-attribute-id')) || (drop.data('colors-option') === 'Grouping_All')) { Teraz dokonaj analogicznych modyfikacji jak w obrębie funkcji SetSuplFirst. Pamiętaj, że tym razem, zmiany we wszystkich wystąpieniach kodu: drop.append($(' Musisz dokonać w obrębie funkcji SetSupl. Do dokończenia zmian w szablonie pozostało zmodyfikowanie pliku ze stylami. W zależności od wygenerowanego w kreatorze szablonu widoku szczegółów towaru, nazwa edytowanego pliku będzie się różnić. Zmiany stylistyki w szablonie są identyczne dla wszystkich widoków, lecz umieszczane w innych fragmentach plików. Najpierw przedstawiona zostanie modyfikacja przeznaczona dla pierwszego i drugiego widoku szczegółów towaru. Otwórz plik css/layout0.css i wyszukaj fragment: .product-details .input-group input[type='button'].active,.product-details .input-group .attributes-select .button-option.active,.product-details .set .button-option.active,.product-details .set .button-option-sets.active{border:2px solid {{settings.paginationActiveBorderColor}};background-color:transparent} Teraz tuż za ostatnim znakiem przedstawionego kodu wklej instrukcje: .product-details .button-option-unavailable{position:relative;color:{{settings.secondaryFontColor}};transition:300ms}.product-details .button-option-unavailable::before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;transition:300ms;background-color:rgba(226,226,226,0.2)}.product-details .button-option-unavailable::after{content:"";display:block;position:absolute;top:0;left:0;height:100%;width:100%;transition:300ms;cursor:pointer}@keyframes change-gradient-to-inactive{from{background:linear-gradient(to right top, transparent, transparent 48%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 52%, transparent)}to{background:linear-gradient(to right top, transparent, transparent 49%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 51%, transparent)}}@keyframes change-gradient-to-active{from{background:linear-gradient(to right top, transparent, transparent 49%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 51%, transparent)}to{background:linear-gradient(to right top, transparent, transparent 48%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 52%, transparent)}}.product-details .button-option-unavailable:not(.active){border:1px solid {{settings.secondaryFontColor}} !important}.product-details .button-option-unavailable:not(.active)::after{background:linear-gradient(to right top, transparent, transparent 49%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 51%, transparent);-webkit-animation:change-gradient-to-inactive 300ms;animation:change-gradient-to-inactive 300ms}.product-details .button-option-unavailable.active{border:2px solid {{settings.secondaryFontColor}} !important}.product-details .button-option-unavailable.active::after{background:linear-gradient(to right top, transparent, transparent 48%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 52%, transparent);-webkit-animation:change-gradient-to-active 900ms;animation:change-gradient-to-active 900ms} Poniżej natomiast pokazane są zmiany przeznaczone dla trzeciego i czwartego widoku szczegółów towaru. Otwórz plik css/layout0.css i wyszukaj fragment: .productDetails-attributes .button-option:not(.dropdown):not(.units-container){display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin-bottom:10px;flex-wrap:wrap}.productDetails-attributes .button-option:not(.dropdown):not(.units-container).active{border:2px solid {{settings.linkFontColor}};display:inline-flex}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) span{height:50px;padding-left:15px;padding-right:15px;font-size:14px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.71;letter-spacing:1.2px;text-align:center;color:{{settings.primaryFontColor}};border:2px solid {{settings.primaryPageBgColor}};cursor:pointer;transition:300ms;margin-right:5px}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) span:not(.active):hover{border-color:{{settings.secondaryFontColor}}} Następnie zaraz po ostatnim znaku powyższego fragmentu dodaj kod: .productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-unavailable{position:relative;color:{{settings.secondaryFontColor}};transition:300ms}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-unavailable::before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;transition:300ms;background-color:rgba(226,226,226,0.2)}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-unavailable::after{content:"";display:block;position:absolute;top:0;left:0;height:100%;width:100%;transition:300ms;cursor:pointer}@keyframes change-gradient-to-inactive{from{background:linear-gradient(to right top, transparent, transparent 48%, {{settings.linkFontColor}} 50%, {{settings.linkFontColor}} 50%, transparent 52%, transparent)}to{background:linear-gradient(to right top, transparent, transparent 49%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 51%, transparent)}}@keyframes change-gradient-to-active{from{background:linear-gradient(to right top, transparent, transparent 49%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 51%, transparent)}to{background:linear-gradient(to right top, transparent, transparent 48%, {{settings.linkFontColor}} 50%, {{settings.linkFontColor}} 50%, transparent 52%, transparent)}}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-unavailable:not(.active){border:1px solid {{settings.secondaryFontColor}}}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-unavailable:not(.active)::after{background:linear-gradient(to right top, transparent, transparent 49%, {{settings.secondaryFontColor}} 50%, {{settings.secondaryFontColor}} 50%, transparent 51%, transparent);-webkit-animation:change-gradient-to-inactive 300ms;animation:change-gradient-to-inactive 300ms}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-unavailable.active{border:1px solid {{settings.linkFontColor}}}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-unavailable.active::after{background:linear-gradient(to right top, transparent, transparent 48%, {{settings.linkFontColor}} 50%, {{settings.linkFontColor}} 50%, transparent 52%, transparent);-webkit-animation:change-gradient-to-active 900ms;animation:change-gradient-to-active 900ms}

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Oprawa wizualna sklepu jest bardzo ważnym elementem podczas prowadzenia sprzedaży w sieci. Narzędzie Kreator Wyglądu Comarch e-Sklep umożliwia stworzenie własnych, niepowtarzalnych szablonów wedle preferencji i potrzeb użytkowników. W intuicyjnym narzędziu jakim jest Kreator, będziesz w stanie zaprojektować wszelkie niezbędne funkcje, takie jak stronę główną, listę towarów, szczegóły towaru oraz koszyk. Jeśli Twój projekt szablonu został zaimportowany do e-Sklepu oraz skonfigurowany wedle Twoich preferencji (dodanie grafik do bannerów, modyfikacje kolorystyczne) masz możliwość jego zapisania, co będzie stanowić kopię bezpieczeństwa. Kopia bezpieczeństwa to dane, które w każdej chwili można odtworzyć w przypadku ich utracenia (np. poprzez przypadkowe usunięcie) lub częstego wprowadzania zmian. Dane, jakie może zawierać kopia bezpieczeństwa to szablon, który wcześniej został przez nas wygenerowany wraz z bannerami. Zaleca się wykonywanie kopii zapasowych oraz zabezpieczenie ich hasłem. Każda wykonana kopia zapasowa powinna zostać zapisana w bezpiecznym i dogodnym dla Użytkownika miejscu.
Jak wykonać kopię bezpieczeństwa?
W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu. W pustych polach znajdujących się w zakładce Eksport szablonu, opcjonalnie przed eksportem możesz uzupełnić powyższe dane, tj. Autora szablonu, e-mail, telefon i stronę WWW sklepu. Aby wyeksportować szablon, kliknij Eksportuj szablon. Wyeksportowany plik jest w formacie XML, a jego nazwa zawiera szablon oraz wersję, co znacznie ułatwia zarządzanie kopiami bezpieczeństwa w przypadku wykonywania ich regularnie.
Jak wyeksportować bannery?
Bannery, które znajdują się w Twoim sklepie możesz również wyeksportować tworząc kopię bezpieczeństwa. W tym celu także musisz przejść do Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie do zakładki Eksport szablonu. Obok przycisku Eksportuj szablon, znajduje się przycisk Eksportuj bannery, który musisz kliknąć aby bannery, które posiadasz w e-Sklepie zostały weksportowane. Kopia bezpieczeństwa jest również zapisywana w formacie XML, a nazwa pliku wskazuje na szablon, wersję i zawartość bannerów.
Jak zabezpieczyć hasłem swój szablon?
Jeśli chcesz, aby Twój szablon został zabezpieczony hasłem, a znajomość hasła była niezbędna podczas zaimportowania tego szablonu do e-Sklepu, musisz w tym celu przejść w Panelu Administracyjnym do sekcji Wygląd sklepu/ Ustawienia/ Ustawienia zaawansowane, następnie do zakładki Szablon. W tym miejscu nadasz hasło dla swojego szablonu. Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno:

Składać się z minimum 8 znaków,

Zawierać dużą literę,

Zawierać małą literę,

Zawierać cyfrę 0-9,

Zawierać znak specjalny – ‘!.+?;^]=-(&_)#=

Gotowe! Teraz Twój szablon został zabezpieczony hasłem. Jeśli wyeksportujesz szablon, który zabezpieczyłeś hasłem – podczas importu tego szablonu, będziesz musiał podać nadane wcześniej hasło. Jego brak uniemożliwi import szablonu, a podanie błędnego hasła spowoduje nieprawidłowe działanie szablonu po imporcie. Więcej informacji znajdziesz:

Kreator Wyglądu Comarch e-Sklep w nowym interfejsie

Gotowe szablony Comarch

Kreator szablonu Szafir B2B

Kreator Wyglądu Topaz B2C

Implementacja Google Analytics 4 w szablonach

Comarch e-Sklep jest zintegrowany z Google Analytics 4 dzięki prostej konfiguracji polegającej na dodaniu skryptu śledzącego w panelu administracyjnym. Dzięki zaimplementowanej w e-Sklepie warstwie danych (Data Layer) oraz obsłużonych domyślnie w darmowych szablonach Comarch skryptom uzyskasz dostęp do wielu funkcji Google Analytics takich jak: podstawowe śledzenie ruchu na Twoim sklepie oraz śledzenie transakcji e-commerce. Posiadając zmodyfikowany szablon również możesz korzystać z Google Analytics 4. Poniżej podpowiadamy jakie pliki HTML należy zmodyfikować, aby statystyki naliczały się w prawidłowy sposób. Zmodyfikuj następujące pliki. Szafir: base_layout.html partials/customer-profile/discounts/discount-elements.html partials/order/cart.html partials/order/thx.html partials/order/products-partials/set-aggregator.html partials/product/cart-product.html partials/product/product-presentation-forms.html js/init.min.js js/init-ui1.min.js js/init-ui2.min.js js/js.min.js Topaz: base_layout.html elements/cart/cart-1.html (lub cart-2.html) elements/product/product-details-1.html (lub 2,3,4) partials/cart/cart-item.html (lub partials/cart/new-cart/cart-item.html) partials/common/notify-about-availability-popup.html partials/customer/discounts/discount-elements.html js/layout0.min.js js/layout1.min.js js/layout2.min.js
Wskazówka
W celu wyodrębnienia zmian z owych plików, należy porównać dany plik z naszego szablonu z jego odpowiednikiem z najnowszej wersji szablonu

Trusted Shops – jak dodać logo do sklepu?

Wskazówka

Spis treści

Agat

Opal i Bursztyn

Wstęp
Trusted Shops to znak jakości z ochroną kupującego, przyznawany sklepom internetowym. Aby rozpocząć jego integrację z Comarch e-Sklep, najpierw musimy zarejestrować się na stronie TrustedShops. Po przejściu procesu rejestracji i otrzymaniu certyfikatu otrzymamy jego identyfikator, który jest potrzebny do połączenia go z naszym e-Sklepem.
Wprowadzenie identyfikatora Trusted Shops
W panelu administracyjnym należy wprowadzić identyfikator od Trusted Shops. Aby to zrobić, proszę przejść w Ustawienia/ Ustawiania sklepu/ Trusted Shops wpisać identyfikator i kliknąć przycisk Przyłącz. Następnie proszę podążać za poniższymi wskazówkami dotyczącymi właściwego szablonu.
Dodawanie loga Trusted Shops do e-Sklepu
Kolejnym krokiem w integracji platformy Trusted Shops jest dodanie loga platformy. Dokonuje się tego poprzez edycję kodu HTML szablonu naszego sklepu i wgranie odpowiednich poprawek wymaganych przez platformę. Kod ten posiada kilka parametrów konfiguracyjnych, które zostaną opisane w rozdziale poniżej. Natomiast dalsza część instrukcji zostanie poświęcona implementacji loga zależnie od używanego szablonu w Comarch e-Sklep.
Parametry konfiguracyjne

Fragment kodu ’yOffset’: ’60’, /* offset from page bottom */ określa wysokość, na jakiej ma się znajdować logo Trusted Shops. Często domyślnie jest to wartość 60. Zmiana tej wartości pozwala na dopasowanie elementu do wyglądu posiadanego szablonu.

Parametr ’variant’ odpowiada za wariant wyświetlania Trustbadge. Pozwala określić, które logo Trusted Shops będzie widoczne w naszym sklepie. Domyślnie wybrany wariant to 'reviews’, natomiast pozostałe warianty to 'default’, 'custom_reviews’ oraz 'custom’. Aby je zmienić, wystarczy wpisać nazwę wybranego wariantu w linijce kodu ’variant’:’reviews’, zastępując domyślnie wybrany wariant reviews.

Uwaga
Jeśli chcesz użyć wariantu „custom” lub „custom_reviews”, konieczne będą dodatkowe modyfikacje kodu Trustbadge i używanego szablonu. Więcej na ten temat przeczytasz na stronie TrustedShops
Wybrane warianty prezentują się następująco:
Agat

Etap I - skrypt główny
Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Więcej / Edytuj ustawienia zaawansowane ponownie Więcej / Edytuj HTML Krok 2. Przejdź do edycji pliku _layout.html, a następnie za pomocą narzędzia wyszukiwania odnajdź frazę </head>. Krok 3. Powyżej znalezionego fragmentu wklej poniższy skrypt, w którym wartość XXXXXXXXXXXXX należy zastąpić identyfikatorem od Trusted Shops:
Etap II - wstawienie dodatkowego skryptu w szablonie
Krok 1. Pozostając w powyższym obszarze z plikami szablonu należy przejść do edycji partials/ cart/ lastpagesscripts.html i podmienić kod pliku na poniższy skrypt: <div id="trustedShopsCheckout" style="display: none;"> <span id="tsCheckoutOrderNr">{{cart.PlacedOrder.Id}}</span> <span id="tsCheckoutBuyerEmail">{{cart.Customer.Email}}</span> <span id="tsCheckoutBuyerId">-</span> <span id="tsCheckoutOrderAmount">{{cart.OrderTotalValue}}</span> <span id="tsCheckoutOrderCurrency">{{currency}}</span> <span id="tsCheckoutOrderPaymentType">OTHER</span> </div> <script> (function(){try{trustbadge.reInitialize();}catch(err){}})(); </script> Krok 2. Następnie należy zapisać i opublikować szablon ( Zapisz i opublikuj )
Opal i Bursztyn

Etap I - skrypt główny
Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Więcej / Edytuj ustawienia zaawansowane ponownie Więcej / Edytuj HTML Krok 2. Przejdź do edycji pliku _layout.html, a następnie za pomocą narzędzia wyszukiwania odnajdź frazę </head>. Krok 3. Powyżej znalezionego fragmentu wklej poniższy skrypt, w którym wartość XXXXXXXXXXXXX należy zastąpić identyfikatorem od Trusted Shops:

Etap II - wstawienie dodatkowego skryptu w szablonie
Krok 1. Pozostając w powyższym obszarze z plikami szablonu należy przejść do edycji partials/ cart/ lastpagesscripts.html i podmienić kod pliku na poniższy skrypt: <div id="trustedShopsCheckout" style="display: none;"> <span id="tsCheckoutOrderNr">{{cart.PlacedOrder.Id}}</span> <span id="tsCheckoutBuyerEmail">{{cart.Customer.Email}}</span> <span id="tsCheckoutBuyerId">-</span> <span id="tsCheckoutOrderAmount">{{cart.OrderTotalValue}}</span> <span id="tsCheckoutOrderCurrency">{{currency}}</span> <span id="tsCheckoutOrderPaymentType">OTHER</span> </div> <script> (function(){try{trustbadge.reInitialize();}catch(err){}})(); </script> Krok 2. Następnie należy zapisać i opublikować szablon ( Zapisz i opublikuj )
Wskazówka
Instrukcja dotycząca dodawania logo Trusted Shops w szablonach Topaz, Szafir, One Page Shop znajduje się w artykule Trusted Shops.

Obsługa wtyczki Czatu Facebooka w szablonach

Wskazówka

Uwaga
Z dniem 9 maja 2024 roku wtyczka została oficjalnie wycofana. Więcej informacji można znaleźć w Centrum Pomocy Meta.
W niniejszym artykule dowiesz się w jaki sposób Twój szablon może obsługiwać wtyczkę Czatu Facebooka. Na początku omówiona zostanie ogólna instrukcja ustawienia wtyczki oraz opisane zostaną ustawienia w konfiguracji Facebooka, na które warto zwrócić uwagę. W dalszych punktach zostaną omówione wymagane zmiany w kodzie poszczególnych szablonów.
Uwaga
Instrukcja dotyczy dodania wtyczki dla standardowych szablonów Comarch od wersji 2021.2.

Spis treści

Instrukcja ogólna

Topaz, One Page Shop, Szafir

Bursztyn

Opal

Agat

Przykładowy kod do modyfikacji wyglądu wtyczki – wersja na komputery

Instrukcja ogólna
1. W przeglądarce internetowej otwieramy stronę https://business.facebook.com. Logujemy się swoimi danymi. 2. Wybieramy opcję Skrzynka odbiorcza. Z menu po prawej stronie wybieramy opcję Ustawienia. 3. Z listy po lewej wybieramy opcję Wtyczka czatu. Po załadowaniu się ustawień, znajduje się opcja Skonfiguruj wtyczkę czatu Klikamy przycisk Skonfiguruj. 4. Pokaże się małe okienko do konfiguracji. 5. Na początku mamy do wyboru metodę konfiguracji. Wybieramy opcję Standardowa. 6. W kroku pierwszym ustawiamy język, w jakim nasza wtyczka będzie pracować. 7. Krok drugi to dodanie naszej domeny. Zwróć uwagę na to, czy podana przez Ciebie domena posiada protokół http czy https. Podany w niniejszej konfiguracji musi się zgadzać z faktycznymi ustawieniami. Jeśli korzystasz z szablonu Topaz, One Page Shop lub Szafir, możesz pominąć kroki 8 oraz 9. W wygenerowanym przez Meta kodzie do wklejenia, znajdź tylko page_id i znajdujący się tam numer (identyfikator) skopiuj - będzie potrzebny w ustawieniach szablonu. 8. (Dla szablonu Bursztyn, Opal, Agat) Krok trzeci to kod potrzebny do dodania wtyczki do szablonu. Należy go skopiować przy użyciu przycisku Skopiuj kod. 9. (Dla szablonu Bursztyn, Opal, Agat) Wklej skopiowany przed chwilą kod w odpowiednie miejsce w Twoim szablonie. Instrukcja gdzie należy wkleić ten kod, znajduje się poniżej, dla każdego ze standardowych szablonów z osobna.
Opcjonalnie:
10. Przejdź do sekcji Dostosuj wtyczkę Wtyczka czatu gdzie można ustawić m.in. wyrównanie wtyczki do lewej lub prawej strony, jej motyw kolorystyczny a także odległość od dołu strony dla komputerów i urządzeń mobilnych. W tej sekcji możesz także dodatkowo ustawić automatyczne rozwijanie okna czatu oraz włączyć lub wyłączyć czat dla osób niezalogowanych do Facebooka bądź Messengera. 11. Przejdź do sekcji Rozpocznij konwersację gdzie można ustawić wiadomość powitalną a także włączyć/wyłączyć funkcję najczęściej zadawanych pytań. Pytania wraz z odpowiedziami na nie konfigurujemy w tej sekcji dowolnie.
Zwróć uwagę na te ustawienia:
Po procesie konfiguracji mogą wystąpić pewne problemy lub błędy. Część z nich może być spowodowana nieprawidłowymi ustawieniami Twojej strony na Facebooku. Na głównej stronie na rozwijanym menu po lewej stronie kliknij Wszystkie narzędzia, potem Ustawienia strony a następnie wybierz sekcję Ogólne. Ustawienia, które mogą powodować problemy to m.in. Widoczność strony, gdy mamy ustawioną opcję "Cofnięto publikację strony". Kolejnymi ustawieniami do sprawdzenia są Ograniczenia dotyczące kraju oraz Ograniczenia wiekowe. Ewentualne narzucenie ograniczeń może powodować błędy wyświetlane w konsoli w narzędziach developerskich, gdy otworzysz swój sklep. Sprawdź też sekcję Wszystkie narzędzia -> Ustawienia strony -> Zaawansowane ustawienia wiadomości, a tam ustawienie Domeny dodane do białej listy. Upewnij się, że Twój sklep znajduje się na tej liście. Z perspektywy Klienta, w przypadku ewentualnych błędów związanych z wyświetlaniem lub działaniem wtyczki, pomocne może okazać się wyczyszczenie pamięci podręcznej (cache).
Obsługa w szablonie Topaz, One Page Shop i Szafir
1. W przygotowanym przez Meta kodzie do wklejenia, odszukaj page_id i skopiuj podany tam numer (identyfikator). 2. Skopiowany identyfikator wklej w Panelu Administracyjnym Comarch e-Sklep, przechodząc do zakładki: Topaz/One Page Shop: Wygląd Sklepu/ Ustawienia/ Dodatkowe/ Wyświetlaj Facebook czat, Szafir: Wygląd sklepu/ Ustawienia/ Ogólne/ Wyświetlaj Facebook czat i zaznaczając parametr na Tak:
Obsługa w szablonie Bursztyn
W szablonie Bursztyn, skopiowany kod należy wkleić do pliku _layout.html znajdującego się w głównym katalogu z Twoim szablonem. Kod wklejamy pod koniec tego pliku. Poniżej niego mają zostać tylko linijki zawierające zamknięcie tagu html oraz zamknięcie tagu body. Istnieje możliwość zmiany położenia wtyczki. Przy pomocy konfiguratora wtyczki czatu możemy ustalić, czy ma być ona wyrównana do lewej czy do prawej strony, zmienić motyw kolorystyczny dopasowując go do wyglądu sklepu, a także ustalić w jakiej odległości od dołu ekranu ma pojawiać się wtyczka (dla wyrównania do prawej, sugerowana odległość na komputery w szablonie Bursztyn to 120px). Można także własnoręcznie edytować style naszej wtyczki. W plikach .scss wystarczy dodać odpowiednio klasę .fb_customer_chat_bounce_in_v2 - okno czatu oraz .fb_customer_chat_icon - ikona wtyczki a następnie przy użyciu gulp'a przekonwertować pliki .scss na .css. Zmiany możemy dokonać na końcu pliku main.scss.
Obsługa w szablonie Opal
W szablonie Opal, skopiowany kod należy wkleić do pliku _layout.html znajdującego się w głównym katalogu z Twoim szablonem. Kod wklejamy pod koniec tego pliku. Poniżej niego mają zostać tylko linijki zawierające zamknięcie tagu html oraz zamknięcie tagu body. Istnieje możliwość zmiany położenia wtyczki. Przy pomocy konfiguratora wtyczki czatu możemy ustalić, czy ma być ona wyrównana do lewej czy do prawej strony, zmienić motyw kolorystyczny dopasowując go do wyglądu sklepu, a także ustalić w jakiej odległości od dołu ekranu ma pojawiać się wtyczka (dla wyrównania do prawej, sugerowana odległość na komputery w szablonie Opal to 110px). Można także własnoręcznie edytować style naszej wtyczki. W plikach .scss wystarczy dodać odpowiednio klasę .fb_customer_chat_bounce_in_v2 - okno czatu oraz .fb_customer_chat_icon - ikona wtyczki a następnie przy użyciu gulp'a przekonwertować pliki .scss na .css. Zmiany możemy dokonać na końcu pliku main.scss.
Obsługa w szablonie Agat
W szablonie Agat, skopiowany kod należy wkleić do pliku _layout.html znajdującego się w głównym katalogu z Twoim szablonem. Kod wklejamy pod koniec tego pliku. Poniżej niego mają zostać tylko linijki zawierające zamknięcie tagu html oraz zamknięcie tagu body. Istnieje możliwość zmiany położenia wtyczki. Przy pomocy konfiguratora wtyczki czatu możemy ustalić, czy ma być ona wyrównana do lewej czy do prawej strony, zmienić motyw kolorystyczny dopasowując go do wyglądu sklepu, a także ustalić w jakiej odległości od dołu ekranu ma pojawiać się wtyczka (dla wyrównania do prawej, sugerowana odległość na komputery w szablonie Agat to 120px). Można także własnoręcznie edytować style naszej wtyczki. W plikach .scss wystarczy dodać odpowiednio klasę .fb_customer_chat_bounce_in_v2 - okno czatu oraz .fb_customer_chat_icon - ikona wtyczki a następnie przy użyciu gulp'a przekonwertować pliki .scss na .css. Zmiany możemy dokonać na końcu pliku main.scss.
Przykładowy kod do modyfikacji wyglądu wtyczki - wersja na komputery
Poniżej znajduje się przykładowy kod służący modyfikacji położenia i wysokości zarówno okna czatu, jak i ikonki czatu. Zakładamy, że w ustawieniach wtyczki opisanych wcześniej, mamy wyrównanie do prawej i 120px odległości od dołu w wersji na komputery. Kod w wersji .scss (Po jego wklejeniu do odpowiedniego pliku w danym szablonie, należy przekonwertować pliki .scss na pliki .css i dokonać ich minifikacji. Jak tego dokonać dowiesz się z tego artykułu. @media screen and (min-width: 769px) { .fb_customer_chat_bounce_in_v2 { bottom:185px !important; right:3% !important; height:600px !important } .fb_customer_chat_icon { bottom:125px !important; right:2.3% !important } }
Wskazówka
Przedstawiony kod jest tylko przykładem, jak możemy edytować wygląd naszej wtyczki. Należy pamiętać także o utworzeniu styli dla wersji mobilnej przy użyciu @media.

Wskazówka
W przykładzie została użyta instrukcja !important Jest to o tyle istotne, że bez jej użycia możemy nie nadpisać domyślnego wyglądu wtyczki przygotowanego przez Facebooka.

Szablon i treści wiadomości e-mail

Spis treści

Wstęp

Gdzie zarządzać treściami powiadomień e-mail w Comarch e-Sklep?

Gdzie edytować szablon wiadomości e-mail?

Edycja kolorów w szablonie wiadomości

Przykładowe motywy kolorystyczne dla szablonów wiadomości e-mail

Jak zmienić kształt przycisków w powiadomieniach e-mail?

Jak dodać logo w szablonie wiadomości e-mail?

Jak edytować stopkę wiadomości e-mail?

Wstęp
Zmiana szablonu i treści wiadomości e-mail to jedna z tych rzeczy, która może wyróżnić nas na tle konkurencji. Mail, który przyciąga uwagę potrafi sprawić, że w przyszłości Klient szybciej skojarzy naszą firmę. Dodatkowo zmiana kolorystyki wyrazów w mailu może pomóc odbiorcy zwrócić uwagę na istotne informacje. W tym artykule dowiesz się, jak zarządzać powiadomieniami e-mail w Comarch e-Sklep, a także w jaki sposób możesz zarządzać szablonem domyślnym.
Uwaga
Dodatkowe modyfikacje stopki w szablonie wiadomości e-mail nie są wskazane dla osób, które nie posiadają wiedzy na temat kodowania w HTML.

Wskazówka
Po przeczytaniu całej instrukcji warto skorzystać z naszych przykładów, które utrwalą Twoją wiedzę i ułatwią kolejne modyfikacje szablonu wiadomości e-mail.

Gdzie zarządzać treściami powiadomień e-mail w Comarch e-Sklep?
Dostęp do treści związanych z komunikacją pomiędzy kontrahentem, a Comarch e-Sklep znajduje się w panelu administracyjnym w sekcji Ustawienia/Treści formalne. W tym obszarze znajdują się następujące treści:

Zgody,

Wysyłka e-mail i SMS,

Wydruki,

Komunikaty,

Regulamin i inne.

Wszystkie treści wiadomości możemy edytować wchodząc w jej szczegóły. W środku możemy określić ich widoczność oraz zmienić lub modyfikować takie dane jak:

Zmiana nadawcy wiadomości,

Dodać lub usunąć odbiorcę,

Ustawić, żeby potwierdzenie wiadomości zostało wysłane również do opiekuna,

Temat,

Język,

Treść.

Pierwsze dwa pola związane są z odbiorcą i nadawcą, zmieniamy je klikając w zaznaczony obszar: Po zakończeniu zmian klikamy w przycisk zapisz. Warto dla sprawdzenia poprawności treści wysłać wiadomość próbną. Opcja dostępna jest na szczegółach każdego powiadomienia - w prawym górnym rogu. Dla wszystkich treści wysyłanych testowo z obszaru Ustawienia/ Treści formalne/ Wysyłka e-mail i SMS obejmuje walidacja wprowadzonych danych.
Wskazówka
Zachęcamy do przeczytania naszego artykułu odnośnie Dezaktywacji wybranych powiadomień e-mail

Gdzie edytować szablon wiadomości e-mail?
Szablon wiadomości e-mail znajduje się w panelu administracyjnym Comarch e-Sklep. Aby zmienić domyślny szablon wiadomości postępuj zgodnie z poniższymi krokami. Krok 1. W panelu przejdź do sekcji Ustawienia/ Treści formalne/Wysyłka e-mail i SMS. Krok 2. Z listy dostępnych treści wybierz okienko Szablon i przejdź do jego szczegółów. Krok 3. W nowym oknie rozpocznij edycję szablonu wiadomości e-mail. Każda linijka kodu, która jest z komentarzem odpowiada za wygląd naszego maila.
Przyklad

Wskazówka
Komentarze pomocnicze wyróżnione są kolorem brązowym i zawierają się w ramkach /**/. Nie usuwaj ich, ponieważ służą tylko do opisywania linijki kodu i mogą być przydatne podczas kolejnych modyfikacji.

Uwaga
Zmień tylko miejsca, które są opisane w instrukcji. Usunięcie nawet jednego symbolu może spowodować zniekształcenie całego szablonu. Jeżeli jednak usunąłeś za dużo elementów możesz przywrócić ustawienia domyślne. Pomocny artykuł: Jak przywrócić standardową treść wiadomości e-mail?

Edycja kolorów w szablonie wiadomości
Przed zabraniem się za zmianę kolorów warto sprawdzić szatę graficzną naszego e-Sklepu. Informację odnośnie kodów kolorów użytych w naszym szablonie możemy znaleźć w dwóch miejscach:

W panelu administracyjnym w zakładce Wygląd sklepu/ Ustawienia/ Ustawienia szablonu widzimy jaki kolor jest przyporządkowany do konkretnego miejsca w naszym szablonie. Kod używanego koloru znajduje się po prawej stronie. Można go skopiować oraz dowolnie modyfikować.

W konsoli przeglądarki (wciskając F12) możliwa jest weryfikacja poszczególnych kolorów użytych w wybranych elementach szablonu. Wybierając ikonę umożliwiamy sobie weryfikację obiektu oraz jego szczegółów po najechaniu na niego kursorem.

Po przygotowaniu kolorów możemy się zabrać za ich edycję w naszym szablonie wiadomości e-mail. W kodzie HTML szablonu szukamy w komentarzach miejsca, które chcemy podmienić. Po znalezieniu odpowiedniej linijki zmieniamy symbol koloru, który jest po symbolu „#” (UWAGA! Nie usuwamy tego symbolu). Po wprowadzeniu modyfikacji zapisz zmiany.
Wskazówka
W dowolnym momencie dokonywania zmian po ich wcześniejszym zapisaniu możesz je zobaczyć wysyłając wiadomość próbną. Wybieramy dowolną wiadomość z miejsca Ustawienia/ Treści formalne/Wysyłka e-mail i SMS a następnie klikamy w prawym górnym roku w Więcej i Wyślij próbnie. Pojawi nam się okno: Wpisujemy maila na, którego ma dojść wiadomość i klikamy w przycisk Wyślij próbnie.

Motywy kolorystyczne dla szablonów wiadomości e-mail
Szablon wiadomości e-mail możesz w każdej chwili dowolnie modyfikować. Niżej prezentujemy przykładowe motywy kolorystyczne stworzone na bazie dostępnych motywów w Kreatorze Wyglądu Comarch oraz tabelę z odpowiednimi wartościami kolorów dla poszczególnych elementów w szablonie wiadomości.
Szablon domyślny

Topaz - motyw bordowy

Topaz - motyw granatowy

Topaz - motyw błękitny

Topaz - motyw beżowy

Motyw kolorystyczny szablonu Topaz: Domyślny Granatowy Bordowy Błękitny Beżowy

Nazwa:

a CB6724 151B72 BE2745 FF9181 BCAA9C

bgcolor1 ffffff ffffff ffffff ffffff ffffff

bgcolor2 F0A88D 9597AD CD6B7F BAD4F0 E6CAA6

shopName CB6724 151B72 BE2745 FF9181 BCAA9C

footerTitle 191616 000000 000000 17191A 3B3B3B

footerText 191616 000000 000000 17191A 3B3B3B

title1 4eb6f1 4eb6f1 4eb6f1 4eb6f1 4eb6f1

title2 ff7670 ff7670 ff7670 ff7670 ff7670

title3 53ccbd 53ccbd 53ccbd 53ccbd 53ccbd

text 191616 000000 000000 17191A 3B3B3B

orderColumnName a8a9a9 9597ad a8a9a9 9597ad 909090

orderDetails 3b3a3a 000000 000000 17191A 3B3B3B

orderPaymentName a8a9a9 9597ad a8a9a9 9597ad 909090

orderPaymentValue 191616 3B3B3B 000000 17191A 3B3B3B

orderPaymentTotal CB6724 151B72 BE2745 FF9181 BCAA9C

tableName CB6724 151B72 BE2745 FF9181 BCAA9C

rowName 191616 000000 000000 17191A 3B3B3B

rowContent a8a9a9 9597ad a8a9a9 9597ad 909090

feedbackButton (background-color) CB6724 C85555 CD6B7F FF9181 3B3B3B

feedbackButton (color) ffffff ffffff ffffff ffffff ffffff

feedbackButton (border) CB6724 C85555 CD6B7F FF9181 3B3B3B

feedbackButton-2 (background-color) 191616 151B72 000000 17191A BCAA9C

feedbackButton-2 (color) ffffff ffffff ffffff ffffff ffffff

feedbackButton-2 (border) 191616 151B72 000000 17191A BCAA9C

finishPaymentButton (background-color) CB6724 C85555 CD6B7F FF9181 3B3B3B

finishPaymentButton (color) ffffff ffffff ffffff ffffff ffffff

finishPaymentButton (border) CB6724 C85555 CD6B7F FF9181 3B3B3B

Jak zmienić kształt przycisków w powiadomieniach e-mail?
Obecnie w szablonie wiadomości możemy mieć dwa rodzaje przycisków:

Kwadratowe,

Zaokrąglone.

Zmiany ich wyglądu dokonujemy w zakładce Ustawienia/ Treści/ E-mail i SMS. W kodzie HTML szukamy przycisku który chcemy podmienić.
Wskazówka
W komentarzach zawarte są szczegółowe informację odnośnie każdej linijki kodu. Dzięki temu możemy łatwo znaleźć odpowiedni przycisk i tym samy wiemy, która linijka służy np. do zmiany koloru przycisku lub koloru tekstu. Każdy przycisk jest opisany w następujący sposób: W miejscu zaznaczonym na czerwono wpisujemy odpowiednią wartość, która wpływa na kształt przycisków w wiadomości:

0, gdy chcemy, aby przyciski były prostokątne,

50px, gdy chcemy, aby przyciski były zaokrąglone.

Warto, żebyśmy wybrali formę i kolorystykę zbliżoną do wyglądu naszego e-Sklepu.

Jak dodać logo w szablonie wiadomości e-mail?
W wiadomościach, które wysyłamy do naszego klienta za pośrednictwem panelu administracyjnego zamieszczone jest logo naszego e-Sklepu. Domyślnie logo pobierane jest z konfiguracji, czyli z sekcji Ustawienia/ Ustawienia sklepu/ Dane sprzedawcy/ Logotyp. Więcej informacji odnośnie logotypu znajdziesz w artykule: Logotyp oraz favicon w Comarch e-Sklep (Logotyp oraz favicon w Comarch e-Sklep – Centrum Pomocy Comarch e-Sklep). Jeżeli chcesz zamieścić w szablonie wiadomości e-mail inne logo, niż domyślnie ustawione w konfiguracji konieczna jest jego modyfikacja. Jak jej dokonać? Postępuj zgodnie z poniższymi krokami. Krok 1. Wgraj plik z docelowym logiem na swój serwer. Krok 2. W panelu administracyjnym przejdź do sekcji Ustawienia/ Treści/ E-mail i SMS i rozpocznij edycję szablonu. Krok 3. Odszukaj w szablonie frazy src="{{config.Url}}logo.png". Krok 4. W każdej odnalezionej frazie (będzie ich 4) wstaw ścieżkę z serwera, na którym został udostępniony plik z logiem. Krok 5. Zapisz wprowadzone zmiany.
Jak edytować stopkę wiadomości e-mail?
Wszystkie dane kontaktowe, które są w stopce wiadomości e-mail pobierane są ustawień w panelu administracyjnym. Wszystkie frazy, które są zaznaczone na czerwono można w łatwy sposób zmienić w naszej stopce. Krok 1. W panelu administracyjnym przejdź do sekcji Ustawienia/ Treści formalne/Wysyłka e-mail i SMS i edycję szablonu. Krok 2. Odszukaj w szablonie frazy i je podmień. Krok 3. Zapisz wprowadzone zmiany.
Wskazówka
Informacje odnośnie dodawania ikon social mediów w szablonie znajdziesz w artykule: Ustawienia Wyglądu Sklepu w zakładce Nagłówek / Stopka

Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz

Wstęp

W standardowym szablonie Topaz sekcja polecanych towarów domyślnie wyświetla się z nazwą "Towary polecane". W tym artykule dowiesz się w jaki sposób dostosować tą nazwę do swojego e-Sklepu.
Dodanie tłumaczenia
Tytuł sekcji Towary polecane można zmienić dodając odpowiednie tłumaczenie do szablonu oraz edytując kod HTML szablonu. W pierwszej kolejności należy dodać tłumaczenie w sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.
Edycja kodu HTML
Następnie w panelu administracyjnym w sekcji: Wygląd sklepu/ Ustawienia/ Więcej (trzy kropki) / Edytuj ustawienia zaawansowane, a następnie Więcej/ Edytuj HTML należy przejść do katalogu elements/ recommended gdzie znajdują się pliki HTML z sekcjami Towary polecane. Tytuł sekcji znajduje się w linijce: <span class="recommended-products-title">{{ translations.Recommended }}</span> gdzie fragment Recommended jest Id tłumaczenia wprowadzanego w panelu administracyjnym. Aby zmienić nagłówek sekcji Towary polecane należy w miejsce Recommended wprowadzić Id wcześniej dodanego tłumaczenia. Po wprowadzonych zmianach w szablonie należy zapisać i opublikować zmiany.
Przyklad
Jeżeli w panelu administracyjnym dodałeś tłumaczenie o Id: PolecanaSekcja wówczas fragment kodu HTML powinien wyglądać następująco: <span class="recommended-products-title">{{ translations.PolecanaSekcja }}</span>

Wskazówka
Nadmierna ilość sekcji polecanych i wyświetlanych w niej towarów może obciążyć wyświetlanie strony w wyniku czego strona może się gorzej ładować i indeksować.

Zmiana nagłówka w pozostałych szablonach
W pozostałych standardowych szablonach Comarch zmiana nagłówka sekcji polecanych towarów odbywa się podobnie natomiast należy dokonać edycji następujących plików HTML:

szablon Agat – home-page.html

szablon Bursztyn – homepage.html

szablon Szafir – home.html

Dodanie nowego widoku filtrów

Szablon Szafir umożliwia dodanie w nim nowego widoku filtrów oraz modyfikowację ustawienia szablonu, aby był bardziej czytelny. Zmiany wyglądu dotyczą opisu danej kategorii i graficznych odnośników do podkategorii.
Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Szafir
W pliku __settings.liquid dodaj poniżesze tłumaczenia: {% assign productsList = "Lista towarów" -%} {% assign filterPanel = "Panel filtra" -%} {% assign filterPanelView = "Widok panelu filtra" -%} {% assign filterPanelViewOption1 = "Po lewej pod menu kategorii" -%} {% assign filterPanelViewOption2 = "U góry nad listą towarów" -%} {% assign defaultSection = "Sekcja domyślnie" -%} {% assign closed = "Zwinięta" -%} {% assign opened = "Rozwinięta" -%} {% assign graphMenu = "Graficzne menu" -%} {% assign graphMenuInfo = "Dodatkowe, graficzne menu nawigacji do podgrup" -%} {% assign category = "Kategoria" -%} {% assign nameGraphDescCategory = "Nazwa, grafika i opis kategorii" -%} {% assign overProductsList = "Nad listą towarów" -%} {% assign underProductsList = "Pod listą towarów" -%} {% assign graphFormOfNameDescImgCategory = "Forma graficzna prezentowania nazwy, opisu i zdjęcia kategorii" -%} {% assign backgroundImage = "Zdjęcie w tle" -%} {% assign leftImage = "Zdjęcie po lewej" -%} W tym samym pliku wyszukaj frazę id="tab1" i linijkę niżej wklej: {{productsList}} Teraz wyszukaj frazę: {% endif -%} {% endblock -%} products/product-filters.html {% if settings.filterPanelView == "left" -%} {{translations.Filters}} {% endif -%} {% assign fo = products.FilteringOptions -%} {% unless customer.HidePrices -%} {{ translations.Price }} {{translations.RangeFrom | Downcase }} {{translations.RangeTo | Downcase }} {{ currencyExt }} {% endunless -%} {% if settings.graphicColorFilter == 'yes' and color-filter.Content and color-filter.Content != '' %} {% assign colorFilterArr = color-filter.Content | StripNewlines | Split: '|||' -%} {% assign colorFilterName = colorFilterArr[0] -%} {% assign colorFilterValues = colorFilterArr[1] | Split: '||' -%} {% endif -%} {% for filter in fo.Filters -%} {% unless filter.Field == 'MARK' and config.Reviews.Enabled == false -%} {% assign isSthSelected = false -%} {% assign allSelected = false -%} {% assign selectedQuantity = 0 -%} {% for value in filter.Values -%} {% if value.Selected -%} {% if isSthSelected == false and settings.toggleFilters == 2 -%} {% assign isSthSelected = true -%} {% endif -%} {% capture stringToAdd -%}{{value.Field}}|{{filter.Heading}}|{{value.Value}}|{{value.Text}}||{% endcapture -%} {% assign activeFiltersKeysString = activeFiltersKeysString | Append: stringToAdd -%} {% assign activeFiltersQuantity = activeFiltersKeysString | Split:'||' | Size -%} {% assign selectedQuantity = selectedQuantity | Plus: 1 -%} {% assign filtersQuantity = filter.Values | Size -%} {% if selectedQuantity == filtersQuantity -%} {% assign allSelected = true -%} {% endif -%} {% endif -%} {% endfor -%} {% if settings.filterPanelView == "left" -%} {% else -%} {{ filter.Heading | Capitalize }} {% endif -%} {% assign filterValuesLength = filter.Values | Size -%} {% if filter.Field == colorFilterName or isSthSelected or settings.filterPanelView == "up" -%} {% assign limit = filterValuesLength | ToInt -%} {% else -%} {% assign limit = settings.maxfilter | ToInt -%} {% endif -%} {% for value in filter.Values limit: limit -%} {% if value.Field == colorFilterName -%} {% for colorFilterValue in colorFilterValues -%} {% assign colorFilterValueArr = colorFilterValue | Split: '|' -%} {% assign colorFilterValueName = colorFilterValueArr[0] -%} {% assign colorFilterValueHash = colorFilterValueArr[1] -%} {% if colorFilterValueName == value.Value -%} {% assign colorHash = colorFilterValueHash -%} {% endif -%} {% endfor -%} {% endif -%} {% if value.Field != colorFilterName -%} {% if value.Field == "REWARD" -%} {{ translations.PointsProduct }} {% else -%} {{ value.Text }} {% endif -%} ({{value.Count}}) {% endif -%} {% endfor -%} {% if filterValuesLength > limit and filter.Field != colorFilterName and settings.filterPanelView == "left" -%} {% endif -%} {% endunless -%} {% endfor -%} {% if settings.filterPanelView == "up" -%} {% endif -%} {% if settings.filterPanelView == "left" -%} {% endif -%} W pliku common/categories-navigation/categories-navigation-partial.html na samym dole znajdź warunek {% if areFilteringOptionsClass == 'with-filters-ui' -%} i zamień go na {% if areFilteringOptionsClass == 'with-filters-ui' and settings.filterPanelView == "left" -%} Następnie w pliku js/init.js znajdź frazę events: function() i linijkę niżej wklej poniższy kod: $('body').on('change', '.all-values-checkbox-lq', function(e) { var isChecked = $(e.currentTarget).prop('checked'); $(e.currentTarget).parents('.filter-item-lq').find('[type=checkbox]').prop('checked', isChecked); }); $('body').on('change', '.filters-up-lq .product-filters-lq input', function(e) { app.filter(e); }); Kontynuując zmiany w tym samym pliku, wyszukaj frazę form.find('[type="number"]').val(''); i zmień tam number na tel. Na końcu funkcji w której znajduje się ta fraza dopisz app.filter(e);. Przejdź do pliku js/init-ui1.js i na samym końcu wklej poniższy kod: $('body').on('click', '.toggle-filters-button-lq', function () { $('.filters-label-lq').toggleClass('hidden-lq'); }); W tym momencie masz już dodany filtr, w następnych krokach będziesz edytował styl. W pliku scss/globals/_globals-m.scss znajdź frazę .products-page-lq{ i usuń z tej klasy margin-top: 114px;. Kilka linijek niżej znajdziesz: .category-description-ui{ display: none; } Usuń ten fragment. Jeszcze niżej znajdziesz .category-img-ui{. Usuń w nim height: auto !important;. Znajdz i usuń poniższy fragment: .view-options-mobile-ui{ width: 21px; margin-right: 20px; } Linijkę niżej jest kod .sorting-options-ui{. Zmień w nim linijkę width: calc(100vw - 80px - 21px - 60px); na width: calc(100vw - 192px); i usuń oba wpisy związane z wysokością height: 26px;. Następnie w obrębie @media only screen and (max-width: 1279px) { (np w 2 linijce pliku) wklej poniższy kod: .products-navigation-ui.filters-up-ui .sorting-views-container-ui .sorting-options-ui{ .dropdown-trigger-ui{ padding: 10px; } .toggle-filters-button-ui{ padding-bottom: 0; & + .active-sorting-option-ui{ display: block; } } } .filters-up-main-container-ui{ margin: 0; } .filters-up-ui{ position: static; margin: 0; width: 100%; background-color: $bgColor; .sorting-views-container-ui{ padding: 20px 20px 0 20px; } .product-filters-ui{ position: static; padding: 0; background: $bgColor; & > ul{ margin: 20px; li{ width: calc(50% - 10px); &:first-child{ width: 100%; } &:nth-child(5n){ margin-right: 20px; } &:nth-child(2n+1){ margin-right: 0; } } } } } .undercategory-links-ui{ padding: 0 20px; a{ width: calc(50% - 10px); &:nth-child(5n){ margin-right: 20px; } &:nth-child(2n){ margin-right: 0; } } } Przejdz do pliku scss/globals/_globals1.scss na samym dole wklej poniższy kod: .undercategory-links-ui{ display: flex; flex-wrap: wrap; a{ width: calc(20% - 16px); border: 1px solid $lightBorderColor; margin: 0 20px 20px 0; padding: 20px; text-align: center; &:nth-child(5n){ margin-right: 0; } } .category-name-ui{ font-weight: 700; margin-bottom: 20px; color: $primaryColorFont; } img{ max-width: 100%; max-height: 200px; } } .graph-desc-category-down-ui{ display: flex; flex-flow: column; .category-section-ui{ order: 1; } } .category-section-ui{ button{ display: flex; width: 100%; align-items: center; justify-content: space-between; border: 1px solid $lightBorderColor; padding: 20px; background: transparent; color: $primaryColorFont; } h1{ font-size: 20px; color: $primaryColorFont; } &.left-ui{ .category-img-ui .category-container-ui .category-container-bg-ui{ max-width: none; } .category-img-lq{ display: flex; border: 1px solid $lightBorderColor; height: auto !important; } .img-container-ui{ min-width: 150px; max-width: 150px; padding: 20px; } img{ max-height: 100%; } .category-container-ui{ position: static; } .category-description-ui{ height: auto !important; } } } .filters-up-ui{ flex-wrap: wrap; .toggle-filters-button-ui + .active-sorting-option-ui{ transition: all ease 300ms; } .sorting-options-ui .toggle-filters-button-ui{ padding-bottom: 10px; &.with-quantity-ui{ padding-bottom: 0; } &.expanded-lq{ background-color: $btnSolidBgColor; color: $btnSolidTextColor; & + .active-sorting-option-ui{ background-color: $btnSolidBgColor; color: $btnSolidTextColor; } } } .product-filters-ui > ul{ display: flex; flex-wrap: wrap; li{ width: calc(20% - 16px); border: 1px solid $lightBorderColor; margin: 0 20px 20px 0; &:nth-child(5n){ margin-right: 0; } } .price-filter-ui{ padding: 20px; } .reset-filters-ui{ border: none; } .filter-drop-ui{ padding: 10px 20px; border-bottom: 1px solid $lightBorderColor; } .filter-value-list-ui{ padding: 10px 20px; overflow: auto; &::-webkit-scrollbar { width: 4px; border-radius: 50%; } &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px transparent; } &::-webkit-scrollbar-thumb { background-color: rgba(#8E8E8E, 0.5); outline: none; border-radius: 2px; &:hover{ background-color: #8E8E8E; } } &.three-ui{ max-height: 140px; } &.five-ui{ max-height: 220px; } &.eight-ui{ max-height: 340px; } } } } Ostatnim krokiem będzie znalezienie w scss/partials/_product-list.scss frazy .change-view-ui i podmień margin-right na margin-left Jedyne zmiany w panelu administracyjnym wymagają dodania dwóch tłumaczeń. Wygląd sklepu -> Ustawienia -> Tłumaczenia: - CloseFilters: Zwiń filtry - ClearAllFilters: Wyczyść wszystkie filtry

Aktualizacja filtrów i wyszukiwarki w szablonach

Wskazówka

Aktualizacja filtrów i wyszukiwarki w szablonach
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby w lepszy sposób obsługiwał filtry i wyszukiwarkę.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js. Z tego artykułu dowiesz się jak je minifikować.

Szafir
W pliku common/pagination.html wyszukaj frazę {% if products.Search -%}. W tym warunku znajduje się tylko jedna linijka. Podmień ją na {% capture url -%}{{products.Search.Url}}{% endcapture -%} Następnie w pliku js/init.js, wyszukaj funkcję filter, a w niej $.get. Zastąp go wraz z całą jego zawartością poniższym kodem: $.get('', param, function (result) { app.serverMessage(result, form, e); if (result.action.Result) { if(result.action.Redirect302 != null){ app.replace(result.action.Redirect302); } else { app.replace(window.location.pathname); } } });
Agat
W pliku partials/blog/list-pagination.html wyszukaj frazę {% if products.Search -%}. W tym warunku znajduje się tylko jedna linijka. Podmień ją na {% capture url -%}{{products.Search.Url}}{% endcapture -%} Następnie na początku pliku js/init2.js, wyszukaj funkcję oznaczoną komentarzem // filters, a w niej warunek if (d.length == 2 && !d[0].value && !d[1].value) {. Usuń ten warunek wraz z jego zawartością. Kilka linijek niżej jest $.get. Zastąp go wraz z całą jego zawartością poniższym kodem: $.get('', p, function (d) { if (d.action.Result) { if (d.action.Redirect302 != null) { LoadList(d.action.Redirect302); } } });
Bursztyn lub Opal
W pliku product/listpagination.html wyszukaj frazę {% if products.Search -%}. W tym warunku znajduje się tylko jedna linijka. Podmień ją na {% capture url -%}{{products.Search.Url}}{% endcapture -%} Następnie w pliku js/list.js, wyszukaj funkcję oznaczoną komentarzem // filters, a w niej warunek if (d.length == 2 && !d[0].value && !d[1].value) {. Usuń ten warunek wraz z jego zawartością. Kilka linijek niżej jest $.get. Zastąp go wraz z całą jego zawartością poniższym kodem: $.get('', p, function (d) { if (d.action.Result) { if (d.action.Redirect302 != null) { LoadList(d.action.Redirect302+'#products'); } } });
Topaz
W pliku partials/list-pagination.html wyszukaj frazę {% if products.Search -%}. W tym warunku znajduje się tylko jedna linijka. Podmień ją na {% capture url -%}{{products.Search.Url}}{% endcapture -%} Następnie w pliku js/layout.js, wyszukaj funkcję getSearchFilters, a w niej warunek if (d.length == 2 && !d[0].value && !d[1].value) {. Usuń ten warunek wraz z jego zawartością. Kilka linijek niżej jest $.get. Zastąp go wraz z całą jego zawartością poniższym kodem: $.get('', p, function (d) { if (d.action.Result) { if (d.action.Redirect302 != null) { location.href = d.action.Redirect302; } } });

Ustawienia paska nawigacji w szablonie Szafir

W tym artykule dowiesz się jak ustawić pasek nawigacji w swoim szablonie. Zmiany te pozwolą na dodanie m.in. przycisku importu koszyka i przycisku do pobrania przykładowego pliku CSV.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order
Pierwszym krokiem będzie zamiana treści w pliku common/navigation-bars/main-navigation-bar-partial.html. Ze względu na znaczną rozbudowę nie można wskazać konkretnych zmian, zatem udostępniamy cały kod, którym należy zastąpić kod obecny: {% if config.DefinedPages.WithdrawalRight.Id != page.PageId and config.DefinedPages.Payment.Id != page.PageId and config.DefinedPages.Shipping.Id != page.PageId and config.DefinedPages.Complaints.Id != page.PageId and config.DefinedPages.Loyalty.Id != page.PageId and config.DefinedPages.Registration.Id != page.PageId and config.DefinedPages.Login.Id != page.PageId and config.DefinedPages.Terms.Id != page.PageId and config.DefinedPages.Contact.Id != page.PageId and config.DefinedPages.Privacy.Id != page.PageId and config.DefinedPages.Blog.Id != page.PageId and config.DefinedPages.BlogDetails.Id != page.PageId and config.DefinedPages.PasswordReminder.Id != page.PageId and config.DefinedPages.CustomerProfile.Id != page.PageId and config.DefinedPages.About.Id != page.PageId and config.DefinedPages.SocialMedia.Id != page.PageId -%} {% assign togglingClass = '' -%} {% if page.PageId == config.DefinedPages.ProductDetails.Id -%} {% assign togglingClass = 'toggle-categories-lq' -%} {% endif -%} <nav class="header-categories-ui main-navigation-bar-ui"> <ul class="manufacturer-container-ui"> <li class="{% if config.DefinedPages.ProductList.Id == page.PageId or config.DefinedPages.Home.Id == page.PageId or config.DefinedPages.Manufacturers.Id == page.PageId -%} categories-opened-ui {% endif -%} {% if config.DefinedPages.AdvancedSearch.Id == page.PageId -%} login-back-ui {% endif -%} categories-option-ui categories-option-lq" > <a class="categories-label-ui category-links-ui categories-link-lq {{togglingClass}}" aria-label="categories-label" href="{{ config.DefinedPages.ProductList.Url }}" title="{{ translations.Contact }}"> <i class="va-mid-ui header-categories-icon-ui ti-menu"></i> <span class="va-mid-ui line-height-1-ui">{{translations.Categories}}</span> </a> </li> <li class="main-navigation-bar-links-ui"> <ul> {% assign manufacturersSize = manufacturer-brand.Manufacturers | Size -%} {% if usr.Authenticated == true -%} {% if settings.discountsPresentationInCustomerProfileInPromotionsTab == 'yes' and settings.promotions -%} <li class="no-on-mobile-ui" style="order: {{settings.promotionsNo}};"> <a href="{{settings.promotionsLink}}"> {% if settings.promotionsIcon != '' -%} <i class="va-mid-ui {{settings.promotionsIcon}} header-manufacturers-icon-ui header-categories-icon-ui"></i> {% endif -%} <span class="va-mid-ui line-height-1-ui documents-ui"> {% if settings.promotionsTranslation != '' -%} {{ translations[settings.promotionsTranslation] }} {% else -%} {{ settings.promotionsLabel }} {% endif -%} </span> </a> </li> {% endif -%} {% if settings.documents -%} <li class="no-on-mobile-ui" style="order: {{settings.documentsNo}};"> <a href="{{settings.documentsLink}}"> {% if settings.documentsIcon != '' -%} <i class="va-mid-ui {{settings.documentsIcon}} header-manufacturers-icon-ui header-categories-icon-ui"></i> {% endif -%} <span class="va-mid-ui line-height-1-ui documents-ui"> {% if settings.documentsTranslation != '' -%} {{ translations[settings.documentsTranslation] }} {% else -%} {{ settings.documentsLabel }} {% endif -%} </span> </a> </li> {% endif -%} {% assign manufacturers = settings.authenticatedManufacturers -%} {% assign manufacturersNo = settings.authenticatedManufacturersNo -%} {% assign manufacturersIcon = settings.authenticatedManufacturersIcon -%} {% assign manufacturersLabel = settings.authenticatedManufacturersLabel -%} {% assign manufacturersTranslation = settings.authenticatedManufacturersTranslation -%} {% assign manufacturersLink = settings.authenticatedManufacturersLink -%} {% assign searchAdvanced = settings.authenticatedSearchAdvanced -%} {% assign searchAdvancedNo = settings.authenticatedSearchAdvancedNo -%} {% assign searchAdvancedIcon = settings.authenticatedSearchAdvancedIcon -%} {% assign searchAdvancedLabel = settings.authenticatedSearchAdvancedLabel -%} {% assign searchAdvancedTranslation = settings.authenticatedSearchAdvancedTranslation -%} {% assign searchAdvancedLink = settings.authenticatedSearchAdvancedLink -%} {% assign cartImport = settings.authenticatedCartImport -%} {% assign cartImportNo = settings.authenticatedCartImportNo -%} {% assign cartImportIcon = settings.authenticatedCartImportIcon -%} {% assign cartImportLabel = settings.authenticatedCartImportLabel -%} {% assign cartImportTranslation = settings.authenticatedCartImportTranslation -%} {% assign cartImportLink = settings.authenticatedCartImportLink -%} {% assign downloadCSV = settings.authenticatedDownloadCSV -%} {% assign downloadCSVNo = settings.authenticatedDownloadCSVNo -%} {% assign downloadCSVIcon = settings.authenticatedDownloadCSVIcon -%} {% assign downloadCSVLabel = settings.authenticatedDownloadCSVLabel -%} {% assign downloadCSVTranslation = settings.authenticatedDownloadCSVTranslation -%} {% assign downloadCSVLink = settings.authenticatedDownloadCSVLink -%} {% assign customerLinks = settings.authenticatedCustomerLinks -%} {% else -%} {% assign manufacturers = settings.notAuthenticatedManufacturers -%} {% assign manufacturersNo = settings.notAuthenticatedManufacturersNo -%} {% assign manufacturersIcon = settings.notAuthenticatedManufacturersIcon -%} {% assign manufacturersLabel = settings.notAuthenticatedManufacturersLabel -%} {% assign manufacturersTranslation = settings.notAuthenticatedManufacturersTranslation -%} {% assign manufacturersLink = settings.notAuthenticatedManufacturersLink -%} {% assign searchAdvanced = settings.notAuthenticatedSearchAdvanced -%} {% assign searchAdvancedNo = settings.notAuthenticatedSearchAdvancedNo -%} {% assign searchAdvancedIcon = settings.notAuthenticatedSearchAdvancedIcon -%} {% assign searchAdvancedLabel = settings.notAuthenticatedSearchAdvancedLabel -%} {% assign searchAdvancedTranslation = settings.notAuthenticatedSearchAdvancedTranslation -%} {% assign searchAdvancedLink = settings.notAuthenticatedSearchAdvancedLink -%} {% assign cartImport = settings.notAuthenticatedCartImport -%} {% assign cartImportNo = settings.notAuthenticatedCartImportNo -%} {% assign cartImportIcon = settings.notAuthenticatedCartImportIcon -%} {% assign cartImportLabel = settings.notAuthenticatedCartImportLabel -%} {% assign cartImportTranslation = settings.notAuthenticatedCartImportTranslation -%} {% assign downloadCSV = settings.notAuthenticatedDownloadCSV -%} {% assign downloadCSVNo = settings.notAuthenticatedDownloadCSVNo -%} {% assign downloadCSVIcon = settings.notAuthenticatedDownloadCSVIcon -%} {% assign downloadCSVLabel = settings.notAuthenticatedDownloadCSVLabel -%} {% assign downloadCSVTranslation = settings.notAuthenticatedDownloadCSVTranslation -%} {% assign customerLinks = settings.notAuthenticatedCustomerLinks -%} {% endif -%} {% assign manufacturersSize = manufacturer-brand.Manufacturers | Size -%} {% if manufacturers and manufacturersSize > 0 -%} <li class="{% if page.PageId == config.DefinedPages.Manufacturers.Id -%} active-bar-ui {% else -%} no-on-mobile-ui {% endif -%}" style="order: {{manufacturersNo}};"> {% if page.PageId == config.DefinedPages.Manufacturers.Id -%} <span class="block-ui page-label-ui"> {% else -%} <a href="{{manufacturersLink}}"> {% endif -%} {% if manufacturersIcon != '' -%} <i class="va-mid-ui {{manufacturersIcon}} header-manufacturers-icon-ui"></i> {% endif -%} <span class="va-mid-ui line-height-1-ui"> {% if manufacturersTranslation != '' -%} {{ translations[manufacturersTranslation] }} {% else -%} {{ manufacturersLabel }} {% endif -%} </span> {% if page.PageId != 20 -%} </a> {% else -%} </span> {% endif -%} </li> {% endif -%} {% if searchAdvanced -%} <li class="{% if config.DefinedPages.AdvancedSearch.Id == page.PageId -%} active-bar-ui {% else -%} no-on-mobile-ui {% endif -%}" style="order: {{searchAdvancedNo}};"> {% if config.DefinedPages.AdvancedSearch.Id == page.PageId -%} <span class="block-ui page-label-ui"> {% else -%} <a href="{{searchAdvancedLink}}"> {% endif -%} {% if searchAdvancedIcon != '' -%} <i class="va-mid-ui {{searchAdvancedIcon}} header-manufacturers-icon-ui"></i> {% endif -%} <span class="va-mid-ui line-height-1-ui"> {% if searchAdvancedTranslation != '' -%} {{ translations[searchAdvancedTranslation] }} {% else -%} {{ searchAdvancedLabel }} {% endif -%} </span> {% if config.DefinedPages.AdvancedSearch.Id != page.PageId -%} </a> {% else -%} </span> {% endif -%} </li> {% endif -%} {% if cartImport -%} <li class="no-on-mobile-ui" style="order: {{cartImportNo}};"> <label for="file" class="import-cart-lq import-cart-ui block-ui page-label-ui"> {% if cartImportIcon != '' -%} <i class="{{cartImportIcon}} header-manufacturers-icon-ui"></i> {% endif -%} {% if cartImportTranslation != '' -%} {{ translations[cartImportTranslation] }} {% else -%} {{ cartImportLabel }} {% endif -%} </label> <input class="import-cart-input-lq" id="file" type="file" name="file" accept=".csv" {% if settings.afterAddingToCart == 1 -%} data-redirect-url="{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}" {% endif -%} /> {% if settings.afterAddingToCart == 3 -%} <div class="message-popup-background-ui after-importing-cart-popup-lq container-to-hide-lq hide-container-lq hidden-lq"> {% include 'product/after-adding-to-cart.html' -%} </div> {% endif -%} <div class="importing-cart-succeed-lq message-popup-background-ui hidden-lq hide-lq container-to-hide-lq" data-url="{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}"> <div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-importing-popup-container-lq"> <div class="box-ui product-added-to-cart-ui"> <i class="va-mid-ui ti-check"></i> <span class="va-mid-ui line-height-1-ui"> {% if customer.Cart.EditedOrderId -%} {{ translations.AddedToOrder }} {% else -%} {{ translations.AddedToCart }} {% endif -%} </span> </div> </div> </div> <div class="during-ajax-modal-lq during-ajax-modal-ui hidden-lq"> <div class="loader-ui big-ui"></div> </div> </li> {% endif -%} {% if downloadCSV -%} <li class="no-on-mobile-ui" style="order: {{downloadCSVNo}};"> <a href="usr/cart_importcsv_file.csv"> {% if downloadCSVIcon != '' -%} <i class="{{downloadCSVIcon}} header-manufacturers-icon-ui"></i> {% endif -%} {% if downloadCSVTranslation != '' -%} {{ translations[downloadCSVTranslation] }} {% else -%} {{ downloadCSVLabel }} {% endif -%} </a> </li> {% endif -%} {% for customerLink in customerLinks -%} {% if customerLink.available -%} <li class="no-on-mobile-ui" style="order: {{customerLink.no}};"> <a href="{{customerLink.link}}"> {% if customerLink.icon != '' -%} <i class="{{customerLink.icon}} header-manufacturers-icon-ui"></i> {% endif -%} {% if customerLink.translation != '' -%} {{ translations[customerLink.translation] }} {% else -%} {{ customerLink.label }} {% endif -%} </a> </li> {% endif -%} {% endfor -%} </ul> </li> </ul> </nav> {% endif -%} Następnie dodamy ustawienia do szablonu. W tym celu należy użyć narzędzia wyszukiwania w pliku _settings.liquid i wyszukać pierwsze wystąpienie frazy {% else %}, a następnie wkleić następujący kod linijkę wyżej: {% assign general = "Ogólne" -%} {% assign navigationBarSettings = "Ustawienia paska nawigacji na stronie głównej" -%} {% assign notAuthenticatedInfo = "Lista elementów zawartych w pasku nawigacji dla klientów niezalogowanych" -%} {% assign authenticatedInfo = "Lista elementów zawartych w pasku nawigacji dla klientów zalogowanych" -%} {% assign available = "Dostępne" -%} {% assign number = "Lp" -%} {% assign icon = "Ikona" -%} {% assign polishLabel = "Etykieta PL" -%} {% assign translationId = "Id tłumaczenia" -%} {% assign linkAction = "link/akcja" -%} {% assign cartImport = "Import koszyka" -%} {% assign cartImportInfo = "Opcja importu koszyka z pliku CSV" -%} {% assign downloadCSV = "Pobierz przykładowy plik CSV" -%} {% assign downloadCSVInfo = "Przykładowy plik CSV do importu koszyka" -%} {% assign searchAdvanced = "Wyszukiwarka zaawansowana" -%} {% assign promotions = "Promocje" -%} {% assign documents = "Dokumenty" -%} {% assign addLink = "Dodaj link" -%} {% assign delete = "Usuń" -%} W tym sam pliku szukamy pierwszego wystąpienia frazy {% endcase %} i wklejamy następujący kod linijkę wyżej: {% assign general = "General" -%} {% assign navigationBarSettings = "Homepage navigation bar settings" -%} {% assign notAuthenticatedInfo = "List of elements in navigation bar for not authenticated customers" -%} {% assign authenticatedInfo = "List of elements in navigation bar for authenticated customers" -%} {% assign available = "Available" -%} {% assign number = "No" -%} {% assign icon = "Icon" -%} {% assign polishLabel = "Label PL" -%} {% assign translationId = "Translation Id" -%} {% assign linkAction = "link/action" -%} {% assign cartImport = "Cart import" -%} {% assign cartImportInfo = "Cart import option from CSV file" -%} {% assign downloadCSV = "Download sample CSV file" -%} {% assign downloadCSVInfo = "Sample CSV file for cart import" -%} {% assign searchAdvanced = "Search advanced" -%} {% assign promotions = "Promotions" -%} {% assign documents = "Documents" -%} {% assign addLink = "Add link" -%} {% assign delete = "Delete" -%}
Kolejnym krokiem jest wyszukanie frazy <script> oraz wklejenie bezpośrednio nad nią następującego kodu:
<div id="tab1Content"> <fieldset> <legend>{{notAuthenticatedInfo}}</legend> <div> <div class="row"> <div class="cell available">{{available}}</div> <div class="cell no">{{number}}</div> <div class="cell">{{icon}}</div> <div class="cell">{{polishLabel}}</div> <div class="cell">{{translationId}}</div> <div class="cell">{{linkAction}}</div> <div class="cell delete">{{delete}}</div> </div> <div class="row"> <div class="cell available"><input type="checkbox" name="notAuthenticatedCartImport" {% if settings.notAuthenticatedCartImport -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="notAuthenticatedCartImportNo" value="{{ settings.notAuthenticatedCartImportNo }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedCartImportIcon" value="{{ settings.notAuthenticatedCartImportIcon }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedCartImportLabel" value="{{ settings.notAuthenticatedCartImportLabel }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedCartImportTranslation" value="{{ settings.notAuthenticatedCartImportTranslation }}" /></div> <div class="cell">{{cartImportInfo}}</div> <div class="cell delete"></div> </div> <div class="row"> <div class="cell available"><input type="checkbox" name="notAuthenticatedDownloadCSV" {% if settings.notAuthenticatedDownloadCSV -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="notAuthenticatedDownloadCSVNo" value="{{ settings.notAuthenticatedDownloadCSVNo }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedDownloadCSVIcon" value="{{ settings.notAuthenticatedDownloadCSVIcon }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedDownloadCSVLabel" value="{{ settings.notAuthenticatedDownloadCSVLabel }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedDownloadCSVTranslation" value="{{ settings.notAuthenticatedDownloadCSVTranslation }}" /></div> <div class="cell">{{downloadCSVInfo}}</div> <div class="cell delete"></div> </div> <div class="row"> <div class="cell available"><input type="checkbox" name="notAuthenticatedSearchAdvanced" {% if settings.notAuthenticatedSearchAdvanced -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="notAuthenticatedSearchAdvancedNo" value="{{ settings.notAuthenticatedSearchAdvancedNo }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedSearchAdvancedIcon" value="{{ settings.notAuthenticatedSearchAdvancedIcon }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedSearchAdvancedLabel" value="{{ settings.notAuthenticatedSearchAdvancedLabel }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedSearchAdvancedTranslation" value="{{ settings.notAuthenticatedSearchAdvancedTranslation }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedSearchAdvancedLink" value="{{ settings.notAuthenticatedSearchAdvancedLink }}" /></div> <div class="cell delete"></div> </div> {% for customerLink in settings.notAuthenticatedCustomerLinks -%} <div class="row notAuthenticatedCustomerLink" data-index="{{forloop.index0}}"> <div class="cell available"><input type="checkbox" name="notAuthenticatedCustomerLink{{forloop.index0}}" {% if customerLink.available -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="notAuthenticatedCustomerLinkNo{{forloop.index0}}" value="{{ customerLink.no }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedCustomerLinkIcon{{forloop.index0}}" value="{{ customerLink.icon }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedCustomerLinkLabel{{forloop.index0}}" value="{{ customerLink.label }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedCustomerLinkTranslation{{forloop.index0}}" value="{{ customerLink.translation }}" /></div> <div class="cell"><input type="text" name="notAuthenticatedCustomerLinkLink{{forloop.index0}}" value="{{ customerLink.link }}" /></div> <div class="cell delete"><div class="fa fa-trash"></div></div> </div> {% endfor -%} </div> <button class="add-link">{{addLink}}</button> <input name="customer-links" type="hidden" value="{{settings.notAuthenticatedCustomerLinks | Size }}" /> </fieldset> <fieldset> <legend>{{authenticatedInfo}}</legend> <div> <div class="row"> <div class="cell available">{{available}}</div> <div class="cell no">{{number}}</div> <div class="cell">{{icon}}</div> <div class="cell">{{polishLabel}}</div> <div class="cell">{{translationId}}</div> <div class="cell">{{linkAction}}</div> <div class="cell delete">{{delete}}</div> </div> <div class="row"> <div class="cell available"><input type="checkbox" name="authenticatedCartImport" {% if settings.authenticatedCartImport -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="authenticatedCartImportNo" value="{{ settings.authenticatedCartImportNo }}" /></div> <div class="cell"><input type="text" name="authenticatedCartImportIcon" value="{{ settings.authenticatedCartImportIcon }}" /></div> <div class="cell"><input type="text" name="authenticatedCartImportLabel" value="{{ settings.authenticatedCartImportLabel }}" /></div> <div class="cell"><input type="text" name="authenticatedCartImportTranslation" value="{{ settings.authenticatedCartImportTranslation }}" /></div> <div class="cell">{{cartImportInfo}}</div> <div class="cell delete"></div> </div> <div class="row"> <div class="cell available"><input type="checkbox" name="authenticatedDownloadCSV" {% if settings.authenticatedDownloadCSV -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="authenticatedDownloadCSVNo" value="{{ settings.authenticatedDownloadCSVNo }}" /></div> <div class="cell"><input type="text" name="authenticatedDownloadCSVIcon" value="{{ settings.authenticatedDownloadCSVIcon }}" /></div> <div class="cell"><input type="text" name="authenticatedDownloadCSVLabel" value="{{ settings.authenticatedDownloadCSVLabel }}" /></div> <div class="cell"><input type="text" name="authenticatedDownloadCSVTranslation" value="{{ settings.authenticatedDownloadCSVTranslation }}" /></div> <div class="cell">{{downloadCSVInfo}}</div> <div class="cell delete"></div> </div> <div class="row"> <div class="cell available"><input type="checkbox" name="promotions" {% if settings.promotions -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="promotionsNo" value="{{ settings.promotionsNo }}" /></div> <div class="cell"><input type="text" name="promotionsIcon" value="{{ settings.promotionsIcon }}" /></div> <div class="cell"><input type="text" name="promotionsLabel" value="{{ settings.promotionsLabel }}" /></div> <div class="cell"><input type="text" name="promotionsTranslation" value="{{ settings.promotionsTranslation }}" /></div> <div class="cell"><input type="text" name="promotionsLink" value="{{ settings.promotionsLink }}" /></div> <div class="cell delete"></div> </div> <div class="row"> <div class="cell available"><input type="checkbox" name="documents" {% if settings.documents -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="documentsNo" value="{{ settings.documentsNo }}" /></div> <div class="cell"><input type="text" name="documentsIcon" value="{{ settings.documentsIcon }}" /></div> <div class="cell"><input type="text" name="documentsLabel" value="{{ settings.documentsLabel }}" /></div> <div class="cell"><input type="text" name="documentsTranslation" value="{{ settings.documentsTranslation }}" /></div> <div class="cell"><input type="text" name="documentsLink" value="{{ settings.documentsLink }}" /></div> <div class="cell delete"></div> </div> <div class="row"> <div class="cell available"><input type="checkbox" name="authenticatedSearchAdvanced" {% if settings.authenticatedSearchAdvanced -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="authenticatedSearchAdvancedNo" value="{{ settings.authenticatedSearchAdvancedNo }}" /></div> <div class="cell"><input type="text" name="authenticatedSearchAdvancedIcon" value="{{ settings.authenticatedSearchAdvancedIcon }}" /></div> <div class="cell"><input type="text" name="authenticatedSearchAdvancedLabel" value="{{ settings.authenticatedSearchAdvancedLabel }}" /></div> <div class="cell"><input type="text" name="authenticatedSearchAdvancedTranslation" value="{{ settings.authenticatedSearchAdvancedTranslation }}" /></div> <div class="cell"><input type="text" name="authenticatedSearchAdvancedLink" value="{{ settings.authenticatedSearchAdvancedLink }}" /></div> <div class="cell delete"></div> </div> {% for customerLink in settings.authenticatedCustomerLinks -%} <div class="row authenticatedCustomerLink" data-index="{{forloop.index0}}"> <div class="cell available"><input type="checkbox" name="authenticatedCustomerLink{{forloop.index0}}" {% if customerLink.available -%} checked {% endif -%} /></div> <div class="cell no"><input type="number" name="authenticatedCustomerLinkNo{{forloop.index0}}" value="{{ customerLink.no }}" /></div> <div class="cell"><input type="text" name="authenticatedCustomerLinkIcon{{forloop.index0}}" value="{{ customerLink.icon }}" /></div> <div class="cell"><input type="text" name="authenticatedCustomerLinkLabel{{forloop.index0}}" value="{{ customerLink.label }}" /></div> <div class="cell"><input type="text" name="authenticatedCustomerLinkTranslation{{forloop.index0}}" value="{{ customerLink.translation }}" /></div> <div class="cell"><input type="text" name="authenticatedCustomerLinkLink{{forloop.index0}}" value="{{ customerLink.link }}" /></div> <div class="cell delete"><div class="fa fa-trash"></div></div> </div> {% endfor -%} </div> <button class="add-link authenticated">{{addLink}}</button> <input name="customer-links" type="hidden" value="{{settings.authenticatedCustomerLinks | Size }}" /> </fieldset> </div> </div>
Po wykonaniu powyższych instrukcji należy wyszukać frazy </style> i wkleić następujący kod bezpośrednio nad wyszukaną linijką:
#lg-settings-content #tab1Content fieldset { width: calc(100% - 50px); } #lg-settings-content .row { border-bottom: 1px solid #ddd; } #lg-settings-content .row:first-child { border-top: 1px solid #ddd; border-bottom: 2px solid #ddd; font-weight: 700; } #lg-settings-content .row::after { display: block; clear: both; content: ''; } #lg-settings-content .cell { border-left: 1px solid #ddd; display: inline-block; vertical-align: middle; width: calc((100% - 308px)/4); min-height: 20px; padding: 10px; float: left; } #lg-settings-content .cell:last-child { border-right: 1px solid #ddd; } #lg-settings-content .cell input { width: 100%; height: 20px; } #lg-settings-content .cell.available { width: 70px; } #lg-settings-content .cell.available input { display: block; margin: 0; cursor: pointer; } #lg-settings-content .cell.no { width: 50px; } #lg-settings-content .cell.no input { width: 40px; height: 14px; } #lg-settings-content .cell.delete { width: 40px; text-align: center; } #lg-settings-content .cell.delete .fa { cursor: pointer; } #lg-settings-content .yellow-box { padding: 20px; border: 1px solid #fec42f; font-size: 14px; font-weight: 400 !important; position: relative; } #lg-settings-content .yellow-box:after { content: ''; width: 30px; height: 30px; position: absolute; top: 10px; right: 15px; background: url(../../Content/Images/all/important.png) no-repeat; } Ostatnią zmianą w pliku będzie dodanie kodu bezpośrednio nad wyszukaną frazą } </script>: $('#lg-settings-content').on('click', '.fa-trash', function(e){ $(e.currentTarget).parents('.row').remove(); }); function addCustomerLinksArr(name, o){ var customerLinks = []; $('#lg-settings-content .'+name).each(function(i,el) { var index = $(this).data('index'); var available = $(this).find('[name='+name+index+']').prop('checked'); var no = $(this).find('[name='+name+'No'+index+']').val(); var icon = $(this).find('[name='+name+'Icon'+index+']').val(); var label = $(this).find('[name='+name+'Label'+index+']').val(); var translation = $(this).find('[name='+name+'Translation'+index+']').val(); var link = $(this).find('[name='+name+'Link'+index+']').val(); if(no && (label || translation) && link){ var obj = {available: available, no: no, icon: icon, label: label, translation: translation, link: link}; customerLinks.push(obj); } }); if(customerLinks.length > 0){ o[name+'s'] = customerLinks; } } function __SaveLiquidSettings(){ var o = {}; $('#lg-settings-content input[name]').each(function(i,el) { if($(el).attr('type') == 'radio' || $(el).attr('type') == 'checkbox') { if($(el).is(':checked')) { o[el.name] = el.value; } } else { o[el.name] = el.value; } }); addCustomerLinksArr('authenticatedCustomerLink', o); addCustomerLinksArr('notAuthenticatedCustomerLink', o); return o; } Następnie przechodzimy do pliku scss/desktop2.scss i na jego końcu wklejamy kod: .main-navigation-bar-ui{ background: $bgColor; .manufacturer-container-ui{ border-top: none; border-bottom: none; li{ margin-right: -1px; border-bottom: 1px solid $lightBorderColor; } .categories-opened-ui{ vertical-align: bottom; float: none; display: inline-block; margin-right: -5px; border-top: 1px solid $lightBorderColor; margin-bottom: 0px; height: 68px; } .main-navigation-bar-links-ui{ width: calc(100% - 320px); vertical-align: bottom; background: $menuBackgroundColor; float: none; display: inline-block; border-left: 1px solid $lightBorderColor; border-top: 1px solid $lightBorderColor; border-bottom: none; border-right: none; ul{ display: flex; flex-wrap: wrap; } } } } Teraz przejdź do Panelu Administratora. Wybierz Wygląd Sklepu/ Ustawienia i przejdź w zakładkę Tłumaczenia. Po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Id: ShowProducts -- Tekst: Pokaż produkty

Id: ShowMore -- Tekst: Pokaż więcej

Ostatnim krokiem jest dodanie nowego elementu do nawigacji. W tym celu przejdź w zakładkę Szablon, a następnie Ustawienia paska nawigacji na stronie głównej, gdzie należy uzupełnić pola według własnych upodobań.

Etykieta PL - nazwa etykiety (na przykład: ti-import)

Id tłumaczenia - nazwa jaka będzie widoczna na elemencie

Link/Akcja - link do strony

Wyszukiwarka zaawansowana w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał wyszukiwarkę zaawansowaną.
Wskazówka
Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!

Wskazówka
Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu - _ ' " itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!

Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować
Pierwszym krokiem jest dodanie obiektu wykorzystywanego w wyszukiwarce. Aby to zrobić, otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. Kliknij w prawym górnym rogu na ikonkę z trzema kwadratami i z rozwiniętego menu wybierz opcję Edytuj ustawienia zaawansowane. Przejdź do zakładki Obiekty. Kliknij przycisk Dodaj. W polu Typ wybierz Menu producentów i marek a w polu Nazwa podaj manufacturer-brand, po czym kliknij Dodaj. W ten sposób utworzony został obiekt, dzięki któremu wyszukiwarka będzie mogła wybierać spośród producentów i marek. Następnie należy przypisać obiekt do wyszukiwarki. Podobnie jak przed chwilą, otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane. Wybierz zakładkę Strony. Znajdź stronę Wyszukiwanie zaawansowane (18). W tym samym wierszu, w kolumnie z nazwą pliku, wpisz advanced-search.html, a następnie zapisz. Kliknij na pole z napisem Wyszukiwanie zaawansowane (18). Pojawi się lista dostępnych obiektów. Kliknij kwadrat przy utworzonym wcześniej obiekcie manufacturer-brand, by pokazał się znak wyboru (tzw. "ptaszek"). A następnie zapisz. Kolejnym krokiem jest utworzenie nowego pliku o nazwie advanced-search.html w głównym katalogu z plikami Twojego szablonu Topaz. Treść tego pliku powinna wyglądać następująco: {% extends '_layout.html' -%} {% block pageContent -%} {% include 'elements/advanced-search/advanced-search.html' -%} {% endblock -%} Następnie, przejdź do katalogu elements. Utwórz w nim nowy katalog pod nazwą advanced-search. Przejdź do nowo utworzonego katalogu, a następnie utwórz w nim plik o nazwie advanced-search.html. Do nowo utworzonego pliku wklej poniższy kod: {% include 'partials/common/breadcrumbs.html' -%} {% assign filters = products.FilteringOptions.Filters %}

{{translations.Com_Search}}

{{translations.WithSequence}}

{{translations.WithAllWords}}

{{translations.WithAnyWord}}

{{translations.WithPartOfWord}}

{{translations.SearchIn}}

{{translations.Pro_ProductDescription}}
{{translations.Pro_ProductSymbol}}
{{translations.EanCode}}
{{translations.Man_ManufacturerCode}}
{{translations.Pro_productAttributes}}
{{translations.Pro_ProductCode}}

{{translations.Pro_productAttributes}}

{% if customer.HidePrices != true -%}
{{translations.PriceFrom}}
{{ customer.Currency }}
{{translations.PriceTo}}
{{ customer.Currency }}

{{translations.PricesDifference}}

{% endif -%}

{{translations.WithPhoto}}
{{translations.NewProduct}}
{{translations.Prize}}
{{translations.ExtraQuality}}
{{translations.ExtraPrice}}
{{translations.ProductFromNewsletter}}
{{translations.Promotion}}
{{translations.RecommendedProduct}}
{{translations.SellerRecomendation}}
{{translations.Sale}}
{{translations.BestReviewed}}

{% if manufacturer-brand.Manufacturer != 0 -%}

{{translations.Manufacturer}}

{% assign i = 1 -%} {% for manufacturer in manufacturer-brand.Manufacturers -%}
{{manufacturer.Name}} {% assign i = i | Plus: 1 -%} {% endfor -%}

{% endif -%} {% if manufacturer-brand.Brand != 0 -%}

{{translations.Brand}}

{% assign i = 1 -%} {% for brand in manufacturer-brand.Brands -%}
{{brand.Name}} {% assign i = i | Plus: 1 -%} {% endfor -%}

{% endif -%}
{% include 'partials/newsletter-global.html' -%}
Wskazówka
W przypadku problemów z narzędziem Liquid Sync, pliki należy dodać bezpośrednio przez Panel Administracyjny, w zakładce Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML.
Kolejny krok to dodanie odpowiedniej treści do plików .css, odpowiedzialnych za wygląd zaawansowanej wyszukiwarki towarów. W tym celu wróć do głównego katalogu z plikami Topaza, a następnie otwórz katalog css. Do znajdującego się w nim pliku layout.css Wklej na samym dole następujący, już zminifikowany kod: *{line-height:1.5em}.advancedSearch{max-width:1100px;height:auto;margin:40px auto;user-select:none}.advancedSearch select{-webkit-appearance:none;-moz-appearance:none;text-indent:1px;text-overflow:""}.advancedSearch input[type="checkbox"]{visibility:hidden;width:0;height:0}.advancedSearch .form__invalid-input{visibility:hidden}.advancedSearch .title{font-size:17px;font-weight:600;color:{{settings.primaryFontColor}};margin-bottom:20px;text-transform:uppercase}.advancedSearch .search{width:100%;height:40px;display:flex}.advancedSearch .search .searchInput{width:50%;height:42px;padding-left:20px;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};border-right:none}.advancedSearch .search .searchCategory{width:30%;height:42px;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};border-right:none;padding:0 10px;background-color:{{settings.primaryPageBgColor}};-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:5px;background-position-x:97%;transition:200ms}.advancedSearch .search .searchCategory option:checked{color:#000000 !important}.advancedSearch .search .searchCategory:hover{background-image:url("https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/caret-up.svg") !important}.advancedSearch .search .searchButton{width:20%;height:22px;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};text-align:center;text-decoration:none;text-transform:uppercase;padding:11px 0 7px;font-size:14px;cursor:pointer;transition:200ms}.advancedSearch .search .searchButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};transition:200ms}.advancedSearch .searchType{padding:30px 0 30px 15px;border-bottom:1px solid {{settings.borderColor}};display:block;flex-direction:row;width:calc(100% - 15px);list-style:none}.advancedSearch .searchType li{display:inline}.advancedSearch .searchType li>*{cursor:pointer}.advancedSearch .searchType li input{visibility:hidden;display:none}.advancedSearch .searchType li .option{font-size:14px;color:{{settings.primaryFontColor}};border-radius:50%;background-color:{{settings.primaryPageBgColor}};border:80% solid {{settings.primaryFontColor}}}.advancedSearch .searchType li label{margin:0 30px 0 5px;font-size:14px}.advancedSearch .searchType li label:before{height:15px;width:16px;margin-right:10px;border-radius:50%;border:1px solid #0000005e;content:"";display:inline-block}.advancedSearch .searchType li.selected label:before{border-color:#000000;-webkit-box-shadow:inset 0 0 0 5px #000000;-moz-box-shadow:inset 0 0 0 5px #000000;box-shadow:inset 0 0 0 5px #000000}.advancedSearch .propertyContainer{width:100%;padding:30px 0;border-bottom:1px solid {{settings.borderColor}}}.advancedSearch .propertyContainer .checkboxContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.advancedSearch .propertyContainer .checkboxContainer span{flex:0 1 25%;margin:10px 0;font-size:14px;color:{{settings.primaryFontColor}}}.advancedSearch .propertyContainer .checkboxContainer span .checkIcon{position:relative;top:-14px;left:-25px;fill:{{settings.checkColor}}}.advancedSearch .propertyContainer .checkboxContainer span .checkIcon svg{width:12px;height:12px}.advancedSearch .propertyContainer .checkboxContainer span label{margin-left:10px;display:inline-flex;height:20px}.advancedSearch .propertyContainer .checkboxContainer span input:checked+label:before{text-align:center;background-color:{{settings.checkActiveBgColor}};overflow:hidden;border:solid 1px {{settings.checkActiveBgColor}}}.advancedSearch .propertyContainer .checkboxContainer span input+label:before{content:" ";display:inline-block;cursor:pointer;position:relative;width:15px;height:15px;border-radius:4px;background-color:transparent;color:{{settings.borderColor}};border:1px solid {{settings.borderColor}};transition:all 200ms ease;margin-right:10px}.advancedSearch .propertyContainer .checkboxContainer span:hover,.advancedSearch .propertyContainer .checkboxContainer input:hover,.advancedSearch .propertyContainer .checkboxContainer label:hover{cursor:pointer}.advancedSearch .propertyContainer .checkboxContainer:after{content:"";flex:1 0 25%}.advancedSearch .propertyContainer .productFeaturesContainer{display:flex;width:100%;flex-direction:row;flex-wrap:wrap}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer{width:25%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span{display:block}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span .price{width:100%;font-size:14px;margin-bottom:10px;color:{{settings.primaryFontColor}};display:block}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span input[type="number"]{height:40px;width:60%;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};margin-bottom:20px;text-align:right;padding-right:42px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span .currency{position:relative;top:0;left:-40px;width:fit-content;margin:0;color:{{settings.secondaryFontColor}};font-size:14px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures{width:75%;margin-top:15px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 33%;margin:10px 0;font-size:14px;color:{{settings.primaryFontColor}}}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span label{margin-left:10px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures:after{content:"";flex:0 1 33%}.advancedSearch .propertyContainer .productFeaturesContainer .hidePricesFeatures{width:100%}.advancedSearch .lastProperty{border:none} Do pliku layout-m.css wklej poniższy kod: @media only screen and (max-width: 768px){.advancedSearch{width:calc(100% - 40px);margin:0 auto}.advancedSearch input[type="checkbox"]{position:fixed}.advancedSearch .search{margin-top:20px;display:block;width:100%}.advancedSearch .search .searchInput{width:100%;display:block;border-right:1px solid {{settings.inputLabelColor}};margin-bottom:20px}.advancedSearch .search .searchCategory{width:100%;display:block;border-right:1px solid {{settings.inputLabelColor}};margin-bottom:20px}.advancedSearch .search .searchButton{display:block;width:100%}.advancedSearch .search .scrollingButton{display:block;width:100%;position:fixed;top:0;left:0;z-index:1}.advancedSearch .searchType{margin-top:110px;padding-left:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.advancedSearch .searchType li{display:inline-block;flex:50%;margin-bottom:10px}.advancedSearch .searchType li>label{margin:0}.advancedSearch .propertyContainer{margin:10px 0}.advancedSearch .propertyContainer .checkboxContainer span{flex:0 1 100%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span{flex:1 0 50%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span input[type="number"]{width:75%}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures{width:100%;display:flex;flex-direction:row;justify-content:space-between}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 100%}} Do pliku layout-d.css wklej poniższy kod: @media only screen and (min-width: 768px) and (max-width: 1150px){.advancedSearch{width:calc(100% - 40px);margin:0 auto}.advancedSearch .search{margin-top:20px}}@media only screen and (min-width: 768px) and (max-width: 1000px){.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 43%}} W ten sposób w Topazie znalazł się kod odpowiedzialny za wygląd wyszukiwarki zaawansowanej. Kolejny krok to dodanie tłumaczeń. W tym celu należy w Panelu Administratora wejść w Wygląd sklepu -> Ustawienia i wybrać zakładkę Tłumaczenia. Przycisk Dodaj pozwala na dodanie nowego tłumaczenia. Aby tłumaczenie zostało dodane, należy wprowadzić odpowiednie Id oraz frazę (Tekst). Lista Id oraz fraz do wprowadzenia: 1. AllCategories - Wszystkie kategorie 2. SearchElement - Szukaj towaru... 3. WithSequence - Wyrażenie 4. WithAllWords- Wszystkie słowa 5. WithAnyWord - Dowolne ze słów 6. WithPartOfWord - Część słowa 7. SearchIn - Szukaj w 8. EanCode - Kod EAN 9. PriceFrom - Cena od 10. PriceTo - Cena do 11. PricesDifference - Cena maksymalna musi być większa od ceny minimalnej 12. WithPhoto - Tylko ze zdjęciem 13. NewProduct - Nowość 14. Prize - Nagroda 15. ExtraQuality - Superjakość 16. ExtraPrice - Supercena 17. ProductFromNewsletter - Towar z gazetki 18. Promotion - Promocja 19. RecommendedProduct - Towar polecany 20. SellerRecomendation - Rekomendacja sprzedawcy 21. Sale - Wyprzedaż 22. BestReviewed - Najlepiej oceniany 23. Manufacturer - Producent 24. Brand - Marka
Wskazówka
<strong.Uwaga! Kopiując Id z powyższej instrukcji do Panelu Administracyjnego, upewnij się, że po danym Id nie została skopiowana żadna spacja.
Następnie należy dodać odpowiedni kod do plików js. W tym celu, w plikach Topaza, otwórz folder js a następnie plik layout0.js. Odszukaj linijkę z frazą productListFunctions.init();. Pod znalezioną linijką znajduje się linia ze znakiem }. Pod nią wklej następujący kod: if($('body').find('.advancedSearch').index() >= 0) { advancedSearchFunctions.init(); } Następnie otwórz plik layout1.js znajdujący się w tym samym katalogu. Poniższy kod możesz wkleić na samym początku pliku: var advancedSearchFunctions = { init: function () { this.events(); }, events: function () { $('body').on('click', '.js-search-item', function (e) { $(e.currentTarget).closest('.searchType').children('.selected').removeClass('selected'); $(e.currentTarget).parent().addClass('selected'); }); $('body').on('click', '.checkboxContainer > span', function (e) { var input = $(this).children('input'); if(input.prop("checked") == true) { input.prop( "checked", false); } else { input.prop("checked", true); } }); $('body').on('click','.search-radio', function(e) { if ($('.search-radio[value=searchAll]').is(":checked")) { $('.advanced-search-input').attr('name', 'searchAll'); } else if ($('.search-radio[value=searchWild]').is(":checked")) { $('.advanced-search-input').attr('name', 'searchWild'); } else if ($('.search-radio[value=searchAny]').is(":checked")) { $('.advanced-search-input').attr('name', 'searchAny'); } else { $('.advanced-search-input').attr('name', 'name'); } }); $('body').on('change', '#priceTo, #priceFrom', function(e) { var priceTo = Number($('#priceTo').val()); var priceFrom = Number($('#priceFrom').val()); if(priceTo != '') { $('#priceTo').val(parseInt(priceTo)); } if(priceFrom != '') { $('#priceFrom').val(parseInt(priceFrom)); } if(priceFrom > priceTo) { $('.form__invalid-input').css('visibility', 'visible'); $('.searchButton').prop('disabled', true); } else { $('.form__invalid-input').css('visibility', 'hidden'); $('.searchButton').prop('disabled', false); } }); $(window).scroll(function(){ let scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop(); if($('.newsletter1-wrapper')[0]) { if ($(this).scrollTop() > 300 && scrollBottom > 20 ) { $('.searchButton').addClass('scrollingButton'); } else { $('.searchButton').removeClass('scrollingButton'); } } else { if ($(this).scrollTop() > 300 ) { $('.searchButton').addClass('scrollingButton'); } else { $('.searchButton').removeClass('scrollingButton'); } } }); $(function(){ $('body').on('click', '.searchButton', function(e) { var t=$(this).parents('.advancedSearch'),hasValue=false,arr=$('#SearchAdvancedForm input[type!=hidden],#SearchAdvancedForm select').serializeArray(),i, data = t.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); var tab = []; for(i in arr) if(arr[i].value) {hasValue=true;break;} data.push({name: "__csrf", value: __CSRF}); $.post(null, data, function (d) { if (d.action.Redirect302) location.href = d.action.Redirect302; }); }); }); } } Ostatnim krokiem jest dodanie możliwości otwarcia wyszukiwarki zaawansowanej przy pomocy linku umieszczonego w stopce sklepu. Aby to zrobić, przejdź do pliku elements -> footer -> footer-1.html (jeśli w Kreatorze wybrałeś drugi rodzaj stopki, plik będzie nazywał się footer-2.html). Następnie wyszukaj linijkę z frazą advanced-search-link. W linijce tej znajduje się fragment href="#". Zamień znak # na {{config.DefinedPages.AdvancedSearch.Url}}. W ten sposób z poziomu stopki będzie można w prosty sposób otworzyć zaawansowane wyszukiwanie.

Id	Tekst
ExternalWebsites	Serwisy zewnętrzne
NeedToConnectToFb	Musisz być zalogowany do Facebooka, aby połączyć konto.
CantLoginWithFb	Błąd podczas logowania do Facebooka.
FailedDisconnectFromFb	Błąd podczas odłączania konta Facebook.
FailedConnectToFb	Błąd podczas łączenia z kontem Facebook.
LoginWithFb	Zaloguj się przez Facebook
Disconnect_Fb	Odłącz konto od Facebooka
ConnectFb	Połącz konto z Facebookiem
CantLoginWithGoogle	Nie udało się zalogować, spróbuj jeszcze raz!
FailedDisconnectFromGoogle	Błąd podczas odłączania konta Google.
FailedConnectToGoogle	Błąd podczas łączenia z kontem Google.
LoginWithGoogle	Zaloguj się przez Google
Disconnect_Google	Odłącz konto od Google
ConnectGoogle	Połącz konto z Google

Motyw kolorystyczny szablonu Topaz:	Domyślny	Granatowy	Bordowy	Błękitny	Beżowy
Nazwa:
a	CB6724	151B72	BE2745	FF9181	BCAA9C
bgcolor1	ffffff	ffffff	ffffff	ffffff	ffffff
bgcolor2	F0A88D	9597AD	CD6B7F	BAD4F0	E6CAA6
shopName	CB6724	151B72	BE2745	FF9181	BCAA9C
footerTitle	191616	000000	000000	17191A	3B3B3B
footerText	191616	000000	000000	17191A	3B3B3B
title1	4eb6f1	4eb6f1	4eb6f1	4eb6f1	4eb6f1
title2	ff7670	ff7670	ff7670	ff7670	ff7670
title3	53ccbd	53ccbd	53ccbd	53ccbd	53ccbd
text	191616	000000	000000	17191A	3B3B3B
orderColumnName	a8a9a9	9597ad	a8a9a9	9597ad	909090
orderDetails	3b3a3a	000000	000000	17191A	3B3B3B
orderPaymentName	a8a9a9	9597ad	a8a9a9	9597ad	909090
orderPaymentValue	191616	3B3B3B	000000	17191A	3B3B3B
orderPaymentTotal	CB6724	151B72	BE2745	FF9181	BCAA9C
tableName	CB6724	151B72	BE2745	FF9181	BCAA9C
rowName	191616	000000	000000	17191A	3B3B3B
rowContent	a8a9a9	9597ad	a8a9a9	9597ad	909090
feedbackButton (background-color)	CB6724	C85555	CD6B7F	FF9181	3B3B3B
feedbackButton (color)	ffffff	ffffff	ffffff	ffffff	ffffff
feedbackButton (border)	CB6724	C85555	CD6B7F	FF9181	3B3B3B
feedbackButton-2 (background-color)	191616	151B72	000000	17191A	BCAA9C
feedbackButton-2 (color)	ffffff	ffffff	ffffff	ffffff	ffffff
feedbackButton-2 (border)	191616	151B72	000000	17191A	BCAA9C
finishPaymentButton (background-color)	CB6724	C85555	CD6B7F	FF9181	3B3B3B
finishPaymentButton (color)	ffffff	ffffff	ffffff	ffffff	ffffff
finishPaymentButton (border)	CB6724	C85555	CD6B7F	FF9181	3B3B3B