Frontend: Hyva – Nowa Era Magento
Zapomnij o Luma. Hyva Theme to rewolucja, która usuwa setki plików JS na rzecz Alpine.js i Tailwind CSS, dając Ci niesamowitą prędkość.
Głównym problemem klasycznego frontend Magento jest jego złożoność i ciężar (RequireJS, Knockout.js). Hyva Theme buduje wszystko od nowa, korzystając z nowoczesnego stosu technologicznego.
Dlaczego warto wybrać Hyva?
Wdrożenie Hyva pozwala na osiągnięcie wyniku Lighthouse 100/100 na urządzeniach mobilnych niemal "out of the box". To klucz do wyższej konwersji i lepszego pozycjonowania SEO.
Kompilacja frontendu Hyva
Hyva korzysta z Tailwind CSS, który wymaga kompilacji przy każdej zmianie w plikach szablonów `.phtml`. Operację tę wykonujemy w katalogu motywu.
# Przejście do katalogu motywu:
cd app/design/frontend/Mage24/default/web/tailwind/
# Produkcyjny build stylów:
npm run build-prod
# Tryb deweloperski (auto-odświeżanie):
npm run watch
W Mage24.pl oferujemy prekonfigurowane instancje Magento 2.4.8 gotowe pod Hyva, co pozwala skrócić czas developmentu frontendu o połowę.
Konfiguracja Tailwind CSS
Tailwind w Hyva wymaga specyficznej konfiguracji. Plik tailwind.config.js musi skanować wszystkie Twoje moduły i pliki .phtml, aby poprawnie wygenerować tylko te style, których faktycznie używasz. Dzięki temu końcowy plik CSS waży zazwyczaj mniej niż 50 KB, co jest nieosiągalne dla klasycznego motywu Luma.
Pro Tip: Alpine.js State
Przy budowaniu złożonych elementów (np. popupy, mini-koszyk) używaj globalnych obiektów stanu w Alpine.js (Alpine.store). Pozwala to na łatwą komunikację między różnymi częściami strony bez konieczności przeładowywania danych, zachowując przy tym lekkość kodu.
Kompatybilność i Ekosystem
Pamiętaj jednak, że Hyva nie jest kompatybilna z klasycznymi modułami frontendowymi z Luma. Każdy moduł zewnętrzny musi posiadać dedykowany "Hyva Compatibility Module", aby poprawnie wyświetlać się w sklepie. Warto sprawdzić publiczne repozytoria Hyva, gdzie społeczność udostępnia setki darmowych nakładek dla najpopularniejszych modułów Magento.
Z tego tutoriala dowiesz się, jak zainstalować Hyva Theme przez Composer oraz jak rozpocząć budowę własnych, responsywnych komponentów przy użyciu utility-first CSS.