WhatsApp
+48608012047
Kowal Mega Menu dla Magento Luma i Hyva
100,00 zł 100,00 zł
Panel i uprawnienia
Moduł otwierasz przez kowal.store → Modules → Hyva Colors. Konfiguracja odbywa się w jego trzech widokach, a nie w osobnej sekcji Stores → Configuration.
Administrator nadaje uprawnienia w System → Permissions → User Roles. Udostępnij rolom odpowiednie nadrzędne zasoby menu Kowal i zasoby Hyva Colors:
| Zasób | Zastosowanie |
|---|---|
| View colors and history | Przeglądanie zestawów i historii |
| Edit presets | Tworzenie, zapis, klonowanie, usuwanie własnych i reset systemowych zestawów |
| Add custom elements | Dodawanie elementów do katalogu |
| Import and export presets | Przenoszenie zestawów przez JSON |
| Publish and restore colors | Publikacja, reset wyglądu, przywracanie i ponawianie publikacji |
Import zawierający nowe definicje katalogu wymaga również prawa dodawania elementów. Po zmianie roli może być potrzebne ponowne zalogowanie użytkownika.
Zakres sklepu
Przy publikacji wybierasz jeden aktywny widok sklepu (store view). Moduł sprawdza przypisany motyw: obecny profil obsługuje dokładnie Hyva/default z Default Theme 1.5.2–1.5.x. Nie przypisuj innego motywu tylko po to, aby ominąć walidację — motywy potomne potrzebują osobnego przygotowania mapowań.
Zestaw jest szkicem wielokrotnego użytku. Możesz publikować go osobno dla kilku widoków. W tej wersji nie ma konfiguracji dziedziczonej na poziomie default/website/store.
Zestawy systemowe i własne
Gotowe definicje obejmują siedem palet i pusty zestaw natywny. Ich zapisane kopie są dostępne w „Moje zestawy”. Najwygodniej tworzyć własne zestawy na ich podstawie — dzięki temu oryginały pozostają punktem odniesienia.
| Zestaw | Charakter |
|---|---|
| Niebieski, Zielony, Fioletowy, Pomarańczowy, Grafitowy | Akcent wiodący i dopasowane kolory obsługiwanych elementów |
| Czarny | Ciemny nagłówek, biała zawartość i jasny licznik koszyka; pozostałe powierzchnie pozostają jasne |
| Jasny / Biały | Natywne tła, ukryte obsługiwane ramki i szare ramki na hover |
| Natywny — bez nadpisania | Brak CSS kolorystycznego modułu; wygląd wynika z aktywnego motywu |
Edytor kolorów
Edytor dzieli katalog na sekcje: Global, Header, Buttons, Product cards oraz Catalog and product page. Nazwy mogą pozostać angielskie. Katalog początkowy zawiera 34 elementy i 99 mapowań. Pojedynczy element może mieć osobne wpisy dla tła, tekstu, ramki i stanów interakcji.
Dostępne sposoby ustawienia wartości:
| Tryb w panelu | Działanie |
|---|---|
| Własny kolor | Jawny kolor, np. #171717, #ffffff, #11223380 |
| Kolor z palety | Odwołanie do tokenu, np. brand |
| Styl natywny | Usunięcie nadpisania danej właściwości; obowiązuje styl motywu |
| Bez nadpisania | Brak wartości na tej warstwie; w pojedynczym szkicu pozostawia styl motywu |
native nie wstawia CSS inherit. Wartość transparent jest jawnym kolorem przezroczystym, a nie powrotem do motywu. Możesz użyć również currentColor. Dowolne funkcje CSS, takie jak rgb() lub var(), nie są przyjmowane w polach kolorów.
Zapisuj szkic przed zmianą sekcji lub strony edytora. Zapis nie publikuje zmian.
Wspólne kolory: tokeny
W „Paleta — ustawienia zaawansowane (JSON)” przechowywane są nazwane kolory. Przykład fragmentu:
{
"brand": {"mode": "color", "value": "#1d4ed8"},
"on-brand": {"mode": "color", "value": "#ffffff"}
}
W wierszu elementu wybierz „Kolor z palety” i wpisz brand. Zmiana tokenu aktualizuje wszystkie odwołujące się do niego wartości przy następnej publikacji. Jeśli edytujesz gotowy zestaw, zachowaj pozostałe istniejące tokeny — zastąpienie całego JSON powyższym fragmentem może pozostawić nierozwiązane odwołania. Cykle i brakujące tokeny są odrzucane.
Dodawanie elementów i sekcji
Nie wymaga modyfikacji plików modułu, ale wymaga rozpoznania właściwego selektora CSS. Moduł nie ma wizualnego inspektora elementów.
- Otwórz edytor dowolnego zestawu.
- Rozwiń „Dodaj własny element — tryb zaawansowany”.
- Wpisz nazwę, np. „Baner promocyjny”.
- Wybierz istniejącą nazwę sekcji lub wpisz nową, np. „Promocje”.
- Wprowadź stabilny selektor, np.
#promo-banner, który istnieje w sklepie. - Wybierz właściwości, np.
background-color,color,border-color. - Wybierz stany, np.
normalihover, a następnie dodaj element. - Otwórz odpowiednią sekcję, przypisz kolory, zapisz i opublikuj zestaw.
Definicja trafia do wspólnego katalogu; samo jej dodanie nie ustawia kolorów we wszystkich zestawach. Selektor powinien być możliwie precyzyjny. W tej wersji nie są obsługiwane listy selektorów, :has() ani dowolne deklaracje CSS. Dodanie elementu nie tworzy jego HTML w sklepie. Nie ma jeszcze panelowej edycji istniejących selektorów i archiwizacji elementów.
Konfiguracja infrastruktury
Publikacja zależy od crona, zapisywalnych mediów i cache. Arkusz CSS jest generowany przed aktywacją, a następnie serwowany statycznie. Moduł nie dodaje JavaScriptu kolorystycznego do zwykłego storefrontu. Nie oznacza to gwarancji konkretnego wyniku wydajności — pomiary należy wykonać w docelowym sklepie.
Przy Varnish sprawdź dostęp do serwerów purge. Przy CDN i wielu węzłach sprawdź propagację HTML oraz dostępność arkuszy. Szczegóły wdrożeniowe zawiera instrukcja instalacji.