Tutto quello che vorresti sapere prima di installare.
Uno sguardo dettagliato su come funziona Custom Code Manager — Snippet CSS / JS per Shopware 6, perché l'abbiamo progettato così, e il ragionamento dietro le funzionalità qui sopra.
Perché un gestore di codice personalizzato dedicato
Nella vita reale di un negozio Shopware, le esigenze di personalizzazione grafica e comportamentale si accumulano: un banner promo durante i saldi, un badge Nuovo su alcuni prodotti, un evento GTM arricchito per misurare meglio le conversioni, una dark mode opt-in per gli utenti che la richiedono, un A/B test rapido sul colore del pulsante aggiungi al carrello. La pratica standard consiste nel modificare il tema in SSH o impilare plugin di terze parti che ciascuno inietta il proprio piccolo file CSS aggiuntivo nella pagina. Il risultato? File di tema impossibili da mantenere, modifiche dimenticate al momento dell'aggiornamento, tempi di caricamento che si allungano a causa delle richieste aggiuntive. Custom Code Manager porta una risposta semplice: un solo plugin, un'interfaccia dedicata, tutte le tue personalizzazioni raggruppate per tema in un unico posto, iniettate direttamente nel bundle nativo Shopware.
La magia dell'iniezione diretta nella compilazione
La maggior parte dei plugin che permettono di aggiungere CSS personalizzato funziona caricando un file aggiuntivo nel tag head dello storefront. È semplice da implementare ma costa una richiesta HTTP in più per visitatore e aggira completamente la catena di ottimizzazione Shopware (concatenazione, minificazione, fingerprinting di cache). Custom Code Manager prende la strada opposta: si abbona agli event di compilazione del tema (ThemeCompilerEnrichScssVariablesEvent, ThemeCompilerConcatenatedStylesEvent, ThemeCompilerConcatenatedScriptsEvent) e aggiunge il tuo codice direttamente al bundle CSS e JavaScript principale generato da Shopware. Conseguenze concrete: zero richieste aggiuntive per il visitatore, il tuo SCSS beneficia automaticamente delle variabili e dei mixin del tema attivo, e tutta la catena di cache del browser funziona esattamente come con il codice nativo del tema.
Container, snippet, priorità: il modello mentale
Il plugin si organizza su due livelli. Un container è un raggruppamento logico: Promo estate 2026, GTM analytics, Dark mode opt-in, A/B test pulsante CTA, ecc. Ogni container può contenere uno o più snippet, e ogni snippet è SCSS o JavaScript. Sia i container che gli snippet hanno la propria priorità di caricamento (un intero, più alto per passare più tardi nel bundle) e il proprio interruttore attivo inattivo. Puoi quindi disattivare temporaneamente un container intero per un periodo o disattivare uno snippet preciso senza perdere il suo codice. E l'ambito multi-canale ti permette di riservare un container solo ad alcuni negozi della tua istanza Shopware.
Cronologia versioni e modalità sicura: la rete di sicurezza
Non appena uno snippet viene salvato, viene creata automaticamente una versione. Il plugin conserva le ultime 5 versioni per snippet, il che copre ampiamente le esigenze di rollback in caso di errore. La modale cronologia ti permette di confrontare rapidamente e ripristinare una versione precedente in un clic. E per quei momenti di panico in cui una modifica mal testata rompe qualcosa in produzione, la modalità sicura globale (un semplice interruttore nella configurazione del plugin Shopware) disattiva all'istante ogni container senza doverli modificare uno a uno. Basta ricompilare il tema e lo storefront torna al suo stato precedente. Questa rete di sicurezza fa tutta la differenza quando sei solo alle 22 su un incidente.
Libreria di preset per partire più in fretta
Per i casi d'uso più comuni, non c'è bisogno di reinventare la ruota. Il plugin include una libreria di 8 preset pronti da installare in un clic: un header appiccicoso che si trasforma allo scorrimento, un pulsante torna su, un re-skin del banner cookie nativo per allinearlo al tuo marchio, un badge Nuovo sui prodotti recenti, una barra di spedizione gratuita con barra di avanzamento, un look pulsanti arrotondati su tutto il sito, un evento GTM DOM ready per preparare i tuoi data layer e un effetto fade-in progressivo sugli elementi allo scorrimento. Clic su Installa, il container e gli snippet vengono creati, ricompili, è online.
Validazione, importazione esportazione, multi-ambiente
Ogni snippet può essere validato sintatticamente prima del salvataggio, il che evita di pubblicare codice che romperebbe la compilazione del tema. L'SCSS viene compilato a vuoto con le vere variabili del tema per rilevare riferimenti rotti, e JavaScript subisce un controllo di equilibrio di parentesi graffe, tonde e quadre dopo aver pulito stringhe e commenti. Per spostare i tuoi snippet tra ambienti di sviluppo, staging e produzione, il pulsante Esporta genera un file JSON della selezione (uno o più container con tutti i loro snippet), che reimporti dall'altra parte. Utile anche per condividere una libreria interna tra più negozi del tuo gruppo.
Cosa il plugin non fa
Custom Code Manager si concentra deliberatamente sul codice CSS e JavaScript iniettato nella compilazione del tema storefront. Non tocca il PHP, non modifica i template Twig, non si occupa del meta SEO, non genera tag script nell'head dello storefront e non funziona su Shopware Cloud (la versione SaaS ospitata da Shopware, che non consente l'installazione di plugin server). Per queste esigenze, altri plugin della gamma DataFirefly coprono questi perimetri. Questa focalizzazione è voluta: un plugin, un compito, fatto bene.
Ancora non ci sono recensioni.