Alles wat u wilt weten voordat u installeert.
Een gedetailleerde blik op hoe Custom Code Manager: CSS- en JS-snippets voor Shopware 6 werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.
Waarom een aparte beheerder voor custom code
In het echte leven van een Shopware-webshop stapelen de behoeften aan grafische of gedragsmatige personalisatie zich op: een promobanner tijdens de solden, een badge Nieuw op bepaalde producten, een verrijkt GTM-event om de conversies beter te meten, een opt-in dark mode voor de gebruikers die erom vragen, een snelle A/B-test op de kleur van de knop om aan de winkelwagen toe te voegen. De gangbare praktijk bestaat erin het thema via SSH aan te passen, of plugins van derden op te stapelen die elk hun eigen extra CSS-bestand in de pagina injecteren. Het resultaat? Themabestanden die onmogelijk te onderhouden zijn, wijzigingen die bij de update worden vergeten, en laadtijden die oplopen door de extra verzoeken. Custom Code Manager biedt een eenvoudig antwoord: één plugin, één aparte interface, en al uw personalisaties per thema gegroepeerd op één plek, rechtstreeks in de native Shopware-bundel geïnjecteerd.
De magie van de rechtstreekse injectie in de compilatie
De meeste plugins waarmee u aangepaste CSS kunt toevoegen werken door een extra bestand in de head tag van de storefront te laden. Dat is eenvoudig te implementeren maar kost een extra HTTP-verzoek per bezoeker, en omzeilt volledig de optimalisatieketen van Shopware (concatenatie, minificatie, cache fingerprinting). Custom Code Manager doet het omgekeerde: hij abonneert zich op de compilatie-events van het thema (ThemeCompilerEnrichScssVariablesEvent, ThemeCompilerConcatenatedStylesEvent, ThemeCompilerConcatenatedScriptsEvent) en voegt uw code rechtstreeks toe aan de belangrijkste CSS- en JavaScript-bundel die Shopware genereert. De concrete gevolgen: nul extra verzoeken voor de bezoeker, uw SCSS profiteert automatisch van de variabelen en mixins van het actieve thema, en de volledige browsercacheketen werkt precies zoals bij de native code van het thema.
Containers, snippets, prioriteit: het mentale model
De plugin is op twee niveaus georganiseerd. Een container is een logische groepering: Zomerpromo 2026, GTM analytics, Opt-in dark mode, A/B-test CTA-knop, enzovoort. Elke container kan een of meer snippets bevatten, en elke snippet is ofwel SCSS ofwel JavaScript. Zowel de containers als de snippets hebben hun eigen laadprioriteit (een geheel getal, hoger om als laatste in de bundel te komen) en hun eigen actief-inactief schakelaar. U kunt dus tijdelijk een hele container uitschakelen gedurende een periode, of een specifieke snippet uitzetten zonder de code kwijt te raken. En met het multi-kanaal bereik houdt u een container voor aan bepaalde webshops binnen uw Shopware-instantie.
Versiehistoriek en safe mode: de rode draad van de veiligheid
Zodra een snippet wordt opgeslagen, wordt er automatisch een versie aangemaakt. De plugin bewaart de 5 laatste versies per snippet, wat de behoefte aan terugkeren bij een verkeerde handeling ruimschoots dekt. In het historiekvenster kunt u snel vergelijken en met één klik een vorige versie herstellen. En voor de paniekmomenten waarop een slecht geteste wijziging iets in productie doet crashen, schakelt de globale safe mode (een eenvoudige schakelaar in de Shopware pluginconfiguratie) onmiddellijk alle containers uit zonder dat u ze één voor één moet aanpassen. Daarna volstaat het het thema te hercompileren zodat de storefront zijn vorige staat terugkrijgt. Dat vangnet maakt het verschil wanneer u om 22 uur alleen met een incident zit.
Presetbibliotheek om sneller te starten
Voor de meest voorkomende toepassingen hoeft u het warm water niet opnieuw uit te vinden. De plugin bevat een bibliotheek met 8 presets die u met één klik installeert: een sticky header die bij het scrollen verandert, een knop terug naar boven, een reskin van de native cookiebanner zodat die bij uw huisstijl aansluit, een badge Nieuw op recente producten, een gratis verzendbalk met voortgangsbalk, een look met afgeronde knoppen over de hele site, een GTM DOM ready event om uw data layers op te starten, en een geleidelijk fade-in effect op elementen bij het scrollen. Klik op Installeren, de container en de snippets worden aangemaakt, u hercompileert, en het staat online.
Validatie, import export, meerdere omgevingen
Elke snippet kan vóór het opslaan syntactisch worden gevalideerd, wat voorkomt dat u code doorduwt die de themacompilatie zou breken. De SCSS wordt blind gecompileerd met de echte variabelen van het thema om gebroken referenties op te sporen, en de JavaScript ondergaat een balanscontrole op accolades, haakjes en blokhaken nadat de strings en commentaren zijn verwijderd. Om uw snippets tussen uw ontwikkel-, test- en productieomgevingen te verplaatsen, genereert de knop Exporteren een JSON-bestand van de selectie (een of meer containers met al hun snippets), dat u aan de andere kant weer importeert. Ook handig om een interne bibliotheek te delen tussen meerdere webshops van uw groep.
Wat de plugin niet doet
Custom Code Manager richt zich bewust op de CSS- en JavaScript-code die in de compilatie van het storefront-thema wordt geïnjecteerd. Hij raakt de PHP niet aan, wijzigt de Twig-templates niet, bemoeit zich niet met de SEO-meta, genereert geen scripttags in de head van de storefront, en werkt niet op Shopware Cloud (de door Shopware gehoste SaaS-versie, die de installatie van serverplugins niet toestaat). Voor die behoeften dekken andere plugins uit het DataFirefly-gamma die gebieden. Die focus is bewust: een plugin die één ding doet, en dat goed doet.
There are no reviews yet.