Frontend Magento 2

O Magento 2 vem com um conjunto distinto de abordagens de frontend aprimoradas em comparação com seu antecessor Magento 1.X, hoje veremos sob o capô do mecanismo de frontend Magento 2.0. E descreva as partes mais interessantes em detalhes.

QUENTE!! A versão 2.0 do Claude foi lançada

Ver demonstração

Claue – Clean, Minimal Magento 2&1 Theme é um excelente modelo para uma loja de comércio eletrônico moderna e limpa com mais de 40 layouts de página inicial e toneladas de opções para loja, blog, portfólio, layouts de localizador de lojas e outras páginas úteis. A versão 2.0 do Claue vem com vários recursos exclusivos, incluindo:

• Sendo baseado no tema Luma.
• Conheça todos os padrões do tema Magento
• Melhoria significativa de desempenho
• Compatível com a maioria das extensões de terceiros.
• Totalmente compatível com Magento 2.4.x

Esta segunda versão avançada diferencia-se completamente da anterior. Assim, se você estiver usando o Claue versão 1 e quiser atualizar para o Claue versão 2, você só pode reconstruir um novo site em vez de atualizar da versão antiga. Agora, vamos voltar ao tópico principal

A grande diferença é que o frontend agora está atualizado com tecnologias mais recentes, como HTML5, CSS3 e jQuery. Há também mudanças/melhorias significativas na manipulação geral do layout, estrutura de arquivos e uma nova introdução à biblioteca Magento UI fortemente baseada no pré-processador LESS com compilador embutido.

Um dos principais objetivos, além de desempenho e escalabilidade, era servir RWD fora da caixa. Neste artigo tentarei cobrir algumas das principais diferenças, mergulhar no desenvolvimento e demonstrar alguns exemplos práticos.

Biblioteca de interface do usuário Magento

A biblioteca Magento UI é uma biblioteca de frontend flexível baseada em LESS, projetada para auxiliar os desenvolvedores de temas Magento. Ele emprega um conjunto de mixins para elementos básicos para facilitar o desenvolvimento e a personalização do tema front-end.

Componentes fornecidos pela biblioteca de interface do usuário

A biblioteca Magento UI oferece a capacidade de personalizar e reutilizar os seguintes elementos e propriedades da interface do usuário:

• barra de ferramentas de ações
• Migalhas de pão
• botões
• listas suspensas
• formulários
• ícones
• esquema
• carregadores
• mensagens
• paginação
• pop-ups
• avaliações
• Seções
• tablaturas e acordeões
• mesas
• dicas de ferramentas
• tipografia
• lista de variáveis ​​de tema

A ilustração a seguir mostra uma página de produto de vitrine contendo alguns dos elementos anteriores:

Local de mixagem

Você pode encontrar a biblioteca Magento UI em lib/web/css . Os arquivos .less de origem da biblioteca são armazenados no diretório de source , cada arquivo contém mixins para configurar um determinado elemento e, na maioria dos casos, o elemento coincide com o nome do arquivo:

 lib/web
    ├── css/
    │ ├── docs/ (documentação da biblioteca)
    │ ├── fonte/
    │ │ ├── lib/ (arquivos de origem da biblioteca)
    | | | ├── variáveis/ (variáveis ​​predefinidas para cada mixin)
    │ │ │ ├── _actions-toolbar.less
    │ │ │ ├── _breadcrumbs.less
    │ │ │ ├── _buttons.less
    │ │ │ ├── _dropdowns.less
    │ │ │ ├── _forms.less
    | | | ├── _grids.less
    │ │ │ ├── _icons.less
    │ │ │ ├── _layout.less
    │ │ │ ├── _lib.less
    │ │ │ ├── _loaders.less
    │ │ │ ├── _messages.less
    │ │ │ ├── _navigation.less
    │ │ │ ├── _pages.less
    │ │ │ ├── _popups.less
    │ │ │ ├── _rating.less
    │ │ │ ├── _resets.less
    │ │ │ ├── _responsive.less
    │ │ │ ├── _sections.less
    │ │ │ ├── _tables.less
    │ │ │ ├── _tooltips.less
    │ │ │ ├── _typography.less
    │ │ │ ├── _utilities.less
    │ │ │ └── _variables.less
    │ │ └── _extend.less
    │ │ └── _theme.less
    │ │ └── _variables.less
    │ └── estilos.less
    ├── fontes/
    │ └── Blank-Theme-Icons/ (fonte de ícones personalizados da biblioteca)
    ├── imagens/
    │ └── blank-theme-icons.png (sprite de ícones de biblioteca)
    └── jquery/ (arquivos javascript da biblioteca)

