Tudo o que quer saber antes de instalar.
Uma análise detalhada de como o Custom Code Manager: snippets CSS / JS para Shopware 6 funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.
Porquê um gestor de código personalizado dedicado
Na vida real de uma loja Shopware, as necessidades de personalização gráfica ou de comportamento acumulam-se: um banner promocional durante os saldos, um selo Novo em certos produtos, um evento de GTM enriquecido para medir melhor as conversões, um modo escuro opcional para quem o pede, um teste A/B rápido na cor do botão de adicionar ao carrinho. A prática habitual passa por alterar o tema por SSH, ou por empilhar extensões de terceiros que injetam cada uma o seu ficheiro CSS adicional na página. O resultado são ficheiros de tema impossíveis de manter, alterações esquecidas no momento da atualização, e tempos de carregamento que se alongam por causa dos pedidos adicionais. O Custom Code Manager traz uma resposta simples: uma única extensão, uma interface dedicada, e todas as suas personalizações agrupadas por tema no mesmo sítio, injetadas diretamente no bundle nativo do Shopware.
A magia da injeção direta na compilação
A maioria das extensões que permitem acrescentar CSS personalizado funciona carregando um ficheiro adicional no head do storefront. É simples de implementar, mas custa mais um pedido HTTP por visitante e contorna completamente a cadeia de otimização do Shopware (concatenação, minificação, fingerprinting de cache). O Custom Code Manager faz o contrário: subscreve os eventos de compilação do tema (ThemeCompilerEnrichScssVariablesEvent, ThemeCompilerConcatenatedStylesEvent, ThemeCompilerConcatenatedScriptsEvent) e acrescenta o seu código diretamente ao bundle principal de CSS e JavaScript gerado pelo Shopware. As consequências concretas: zero pedidos adicionais para o visitante, o seu SCSS beneficia automaticamente das variáveis e mixins do tema ativo, e toda a cadeia de cache do navegador funciona exatamente como com o código nativo do tema.
Contentores, snippets e prioridade: o modelo mental
A extensão organiza-se em dois níveis. Um contentor é um agrupamento lógico: Promoção de verão 2026, GTM analytics, Modo escuro opcional, Teste A/B do botão CTA, e por aí fora. Cada contentor pode conter um ou vários snippets, e cada snippet é SCSS ou JavaScript. Tanto os contentores como os snippets têm a sua própria prioridade de carregamento (um inteiro, mais alto para passar em último no bundle) e o seu próprio interruptor de ativo ou inativo. Pode assim desativar temporariamente um contentor inteiro durante um período, ou desativar um snippet específico sem perder o código. E o âmbito multicanal permite reservar um contentor apenas a determinadas lojas da sua instância Shopware.
Histórico de versões e modo seguro: a rede de segurança
Assim que um snippet é guardado, é criada automaticamente uma versão. A extensão conserva as 5 últimas versões por snippet, o que cobre largamente as necessidades de voltar atrás em caso de erro. A janela de histórico permite comparar rapidamente e restaurar uma versão anterior num clique. E para os momentos de pânico em que uma alteração mal testada parte algo em produção, o modo seguro global (um simples interruptor na configuração da extensão) desativa instantaneamente todos os contentores sem ter de os alterar um a um. Basta depois recompilar o tema para que o storefront volte ao estado anterior. Essa rede de segurança faz toda a diferença quando se está sozinho às 22h a resolver um incidente.
Biblioteca de presets para arrancar mais depressa
Para os usos mais comuns, não é preciso reinventar a roda. A extensão inclui uma biblioteca de 8 presets prontos a instalar num clique: um header fixo que se transforma no scroll, um botão de voltar ao topo, uma nova aparência para o banner de cookies nativo para o alinhar com a sua identidade, um selo Novo nos produtos recentes, uma barra de portes grátis com barra de progresso, um aspeto de botão arredondado em todo o site, um evento GTM DOM ready para arrancar as suas data layers, e um efeito de fade-in progressivo nos elementos ao fazer scroll. Clique em Instalar, o contentor e os snippets são criados, recompila, e está online.
Validação, importação e exportação, multiambiente
Cada snippet pode ser validado sintaticamente antes de ser guardado, o que evita colocar código que partisse a compilação do tema. O SCSS é compilado em teste com as variáveis reais do tema para detetar referências partidas, e o JavaScript passa por uma verificação do equilíbrio de chavetas, parênteses e parênteses retos depois de removidas as cadeias e os comentários. Para fazer passar os snippets entre os ambientes de desenvolvimento, de testes e de produção, o botão Exportar gera um ficheiro JSON da seleção (um ou vários contentores com todos os seus snippets), que reimporta do outro lado. Também é prático para partilhar uma biblioteca interna entre várias lojas do seu grupo.
O que a extensão não faz
O Custom Code Manager está deliberadamente centrado no código CSS e JavaScript injetado na compilação do tema do storefront. Não toca no PHP, não altera os templates Twig, não trata das metas de SEO, não gera etiquetas script no head do storefront, e não funciona no Shopware Cloud, a versão SaaS alojada pela Shopware, que não permite instalar extensões de servidor. Para essas necessidades, outras extensões da gama DataFirefly cobrem esses âmbitos. Esse foco é deliberado: uma extensão que faz uma coisa, e que a faz bem.
Ainda não existem avaliações.