O Guia para Iniciantes de Blocos e Widgets Magento

Blocos e widgets são os principais recursos de layout do Magento. Esses dois recursos estão intimamente ligados e geralmente são usados ​​juntos.

Uma maneira de pensar sobre os Blocos é que eles são mini-Páginas. Um bloco também pode conter texto, imagens, vídeo e muito mais. Mas como os Blocos são menores, você os verá nas bordas do seu site. Blocos são frequentemente inseridos em cabeçalhos, barras laterais e rodapés.

No entanto, os Blocos são colocados usando Widgets. Primeiro você cria um Bloco, e então você usa um Widget para decidir onde aquele Bloco será exibido.

Vamos orientá-lo em alguns exemplos e mostrar como Blocks e Widgets funcionam no Magento.

Este guia foi retirado do Magento 2 Explained, o livro mais vendido do Magento 2. Usamos o exemplo de uma loja chamada "Orangeville" nesse livro, então você a verá referenciada aqui.

Criando blocos Magento explicados

Vamos passar pelo processo de criação do nosso primeiro Bloco. Isso conterá um link HTML.

• Vá em "Conteúdo" e depois em "Blocos".
• Clique em "Adicionar novo bloco" no canto superior direito.

• Digite "Key Links" como o "Título do Bloco". Isto é o que os visitantes verão na tela.
• Digite "key_links" como o Identificador. Essa string é o que o Magento usa para identificar o bloco, mas os visitantes nunca a verão.

• Clique no ícone de marcador na barra de ferramentas do editor:

• Digite "Sobre Orangeville" como um marcador:
• Selecione o texto "Sobre Orangeville" e clique no ícone do link.

• Agora você verá uma janela pop-up. Digite o URL da sua página "Sobre Orangeville". Se você não tem certeza do que é isso, você pode abrir seu site Magento em uma nova guia do navegador e encontrar a URL, que provavelmente será example.com/about-orangeville/.
• Clique em "Inserir".
• Agora você tem um link "Sobre Orangeville" dentro do seu Bloco:

• Clique em "Salvar bloco".

Criando widgets Magento explicados

Agora temos o desafio de colocar seu bloco no design do seu site. É aqui que os Widgets do Magento são úteis. No Magento, um bloco é apenas um conteúdo. É o Widget que controla o posicionamento do Bloco.

No entanto, isso não é tudo que um Widget pode fazer. Um widget pode colocar nossos blocos novos e simples, mas também pode colocar muitos outros recursos.

• Vá em "Conteúdo" e depois em "Widgets".
• Clique em "Adicionar widget".
• Para "Tipo", escolha "Bloco Estático CMS".
• Para "Design Theme", escolha "Magento Luma".
• Clique em "Continuar".

• Digite "Key Orangeville Links" para o "Título do Widget".
• Em "Atribuir às visualizações da loja", selecione "Todas as visualizações da loja".

Em seguida, vamos controlar em quais URLs esse bloco aparece.

• Clique em "Adicionar atualização de layout".

• Escolha "Todas as páginas".

• Escolha "Links de rodapé do CMS" para a opção "Contêiner".

Ambas as opções, "Todas as páginas" e "Links do rodapé do CMS", podem não fazer muito sentido para você ainda. No entanto, terminaremos de criar o widget e, mais adiante no capítulo, na seção chamada "Explicação do posicionamento do widget Magento", explicaremos mais sobre por que fizemos essas escolhas.

Em "Atualizações de layout", faremos uma segunda escolha para onde colocar nosso widget.

• Escolha "Todos os tipos de produtos".
• Escolha "Links de rodapé do CMS" novamente.
• Depois de adicionar essas duas opções, sua tela ficará como a imagem abaixo.

Neste ponto, você criou o Widget e disse ao Magento onde ele deve aparecer em seu site: este Widget aparecerá em todas as nossas Páginas e em todos os nossos Produtos.

Agora é hora de escolher o conteúdo do Widget, que será o Bloco que você criou anteriormente.

• Clique em "Opções de widget" na barra lateral.
• Clique em "Selecionar bloco".

• Agora você pode escolher o bloco "Links de chave" que você criou anteriormente:

• Clique em "Salvar".
• Visite a frente do seu site e você verá que seu link agora está publicado no rodapé. Você criou um Bloco com o conteúdo e o publicou dentro de um Widget.

Criando blocos e widgets juntos

Definitivamente, existem algumas etapas complicadas ao criar Blocos e Widgets. Então vamos tentar todo esse processo juntos. Criaremos um segundo Bloco e o colocaremos em nosso site com a ajuda de um Widget. Este bloco dirá às pessoas que temos uma garantia de 100% de satisfação.