Variáveis ​​predefinidas

Se o seu tema herdar de qualquer tema pronto para uso do Magento, por exemplo Blank, você pode personalizar facilmente qualquer elemento de uma página de loja sem alterar nenhum código CSS ou modelos. A personalização pode ser realizada simplesmente alterando em seu tema os valores das variáveis ​​predefinidas usadas na biblioteca de interface do usuário ou mixins de tema pai.

A lista completa dessas variáveis ​​e seus valores padrão são armazenados em lib/web/css/source/lib/variables . Esse diretório contém um conjunto de arquivos, correspondente ao conjunto de elementos da biblioteca de interface do usuário, e cada um dos arquivos lista as variáveis ​​específicas do elemento. Por exemplo, lib/web/css/source/lib/variables/_breadcrumbs.less contém variáveis ​​usadas no mixin breadcrumbs() .

Para alterar os valores de variáveis ​​de biblioteca padrão, especifique os novos valores para as variáveis ​​necessárias no arquivo <theme_dir>/web/css/source/_theme.less .

A figura a seguir mostra a página do produto mostrada anteriormente neste tópico, após a aplicação de um tema personalizado. O tema personalizado em branco redefinindo apenas variáveis.

Usando mixins

Você pode usar um mixin com valores de variáveis ​​padrão ou pode redefini-los ao chamar um mixin. Os parágrafos a seguir descrevem as duas maneiras de chamar um mixin.

Para usar um mixin com valores padrão, chame o mixin sem especificar nenhum parâmetro. Por exemplo:

 .Migalhas de pão {
    .Migalhas de pão();
}

Para chamar um mixin com valores de parâmetro diferentes do padrão, defina esses valores ao chamar o mixin, como no exemplo a seguir:

 .exemplo-botão {
    .botão(
        @_button-padding: @button-padding,
        @_button-color: #fff,
        @_button-color-hover: #ccc
    );
}

Variáveis ​​começando com @_ são variáveis ​​de mixin privadas usadas apenas neste mixin. Variáveis ​​que começam com @ (sem sublinhado) são globais e estão listadas em lib/web/css/source/lib/variables/ .

Documentação da biblioteca de interface do usuário

Você pode encontrar informações detalhadas sobre a biblioteca Magento UI na documentação fornecida junto com o código:

• lib/web/css/docs/source/README.md : descreve a estrutura da biblioteca Magento UI, convenções de nomenclatura e estilo de código.
• lib/web/css/docs : contém um conjunto de arquivos .html com informações detalhadas sobre os mixins da biblioteca. Cada arquivo é nomeado de acordo com o mixin que ele descreve e contém uma descrição detalhada do mixin e controles de navegação para acessar a documentação de outros mixins. A documentação está disponível em uma visualização HTML conveniente no seguinte local em sua instalação do Magento: pub/static/frontend/Magento/blank/en_US/css/docs/index.html

Na continuação do artigo, gostaria de descrever a nova estrutura de temas da plataforma Magento 2.

Estrutura do tema Magento 2

A estrutura do tema Magento 2 passou por mudanças significativas:

