Kowal Hyva Colors — kolory sklepu pod kontrolą
- SKU
- M2-HYVA-COLORS
Opis / Kowal Hyva Colors — kolory sklepu pod kontrolą
MAGENTO 2 · PALETY · SZKICE · PUBLIKACJA
Dopasuj obsługiwane kolory Hyvä do swojej marki.
Kowal Hyvä Colors
Wybierz gotową paletę albo utwórz własny zestaw kolorów. Zapis szkicu i publikacja są oddzielnymi działaniami, a historia pozwala przywrócić wcześniejszy zestaw dla wybranego Store View.
Siedem palet · Statyczny CSS · Historia publikacji
JAK TO DZIAŁA W PRAKTYCE
01 · Wybierasz paletę lub szkic
Korzystasz z gotowych zestawów albo edytujesz obsługiwane elementy.
02 · Publikujesz dla Store View
Kolejka tworzy snapshot i generuje wersjonowany CSS.
03 · Kontrolujesz rezultat i historię
Sprawdzasz status, wygląd oraz możliwość przywrócenia poprzedniej wersji.
Co zyskuje Twój sklep?
Poznaj funkcje, zastosowanie i ustawienia modułu.
Kolory Hyvä pod kontrolą
Kowal Hyvä Colors porządkuje zarządzanie kolorami obsługiwanych elementów sklepu: nagłówka, przycisków, tekstów, ikon i obramowań. Buduj zestawy zgodne z marką, zapisuj szkice i publikuj świadomie.
Gotowe palety
Siedem palet: niebieska, zielona, fioletowa, pomarańczowa, grafitowa, czarna i jasna/biała — lub pusta konfiguracja.
Store View
Publikuj wygląd dla konkretnego widoku. Klonuj zestawy i przenoś konfiguracje przez import i eksport JSON.
Kontrola zmian
Szkic nie zmienia storefrontu. Historia publikacji pozwala wrócić do wcześniejszej zakończonej wersji.
Dlaczego warto
- spójne zarządzanie obsługiwanymi kolorami i stanami interakcji,
- własne elementy i sekcje dla użytkowników znających selektory CSS,
- statyczny CSS generowany podczas publikacji — bez dodatkowego JavaScriptu modułu na storefrontcie,
- powrót do natywnych kolorów aktywnego motywu.
Paleta czarna jest akcentem, nie pełnym dark mode. Paleta jasna/biała zachowuje natywne tła.
Trzy obszary panelu
W kowal.store → Modules → Hyva Colors znajdziesz Zestawy i publikację, Moje zestawy oraz Historię zmian. Edytuj szkic, klonuj go lub importuj JSON, a publikację uruchamiaj osobno dla konkretnego Store View.
Historia dotyczy publikacji, resetów i przywracania. Zapisuje zestaw, sklep, datę, administratora i status; nie jest historią każdej edycji szkicu.
Publikacja przez kolejkę
Publikacja tworzy niezmienny snapshot selektorów i kolorów. Worker crona generuje statyczny CSS, aktywuje przypisanie i odświeża odpowiedni cache. Wymagany jest działający cron Magento.
Status queued oznacza oczekiwanie, purge_pending — aktywną wersję z nieukończoną propagacją cache, a complete — zakończone zadanie. Błędy można ponowić z panelu.
Reset i przywracanie
Pusty zestaw natywny usuwa nadpisania modułu po publikacji, przywracając kolory aktywnego motywu. Przywrócenie poprzedniej publikacji tworzy nowe zadanie na podstawie wcześniejszego snapshotu i nie zmienia bieżącego szkicu.
Usunięcie własnego szkicu nie usuwa aktywnych kolorów ani historii publikacji. Zestawy systemowe można przywracać do aktualnych ustawień fabrycznych.
Mapowania i własne elementy
Katalog obejmuje jawnie zmapowane elementy nagłówka, wyszukiwania, przycisków, ikon i katalogu wraz ze stanami interakcji. Elementy spoza katalogu wymagają własnych mapowań.
Zaawansowany użytkownik może dodawać sekcje, selektory i właściwości oraz korzystać z tokenów palety w JSON. Moduł nie zawiera wizualnego inspektora ani prywatnego podglądu sklepu.
Profil zgodności
Obecny profil publikacji jest przeznaczony dla Hyva/default z Default Theme 1.5.2–1.5.x. Motywy potomne i własne wymagają osobnego sprawdzenia mapowań. Zależności wskazują Magento Framework 103.0.9+ i PHP 8.3–8.5.
Publikacje dotyczą pojedynczych Store View; panel nie udostępnia dziedziczenia aktywnych przypisań Default → Website → Store View. Zgodność i wygląd należy zweryfikować w docelowym motywie.
Instalacja przez Composer
Pakiet kowal/module-hyva-colors, moduł Kowal_HyvaColors. Po skonfigurowaniu dostępu do repozytorium Kowal zainstaluj pakiet, włącz moduł, zaktualizuj Magento i wyczyść cache. W produkcji uwzględnij kompilację i wdrożenie treści statycznych zgodnie z procesem sklepu.
Od konfiguracji do efektu
1. Wybierasz paletę lub szkic
Korzystasz z gotowych zestawów albo edytujesz obsługiwane elementy.
2. Publikujesz dla Store View
Kolejka tworzy snapshot i generuje wersjonowany CSS.
3. Kontrolujesz rezultat i historię
Sprawdzasz status, wygląd oraz możliwość przywrócenia poprzedniej wersji.
Przykład: wariant kolorów dla marki
Klonujesz niebieski zestaw i zmieniasz kolory nagłówka, przycisków oraz wybranych stanów interakcji. Zapisujesz szkic, następnie publikujesz go dla jednego widoku sklepu. W razie potrzeby przywracasz zakończoną wcześniejszą publikację.
Uporządkuj kolory bez edycji plików motywu.
Chcesz dopasować moduł do swojego sklepu? Zapytaj o wdrożenie Kowal Hyvä Colors i omów konfigurację lub potrzebne rozszerzenia.
Więcej informacji
| Motyw Hyvä | Zgodny z motywem Hyvä |
|---|---|
| Zgodność z szablonem | Hyvä, Luma / Blank, KOWAL |
Konfiguracja Integracji
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.
Instrukcja Instalacji modułu
Kowal Hyva Colors — instalacja i aktualizacja
Instrukcja dla wersji 0.1.6. Polecenia wykonuj w katalogu głównym Magento jako użytkownik wdrożeniowy, w ramach standardowej procedury deploymentu sklepu. Najpierw sprawdź instalację na środowisku testowym.
Wymagania
| Składnik | Wymaganie obecnej paczki |
|---|---|
| PHP | 8.3.x, 8.4.x lub 8.5.x; rozszerzenia JSON i zlib |
| Magento Framework | ^103.0.9; środowisko referencyjne Magento 2.4.9 |
| Hyvä Theme Module | ~1.5.2 |
| Aktywny motyw publikacji | Dokładnie Hyva/default; Default Theme 1.5.2–1.5.x |
| Kowal Base | ^1.1.7 |
| Usługi | Działający cron Magento, zapisywalne media i poprawnie skonfigurowany cache |
Pełne zależności określa composer.json. Wymagania zależności nie są deklaracją przetestowania wszystkich kombinacji wersji. Motyw potomny jest obecnie odrzucany przez walidację publikacji, nawet gdy dziedziczy z Hyvä.
1. Dostęp do Composer
Skonfiguruj repozytorium Composer udostępniające kowal/module-hyva-colors oraz kowal/base, zgodnie z danymi otrzymanymi od dostawcy. Potrzebny jest również uprawniony dostęp do repozytorium Hyvä. Adres repozytorium i sposób autoryzacji zależą od dostarczonego dostępu; ta instrukcja nie zakłada publicznej dostępności paczki.
Przykładowy schemat konfiguracji — zastąp adres rzeczywistym adresem repozytorium Composer:
composer config repositories.kowal composer 'https://ADRES-REPOZYTORIUM-COMPOSER'
Dane uwierzytelniające przechowuj poza repozytorium projektu, np. w prywatnym auth.json lub konfiguracji CI. Nie kopiuj ich do dokumentacji.
2. Instalacja
Po udostępnieniu wydania 0.1.6 w repozytorium:
composer require kowal/module-hyva-colors:0.1.6 --with-all-dependencies
php bin/magento module:enable Kowal_Base Kowal_HyvaColors
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy pl_PL en_US
php bin/magento cache:clean config layout block_html full_page
php bin/magento module:status Kowal_HyvaColors
php bin/magento kowal:hyva-colors:diagnose
Podane locale są przykładem — wdrażaj języki używane przez sklep i panel. Generowanie DI i zasobów połącz ze standardową procedurą wdrożeniową, zamiast uruchamiać je podczas obsługi ruchu na aktywnym katalogu produkcyjnym.
Instalacja tworzy katalog i zestawy początkowe. Nie publikuje kolorów i nie zmienia wyglądu sklepu. Komenda diagnose sprawdza katalog paczki i raportuje zakres funkcji; nie jest pełnym testem środowiska.
3. Cron i pliki CSS
Moduł korzysta z zadania kowal_hyva_colors_publish w grupie cron default, planowanego co minutę. Na serwerze musi działać standardowy cron Magento. Jedno wykonanie obsługuje maksymalnie 10 zadań; publikacja nie musi być natychmiastowa.
Ręczne przetworzenie kolejki do diagnostyki:
php bin/magento kowal:hyva-colors:publication:process
Sprawdź status konkretnego zadania w „Historia zmian” — pomyślne wykonanie komendy nie oznacza, że każde zadanie zakończyło się sukcesem.
Arkusze są zapisywane w pub/media/kowal/hyva-colors/<store-id>/<hash>.css. Zapewnij możliwość zapisu oraz odczytu przez HTTP. Przy wielu węzłach media muszą być wspólne. Dla tych niezmiennych plików można skonfigurować Content-Type: text/css, kompresję i Cache-Control: public, max-age=31536000, immutable. Moduł nie ustawia konfiguracji serwera ani CDN.
4. Odbiór instalacji
- Otwórz kowal.store → Modules → Hyva Colors. Jeśli menu jest niewidoczne, sprawdź Kowal Base i uprawnienia roli.
- Sprawdź trzy strony: „Zestawy i publikacja”, „Moje zestawy”, „Historia zmian”.
- Na testowym store view opublikuj paletę i zaczekaj na zakończenie zadania.
- Sprawdź nagłówek, konto, minikoszyk, kategorię i produkt na desktopie i telefonie, również hover/focus.
- Potwierdź dostępność CSS, odświeżenie FPC/Varnish i wszystkich węzłów CDN.
- Opublikuj reset do natywnego motywu, a następnie sprawdź przywracanie wcześniejszej publikacji.
Aktualizacja
Po udostępnieniu nowego wydania:
composer update kowal/module-hyva-colors kowal/base --with-all-dependencies
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy pl_PL en_US
php bin/magento cache:clean config layout block_html full_page
Sprawdź ograniczenie wersji w głównym composer.json sklepu: dokładne 0.1.6 nie pozwoli poleceniu update wybrać nowszego wydania. Zmień je świadomie, np. przez composer require ...:NOWA-WERSJA --with-all-dependencies.
Aktualizacja nie zastępuje aktywnej publikacji nową paletą. Po zmianach fabrycznych wybierz ponownie gotowy zestaw i opublikuj go. Zapisane własne szkice zachowują własne wartości.
Problemy przy instalacji
- Pakiet nie jest dostępny: sprawdź dostępność wydania, repozytoria i autoryzację Composer.
- Brak menu: sprawdź aktywację
Kowal_Base, prawa roli i cache konfiguracji; odśwież panel. - Konflikt katalogu: uruchom
php bin/magento kowal:hyva-colors:catalog:sync --dry-run. Porównaj zmienione definicje przed synchronizacją; nie nadpisuj ręcznie własnych elementów. - Błąd Interceptor po starej wersji: upewnij się, że Composer zainstalował poprawioną paczkę i przebuduj wygenerowany kod w standardowym procesie deploymentu.
- Kolory się nie zmieniają: sprawdź historię, cron, aktywny motyw, CSS w media i propagację cache.
Reset kolorów wykonuje się w panelu. Nie wymaga odinstalowania modułu ani kasowania tabel. Przed wyłączeniem lub usunięciem modułu wyeksportuj potrzebne zestawy i wykonaj kopię bazy zgodnie z procedurą utrzymania sklepu.
