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?
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 Betterfly
Krok 1. Zdjęcia kategorii w Comarch Betterfly 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:
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:
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:
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.
Banner promocyjny w szablonie Topaz.
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 Linkiza 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?
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?
Z dniem 28 czerwca 2025roku 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 2025roku, 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.
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 plikiprzy 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.
Instrukcja: Jak dostosować samodzielnie szablon do szybkich zwrotów w e-Commerce?
Wskazówka
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ć.
W szablonach Rubin, Szafir oraz Topaz / One Page Shop wprowadziliśmy funkcjonalność szybkich zwrotów. Umożliwia ona klientom składanie wniosku o zwrot produktu zarówno z poziomu profilu klienta (zalogowani), jak i z dedykowanej strony zwrotów po podaniu numeru zamówienia oraz adresu e-mail (niezalogowani). Wraz z funkcjonalnością pojawił się m.in. rozbudowany ekran potwierdzenia zwrotu zawierający kolejne kroki i adres do wysyłki, banery informacyjne dotyczące terminu zwrotu oraz przyciski akcji w tabeli produktów wyświetlane bezpośrednio (zamiast w rozwijanym menu).Aby Twój szablon poprawnie obsługiwał te zmiany, wprowadź modyfikacje opisane poniżej w sekcji dotyczącej Twojego szablonu. Po zakończeniu edycji pamiętaj o kompilacji i minifikacji plików js oraz scss.
Wskazówka
Potrzebujesz pomocy lub masz pytania? Skontaktuj się z nami poprzez portal asysta.comarch.pl.
Wskazówka
Obecnie w Polsce trwają prace nad ostatecznym kształtem przepisów oraz nowelizacją Ustawy o prawach konsumenta, która wdroży unijną dyrektywę UE 2023/2673 i wprowadzi nowe wymagania techniczne dla platform e-commerce (m.in. ułatwienia w procedurze zwrotów). W momencie publikacji ostatecznej wersji polskich przepisów, wdrożone funkcjonalności mogą wymagać dostosowania do ostatecznych wytycznych ustawodawcy. Prezentowane informacje mają charakter poglądowy a instrukcja dotyczy zmian, jakie wprowadziliśmy w szablonach Comarch – w przypadku pytań dotyczących indywidualnej sytuacji prawnej Twojego sklepu, zalecamy konsultację z radcą prawnym lub adwokatem.
W panelu administracyjnym sklepu zaktualizuj dwa istniejące tłumaczenia oraz dodaj nowe klucze wymagane przez funkcjonalność szybkich zwrotów.Zaktualizuj poniższe istniejące tłumaczenia:ReturnSuccessTitle
- PL: Gotowe! Przyjęliśmy Twoje zgłoszenie
- EN: Done! We have received your request
- DE: Fertig! Wir haben Ihre Anfrage erhalten
- FR: C'est fait ! Nous avons reçu votre demande
ReturnSuccessInfo
- PL: Przygotuj paczkę i odeślij ją do nas – wszystkie szczegóły znajdziesz poniżej.
- EN: Prepare the package and send it back to us – all the details are below.
- DE: Bereiten Sie das Paket vor und senden Sie es an uns zurück – alle Details finden Sie unten.
- FR: Préparez le colis et renvoyez-le nous – tous les détails sont ci-dessous.
Dodaj nowe tłumaczenia:OrderReturnDeadlineInfo
- PL: Zamówienie można zwrócić w ciągu {0} dni od daty dostawy.
- EN: You can return the order within {0} days from the delivery date.
- DE: Sie können die Bestellung innerhalb von {0} Tagen ab Lieferdatum zurückgeben.
- FR: Vous pouvez retourner la commande dans les {0} jours suivant la date de livraison.
RestrictedOrderViewInfo
- PL: Wybrane dane zamówienia zostały ukryte ze względów bezpieczeństwa. Możesz zwrócić produkty bez logowania.
- EN: Some order details are hidden for security reasons. You can return products without signing in.
- DE: Einige Bestelldetails wurden aus Sicherheitsgründen ausgeblendet. Sie können Produkte ohne Anmeldung zurücksenden.
- FR: Certaines informations de la commande ont été masquées pour des raisons de sécurité. Vous pouvez retourner des produits sans vous connecter.
Com_RefundMethod
- PL: Sposób zwrotu środków
- EN: Refund method
- DE: Rückerstattungsmethode
- FR: Mode de remboursement
Com_RefundAsPaid
- PL: Tak jak zapłacono
- EN: Same as paid
- DE: Wie bezahlt
- FR: Comme payé
Com_RefundToBankAccount
- PL: Na konto bankowe
- EN: To bank account
- DE: Auf Bankkonto
- FR: Sur le compte bancaire
Com_BankAccountNumber
- PL: Nr konta bankowego
- EN: Bank account number
- DE: Bankkontonummer
- FR: Numéro de compte bancaire
Com_ConfirmationSentTo
- PL: Potwierdzenie zwrotu zostało wysłane na adres:
- EN: Return confirmation has been sent to:
- DE: Bestätigung wurde gesendet an:
- FR: La confirmation de retour a été envoyée à:
Com_NextSteps
- PL: Następne kroki
- EN: Next Steps
- DE: Nächste Schritte
- FR: Prochaines étapes
Com_PackProducts
- PL: Bezpiecznie zapakuj swoje produkty
- EN: Safely pack your products
- DE: Verpacken Sie Ihre Produkte sicher
- FR: Emballez vos produits en toute sécurité
Com_SendPackageTo
- PL: Wyślij paczkę na adres:
- EN: Send the package to the address:
- DE: Senden Sie das Paket an die Adresse:
- FR: Envoyez le colis à l'adresse:
Com_RefundAfterReceive
- PL: Pieniądze zwrócimy niezwłocznie po otrzymaniu i sprawdzeniu Twojej paczki
- EN: We will refund the money promptly upon receipt and inspection of your package
- DE: Wir erstatten das Geld umgehend nach Erhalt und Überprüfung Ihres Pakets zurück
- FR: Nous rembourserons l'argent rapidement après réception et inspection de votre colis
ReturnInThreeSteps
- PL: Zwróć towar w 3 krokach
- EN: Return the product in 3 steps
- DE: Geben Sie die Ware in 3 Schritten zurück
- FR: Retournez la marchandise en 3 étapes
ReturnWithoutReasonInfo
- PL: Przysługuje Ci możliwość zwrotu bez podania przyczyny.
- EN: You have the right to return the product without giving a reason.
- DE: Sie haben das Recht, die Ware ohne Angabe von Gründen zurückzugeben.
- FR: Vous avez le droit de retourner la marchandise sans donner de motif.
OrEnterOrderNumber
- PL: lub podaj numer zamówienia
- EN: or enter the order number
- DE: oder geben Sie die Bestellnummer ein
- FR: ou saisissez le numéro de commande
FillForm
- PL: Wypełnij formularz
- EN: Fill out the form
- DE: Füllen Sie das Formular aus
- FR: Remplissez le formulaire
ReturnOnline
- PL: zwrotu online
- EN: online return
- DE: Online-Rückgabe
- FR: retour en ligne
SendParcel
- PL: Wyślij paczkę
- EN: Send the parcel
- DE: Paket senden
- FR: Envoyer le colis
SendParcelToOurAddress
- PL: nadaj przesyłkę na nasz adres
- EN: send the parcel to our address
- DE: senden Sie das Paket an unsere Adresse
- FR: envoyez le colis à notre adresse
FastSimpleSecure
- PL: Szybko, prosto i bezpiecznie.
- EN: Fast, simple and secure.
- DE: Schnell, einfach und sicher.
- FR: Rapide, simple et sécurisé.
ReadyForReturn
- PL: Gotowy do zwrotu?
- EN: Ready for return?
- DE: Bereit zur Rückgabe?
- FR: Prêt pour le retour ?
ReadyForReturnInfo
- PL: Kliknij poniżej, aby rozpocząć proces zwrotu. Przeprowadzimy Cię przez wszystkie kroki.
- EN: Click below to start the return process. We will guide you through all the steps.
- DE: Klicken Sie unten, um den Rückgabeprozess zu starten. Wir führen Sie durch alle Schritte.
- FR: Cliquez ci-dessous pour lancer le processus de retour. Nous vous guiderons à travers toutes les étapes.
StartReturn
- PL: Rozpocznij zwrot
- EN: Start return
- DE: Rückgabe starten
- FR: Commencer le retour
ProductReturn
- PL: Zwrot produktu
- EN: Product return
- DE: Produktrückgabe
- FR: Retour du produit
ProductReturnFormInfo
- PL: Wprowadź dane zamówienia, aby zlokalizować zakup i rozpocząć proces zwrotu. Numer zamówienia znajdziesz w e-mailu z potwierdzeniem.
- EN: Enter the order details to locate the purchase and start the return process. You will find the order number in the confirmation e-mail.
- DE: Geben Sie die Bestelldaten ein, um den Kauf zu lokalisieren und den Rückgabeprozess zu starten. Die Bestellnummer finden Sie in der Bestätigungs-E-Mail.
- FR: Saisissez les données de la commande pour localiser l'achat et démarrer le processus de retour. Vous trouverez le numéro de commande dans l'e-mail de confirmation.
InvalidOrderNumber
- PL: Błędny numer zamówienia. Spróbuj ponownie.
- EN: Invalid order number. Please try again.
- DE: Ungültige Bestellnummer. Bitte versuchen Sie es erneut.
- FR: Numéro de commande incorrect. Veuillez réessayer.
FindOrder
- PL: Znajdź zamówienie
- EN: Find order
- DE: Bestellung finden
- FR: Trouver la commande
LoginToSeeOrdersAndReturn
- PL: aby zobaczyć swoje zamówienia i dokonać zwrotu.
- EN: to see your orders and make a return.
- DE: um Ihre Bestellungen einzusehen und eine Rückgabe vorzunehmen.
- FR: pour voir vos commandes et effectuer un retour.
RefundLookupError
- PL: Wystąpił błąd podczas wyszukiwania zamówienia. Spróbuj ponownie później.
- EN: An error occurred while searching for the order. Please try again later.
- DE: Bei der Suche nach der Bestellung ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.
- FR: Une erreur s'est produite lors de la recherche de la commande. Veuillez réessayer plus tard.
2. Nowa strona Szybkie zwroty
Funkcjonalność szybkich zwrotów wymaga utworzenia dodatkowej strony statycznej refunds. Wykonaj poniższe kroki.
Plik refunds.html w katalogu głównym szablonu
W katalogu głównym szablonu utwórz nowy plik refunds.html z następującą zawartością:{% extends '_layout.html' -%}
{% block pageContent -%}
{% include 'static-elements/refunds/refunds.html' -%}
{% endblock -%}
Plik static-elements/refunds/refunds.html
W folderze static-elements utwórz nowy katalog refunds, a w nim plik refunds.html:
W pliku partials/cart/thx.html znajdź fragment generujący etykietę zgody w sekcji zgód marketingowych:Usuń z niego atrybut for="{{ consent.FieldValue }}". Po zmianie linia powinna wyglądać tak:
partials/common/login.html
1. W pliku partials/common/login.html w kontenerze opakowującym formularz dodaj klasę login-container-popup. Zamień linię:
na:
2. W warunku otaczającym przycisk zamykający popup logowania usuń warunek and settings.signIn == "popup". Zamień linię:{% if page.PageId != config.DefinedPages.Login.Id and page.PageId != config.DefinedPages.CustomerProfile.Id and page.PageId != config.DefinedPages.Order.Id and settings.signIn == "popup" -%}na:{% if page.PageId != config.DefinedPages.Login.Id and page.PageId != config.DefinedPages.CustomerProfile.Id and page.PageId != config.DefinedPages.Order.Id -%}
partials/product/amount-stepper.html
W pliku partials/product/amount-stepper.html znajdź blok ustawiający zmienne dla typów complaint i return:{% if type == 'complaint' or type == 'return' -%}
{% assign reloadClass = '' -%}
{% assign complaintOrReturn = true -%}
{% endif -%}i dodaj w jego wnętrzu nową linię ustawiającą maksymalną ilość produktu:{% if type == 'complaint' or type == 'return' -%}
{% assign reloadClass = '' -%}
{% assign complaintOrReturn = true -%}
{% assign max = product.Quantity | Normalize -%}
{% endif -%}
Na samym początku pliku partials/order/products-partials/product-table-header.html dodaj blok przypisujący flagę complaintsOrReturnsEnabled:{% if config.Complaints.ComplaintsEnabled or config.Complaints.ReturnsEnabled -%}
{% assign complaintsOrReturnsEnabled = true -%}
{% endif -%}
partials/product/products-table.html
Przyciski reklamacji i zwrotu są wyświetlane bezpośrednio w tabeli, zamiast w rozwijanym menu. W pliku partials/product/products-table.html znajdź komórkę z opcjami:
{% if order.Status == 3 and complaintsOrReturnsEnabled and product.CanComplain == true -%}
{% if config.Complaints.ComplaintsEnabled == true and product.CanComplain == true -%}
{% endif -%}
{% if config.Complaints.ReturnsEnabled == true and product.CanReturn == true and product.IsSetElement == false -%}
{% endif -%}
{% endif -%}
i zastąp ją następującym fragmentem:
{% if order.Status == 3 and complaintsOrReturnsEnabled -%}
{% if config.Complaints.ComplaintsEnabled == true and product.CanComplain == true -%}
{% endif -%}
{% if config.Complaints.ReturnsEnabled == true and product.CanReturn == true and product.IsSetElement == false -%}
{% endif -%}
{% endif -%}
Następnie w tym samym pliku znajdź zewnętrzny warunek otaczający kontenery formularzy reklamacji i zwrotu i poluzuj go (usuń warunek product.CanComplain == true). Zamień:{% if order.Status == 3 and complaintsOrReturnsEnabled and product.CanComplain == true -%}na:{% if order.Status == 3 and complaintsOrReturnsEnabled -%}
W pliku partials/customer-profile/orders/order-details.html wykonaj poniższe zmiany.a)Bloki Opcje (zawierające klasę options submenu z przyciskami akcji zamówienia) opakuj warunkiem {% unless order.Restricted -%} ... {% endunless -%}, aby ukryć je dla niezalogowanych klientów dokonujących szybkiego zwrotu. Wstaw {% unless order.Restricted -%} bezpośrednio przed otwierającym
i zamykającym {% endunless -%} po jego zamykającym
:
{% unless order.Restricted -%}
...
{% endunless -%}
b)W kontenerze messages-container-js na początku (przed istniejącymi komunikatami typu OrderEditable) dodaj baner informujący o ukrytych danych zamówienia oraz, na końcu kontenera, baner informujący o terminie zwrotu:{% if order.Restricted -%}
{{ translations.RestrictedOrderViewInfo }}
{% endif -%}
{% if order.Status == 3 and config.Complaints.ReturnsEnabled -%}
{% endif -%}
c)We wszystkich miejscach wyświetlających numer telefonu klienta zamień warunki sprawdzające jedynie pusty ciąg na warunki sprawdzające również wartość null. Zamień każde wystąpienie:{% if order.Customer.DeliveryAddress.PhoneNo != '' -%}na:{% if order.Customer.DeliveryAddress.PhoneNo != null and order.Customer.DeliveryAddress.PhoneNo != '' -%}d)Analogicznie zaktualizuj warunek wyświetlania NIP-u/TIN-u w sekcji danych do faktury. Zamień:{% elseif order.Customer.TIN != '' -%}na:{% elseif order.Customer.TIN != null and order.Customer.TIN != '' -%}e)W sekcji adresu dostawy zamień otwierający warunek alternatywny {% else -%} (bezpośrednio przed kontenerem z translations.DelivAddress) na bardziej restrykcyjny:{% elseif order.Customer.DeliveryAddress != null -%}f)Sekcję wybranego dokumentu (ChoosenDocument) opakuj warunkiem ukrywającym ją dla zamówień typu restricted. Wstaw {% unless order.Restricted -%} przed kontenerem order-details-item z tytułem translations.ChoosenDocument oraz {% endunless -%} za jego zamykającym
.
g)W sekcji dokumentów zamówienia dodaj do warunku sprawdzenie order.Restricted == false. Zamień:{% if orderDocumentsSize > 0 -%}na:{% if orderDocumentsSize > 0 and order.Restricted == false -%}h)W sekcji załączników zamówienia dodaj analogiczne sprawdzenie. Zamień:{% if config.Orders.AttachmentsEnabled and orderAttachmentsSize > 0 -%}na:{% if config.Orders.AttachmentsEnabled and orderAttachmentsSize > 0 and order.Restricted == false -%}i)W sekcji zamówień powiązanych zamień:{% if order.RelatedOrders[0] -%}na:{% if order.RelatedOrders[0] and order.Restricted == false -%}
W pliku partials/customer-profile/complaints/complaint-form.html wprowadź poniższe zmiany.a)W kontenerze amount-stepper-container (wewnątrz warunku {% if type != 'set-return' -%}) na samym początku dodaj nową etykietę:{{ translations.Quantity }}:b)Pod sekcją z komentarzem reklamacji/zwrotu (po zamykającym {% endif -%} z sekcji complaint-message-textarea) wewnątrz warunku {% if type != 'set-return' -%} dodaj sekcję wyboru sposobu zwrotu środków:
{{ translations.Com_RefundMethod }} *
{{ translations.FieldRequired }}
c)W sekcji załączników plików zamień prosty licznik file-{{forloop.index}} na prefiks zawierający identyfikator zamówienia, numer produktu i typ formularza. Tuż przed pętlą {% for i in (1..config.Complaints.AttachmentsMaxCount) -%} dodaj nową linię:{% capture filePrefix -%}file-{{ order.Id }}-{{ product.No }}-{{ type }}{% endcapture -%}Następnie wewnątrz pętli zamień:na:d)Komunikat sukcesu wyświetlany po wysłaniu formularza ma być inny dla reklamacji, a inny dla zwrotu. Znajdź kontener
i jego dotychczasową zawartość:
{{ successInfo }}
zastąp:
{% if complaint -%}
{{ successInfo }}
{% else -%}
{{ successTitle }}
{{ successInfo }}
{% if order.Customer.Email and order.Customer.Email != '' -%}
Poniższe zmiany dotyczą pliku js/layout-customerprofile0.js (jego nieskompresowanej wersji, którą po edycji należy ponownie zminifikować do layout-customerprofile0.min.js).a)W funkcji openComplaintForm wewnątrz warunku if (hiddenContainer) – tuż po linii hiddenContainer.querySelector('.success-message-js').classList.add('hidden-js'); – dodaj kod ujawniający nagłówek formularza oraz resetujący wybór sposobu zwrotu do opcji domyślnej:const mainHeader = hiddenContainer.querySelector(':scope > .data-form__header');
if (mainHeader) {
mainHeader.classList.remove('hidden-js');
}
hiddenContainer.classList.remove('hidden-js');
const asPaidRadio = hiddenContainer.querySelector('.refund-method-radio-js[value="asPaid"]');
if (asPaidRadio) {
asPaidRadio.checked = true;
$(asPaidRadio).trigger('change');
}
(Linia hiddenContainer.classList.remove('hidden-js'); już istnieje – pokazana jest dla kontekstu. Nowe są bloki const mainHeader i const asPaidRadio.)b)W funkcji sendComplaint, w bloku przygotowującym dane formularza – po pętli for (const item of dataFromHTML) dokładającej pola do fd – dodaj fragment dołączający parametr qrHash z adresu URL przy wysyłaniu zwrotu:if (form.find('input[name="__action"]').val() === 'Order/ReturnAdd') {
const qrHash = new URLSearchParams(globalThis.location.search).get('qrHash');
if (qrHash) {
fd.append('qrHash', qrHash);
}
}c)W tej samej funkcji sendComplaint, w callbacku success po pomyślnym wysłaniu, zamień fragment:form.parents('.add-complaint-form-js').find('.success-message-js').removeClass('hidden-js');na:const container = form.parents('.add-complaint-form-js');
container.find('.success-message-js').removeClass('hidden-js');
container.children('.data-form__header').addClass('hidden-js');d)Na samym końcu pliku js/layout-customerprofile0.js dodaj nowy handler obsługujący przełączanie sposobu zwrotu środków. Pokazuje on / ukrywa pole na numer konta bankowego:$('body').on('change', '.refund-method-radio-js', function(e) {
const radio = $(e.currentTarget);
const form = radio.closest('.form-js');
const wrapper = form.find('.account-number-wrapper-js');
const input = wrapper.find('input[name="accountNumber"]');
if (radio.val() === 'bankAccount' && radio.prop('checked')) {
wrapper.removeClass('hidden-js');
input.prop('disabled', false);
input.prop('required', true);
} else {
wrapper.addClass('hidden-js');
wrapper.find('.validation-required-js').addClass('hidden-js');
wrapper.find('.form__input-info').removeClass('validation-error');
input.removeClass('validation-error-js');
input.prop('required', false);
input.prop('disabled', true);
input.val('');
}
});
5. Modyfikacje plików SCSS profilu klienta
Poniższe style należy dodać do plików scss/static-elements/customer-profile/customer-profile-g.scss (wersja desktop) oraz scss/static-elements/customer-profile/customer-profile-m.scss (wersja mobile). Po zmianach pamiętaj o kompilacji – nie edytuj ręcznie wynikowych plików CSS.
Na końcu pliku customer-profile-m.scss dodaj reguły dopasowujące przyciski reklamacji/zwrotu do widoku mobilnego (układają się one wówczas jeden pod drugim):.eshop__table-container {
thead tr th.open-complaint-form-container-js::before {
width: 100px;
}
td.complaint-actions-inline {
.pure-button.complaint-action-btn {
display: block;
width: max-content;
margin-left: auto;
text-align: right;
& + .complaint-action-btn {
margin-left: auto;
margin-top: 4px;
}
}
}
}
Po wprowadzeniu wszystkich powyższych zmian w szablonie Rubin pamiętaj o kompilacji oraz minifikacji plików js i scss, zgodnie z artykułem dostępnym pod linkiem https://pomoc.comarchesklep.pl/artykul/kompilacja-i-minifikacja-plikow/.
Szablon Szafir
1. Tłumaczenia
W panelu administracyjnym sklepu dodaj nowe klucze tłumaczeń wymagane przez funkcjonalność szybkich zwrotów w szablonie Szafir.OrderReturnDeadlineInfo
- PL: Zamówienie można zwrócić w ciągu {0} dni od daty dostawy.
- EN: You can return the order within {0} days from the delivery date.
- DE: Sie können die Bestellung innerhalb von {0} Tagen ab Lieferdatum zurückgeben.
- FR: Vous pouvez retourner la commande dans les {0} jours suivant la date de livraison.
RestrictedOrderViewInfo
- PL: Wybrane dane zamówienia zostały ukryte ze względów bezpieczeństwa. Możesz zwrócić produkty bez logowania.
- EN: Some order details are hidden for security reasons. You can return products without signing in.
- DE: Einige Bestelldetails wurden aus Sicherheitsgründen ausgeblendet. Sie können Produkte ohne Anmeldung zurücksenden.
- FR: Certaines informations de la commande ont été masquées pour des raisons de sécurité. Vous pouvez retourner des produits sans vous connecter.
RefundMethod
- PL: Sposób zwrotu środków
- EN: Refund method
- DE: Rückerstattungsmethode
- FR: Méthode de remboursement
RefundAsPaid
- PL: Tak jak zapłacono
- EN: As paid
- DE: Wie bezahlt
- FR: Comme payé
RefundToBankAccount
- PL: Na konto bankowe
- EN: To bank account
- DE: Auf Bankkonto
- FR: Sur le compte bancaire
BankAccountNumber
- PL: Nr konta bankowego
- EN: Bank account number
- DE: Bankkontonummer
- FR: Numéro de compte bancaire
ReturnConfirmationTitle
- PL: Gotowe! Przyjęliśmy Twoje zgłoszenie
- EN: Done! We have received your request
- DE: Fertig! Wir haben Ihre Anfrage erhalten
- FR: Terminé! Nous avons reçu votre demande
ReturnConfirmationInfo
- PL: Przygotuj paczkę i odeślij ją do nas – wszystkie szczegóły znajdziesz poniżej.
- EN: Prepare the package and send it back to us – all details can be found below.
- DE: Bereiten Sie das Paket vor und senden Sie es an uns zurück – alle Details finden Sie unten.
- FR: Préparez le colis et renvoyez-le nous – tous les détails se trouvent ci-dessous.
ReturnConfirmationEmailSent
- PL: Potwierdzenie zwrotu zostało wysłane na adres:
- EN: Return confirmation has been sent to:
- DE: Die Rücksendebestätigung wurde gesendet an:
- FR: La confirmation de retour a été envoyée à:
NextSteps
- PL: Następne kroki
- EN: Next steps
- DE: Nächste Schritte
- FR: Prochaines étapes
ReturnStep1
- PL: Bezpiecznie zapakuj swoje produkty
- EN: Safely pack your products
- DE: Verpacken Sie Ihre Produkte sicher
- FR: Emballez vos produits en toute sécurité
ReturnStep2Address
- PL: Wyślij paczkę na adres
- EN: Send the package to
- DE: Senden Sie das Paket an
- FR: Envoyez le colis à
ReturnStep3
- PL: Pieniądze zwrócimy niezwłocznie po otrzymaniu i sprawdzeniu Twojej paczki.
- EN: We will refund the money promptly after receiving and checking your package.
- DE: Wir erstatten das Geld umgehend nach Erhalt und Überprüfung Ihres Pakets.
- FR: Nous rembourserons l'argent rapidement après réception et vérification de votre colis.
ReturnInThreeSteps
- PL: Zwróć towar w 3 krokach
- EN: Return the product in 3 steps
- DE: Geben Sie die Ware in 3 Schritten zurück
- FR: Retournez la marchandise en 3 étapes
ReturnWithoutReasonInfo
- PL: Przysługuje Ci możliwość zwrotu bez podania przyczyny.
- EN: You have the right to return the product without giving a reason.
- DE: Sie haben das Recht, die Ware ohne Angabe von Gründen zurückzugeben.
- FR: Vous avez le droit de retourner la marchandise sans donner de motif.
OrEnterOrderNumber
- PL: lub podaj numer zamówienia
- EN: or enter the order number
- DE: oder geben Sie die Bestellnummer ein
- FR: ou saisissez le numéro de commande
FillForm
- PL: Wypełnij formularz
- EN: Fill out the form
- DE: Füllen Sie das Formular aus
- FR: Remplissez le formulaire
ReturnOnline
- PL: zwrotu online
- EN: online return
- DE: Online-Rückgabe
- FR: retour en ligne
SendParcel
- PL: Wyślij paczkę
- EN: Send the parcel
- DE: Paket senden
- FR: Envoyer le colis
SendParcelToOurAddress
- PL: nadaj przesyłkę na nasz adres
- EN: send the parcel to our address
- DE: senden Sie das Paket an unsere Adresse
- FR: envoyez le colis à notre adresse
FastSimpleSecure
- PL: Szybko, prosto i bezpiecznie.
- EN: Fast, simple and secure.
- DE: Schnell, einfach und sicher.
- FR: Rapide, simple et sécurisé.
ReadyForReturn
- PL: Gotowy do zwrotu?
- EN: Ready for return?
- DE: Bereit zur Rückgabe?
- FR: Prêt pour le retour ?
ReadyForReturnInfo
- PL: Kliknij poniżej, aby rozpocząć proces zwrotu. Przeprowadzimy Cię przez wszystkie kroki.
- EN: Click below to start the return process. We will guide you through all the steps.
- DE: Klicken Sie unten, um den Rückgabeprozess zu starten. Wir führen Sie durch alle Schritte.
- FR: Cliquez ci-dessous pour lancer le processus de retour. Nous vous guiderons à travers toutes les étapes.
StartReturn
- PL: Rozpocznij zwrot
- EN: Start return
- DE: Rückgabe starten
- FR: Commencer le retour
ProductReturn
- PL: Zwrot produktu
- EN: Product return
- DE: Produktrückgabe
- FR: Retour du produit
ProductReturnFormInfo
- PL: Wprowadź dane zamówienia, aby zlokalizować zakup i rozpocząć proces zwrotu. Numer zamówienia znajdziesz w e-mailu z potwierdzeniem.
- EN: Enter the order details to locate the purchase and start the return process. You will find the order number in the confirmation e-mail.
- DE: Geben Sie die Bestelldaten ein, um den Kauf zu lokalisieren und den Rückgabeprozess zu starten. Die Bestellnummer finden Sie in der Bestätigungs-E-Mail.
- FR: Saisissez les données de la commande pour localiser l'achat et démarrer le processus de retour. Vous trouverez le numéro de commande dans l'e-mail de confirmation.
InvalidOrderNumber
- PL: Błędny numer zamówienia. Spróbuj ponownie.
- EN: Invalid order number. Please try again.
- DE: Ungültige Bestellnummer. Bitte versuchen Sie es erneut.
- FR: Numéro de commande incorrect. Veuillez réessayer.
FindOrder
- PL: Znajdź zamówienie
- EN: Find order
- DE: Bestellung finden
- FR: Trouver la commande
LoginToSeeOrdersAndReturn
- PL: aby zobaczyć swoje zamówienia i dokonać zwrotu.
- EN: to see your orders and make a return.
- DE: um Ihre Bestellungen einzusehen und eine Rückgabe vorzunehmen.
- FR: pour voir vos commandes et effectuer un retour.
RefundLookupError
- PL: Wystąpił błąd podczas wyszukiwania zamówienia. Spróbuj ponownie później.
- EN: An error occurred while searching for the order. Please try again later.
- DE: Bei der Suche nach der Bestellung ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.
- FR: Une erreur s'est produite lors de la recherche de la commande. Veuillez réessayer plus tard.
2. Nowa strona Szybkie zwroty
Funkcjonalność szybkich zwrotów wymaga utworzenia dodatkowej strony statycznej refunds. Wykonaj poniższe kroki.
Plik refunds.html w katalogu głównym szablonu
W katalogu głównym szablonu utwórz nowy plik refunds.html z następującą zawartością:{% extends '_layout.html' %}
{% block content %}
{% include 'static-elements/refunds/refunds.html' %}
{% endblock %}
Plik static-elements/refunds/refunds.html
W folderze static-elements utwórz nowy katalog refunds, a w nim plik refunds.html:
W pliku partials/customer-profile/orders/order-details.html wykonaj poniższe zmiany.a)Blok z przyciskami akcji nawigacji zamówienia (zawierający {% if order.EditingAllowed -%}, opcje anulowania, edycji, ponowienia, druku itp.) opakuj warunkiem ukrywającym go dla zamówień typu restricted. Bezpośrednio po linii z elementem
...
wstaw:
{% unless order.Restricted -%}a tuż przed zamykającym znacznikiem tej samej nawigacji dodaj:{% endunless -%}b)Na początku kontenera messages-container-lq messages-container-ui (zaraz po jego otwarciu) dodaj baner informujący o ukrytych danych zamówienia:{% if order.Restricted -%}
{{ translations.RestrictedOrderViewInfo }}
{% endif -%}
c)Na końcu tego samego kontenera (przed zamykającym
) dodaj baner informujący o terminie zwrotu wraz z przypisaniem flagi complaintsOrReturnsEnabled:
{% if config.Complaints.ComplaintsEnabled or config.Complaints.ReturnsEnabled -%}
{% assign complaintsOrReturnsEnabled = true -%}
{% endif -%}
{% if order.Status == 3 and complaintsOrReturnsEnabled -%}
{% endif -%}
d)Blok z przyciskami akcji wewnątrz info-container-js (zawierający przyciski order.CanCancel, edycji, ponowienia zakupu itd.) opakuj warunkiem {% unless order.Restricted -%} ... {% endunless -%}. Wstaw {% unless order.Restricted -%} bezpośrednio przed pierwszym {% if order.CanCancel -%}, a {% endunless -%} po zamykającym warunku odpowiedzialnym za popup potwierdzenia ({% include 'partials/common/confirmation-popup.html' with 0 -%}).e)W sekcji wyświetlającej dokumenty zamówienia zamień:{% if order.Documents %}na:{% if order.Documents and order.Restricted == false %}f)We wszystkich miejscach wyświetlających numer telefonu klienta zamień warunki sprawdzające jedynie pusty ciąg na warunki sprawdzające również wartość null. Zamień każde wystąpienie:{% if order.Customer.DeliveryAddress.PhoneNo != '' -%}na:{% if order.Customer.DeliveryAddress.PhoneNo != null and order.Customer.DeliveryAddress.PhoneNo != '' -%}g)Każdą sekcję z tytułem translations.ChoosenDocument opakuj warunkiem ukrywającym ją dla zamówień restricted. Wstaw {% unless order.Restricted -%} bezpośrednio przed
{{ translations.ChoosenDocument }}
oraz {% endunless -%} po jej zamykającym
.
h)W sekcji wyświetlającej alternatywny adres dostawy zamień warunek {% else -%} (bezpośrednio przed order-info-item-ui z translations.DelivAddress) na bardziej restrykcyjny:{% elseif order.Customer.DeliveryAddress != null -%}i)W sekcji danych do faktury zamień warunek wyświetlania NIP-u/TIN-u. Zamień:{% elseif order.Customer.TIN != '' -%}na:{% elseif order.Customer.TIN != null and order.Customer.TIN != '' -%}j)W sekcji załączników zamówienia (kontener attachements-ui remarks-ui) zamień warunek otaczający. Zamień:{% if config.Orders.AttachmentsEnabled -%}na:{% if config.Orders.AttachmentsEnabled and order.Restricted == false -%}k)W sekcji zamówień powiązanych (kontener remarks-ui eshop-order-ui) zamień:{% if order.RelatedOrders -%}na:{% if order.RelatedOrders and order.Restricted == false -%}
W pliku partials/customer-profile/complaints/complaint-form.html wprowadź poniższe zmiany.a)W kontenerze amount-stepper-container-ui amount-stepper-container-lq (wewnątrz warunku {% if type != 'set-return' -%}) na samym początku dodaj etykietę widoczną tylko dla zwrotów:{% unless complaint -%}
{{ translations.Quantity }}:
{% endunless -%}b)Bezpośrednio po zamknięciu kontenera amount-stepper-container-ui (po jego i odpowiadającym {% endif -%}) dodaj sekcję wyboru sposobu zwrotu środków – widoczną tylko w formularzu zwrotu:{% unless complaint -%}
{{ translations.RequiredField }}
{% endunless -%}
c)Komunikat sukcesu wyświetlany po wysłaniu formularza ma być inny dla reklamacji, a inny dla zwrotu. Znajdź kontener
wraz z jego dotychczasową zawartością (komunikat ComplaintAdded + successInfo):
{{ translations.ComplaintAdded }}
{{ successInfo }}
i zastąp go nową, rozszerzoną wersją z dwoma wariantami (reklamacja / zwrot):
{% if complaint -%}
{{ translations.ComplaintAdded }}
{{ successInfo }}
{% else -%}
{{ translations.ReturnConfirmationTitle }}
{{ translations.ReturnConfirmationInfo }}
{% if order.Customer.Email and order.Customer.Email != "" -%}
Poniższe zmiany dotyczą pliku js/init-ui2.js (po edycji pamiętaj o zminifikowaniu go do init-ui2.min.js).a)Tuż po linii rejestrującej handler openComplaintForm:js.delegate(document.body, 'click', '.open-complaint-form-js', openComplaintForm);dodaj poniższy handler obsługujący przełączanie sposobu zwrotu środków – pokazuje on / ukrywa pole na numer konta bankowego:js.delegate(document.body, 'change', '.refund-method-select-js', function() {
const container = js.parents(this, 'refund-method-container-js');
if(!container) return;
const bankWrapper = container.getElementsByClassName('bank-account-container-js')[0];
if(!bankWrapper) return;
const bankInput = bankWrapper.querySelector('input[name="bankAccountNumber"]');
const validationMsg = bankWrapper.getElementsByClassName('validation-required-js')[0];
if(this.value === 'bank') {
bankWrapper.classList.remove('hidden-js');
if(bankInput) {
bankInput.disabled = false;
bankInput.required = true;
}
} else {
bankWrapper.classList.add('hidden-js');
if(bankInput) {
bankInput.disabled = true;
bankInput.required = false;
bankInput.value = '';
bankInput.classList.remove('validation-error-lq', 'validation-error-ui');
}
if(validationMsg) validationMsg.classList.add('hidden-js');
}
});b)W funkcji sendComplaint, bezpośrednio po pętli for (var i=0; i<dataFromHTML.length; i++) dokładającej pola do fd, dodaj fragment dołączający parametr qrHash z adresu URL przy wysyłaniu zwrotu:if (form.find('input[name="__action"]').val() === 'Order/ReturnAdd') {
var qrHash = new URLSearchParams(globalThis.location.search).get('qrHash');
if (qrHash) {
fd.append('qrHash', qrHash);
}
}
5. Modyfikacje pliku scss/globals/_globals2.scss
W pliku scss/globals/_globals2.scss wewnątrz selektora opakowującego (tego, który zawiera m.in. .note-ui) dodaj poniższe reguły. Po zmianach pamiętaj o kompilacji SCSS – nie edytuj ręcznie wynikowych plików CSS.a)Style etykiety ilości oraz kontenera wyboru sposobu zwrotu środków (wstaw w sąsiedztwie istniejących reguł sekcji formularza reklamacji/zwrotu):.amount-stepper-label-ui {
margin-right: 10px;
vertical-align: middle;
}
.refund-method-container-ui {
margin-bottom: 20px;
.bank-account-container-ui {
margin-top: 10px;
input {
width: 100%;
}
}
}
b)Style ekranu sukcesu po wysłaniu zwrotu (ikona, tytuł, lista kolejnych kroków, sekcja z e-mailem i przyciskiem zamknięcia):.return-success-popup-ui {
padding: 30px 20px 20px;
.return-success-icon-ui {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #68a204;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
i {
color: #68a204;
font-size: 26px;
}
}
.return-success-title-ui {
font-size: 18px;
font-weight: 500;
text-align: center;
margin-bottom: 10px;
}
.return-success-desc-ui {
font-size: 14px;
color: $primaryColorFont;
text-align: center;
margin-bottom: 20px;
}
.return-success-email-info-ui {
background-color: $bgColor;
border: 1px solid $lightBorderColor;
padding: 12px;
border-radius: 4px;
font-size: 14px;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
i {
margin-right: 10px;
color: $primaryColorFont;
font-size: 16px;
line-height: 1.4;
}
strong {
display: block;
}
}
.return-success-steps-title-ui {
font-weight: 500;
margin-bottom: 10px;
}
.return-success-steps-ui {
padding-left: 20px;
margin: 0 0 20px;
font-size: 14px;
li {
margin-bottom: 8px;
padding-left: 5px;
}
}
.return-success-actions-ui {
border-top: 1px solid $lightBorderColor;
padding-top: 15px;
text-align: right;
.return-success-close-ui {
padding: 10px 30px;
}
}
}Po wprowadzeniu wszystkich powyższych zmian w szablonie Szafir pamiętaj o kompilacji oraz minifikacji plików js i scss, zgodnie z artykułem dostępnym pod linkiem https://pomoc.comarchesklep.pl/artykul/kompilacja-i-minifikacja-plikow/.
Szablon Topaz / One Page Shop
Zmiany opisane poniżej dotyczą szablonu Topaz. Szablon One Page Shop ma praktycznie identyczną strukturę – wszystkie modyfikacje dotyczą tych samych plików i mają tę samą zawartość. Wystarczy zastosować poniższą instrukcję w plikach szablonu OPS pod tymi samymi ścieżkami.
1. Tłumaczenia
W panelu administracyjnym sklepu dodaj nowe klucze tłumaczeń wymagane przez funkcjonalność szybkich zwrotów w szablonie Topaz / OPS.RestrictedOrderViewInfo
- PL: Wybrane dane zamówienia zostały ukryte ze względów bezpieczeństwa. Możesz zwrócić produkty bez logowania.
- EN: Some order details are hidden for security reasons. You can return products without signing in.
- DE: Einige Bestelldetails wurden aus Sicherheitsgründen ausgeblendet. Sie können Produkte ohne Anmeldung zurücksenden.
- FR: Certaines informations de la commande ont été masquées pour des raisons de sécurité. Vous pouvez retourner des produits sans vous connecter.
Prf_ReturnPeriodInfo
- PL: Zamówienie można zwrócić w ciągu {0} dni od daty dostawy.
- EN: The order can be returned within {0} days from the delivery date.
- DE: Die Bestellung kann innerhalb von {0} Tagen ab dem Lieferdatum zurückgegeben werden.
- FR: La commande peut être retournée dans un délai de {0} jours à compter de la date de livraison.
ComplaintSuccessTitle
- PL: Gotowe! Przyjęliśmy Twoje zgłoszenie
- EN: Done! We have received your request
- DE: Fertig! Wir haben Ihre Meldung erhalten
- FR: C'est fait ! Nous avons reçu votre demande
ComplaintSuccessDescription
- PL: Przygotuj paczkę i odeślij ją do nas – wszystkie szczegóły znajdziesz poniżej.
- EN: Prepare the parcel and send it back to us – you will find all the details below.
- DE: Bereiten Sie das Paket vor und senden Sie es an uns zurück – alle Details finden Sie unten.
- FR: Préparez le colis et renvoyez-le-nous – vous trouverez tous les détails ci-dessous.
ComplaintSuccessConfirmationSent
- PL: Potwierdzenie zwrotu zostało wysłane na adres:
- EN: The return confirmation has been sent to:
- DE: Die Rückgabebestätigung wurde an folgende Adresse gesendet:
- FR: La confirmation de retour a été envoyée à :
ComplaintSuccessStepsTitle
- PL: Następne kroki
- EN: Next steps
- DE: Nächste Schritte
- FR: Étapes suivantes
ComplaintSuccessStep1
- PL: Bezpiecznie zapakuj swoje produkty
- EN: Pack your products securely
- DE: Verpacken Sie Ihre Produkte sicher
- FR: Emballez vos produits en toute sécurité
ComplaintSuccessStep2
- PL: Wyślij paczkę na adres:
- EN: Send the parcel to:
- DE: Senden Sie das Paket an folgende Adresse:
- FR: Envoyez le colis à l'adresse :
ComplaintSuccessStep3
- PL: Pieniądze zwrócimy niezwłocznie po otrzymaniu i sprawdzeniu Twojej paczki.
- EN: We will refund the money immediately after receiving and inspecting your parcel.
- DE: Wir erstatten den Betrag unverzüglich nach Erhalt und Prüfung Ihres Pakets.
- FR: Nous rembourserons l'argent immédiatement après réception et vérification de votre colis.
ReturnInThreeSteps
- PL: Zwróć towar w 3 krokach
- EN: Return the product in 3 steps
- DE: Geben Sie die Ware in 3 Schritten zurück
- FR: Retournez la marchandise en 3 étapes
ReturnWithoutReasonInfo
- PL: Przysługuje Ci możliwość zwrotu bez podania przyczyny.
- EN: You have the right to return the product without giving a reason.
- DE: Sie haben das Recht, die Ware ohne Angabe von Gründen zurückzugeben.
- FR: Vous avez le droit de retourner la marchandise sans donner de motif.
OrEnterOrderNumber
- PL: lub podaj numer zamówienia
- EN: or enter the order number
- DE: oder geben Sie die Bestellnummer ein
- FR: ou entrez le numéro de commande
FillForm
- PL: Wypełnij formularz
- EN: Fill out the form
- DE: Füllen Sie das Formular aus
- FR: Remplissez le formulaire
ReturnOnline
- PL: zwrotu online
- EN: online return
- DE: Online-Rückgabe
- FR: retour en ligne
SendParcel
- PL: Wyślij paczkę
- EN: Send the parcel
- DE: Senden Sie das Paket
- FR: Envoyez le colis
SendParcelToOurAddress
- PL: nadaj przesyłkę na nasz adres
- EN: send the parcel to our address
- DE: senden Sie das Paket an unsere Adresse
- FR: envoyez le colis à notre adresse
FastSimpleSecure
- PL: Szybko, prosto i bezpiecznie.
- EN: Fast, simple and secure.
- DE: Schnell, einfach und sicher.
- FR: Rapide, simple et sûr.
ReadyForReturn
- PL: Gotowy do zwrotu?
- EN: Ready for return?
- DE: Bereit zur Rückgabe?
- FR: Prêt pour le retour ?
ReadyForReturnInfo
- PL: Kliknij poniżej, aby rozpocząć proces zwrotu. Przeprowadzimy Cię przez wszystkie kroki.
- EN: Click below to start the return process. We will guide you through all the steps.
- DE: Klicken Sie unten, um den Rückgabeprozess zu starten. Wir führen Sie durch alle Schritte.
- FR: Cliquez ci-dessous pour commencer le processus de retour. Nous vous guiderons à chaque étape.
StartReturn
- PL: Rozpocznij zwrot
- EN: Start return
- DE: Rückgabe starten
- FR: Commencer le retour
ProductReturn
- PL: Zwrot produktu
- EN: Product return
- DE: Produktrückgabe
- FR: Retour du produit
ProductReturnFormInfo
- PL: Wprowadź dane zamówienia, aby zlokalizować zakup i rozpocząć proces zwrotu. Numer zamówienia znajdziesz w e-mailu z potwierdzeniem.
- EN: Enter the order details to locate the purchase and start the return process. You will find the order number in the confirmation e-mail.
- DE: Geben Sie die Bestelldaten ein, um den Kauf zu lokalisieren und den Rückgabeprozess zu starten. Die Bestellnummer finden Sie in der Bestätigungs-E-Mail.
- FR: Saisissez les données de la commande pour localiser l'achat et démarrer le processus de retour. Vous trouverez le numéro de commande dans l'e-mail de confirmation.
FindOrder
- PL: Znajdź zamówienie
- EN: Find order
- DE: Bestellung finden
- FR: Trouver la commande
RefundLookupError
- PL: Wystąpił błąd podczas wyszukiwania zamówienia. Spróbuj ponownie później.
- EN: An error occurred while searching for the order. Please try again later.
- DE: Fehler beim Suchen nach der Bestellung. Versuchen Sie es später erneut.
- FR: Une erreur s'est produite lors de la recherche de la commande. Veuillez réessayer plus tard.
LoginToSeeOrdersAndReturn
- PL: aby zobaczyć swoje zamówienia i dokonać zwrotu.
- EN: to see your orders and make a return.
- DE: um Ihre Bestellungen zu sehen und eine Rückgabe zu machen.
- FR: pour voir vos commandes et faire un retour.
InvalidEmail
- PL: Nieprawidłowy adres e-mail
- EN: Invalid e-mail address
- DE: Ungültige E-Mail-Adresse
- FR: L'adresse e-mail est incorrecte.
RefundMethod
- PL: Sposób zwrotu środków
- EN: Refund method
- DE: Rückerstattungsmethode
- FR: Mode de remboursement
RefundAsPaid
- PL: Zwrot na sposób płatności
- EN: Refund to the original payment method
- DE: Rückerstattung auf die ursprüngliche Zahlungsmethode
- FR: Remboursement sur le mode de paiement initial
RefundToBankAccount
- PL: Zwrot na konto bankowe
- EN: Refund to bank account
- DE: Rückerstattung auf das Bankkonto
- FR: Remboursement sur un compte bancaire
2. Nowa strona Szybkie zwroty
Funkcjonalność szybkich zwrotów wymaga utworzenia dodatkowej strony statycznej refunds. Wykonaj poniższe kroki.
Plik refunds.html w katalogu głównym szablonu
W katalogu głównym szablonu utwórz nowy plik refunds.html z następującą zawartością:{% extends '_layout.html' -%}
{% block pageContent -%}
{% include 'static-elements/refunds/refunds.html' -%}
{% endblock -%}
Plik static-elements/refunds/refunds.html
W folderze static-elements utwórz nowy katalog refunds, a w nim plik refunds.html:{% include 'partials/common/breadcrumbs.html' -%}
W pliku partials/customer/order-content.html wykonaj poniższe zmiany.a)Bezpośrednio po otwarciu kontenera
dodaj dwa nowe bannery informacyjne (jeden o ukrytych danych zamówienia, drugi o terminie zwrotu, wraz z wyliczaniem flagi hasReturnableProduct):
{% if order.Restricted -%}
{{ translations.RestrictedOrderViewInfo }}
{% endif -%}
{% assign hasReturnableProduct = false -%}
{% if config.Complaints.ReturnsEnabled -%}
{% for product in order.Products -%}
{% if product.CanReturn -%}
{% assign hasReturnableProduct = true -%}
{% break -%}
{% endif -%}
{% endfor -%}
{% endif -%}
{% if hasReturnableProduct -%}
(z dokumentami do druku) opakuj warunkiem {% unless order.Restricted -%} ... {% endunless -%}, aby ukrywać go dla zamówień typu restricted.
c)Cały dotychczasowy blok przycisków reklamacji/zwrotu (oparty na konstrukcji {% if ComplaintsEnabled and ReturnsEnabled %} ... {% elseif ComplaintsEnabled %} ... {% elseif ReturnsEnabled %} ... {% endif %} z jednym wspólnym przyciskiem) zamień na dwa niezależne warunki, dzięki czemu dla produktu uprawnionego zarówno do reklamacji, jak i do zwrotu, oba przyciski wyświetlają się obok siebie. Strukturę wewnątrz warunku {% if product.CanComplain or product.CanReturn -%} zastąp poniższym kodem:{% if config.Complaints.ComplaintsEnabled == true and product.CanComplain -%}
{% endif -%}
{% if config.Complaints.ReturnsEnabled == true and product.CanReturn -%}
{% endif -%}Kluczowe różnice w stosunku do poprzedniej wersji: każdy przycisk renderowany jest niezależnie (oba mogą wystąpić równocześnie), przyciski mają modyfikatory orderContent__complainBtn--complaint i orderContent__complainBtn--return, atrybut data-form-type (odczytywany w JS), w przycisku reklamacji wymuszone data-product-return="false", w przycisku zwrotu wymuszone data-product-complain="false", ikony 16x16 (#comment-alt-regular dla reklamacji, #sync-regular dla zwrotu), a etykieta przycisku zawiera już tylko jedno tłumaczenie.d)W pozostałych miejscach z przyciskami reklamacji/zwrotu (sekcje, w których nie zmieniają się klasy i ikony) dodaj jedynie dwa nowe atrybuty:data-product-unit="{{ product.Unit }}"
data-product-description="{{ productAttributes | Join: ' / ' | H }}"e)W sekcji załączników zamówienia zamień:{% if order.Attachments[0] -%}na:{% if order.Attachments[0] and order.Restricted == false -%}f)W kontenerze
zamień wyświetlanie adresu dostawy:
{{ order.Customer.DeliveryAddress.Street }} {{ order.Customer.DeliveryAddress.StreetNo }} / {{ order.Customer.DeliveryAddress.UnitNo }}na:{{ order.Customer.DeliveryAddress.Street }} {{ order.Customer.DeliveryAddress.StreetNo }}{% if order.Customer.DeliveryAddress.UnitNo != null and order.Customer.DeliveryAddress.UnitNo != '' -%} / {{ order.Customer.DeliveryAddress.UnitNo }}{% endif -%}g)Sekcję z przyciskami akcji zamówienia (orderCancel-js, ponowienie płatności itd.) opakuj warunkiem {% unless order.Restricted -%} ... {% endunless -%}. Wstaw {% unless order.Restricted -%} bezpośrednio przed warunkiem {% if order.CanRestorePayment -%}, a {% endunless -%} po zamykającym {% endif -%} bloku z przyciskiem anulowania zamówienia.
partials/common/complaint-popup.html
Plik partials/common/complaint-popup.html wymaga gruntownej przebudowy. Usuwamy z niego radiowe przyciski wyboru "reklamacja/zwrot", a typ formularza jest teraz przekazywany z zewnątrz przez parametr __include. Sterowanie ilością zostało przeniesione do kafelka z produktem (z etykietą i obsługą wariantu statycznego, gdy zostaje tylko 1 sztuka). W formularzu zwrotu zamiast samego pola numeru konta pojawia się sekcja wyboru sposobu zwrotu środków (refundMethod-js) – z opcją „zwrot na sposób płatności" (domyślna) lub „zwrot na konto bankowe". Pole numeru konta jest domyślnie ukryte i disabled; pokazuje się dopiero po wybraniu opcji „konto bankowe" (obsługa w JS w metodzie changeRefundMethod). Tytuł, kafelek produktu i formularz oznaczone są dodatkową klasą complain-form-view-js, dzięki czemu po pomyślnym wysłaniu formularza można je ukryć i wyświetlić ekran sukcesu (complain-success-view-js). Zastąp całą zawartość pliku poniższym kodem:{% if hideContent -%}
{% else -%}
{% assign formType = include -%}
{% assign isReturn = false -%}
{% if formType == 'return' -%}
{% assign isReturn = true -%}
{% endif -%}
{% capture maxSize -%}{{config.Complaints.AttachmentMaxSize | DividedBy: 1024}}KB{% endcapture -%}
{% for i in (1..config.Complaints.AttachmentsMaxCount) -%}
Poniższe zmiany dotyczą pliku js/layout1.js. Po edycji pamiętaj o zminifikowaniu pliku do layout1.min.js.a)W obiekcie customerProfile usuń całą metodę setComplainReturnRadioButtons (radiowy przełącznik reklamacja/zwrot nie jest już potrzebny – typ formularza jest teraz przekazywany przy otwieraniu popupu).b)W tym samym obiekcie zastąp całą metodę addDataToComplaintForm nową implementacją, która odczytuje typ formularza z atrybutu data-form-type przycisku i przekazuje go do szablonu jako parametr __include:addDataToComplaintForm: function (e) {
const template = 'partials/common/complaint-popup.html';
const data = e.currentTarget;
const formType = data.dataset.formType === 'return' ? 'return' : 'complaint';
$.get('', {__template: template, __include: "'" + formType + "'"}, function(result) {
$('.customer__content-js').append(result.template);
$('.popupDialog__complain').show();
$('body').addClass('customerProfileNoScroll');
const image = $('.productImage-js');
const productName = $('.productName-js');
const inputId = $('.productId-js');
const productQuantity = $('.quantity__field-js');
const quantityControl = $('.quantityControl-js');
const quantityStatic = $('.quantityStatic-js');
const productUnit = $('.productUnit-js');
const productDescription = $('.productDescription-js');
const orderId = $('.orderId-js');
const buttonOrderId = $('.orderComplaintOrReturnAdd-js');
const orderDate = $('.orderDate-js');
productName.text(data.dataset.productName);
productUnit.text(data.dataset.productUnit || '');
productDescription.text(data.dataset.productDescription || '');
inputId.val(data.dataset.productId);
productQuantity.attr('max', data.dataset.productQuantity);
if (parseInt(data.dataset.productQuantity, 10) <= 1) {
quantityControl.addClass('hidden');
quantityStatic.text(data.dataset.productQuantity).removeClass('hidden');
} else {
quantityControl.removeClass('hidden');
quantityStatic.addClass('hidden');
}
orderId.val(data.dataset.orderId);
buttonOrderId.attr('data-id', data.dataset.orderId);
orderDate.attr('min', data.dataset.orderDate);
if (data.dataset.imageext != null && data.dataset.imageext != "") {
image.attr('src', data.dataset.imageext);
} else if (data.dataset.imageId != null && data.dataset.imageId != "") {
image.attr('src', '/Image/?id=' + data.dataset.imageId);
}
if (image.attr('src') === '' || image.attr('src') == null) {
image.closest('figure').addClass('noImage-js');
}
setTimeout(function() {
app.activateFocusTrap('.popupDialog__complain', e.target);
}, 200);
});
},
c)Zastąp metodę changeReturnComplaintForm nową wersją (obsługuje również pole numeru konta i wywołuje changeRefundMethod po przełączeniu na zwrot):changeReturnComplaintForm: function (e) {
const form = $(e.currentTarget).closest('.inputs-container-js');
const complaintInputs = form.find('.complaintInputWrapper-js');
const returnInputs = form.find('.returnInputWrapper-js');
const accountWrapper = form.find('.accountNumberWrapper-js');
const accountInput = accountWrapper.find('input[name="accountNumber"]');
if ($(e.currentTarget).is(':checked') && e.currentTarget.dataset.name === 'complaint' ) {
$.each(complaintInputs, function (index, value) {
$(value).find('input, select').first().removeAttr('disabled');
$(value).show(300);
});
returnInputs.each(function () {
$(this).find('input, select').first().attr('disabled', 'true');
});
returnInputs.hide(300);
accountInput.removeAttr('disabled').removeAttr('required').removeClass('form__validation-error-js');
accountWrapper.find('.form__validation-required-js').hide();
accountWrapper.show(300);
}
if ($(e.currentTarget).is(':checked') && e.currentTarget.dataset.name === 'return' ) {
$.each(complaintInputs, function (index, value) {
$(value).find('input, select').first().attr('disabled', 'true');
$(value).hide(300);
});
returnInputs.each(function () {
$(this).find('input, select').first().removeAttr('disabled');
});
returnInputs.show(300);
customerProfile.changeRefundMethod(form);
}
},
d)Tuż za metodą changeReturnComplaintForm dodaj nową metodę changeRefundMethod (pokazuje / ukrywa pole numeru konta bankowego na podstawie wybranego sposobu zwrotu):changeRefundMethod: function (formOrEvent) {
const form = formOrEvent && formOrEvent.currentTarget
? $(formOrEvent.currentTarget).closest('.inputs-container-js')
: $(formOrEvent);
const select = form.find('.refundMethod-js');
const accountWrapper = form.find('.accountNumberWrapper-js');
const accountInput = accountWrapper.find('input[name="accountNumber"]');
if (select.val() === 'account') {
accountInput.removeAttr('disabled').attr('required', 'required');
accountWrapper.show(300);
} else {
accountInput.attr('disabled', 'true').removeAttr('required').removeClass('form__validation-error-js');
accountWrapper.find('.form__validation-required-js').hide();
accountWrapper.hide(300);
}
},
e)W metodzie wysyłającej formularz reklamacji/zwrotu (gdzie znajduje się pętla for (let i=0; i<dataFromHTML.length; i++)) zaraz po pętli dodaj fragment dołączający parametr qrHash z URL-a przy wysyłaniu zwrotu:if (form.find('input[name="__action"]').val() === 'Order/ReturnAdd') {
const qrHash = new URLSearchParams(globalThis.location.search).get('qrHash');
if (qrHash) {
fd.append('qrHash', qrHash);
}
}f)W tej samej metodzie, w callbacku success po pomyślnym wysłaniu, zamień fragment:if (data.action.Result) {
const 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();
$('.popupDialog__complain').remove();
$('body').removeClass('customerProfileNoScroll');
customerProfile.showOrderDetails(e);
}na:if (data.action.Result) {
$('.clearFileInput-js').hide();
sessionStorage.removeItem('complains');
sessionStorage.removeItem('order' + (e.currentTarget).dataset.id);
const popup = $(e.currentTarget).closest('.popupDialog__complain');
popup.find('.complain-form-view-js').addClass('hidden');
popup.find('.complain-success-view-js').removeClass('hidden');
popup.find('.popupDialog__wrapper').scrollTop(0);
}g)W sekcji rejestracji zdarzeń profilu klienta (tam, gdzie znajdują się m.in. mainSection.on('change', '.radioComplaint-js, .radioReturn-js', ...)) tuż za istniejącym handlerem zmiany typu formularza dopisz nowy handler:mainSection.on('change', '.refundMethod-js', function (e) {
customerProfile.changeRefundMethod(e);
});h)Znajdź globalny handler obsługujący keydown z selektorem zaczynającym się od .radioReturn-js label, .radioComplaint-js label, ... i usuń z niego dwa pierwsze selektory (po zmianie zaczyna się od .showHideSection-js):// PRZED
$('body').on('keydown', '.radioReturn-js label, .radioComplaint-js label, .showHideSection-js, .checkBoxes__container label, .customerPagination__form-js, .discountsDetails-js, .customer-focus, .customer__menuActivate-js', function(e) { ... });
// PO
$('body').on('keydown', '.showHideSection-js, .checkBoxes__container label, .customerPagination__form-js, .discountsDetails-js, .customer-focus, .customer__menuActivate-js', function(e) { ... });
i)W obiekcie app w pliku js/layout1.js obsłuż przekierowanie po zalogowaniu z parametrem #login-redirect= (używanym przez stronę szybkich zwrotów). W bloku rejestracji/logowania, w miejscu gdzie obsługiwany jest hash #back-to-cart, tuż po nim dodaj:if (globalThis.location.hash.startsWith('#login-redirect=')) {
url = globalThis.location.hash.slice('#login-redirect='.length);
}Następnie w handlerze sukcesu logowania, gdzie znajduje się sprawdzenie window.location.hash.includes('#back-to-cart') wraz z przekierowaniem, tuż za nim dodaj analogiczny blok przekierowujący w przypadku #login-redirect=:if (globalThis.location.hash.startsWith('#login-redirect=')) {
globalThis.location.assign(globalThis.location.hash.slice('#login-redirect='.length));
return;
}
5. Modyfikacje plików SCSS profilu klienta
Poniższe style należy dodać do plików scss/static-elements/customer-profile/customer-profile-g.scss (style ogólne), customer-profile-d.scss (desktop) i customer-profile-m.scss (mobile). Po zmianach pamiętaj o kompilacji SCSS – nie edytuj ręcznie wynikowych plików CSS.
Wewnątrz wrappera @media screen and (min-width: 769px) zamień istniejące style przycisku reklamacji:.customer .orderContent__complainBtn {
position: absolute;
bottom: 8px;
}na poniższy fragment (dodaje pozycjonowanie kontenera grupującego przyciski oraz osobny selektor dla pojedynczych przycisków w wierszu produktu):.customer .orderContent__complainBtns {
position: absolute;
bottom: 8px;
right: 0;
margin: 0;
}
.customer .orderContent__productDetails > .orderContent__complainBtn {
position: absolute;
bottom: 8px;
right: 0;
margin: 0;
}
Plik customer-profile-m.scss
W obrębie selektora .customer zamień istniejący media-query @media screen and (max-width: 359px) wraz z jego wnętrzem na rozszerzoną wersję (układająca przyciski reklamacji/zwrotu pionowo na szerokościach do 450px):@media screen and (max-width: 450px) {
.customer__orderContent .orderContent__productsRow {
max-height: none;
}
.customer__orderContent .orderContent__productDetails {
display: flex;
flex-direction: column;
align-items: stretch;
}
.customer__orderContent .orderContent__complainBtns {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
margin: 12px 0 4px;
padding-top: 12px;
border-top: 1px solid $borderColor;
}
.customer__orderContent .orderContent__complainBtn {
display: flex;
width: 100%;
justify-content: center;
padding: 10px 12px;
margin: 12px 0 4px;
border-color: color-mix(in srgb, #{$linkFontColor} 25%, transparent);
}
.customer__orderContent .orderContent__complainBtns .orderContent__complainBtn {
margin: 0;
}
}
6. Szablon One Page Shop
Szablon One Page Shop ma praktycznie identyczną strukturę plików jak Topaz. Wszystkie powyższe modyfikacje (tłumaczenia, nowa strona zwrotów, edycje plików partials/common/complaint-popup.html oraz partials/customer/order-content.html, zmiany w js/layout1.js oraz w plikach SCSS profilu klienta i strony zwrotów) wykonaj 1:1 w plikach szablonu OPS pod tymi samymi ścieżkami. Treść kodu jest taka sama, ścieżki plików są takie same – instrukcja dla Topaza w pełni stosuje się również do One Page Shopa.Po wprowadzeniu wszystkich powyższych zmian w szablonie Topaz (oraz One Page Shop) pamiętaj o kompilacji oraz minifikacji plików js i scss, zgodnie z artykułem dostępnym pod linkiem https://pomoc.comarchesklep.pl/artykul/kompilacja-i-minifikacja-plikow/.
Wskazówka
Potrzebujesz pomocy lub masz pytania? Skontaktuj się z nami poprzez portal asysta.comarch.pl.
Społeczność Comarch
Dzięki społeczności Comarch ERP rozwiązujemy problemy, dzielimy się pomysłami oraz informujemy o nowościach.
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:
W przypadku list towarów 1 i 2, modyfikacja informacji jest uproszczona, ogranicza się jedynie do:
3. Zmiany zapisz ikoną dyskietki oraz wykonaj synchronizację.
Krok 3. Zapisz wprowadzone zmiany i wykonaj synchronizację.
Zapisz zmiany, a następnie wygeneruj szablon.
Wprowadzone zmiany zapisz i opublikuj.
Zapisz zmiany, a następnie wygeneruj szablon.
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.
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ą.
Po dokonaniu modyfikacji należy zapisać i opublikować zmiany.
Gotowe! Teraz Twój banner promocyjny wyświetli się na stronie głównej.
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:
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.
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?
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.
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.
Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.
W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.
