Como importar JS no M2

Existe uma necessidade bem comum de adicionarmos código javascript aos nossos templates, seja pela necessidade de inserir o rastreamento do google analytics, um pixel do facebook, ou um sistema de chat terceirizado.

Vejamos então algumas possibilidades de como importar um arquivo JS na plataforma de cor Magenta.

Se você deseja importar JS no M1, veja o artigo: Como adicionar javascript ao código.

1. Usando o GTM

O Google Tag Manager é uma opção bem interessante para separar scripts de template dos scripts de terceiros. Você insere ele apenas uma vez no seu tema, e depois faz todo gerenciamento externamente.

O problema de usar o GTM, é quando você (ou quem esta gerenciando) “esquece” de remover scripts desnecessários, ou quando você começa a “desacoplar” scripts que deveriam estar no tema, jogando tudo no GTM.

De qualquer maneira, depois de criar uma conta no GTM e ter o código em mãos, você precisará usar uma das opções abaixo para inserir o script no seu template.

2. Configurações Gerais

O GTM citado acima poderia ser inserido utilizando as configurações gerais da loja, pois isso permite que você modifique seu tema a qualquer momento, mantendo o script ativo e funcionando. Para isso vá em:

Conteúdo > Design > Configuração > Opção de "Editar" o tema

Na página que abrir, encontre a seção HTML Head e edite o campo Scripts and Styles Sheets.

Isso vai afetar todas as páginas do seu site. Evite usar esta opção para ficar inserindo todo e qualquer tipo de script.

3. Usando o CMS

Apesar de não ser nada recomendado, estou mostrando que é possível. CMS é a área de gerenciamento de páginas estáticas do sistema. Por exemplo, no menu:

Conteúdo > Elementos > Páginas > Sobre nós [editar]

Ao abrir a página, na área de Content clique no botão [ Show / Hide Editor ] para poder inserir o script no formato html.

Basta salvar a página e ver o resultado no frontend.

Limitações: Além de não ser recomendado (por diversas razões), esse modelo vai funcionar apenas na página editada (não afeta todo o site). E quando você voltar a editar a página, o script vai sumir (você perde o código).

Esse problema de perder o código, pode ser contornado se você desligar a configuração de WYSIWYG do sistema.

4. Widgets

Se assemelha muito com a opção anterior, já que os widgets são peças que você pode associar a blocos de conteúdo criados no CMS, e plugar em alguma parte do seu layout. Então você poderia criar um bloco com seu código JS (no exemplo abaixo usando a versão Enterprise – que permite incluir códigos):

Obviamente você precisa dar um nome à esse bloco que possa ser identificado na criação do widget.

Conteúdo > Elementos > Widgets > Criar Widget

No menu à esquerda “Widget Options” você conecta ao seu bloco de conteúdo (que contêm o JS). Já no menu “Storefront Properties” além da identificação do widget, você também pode configurar a maneira como ele será inserido no tema.

Como no exemplo acima (da imagem) em que queremos inserir o código JS em todas as páginas, na área de conteúdo Header. Feito isso, basta salvar e limpar o cache.

5. Codando no PHTML

Inserir código javascript diretamente no phtml é geralmente feito quando precisamos de um controle dinâmico no script, por exemplo, controlar as páginas que deverão executar o script, dependendo do tipo de usuário logado, ou passando parâmetros que serão obtidos da base de dados.

Segue um exemplo onde o javascript é montado com valores dinâmicos usando PHP:

Nesta versão 2.x temos também a possibilidade de utilizar o RequireJS, o que eleva bastante o poder de abstração e controle. Neste post não veremos um exemplo utilizando RequireJS, mas posso recomendar um curso que achei muito bom: RequireJS e fundamentos Javascript para M2 – com Vinai Kopp.

6. Configurando o XML

A arquitetura de templates da cor Magenta é construida com arquivos XML’s. Dessa forma, se o seu tema depende de alguma biblioteca JS ou script de execução, o ideal é que seu import seja feito por XML também.

Vamos pegar como exemplo o arquivo default_head_blocks.xml:

/vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml

Dentro da tag HEAD você pode importar o arquivo JS.

Uma outra maneira, usando como exemplo o arquivo checkout_cart_configure.xml:

Lembrando que pegamos estes arquivos apenas como exemplos. Você não deve alterar arquivos que compõem a base do sistema, mas pode fazer uma cópia deles em um diretório para seu tema customizado.

Tem mais…

Como eu mencionei anteriormente, temos o RequireJS que torna tudo um pouco mais complexo, por isso veremos um exemplo em outro artigo. De momento eu recomendo o curso do Vinai Kopp – RequireJS e fundamentos para M2.

Existem alguns módulos que facilitam o uso de scripts também, como por exemplo o Microsoft Clarity, onde basta informar seu ID de conta nas configurações do módulo e ele faz o import para você. Alguns módulos também permitem que você insira um script customizado, para expandir alguma funcionalidade, e isso facilita bastante o processo.

Dependendo do modelo que você escolheu utilizar, lembre-se de atualizar o cache da aplicação para ver o resultado.

Fique à vontade para entrar em contato e tirar suas dúvidas ou solicitar mais conteúdos relacionados ao tema.

Sucesso!