Como criar um tema personalizado no Magento

Publicados: 2015-04-06

Embora o Magento 2 esteja em fase de desenvolvimento, já fez muito barulho no setor de comércio eletrônico por causa das novas e aprimoradas abordagens de front-end que deve oferecer. Embora as melhorias de front-end pareçam tornar o processo de tema do Magento muito mais eficiente, muitos desenvolvedores (especialmente iniciantes) ainda não estão cientes do processo de criação de um tema personalizado no Magento 2.

Através deste post, abordarei o processo passo a passo de criação de um tema personalizado do Magento 2. Mas antes disso vamos primeiro ter uma visão geral do tema Magento.

Tema Magento - Uma Visão Geral

Um tema ajuda a criar uma representação visual da sua loja Magento, usando uma combinação do seguinte:

Modelos personalizados
Layouts
Arquivos CSS/LESS

O aplicativo Magento oferece dois temas de design diferentes, a saber, Luma (também chamado de tema de demonstração) e Blank (usado para criação de temas personalizados). Como precisamos criar um tema Magento personalizado, usaremos o tema Magento Blank.

Para criar um novo tema usando Blank, você terá que personalizá-lo. Mas, fazer alterações no tema padrão fará com que as alterações sejam substituídas, toda vez que a nova versão de seus arquivos padrão for atualizada. Uma alternativa viável para esse problema é criar um novo tema personalizado que herde a funcionalidade do tema padrão ou de qualquer tema existente.

Simplificando, vamos criar um tema filho personalizado que herda a funcionalidade do tema existente. Isso ajudará você a passar pelo incômodo de criar um novo tema autônomo do zero. Portanto, em vez de copiar um extenso conjunto de arquivos e modificá-los, você só precisará substituir e estender os arquivos existentes no tema pai.