Todo o tema está agora organizado relativamente a “app/design”. A pasta “skin” não existe mais. Além disso, há uma nova abordagem para customização de módulos: agora na pasta com o tema, cada unidade de módulo terá seu próprio _catálogo com sua representação, ele conterá templates, JS e CSS/LESS. É uma abordagem muito fácil de usar e pragmática. Temos uma estrutura confortável, onde tudo é organizado de forma muito conveniente.

i18n

Esta pasta contém os arquivos de tradução .csv.

theme.xml

É usado para inicializar o tema. O nome do tema, versão do tema, modelo pai do tema, imagem de visualização do tema devem ser definidos lá. A propósito, agora o Magento 2 suporta herança múltipla de temas.

compositor.json

Os temas do Magento 2 são organizados como pacotes do compositor.

Para transformar seu próprio tema em um pacote composer, você precisará adicionar o arquivo de configuração composer.json na pasta do tema e também registrar seu pacote em https://packagist.org

Atualizações/melhorias de layout

Quando se trata de manipulação de layout, existem algumas novas melhorias muito legais e interessantes.

Antes de mergulhar nos exemplos práticos, é importante mencionar que os arquivos de layout agora estão divididos em partes menores. Praticamente explicado - o que antes era um identificador de layout agora é um arquivo separado.
Provavelmente a intenção era simplificar a manutenção.

Magento 2 apresenta todo o novo conceito para ações de redimensionamento de imagem de produto/mídia diretamente do layout. O arquivo de layout view.xml é responsável e precisa ser colocado no diretório app/design/frontend/vendorName/newTheme/etc/ . Aqui está um exemplo de redimensionamento de imagens de catálogo de produtos em ação.

 <view xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation = "../../../../../../lib/internal/Magento/Framework/Config/etc/view.xsd" > <vars module = "Magento_Catalog" > <var name = "product_small_image_sidebar_size" > 100 </var > <var name = "product_base_image_size" > 275 </var > <var name = "product_base_image_icon_size" > 48 </var > <var name = "product_list_image_size" > 166 </var > <var name = "product_zoom_image_size" > 370 </var > <var name = "product_image_white_borders" > 0 </var > </vars > </view >

Embora eu suponha que o objetivo principal fosse simplificar o processo de redimensionamento real para os desenvolvedores, ele certamente falhará na maioria das situações de design responsivo. Por exemplo, não queremos fornecer imagens grandes para usuários de smartphones na conexão de borda. O redimensionamento de arquivos de modelo ofereceu uma maneira melhor de servir várias fontes para diferentes perfis de usuários finais. No momento, inspecionando um tema em branco, vejo apenas uma situação com apenas dimensionamento de imagens em html.

Uma das grandes e mais do que bem-vindas mudanças é a introdução de um container wrapper, sucessor de um tipo de bloco core/text_list que serviu o papel de um bloco estrutural nas versões anteriores do sistema. O que é realmente interessante é a possibilidade de passar atributos como htmlTag , htmlClass , htmlId diretamente de arquivos de layout.

Meu favorito pessoal é a introdução do método de movimento . É uma espécie de método de ação refinado set/unsetChild, mas agora o processo é muito mais intuitivo. Por exemplo, se precisarmos inserir o bloco de origem1 no bloco de destino2 , esta é a maneira como podemos fazer isso:

Ele automaticamente torna o bloco de origem 1 filho de um bloco de destino 2 .

É importante mencionar que o Magento 2 oferece uma validação do sistema para arquivos XML usando esquemas xml para arquivos de layout individuais e mesclados.

O sistema frontend Magento 2 foi significativamente melhorado, agora é mais avançado tecnologicamente e muito mais fácil de trabalhar. Infelizmente, é impossível cobrir todas as mudanças e inovações do Magento 2 em um artigo. Em artigos futuros, a Magesolution certamente abordará o assunto e entraremos em mais detalhes sobre o mundo da tecnologia Magento 2.

Fonte: magento.com