• Vá em "Conteúdo" e depois em "Blocos".
• Clique em "Adicionar novo bloco".
• Título: Satisfação Garantida
• Identificador: garantia

• Digite o texto para o seu bloco. Eu escrevi "Aqui em Orangeville, sua satisfação é nossa principal prioridade. Se você não estiver satisfeito, devolveremos seu dinheiro."

Em seguida, vamos fazer upload de uma imagem para o nosso bloco.

• Coloque o cursor na área de conteúdo principal, abaixo do texto que você acabou de escrever.
• Clique no ícone da árvore na barra de ferramentas do editor.
• Quando vir a caixa pop-up, clique no ícone de caixa pequena.
• Encontre uma imagem que você possa enviar. Eu escolhi um selo 100%.

• Clique em "Inserir arquivo".
• Descrição da imagem: Garantia de satisfação
• Clique em "Inserir".

• Agora você tem um bloco que contém texto e sua nova imagem.
• Clique em "Salvar bloco" para finalizar a criação deste bloco.

Em seguida, vamos criar o Widget que exibirá este Bloco em nosso site.

• Vá em "Conteúdo" e depois em "Widgets".
• Clique em "Adicionar widget".
• Tipo: Bloco Estático CMS
• Tema de design: Magento Luma

• Título do Widget: Satisfação Garantida
• Atribuir às visualizações da loja: todas as visualizações da loja

• Atualização de layout: categorias de âncora
• Contêiner: Barra Lateral Principal
• Clique em "Opções de widget" e escolha o bloco "Satisfação Garantida" que você acabou de criar.

• Clique em "Salvar".
• Visite a frente do seu site. Clique em um dos links de categoria no menu superior. Na imagem abaixo, cliquei em "Frutas". Agora você verá seu bloco de garantia na barra lateral esquerda:

Explicação do posicionamento do widget Magento

Uma pergunta comum que recebo dos alunos do Magento é sobre o posicionamento dos Widgets.

Como você sabe escolher "CMS Footer Links" ou "Sidebar Main" para o Container? Afinal, são 22 opções diferentes, como você pode ver na imagem abaixo.

Qual é a diferença entre "Após o cabeçalho da página" e "Após a parte superior do cabeçalho da página"? Qual é a diferença entre "Page Footer" e "Page Footer Container"? Esses nomes são tão semelhantes que podem definitivamente ser confusos.

Infelizmente, não há como saber com antecedência, embora o nome dê uma boa ideia do posicionamento:

• Depois do Cabeçalho da Página: Provavelmente está no menu principal.
• Parte inferior do conteúdo principal: provavelmente está na parte central da tela, abaixo de nossos produtos ou conteúdo da página.
• Topo da página: Isso aparecerá no alto das Páginas, mas não nas telas do Produto.

Vale a pena notar que essas opções mudam, mesmo no mesmo site. Se você estiver tentando colocar um Bloco e escolher "Todos os Tipos de Produto" para as "Opções de Layout" do seu Widget, você obterá um conjunto diferente de opções, mostrado na imagem abaixo. Essas opções fornecem alguns canais que só fazem sentido para suas telas de produtos. Por exemplo, agora você vê opções que incluem "Contêiner de links sociais do produto" e "Revisar campos de formulário antes". Esses posicionamentos de widgets não fazem sentido em nenhum lugar, exceto nas telas de produtos.

Por outro lado, essa lista às vezes pode ser muito mais curta. Na próxima parte deste capítulo, veremos que alguns Widgets vêm apenas com três opções de Container.

Portanto, não há maneira garantida de saber exatamente onde seu Widget aparecerá se você escolher um determinado Container. Haverá alguns testes e experimentações envolvidos à medida que você testa essas diferentes opções.

Resumo de blocos e widgets do Magento

Blocos e Widgets permitem que você adicione novos itens ao design do seu site. No entanto, existem alguns elementos em seu site que não podem ser facilmente modificados ou substituídos pela interface de administração do Magento. Eles parecem que deveriam ser Blocos e Widgets, mas o Magento não os criou dessa maneira. Então, criei uma página com instruções para atualizar alguns desses elementos padrão.

Se você estiver pronto para aprender mais sobre Magento, confira Magento 2 Explained, o livro mais vendido para Magento 2.

Também temos mais alguns ótimos tutoriais do Magento online, incluindo:

• O guia para iniciantes para entender os impostos do Magento
• Imagens de base, pequenas, miniaturas e amostras no Magento
• Saiba o que são os índices do Magento 2 e como você pode gerenciá-los