Vamos agora começar a discutir os passos envolvidos na criação de um novo tema Magento (ou seja, um por um.

Entendendo o processo de criação de temas

Nesta seção, abordaremos a criação de arquivos que ajudariam na criação do tema. Além disso, também teremos um vislumbre do processo de adicionar um logotipo ao tema ou como podemos configurar as imagens.

Passo 1 – Crie um diretório de temas

A primeira etapa que você precisa executar ao criar um tema personalizado exige que você crie sua estrutura de diretórios de temas. Para isso, siga os pontos-chave mencionados abaixo:

Acesse e abra seu back-end de administração de instalação do Magento e, em seguida, vá para dir>/app/design/frontend.

A maioria das lojas virtuais oferece produtos de diferentes fornecedores e, portanto, é importante ter um diretório de fornecedores separado, onde todos os produtos oferecidos pelos fornecedores são listados. Portanto, sua próxima etapa é criar um novo diretório com o nome semelhante ao nome do seu fornecedor: /app/design/frontend/<Vendor>.

Caso você esteja usando qualquer tema integrado do Magento, então você precisa consultar o diretório: app/design/frontend/Magento

Agora que você criou o diretório do fornecedor, crie outro diretório com o nome semelhante ao do seu tema no diretório do fornecedor, conforme mostrado abaixo.

aplicativo/design/frontend/

>> <Fornecedor>/

>>…<tema>/

>>…

Passo 2 – Entendendo a Declaração do Tema

Assim que terminar de criar a estrutura de diretórios do seu tema, você terá que criar theme.xml para definir o layout do seu tema. O arquivo xml deve conter pelo menos o nome do tema filho e o nome do tema pai. Todas as atualizações feitas no layout do seu tema serão armazenadas neste arquivo.

Há duas tarefas que o layout do seu tema precisa executar.

Primeiro, adicione ou copie o conteúdo do theme.xml atual para seu diretório de temas app/design/frontend/<Vendor>/<theme>

Em segundo lugar, para tornar seu tema visível, você precisa configurá-lo. Para isso, use o seguinte exemplo:

<parent>Magento/blank</parent> <!– o tema pai, caso seu tema seja herdado de um tema existente –>

<mídia>

<preview_image>media/preview.jpg</preview_image> <!– o caminho para a imagem de visualização do seu tema –>

</media>

</theme>

Para garantir que seu tema seja reconhecido pelo aplicativo Magento, faça login no painel de administração do Magento e verifique se você pode ver o tema na grade em Conteúdo-> Design -> Temas.

Alfinete

Passo 4 – Configurar Imagens (Mudando o Tamanho das Imagens do Produto)

Ao fazer o upload das imagens do produto, se seu tamanho for superior ao do tema padrão, você terá que adicionar um arquivo view.xml. Este arquivo contém detalhes de configuração dos tamanhos de imagem do produto que são exibidos na vitrine. Vamos agora ver os passos que você precisa seguir para configurar as imagens:

Faça login no seu servidor Magento, no entanto, você precisará acessar o servidor como um usuário com um determinado conjunto de permissões. Você deve ter permissões para criar diretórios e arquivos no diretório da instalação do Magento.

Na pasta do seu tema, crie o diretório etc.

Em seguida, copie o arquivo view.xml do diretório “etc” do seu tema existente (digamos, por exemplo, do tema Blank) para o diretório etc recém-criado do seu tema personalizado.

Por fim, você precisa configurar todos os tamanhos de imagem do produto usados no front-end da sua loja em view.xml. Por exemplo, você pode optar por retratar as imagens do produto na exibição de grade da categoria do produto como quadradas, atribuindo a elas um tamanho de 250 x 250 px. Vamos ter um vislumbre de como ficaria a configuração da imagem:

<var name="category_page_grid:type">small_image</var>

Passo 5 – Crie diretórios para os arquivos estáticos do seu tema

Assim como qualquer tema Magento padrão, seu tema também conterá vários arquivos estáticos, incluindo estilos, JavaScript, imagens e outros arquivos. Certifique-se de armazenar cada tipo de arquivo em um subdiretório “web” separado dentro da pasta do tema, da seguinte forma:

app/design/<área>/<Fornecedor>/<tema>/

>> web/

>> css/

>> fonte/

>> fontes/

>> imagens/

>> js/

Nota: Todos os arquivos estáticos do tema geral devem ser armazenados em …<theme>/web/images, por exemplo, o logotipo do seu tema precisa ser armazenado em …<theme>/web/images. Há uma possibilidade maior de que seu tema inclua alguns arquivos específicos do módulo. Esses arquivos são armazenados em subdiretórios como …/<theme>/<Namespace_Module>/web/css e subdiretórios relacionados. No entanto, este é um novo tópico de discussão. Então, por enquanto vamos pular este tópico.

Aplicando e configurando seu tema no Magento

Esta seção informará como você pode aplicar seu tema à loja Magento. Para isso, basta seguir os passos listados abaixo:

Passo 1 – Abra o painel de administração de instalação do Magento e navegue até CONTENT-> Design-> Themes. Certifique-se de que você pode ver seu tema na lista de temas fornecida.

Passo 2 – No seu painel de administração, visite Lojas -> Configuração -> Design.

Etapa 3 – No campo suspenso “Escopo”, escolha a visualização da loja à qual você deseja aplicar seu tema.

Passo 4 – Em seguida, na guia Tema “Design”, escolha o tema que você acabou de criar listado no menu suspenso Tema de design.

Passo 5 – Por fim, clique na opção “Save Config” para aplicar as alterações feitas até agora. E uma vez feito, certifique-se de recarregar as páginas da sua vitrine.

Nota: Caso o cache esteja habilitado em seu back-end Magento, é importante limpar o cache ou talvez você não consiga ver as alterações que acabou de aplicar.

Conclusão

Espero que a leitura deste tutorial sirva como um guia básico que o ajude a entender o processo de criação de um tema personalizado no Magento 2.

Biografia do autor:

Isabella Morris está atualmente empregada em uma renomada empresa de desenvolvimento personalizado do Magento e também está envolvida em escrever artigos informativos sobre as melhores ferramentas e truques para o desenvolvimento do Magento. Seus artigos se mostraram benéficos para um grupo mais amplo de desenvolvedores Magento em todo o mundo.