Magento 2 — Guia de sobrevivência no Front-end (Parte 1)
O Magento 2 foi lançado há um bom tempo atrás (2015). Naquela época, o front-end era um pouco diferente do que estamos acostumados hoje em dia. O Webpack não estava em alta, o React não era o que é hoje, e nem mesmo o JavaScript era o mesmo que conhecemos, já que apenas naquele ano, o JS começou a ganhar mais atenção e novas funcionalidades.
Essa diferença de tecnologia na época ocasionou em algumas decisões que hoje são bastante questionadas, como por exemplo, o uso do KnockoutJS, uma biblioteca que não é muito conhecida pelos desenvolvedores.
É notável a dificuldade dos desenvolvedores que não estão acostumados com a arquitetura do Magento 2 na hora do desenvolvimento no front-end. Os que estão começando agora sofrem bastante para começar, e até os que já estão acostumados com o Magento 1 sentem bastante dificuldades na hora da migração.
Bom, resolvi escrever essa série de artigos para ajudar os desenvolvedores que têm dificuldades no Magento 2. Tomei a decisão de separar em partes, pois iria ficar muito denso se colocasse tudo em apenas um artigo.
Começando do começo
Resolvi iniciar por algo bem básico para que no final, tudo tenha sido abordado, afinal isso aqui é um guia de sobrevivência, certo?
Para começar, precisamos entender como funciona a estrutura de um tema, algo que iremos utilizar bastante no decorrer do desenvolvimento no front-end. Vou pular a parte da instalação do Magento 2, mas se precisar, você pode olhar esse link do devdocs que mostra como fazer a instalação.
Criando um tema
Bom, a primeira coisa que devemos ter em mente são os arquivos obrigatórios na hora de criar um tema. Veja na imagem abaixo um tema que tem apenas os arquivos obrigatórios para o funcionamento:
Esses são os arquivos necessários para se ter um tema funcionando. Porém, vale manter em mente que o composer.json não é necessário caso você não vá distribuí-lo via composer.
Agora vamos detalhar o que cada pasta e arquivo faz:
Estrutura de pastas
O primeiro ponto que devemos notar é a estrutura de pastas do tema. Um tema pode estar localizado em 2 lugares: Na pasta vendor e na pasta app/design. O que muda entre essas pastas é a forma de distribuição do seu tema. Irei explicar abaixo quando usar cada uma delas:
Via composer: Utilizando o composer, o tema fica localizado (Normalmente) na pasta vendor (Pasta essa que é gerada automaticamente), seguida pela pasta da empresa ou autor que criou o tema e depois a última pasta com o nome do tema. Essas pastas dependem de como o composer.json foi criado. Vamos olhar o nosso arquivo para termos uma ideia de como ficaria a estrutura de pastas:
O composer irá olhar para a propriedade name e irá montar a estrutura de pastas da seguinte maneira: <magento_dir>/vendor/lucas-calazans/theme-frontend-default.
Quando vamos criar um tema que será distribuído, seja de forma paga ou gratuita, essa provavelmente será a melhor forma de distribuição. Isso porque o composer nos ajuda a manter o versionamento com tags de forma mais segura.
Vamos dar um exemplo: Digamos que você instalou um tema na versão 1.0.0 e depois de um tempo os responsáveis pelo tema o atualizaram para a versão 2.0.0. Porém, se você recebesse essa atualização, muito provavelmente a sua loja iria quebrar, pois ela tinha sido desenvolvida e testada utilizando a versão 1.0.0 do tema.
Com o composer, nós podemos travar a versão que usaremos do tema e assegurar que em qualquer ambiente a versão será a mesma.
Via app/design: Essa talvez seja a forma mais comum de se criar um tema, veja novamente como fica um tema nessa estrutura:
Repare nas pastas que vem após a design. As primeiras delas são as pastas frontend e a adminhtml, elas são bem intuitivas no que diz respeito ao propósito delas. Se colocadas dentro da pasta adminhtml, este será um tema para a área administrativa, caso contrário, será o tema da loja em si (Chamado de frontend), porém isso é apenas uma convenção, já que a área do tema será cadastrada no arquivo registration.php.
Depois da área, temos a pasta mais conhecida como Vendor(Aqui entenda Vendor como Fornecedor, e não a pasta vendor do composer citada anteriormente). Essa pasta será o nome da empresa ou autor responsável pelo tema. Repare que escrevi Vendor com o V maiúsculo, isso é algo proposital, já que o nome dessa pasta vem sempre em PascalCase (Onde toda palavra é escrita com a primeira letra maiúscula).
Em seguida, temos a pasta que carregará o código do tema, porém ela pode ter qualquer nome, já que o código do tema em si será cadastrado no arquivo registration.php. Vale lembrar que, por convenção, essa pasta é sempre escrita em minúsculo e separada por hífens.
Normalmente os temas nessa estrutura de pastas são utilizados em um projeto específico. São aqueles temas que foram pensados para serem utilizados em uma loja específica e não como um tema base, como o luma por exemplo, que é o tema padrão do Magento.
Sendo assim, ele normalmente é versionado com todos os outros arquivos/módulos/configurações da loja, tudo ficará no mesmo repositório.
Arquivos base do tema
Agora que já passamos pela estrutura de pastas, vamos falar sobre os arquivos necessários para colocar nosso tema em funcionamento. Abaixo você verá uma descrição de cada arquivo e o conteúdo deles:
registration.php:
Esse arquivo é o ponto de entrada, é com ele que cadastramos nosso tema. O método register é o responsável por isso. Precisamos passar 3 parâmetros, o primeiro é uma constante (THEME) que irá indicar que esse nosso pacote é um tema (Você pode notar que em um módulo o primeiro parâmetro é a constante MODULE).
O segundo parâmetro desse método é uma string, que é separada em 2 partes. A primeira é a área do tema, é nesse momento em que definimos se ele será do adminhtml ou do frontend. A segunda parte é o código, composto pelo Vendor (Fornecedor do tema) e o nome do tema.
O terceiro e último parâmetro é o caminho para o tema, sempre utilizamos a variável __DIR__ do PHP que retorna o caminho absoluto de onde está o tema.
theme.xml:
Nesse arquivo nós podemos definir o nome do tema, que será apresentado no painel para o lojista e o tema que será o tema base do que está sendo criado.
O Magento 2 trabalha com o esquema de hierarquia de temas. Nós podemos definir qual será o pai do nosso tema, sendo que esse tema pai também pode ter outro pai e assim por diante.
No nosso exemplo criamos o tema LucasCalazans/default, que herda do tema Magento/luma, que por fim herda do Magento/blank.
Essa herança é algo bastante útil quando estamos trabalhando com temas, pois quando estamos customizando um tema com base no luma, só precisaremos inserir no nosso tema os arquivos que precisam de alterações, o restante o Magento irá pegar os arquivos no luma ou no blank.
composer.json:
Como falei anteriormente, esse arquivo não é obrigatório caso o tema não seja utilizado via composer. Não vou entrar em detalhes de como criar esse arquivo pois ele tem muitas propriedades e é um arquivo que não é relacionado com as regras do Magento, e sim com o composer. Vou deixar esse link da documentação oficial que tem todas as propriedades que podem ser utilizadas.
Ativando o Tema
Depois de criar seu tema, você precisará habilitá-lo no painel administrativo para que ele passe a ser utilizado ao invés do tema padrão (luma).
Para isso, abra o painel e abra o seguinte menu:
Em seguida irá abrir um grid com alguns escopos de loja, como global, website e store view:
Nesse grid você poderá escolher qualquer escopo dependendo de onde você queira habilitar o seu tema. Se a sua instância do Magento estiver crua, o seu grid se parecerá com o grid acima, nesse caso podemos simplesmente clicar em Edit no escopo global (A primeira linha).
Agora basta selecionar seu novo tema e salvar, agora o Magento estará olhando para os arquivos do seu tema.
Conclusão
Apesar de básico, é sempre bom ter esses conhecimentos de forma clara, como quais são as formas de instalar um tema ou quais arquivos são obrigatórios na hora da sua criação.
A minha ideia aqui é fazer uma série de artigos, cada um com um tema específico, para que no final se torne um guia de sobrevivência completo. Veja abaixo os artigos já lançados:
- Parte 1 — Temas
- Parte 2 — Layout XML
Espero que tenha de fato ficado claro, caso contrário, sinta-se a vontade em comentar abaixo a sua dúvida. Vou deixar também minhas redes sociais abaixo caso queira me acompanhar ou mandar uma mensagem.
