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, dla nowych sklepów, odnośnik do mapy strony znajduje się w stopce.Jak skonfigurować mapę strony?
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ć.
Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?
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.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?
- 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ąć?
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.
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.
- 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.
- 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 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.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.
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.
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.Bannery
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.
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ść".
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.
Rekomendowane rozmiary obrazków w bannerach dla szablonów Comarch:
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ń:
Zalecane rozmiary dla wskazanych bannerów według tego ustawienia prezentują się następująco: konfiguracji można dokonać z poziomu: Wygląd Sklepu/ Ustawienia /Bannery/ menuBanner, 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ę: 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. 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. 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. 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. 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.
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 Betterfly. 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ę 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. 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 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 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ę. Krok 1. Kolejne zmiany będą dokonywane już na karcie towaru. Na wybranym towarze przejdź na zakładkę Atrybuty, dodaj nowy atrybut 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. 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 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ą. Krok 7. Nie zapomnij w zakładce Aplikacje zaznaczyć parametr e-Sklep. 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. 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 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ł. 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. 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. Niektóre szablony, takie jak Opal czy Topaz, domyślnie posiadają skonfigurowany banner jako lookbook. Oznacza to, że nie musisz tworzyć specjalnie dodatkowej sekcji. 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. 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. 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. Lookbook w sklepie demonstracyjnym https://demo-topaz.comarchesklep.pl/ 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. Oznaczone towary w lookbooku - szablon Bursztyn Przykładowy wygląd rozbudowanej stopki w szablonie Topaz 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. 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. 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. 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. 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.
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.
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
Typy bannerów dla szablonów Topaz i Szafir (B2B)
Dodawanie bannerów
Import i eksport bannerów
Jak zarządzać elementami na liście towarów z panelu administracyjnego?
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?
Jak edytować nagłówek w szablonie B2C?
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:
W tym miejscu masz możliwość:
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.
Jak edytować odnośniki do mediów społecznościowych?
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.
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 automatycznie ustawić język sklepu w oparciu o język przeglądarki?
Logotyp oraz favicon w Comarch e-Sklep
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.
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.
Tworzenie filtrów na liście kategorii w e-Sklepie
Wstęp
Comarch Betterfly
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 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
Widok z e-Sklepu po synchronizacji i wybraniu odpowiednich filtrów:
Comarch ERP Optima
Jak utworzyć filtr?
dodaj nowy atrybut.
:
dodaj nowy atrybut do grupy towarowej.
Jak dodać atrybut do towaru?
i zapisz zmiany 
Comarch ERP XL
Jak utworzyć filtr?
dodaj nową klasę atrybutów.
.
Jak dodać atrybut do towaru?
Comarch ERP Altum
Jak utworzyć filtr?
Jak dodać atrybut do towaru?
Jak skonfigurować Lookbook w Comarch e-Sklep?
Lookbook - czym jest i jak do wykorzystać?
Konfiguracja lookbooka w panelu administracyjnym
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 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 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.
Widok lookbooka w formie listy możesz zobaczyć w naszym sklepie demonstracyjnym.
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.
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.
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.
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:
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:
Jak dodać zdjęcia 360° dla moich towarów w Comarch e-Sklep?
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.
Rozbudowana stopka w szablonach Topaz i Szafir - jak ją skonfigurować?
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 SzafirJak skonfigurować poszczególne elementy?
Udostępnij towar w mediach społecznościowych - konfiguracja dla szablonów Topaz i 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:
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.
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.
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.
Dodawanie nowej strony do szablonu (z zachowaniem stylów)
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.
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).
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.
d) Następnie wejdź ponownie w szczegóły zapisanej treści i wprowadź Identyfikator*.
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.
Ustawienia Wyglądu Sklepu
Ustawienia
Obszar Wygląd sklepu/ Ustawienia zawiera szereg ustawień odnośnie wyglądu Twojego sklepu pogrupowanych w zakładki:
Ustawienia szablonu
W ustawieniach szablonu możesz:
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.
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.
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)
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.
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.
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.
Produkty polecane
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:
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.Strony w e-Sklepie
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:
Jak dodać nową treść i stronę?
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 formalne/zakładka Regulamin i Inne, po czym dodać nową treść:
Po kliknięciu przycisku Dodaj regulamin należy uzupełnić nazwę oraz treść lub wgrać treści z pdf. Możliwe jest także dodanie załączników.
Zmiany należy dodać i opublikować. Można również je zapisać bez publikacji.
Po zapisaniu zmian, przechodząc do szczegółów nowo dodanej treści, nad polem nazwa pojawi się identyfikator, który będzie niezbędny w dalszej konfiguracji,
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.
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ę.Zmiana kolorystyki
Szablon Agat, podobnie jak wyżej wymienione, posiada również trzy schematy kolorów:
Szablon Szafir posiada następujące schematy kolorów:
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:
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.
Jak wyeksportować i zaimportować swój szablon w e-Sklepie?
Jak wyeksportować swój szablon z Comarch e-Sklep?
Jak wgrać własny szablon do Comarch e-Sklep?
Własny szablon. Jak go wgrać?
Prezentacja własnych punktów odbioru osobistego w formie mapy
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)
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
{% include 'collection-points-styles.html' %}
{% include 'collection-points-scripts.html' %}
Szablon Agat
{% if page.PageId == config.DefinedPages.Order.Id -%}
<link rel="stylesheet" type="text/css" href="css/collection-points.css">
{% endif -%}
Szablon Opal
{% if page.PageId == config.DefinedPages.Order.Id -%}
<link rel="stylesheet" type="text/css" href="css/collection-points.css">
{% endif -%}
{% 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
{% if page.PageId == config.DefinedPages.Order.Id -%}
<link rel="stylesheet" type="text/css" href="css/collectionpoints.css">
{% endif -%}
{% 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 %}
Powiększanie zdjęć w szczegółach towaru w szablonie Topaz
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.
<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;
}
Integracja z edrone - dostosowanie szablonu
{% 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.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 %}
{% 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 %}
{% 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 %}
{% 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 || {};{% if config.External.Edrone.AppId != '' -%}
<script type="text/javascript">
_edrone.action_type = 'order';
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();
}
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();
}
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);
});
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();
}Nowości i promocje w szablonie
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:
W edycji obiektu 'productnew' 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.