Wszystko, co warto wiedzieć, zanim zainstalujesz.
Szczegółowe spojrzenie na to, jak działa Custom Code Manager: Snippety CSS i JS dla Shopware 6, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.
Po co dedykowany menedżer własnego kodu
W codziennym życiu sklepu na Shopware potrzeby personalizacji graficznej i behawioralnej narastają: baner promocyjny na czas wyprzedaży, plakietka Nowość przy wybranych produktach, wzbogacone zdarzenie GTM do lepszego pomiaru konwersji, opcjonalny tryb ciemny dla tych, którzy się o niego dopominają, szybki test A/B koloru przycisku dodania do koszyka. Standardowa praktyka to edycja motywu przez SSH albo piętrzenie wtyczek zewnętrznych, z których każda wstrzykuje na stronę swój własny plik CSS. Efekt? Pliki motywu nie do utrzymania, zmiany zapomniane przy aktualizacji, wydłużające się czasy ładowania przez dodatkowe żądania. Custom Code Manager daje prostą odpowiedź: jedna wtyczka, dedykowany interfejs i wszystkie personalizacje pogrupowane tematycznie w jednym miejscu, wstrzykiwane wprost do natywnego bundle'a Shopware.
Na czym polega wstrzykiwanie wprost do kompilacji
Większość wtyczek pozwalających dodać własny CSS działa tak, że ładuje dodatkowy plik w sekcji head storefrontu. To proste we wdrożeniu, ale kosztuje jedno żądanie HTTP więcej na każdego odwiedzającego i całkowicie omija łańcuch optymalizacji Shopware (konkatenacja, minifikacja, odcisk palca cache'u). Custom Code Manager robi odwrotnie: subskrybuje zdarzenia kompilacji motywu (ThemeCompilerEnrichScssVariablesEvent, ThemeCompilerConcatenatedStylesEvent, ThemeCompilerConcatenatedScriptsEvent) i dopisuje Twój kod wprost do głównego bundle'a CSS i JavaScript generowanego przez Shopware. Konkretne skutki: zero dodatkowych żądań dla odwiedzającego, Twój SCSS automatycznie korzysta ze zmiennych i miksinów aktywnego motywu, a cały łańcuch cache'u przeglądarki działa dokładnie tak samo jak dla natywnego kodu motywu.
Kontenery, snippety i priorytet: model myślowy
Wtyczka organizuje się na dwóch poziomach. Kontener to logiczne zgrupowanie: Promocja lato 2026, GTM analytics, Opcjonalny tryb ciemny, Test A/B przycisku CTA i tak dalej. Każdy kontener może zawierać jeden albo wiele snippetów, a każdy snippet to albo SCSS, albo JavaScript. Zarówno kontenery, jak i snippety mają własny priorytet ładowania (liczba całkowita, wyższa oznacza późniejsze miejsce w bundle'u) oraz własny przełącznik aktywny nieaktywny. Możesz więc tymczasowo wyłączyć cały kontener na jakiś czas albo wyłączyć konkretny snippet, nie tracąc jego kodu. Zasięg per sales channel pozwala z kolei zarezerwować kontener wyłącznie dla wybranych sklepów w Twojej instancji Shopware.
Historia wersji i safe mode: siatka bezpieczeństwa
Zapis snippetu automatycznie tworzy nową wersję. Wtyczka przechowuje 5 ostatnich wersji każdego snippetu, co z zapasem pokrywa potrzebę cofnięcia się po nieudanej zmianie. Okno historii pozwala szybko porównać i przywrócić wcześniejszą wersję jednym kliknięciem. A na chwile paniki, kiedy nieprzetestowana zmiana wywala coś na produkcji, globalny safe mode (zwykły przełącznik w konfiguracji wtyczki Shopware) natychmiast wyłącza wszystkie kontenery, bez konieczności edytowania ich pojedynczo. Wystarczy potem zrekompilować motyw, żeby storefront wrócił do stanu sprzed zmiany. Ta siatka bezpieczeństwa robi całą różnicę, gdy siedzisz sam nad incydentem o dwudziestej drugiej.
Biblioteka presetów na szybszy start
Do najczęstszych zastosowań nie trzeba wynajdywać koła na nowo. Wtyczka zawiera bibliotekę 8 presetów gotowych do instalacji jednym kliknięciem: przyklejony nagłówek zmieniający się przy przewijaniu, przycisk powrotu na górę, przeskórkowanie natywnego banera cookies pod Twoją identyfikację wizualną, plakietka Nowość przy świeżych produktach, pasek darmowej dostawy z paskiem postępu, zaokrąglone przyciski w całym serwisie, zdarzenie GTM DOM ready do rozruchu Twoich data layerów oraz stopniowe pojawianie się elementów przy przewijaniu. Klikasz Zainstaluj, kontener i snippety powstają, rekompilujesz i jest na żywo.
Walidacja, import i eksport, wiele środowisk
Każdy snippet można zwalidować składniowo przed zapisem, dzięki czemu nie wypchniesz kodu, który zepsułby kompilację motywu. SCSS jest kompilowany próbnie z prawdziwymi zmiennymi motywu, żeby wykryć zepsute odwołania, a JavaScript przechodzi kontrolę zbilansowania klamer, nawiasów okrągłych i kwadratowych, po usunięciu łańcuchów znaków i komentarzy. Żeby przenieść snippety między środowiskiem deweloperskim, testowym i produkcyjnym, przycisk Eksportuj generuje plik JSON z zaznaczenia (jeden albo kilka kontenerów wraz ze wszystkimi snippetami), który importujesz po drugiej stronie. Przydatne także do dzielenia się wewnętrzną biblioteką między sklepami w grupie.
Czego wtyczka nie robi
Custom Code Manager celowo skupia się na kodzie CSS i JavaScript wstrzykiwanym do kompilacji motywu storefrontu. Nie dotyka PHP, nie modyfikuje szablonów Twig, nie zajmuje się metatagami SEO, nie generuje znaczników script w sekcji head storefrontu i nie działa na Shopware Cloud, czyli w wersji SaaS hostowanej przez Shopware, która nie pozwala instalować wtyczek serwerowych. Te obszary pokrywają inne wtyczki z oferty DataFirefly. To zawężenie jest celowe: wtyczka, która robi jedną rzecz i robi ją dobrze.
Na razie nie ma opinii o produkcie.