Como criar widgets Magento 2 personalizados

Os widgets permitem que os administradores de loja do Magento 2 adicionem conteúdo estático/dinâmico às páginas e blocos do CMS, fornecendo muitas funcionalidades e implementação direta. Widgets são componentes reutilizáveis ​​que podem ser adicionados em qualquer bloco CMS do Magento 2.

Portanto, eles permitem que desenvolvedores e administradores de lojas do Magento 2 adicionem interfaces e recursos interativos no front-end sem precisar saber muito sobre programação. Claro, eles ainda precisam conhecer o Magento para criar um widget.

O objetivo deste artigo é demonstrar como criar widgets no Magento 2, com ênfase em widgets personalizados.

Magento 2 Widgets

Magento 2 é a versão mais recente do Magento, uma das principais plataformas de comércio eletrônico atualmente. Os widgets desempenham um papel importante no Magento 2, especialmente do ponto de vista da funcionalidade. Além de oferecer mais funcionalidades do lado do usuário, os widgets do Magento ajudam os administradores a adicionar conteúdo estático ou dinâmico às páginas e blocos do CMS.

Mas, do ponto de vista técnico... O que é um widget Magento?

Um widget Magento 2 é essencialmente uma extensão Magento projetada com um conjunto de opções avançadas de configuração. Devido à maior flexibilidade e controle, eles são usados ​​para fornecer informações e conteúdo de marketing através do painel do administrador do Magento. Uma das vantagens dos widgets do Magento 2 é que você pode “chamá-los” de qualquer lugar do site.

Os widgets também permitem que os administradores adicionem interfaces e recursos interativos no front-end do Magento, sem precisar codificar (na verdade, sem saber codificar).

Magento 2 oferece vários tipos de widgets

Antes de passarmos para a implementação, vamos dar uma olhada mais de perto no intervalo padrão de widgets suportados no Magento 2:

• Produtos recentemente comparados — Você deve ter observado este widget enquanto navegava em produtos em seus sites de comércio eletrônico favoritos. Este widget é usado para exibir produtos recentemente visualizados ou comparados na barra lateral de uma página de catálogo. Eles também podem aparecer em sua loja dependendo do tema. Um dos pontos cruciais é que o número de produtos listados em cada bloco pode ser configurado.
• Pedidos e Devoluções — Sempre que você compra um produto online, há um widget indispensável que fornece acesso rápido a pedidos e devoluções. Se um usuário quiser revisar produtos encomendados ou devolvidos, ele pode preencher os detalhes necessários, como ID do pedido, última data de cobrança, encontrar pedido por, e-mail etc.
• Lista de Produtos do Catálogo — Este é outro widget amplamente utilizado; todos estão familiarizados com as seções de “produtos em destaque” em sites de comércio eletrônico, pois quase todos os sites têm uma. Os produtos em destaque geralmente são colocados na página inicial para fins de promoção do produto. O produto específico é mostrado com breves detalhes como preço, recursos e opções como adicionar ao carrinho, adicionar à lista de desejos e adicionar a um recurso de comparação.
• Catalog Product Link — O principal objetivo do widget Catalog Product Link é permitir que os administradores gerenciem links para produtos, incluindo produtos relacionados, vendas cruzadas, upsells e produtos agrupados. Ao visitar a página do link do produto do catálogo, você verá diferentes categorias de catálogo iniciadas com uma introdução. Lá, você encontrará links de produtos de catálogo com vários sublinks, como atribuição de link de produto de catálogo, atributos de link de produto de catálogo, remoção de link de produto de catálogo, tipos de link de produto de catálogo e muito mais.
• Link de categoria de catálogo — Em sites de comércio eletrônico, especialmente os baseados em produtos, você encontrará muitos widgets de link de categoria de catálogo.
• Widget de bloco personalizado — É possível combinar blocos, widgets e páginas personalizadas para exibir partes do catálogo ou outras informações que os clientes possam achar úteis.

Eles podem ser usados ​​para melhorar a experiência do usuário e adicionar funcionalidades à loja. Blocos e widgets são elementos importantes da maioria dos sites de comércio eletrônico. Eles permitem que os usuários gerem e controlem rapidamente o conteúdo e podem ser usados ​​para fazer coisas como:

• Adicione blocos dinâmicos/informativos nas barras laterais
• Adicione banners nas páginas do CMS
• Adicionar menus personalizados
• Adicionar interfaces de usuário interativas

O caso dos widgets personalizados do Magento 2

Qualquer site ou página da Web precisa de muitas funcionalidades para funcionar sem problemas e envolver mais visitantes, e criar uma experiência de usuário envolvente é uma obrigação no comércio eletrônico. É aí que os widgets personalizados do Magento 2 entram em ação, e é isso que eles devem fazer.

Widgets são conjuntos menores de código que podemos adicionar à loja. Usando links simples para código dinâmico, os widgets podem exibir todos os tipos de dados úteis adaptados para ajudar os visitantes e melhorar sua experiência. A capacidade de aumentar o engajamento usando widgets reutilizáveis ​​de baixo custo obviamente significa muito, mas às vezes não é apenas uma questão de escolher e adicionar um widget pronto para uso.

O uso da funcionalidade Custom Widget no Magento 2 nos permite criar nossos próprios modelos de widget. Às vezes, um widget personalizado pode oferecer uma maneira ainda melhor de editar ou adicionar conteúdo de qualidade dentro de blocos ou páginas do CMS.

No entanto, antes de passarmos para widgets personalizados, precisamos examinar um caso de uso padrão para widgets no Magento 2. Vamos dar uma olhada em algo básico e amplamente usado, por exemplo:

Como adicionar uma nova lista de produtos à página inicial usando um widget

Este widget simples nos permite adicionar uma nova lista de produtos sempre que necessário no site, e existem várias maneiras pelas quais novos produtos podem ser listados no Magento 2.

Para adicionar uma lista de produtos Magento à página inicial, basta seguir um processo simples:

• Faça login na página de administração do Magento 2 e vá para Conteúdo > Widget

• Clique no botão Adicionar widget . Depois disso, seremos redirecionados para a guia Configurações , onde devemos selecionar as opções e temas de Tipo e Design .

• Podemos ver a captura de tela abaixo, na qual já selecionamos a Lista de Novos Produtos do Catálogo que exibiremos no front-end.

• Selecionamos o LUMA como a opção Design Theme.

• Depois de selecionar ambos os valores, temos que passar para a segunda etapa, onde temos que preencher as propriedades da vitrine. Agora temos que definir o título do widget e as propriedades da frente de loja, como o título do widget e a exibição da loja . Estamos usando Toptal New Product List e All Store Views .

• A parte mais importante é a seção Layout Updates , que nos dirá onde esse widget aparecerá (por exemplo, página inicial, página de listagem, página de checkout, etc.). Também é possível definir uma área na qual o container aparecerá—por exemplo, abaixo do cabeçalho, acima do rodapé, rodapé, etc.

As configurações de atualizações de layout fornecem as seguintes opções:

• Exibir em: Página especificada ou Todas as páginas.
• Página: Página inicial do CMS
• Contêiner: área de conteúdo principal
• Modelo: Aqui, você pode selecionar em qual estilo deseja exibir novos produtos Modo de grade ou modo de lista

Depois de selecionar a opção Página especificada , podemos prosseguir com a configuração das propriedades, permitindo exibir o widget em uma página específica. Aqui temos o menu suspenso Página , que nos permite selecionar a Página inicial do CMS . Em seguida, precisamos selecionar o contêiner e o modelo que usaremos para exibir o widget em uma seção específica.

Por fim, passamos para a última guia, que inclui opções de widgets. Aqui, podemos definir a Condição , como que tipo de produtos serão exibidos, ou incluir limites ao número de produtos e assim por diante.

Se selecionarmos Todos os produtos , o produto adicionado mais recentemente será exibido nesta seção. Se selecionarmos Novos produtos , somente os produtos que marcamos como "Novos" serão exibidos nesta seção. Se quisermos permitir que nossos clientes controlem a navegação para várias listas, precisamos definir o Controle de página de exibição como "Sim". Se selecionamos “Sim”, é necessário inserir o número de produtos na lista.

Em Number of Products to Display , podemos definir quantos produtos podem ser exibidos na seção New Products . Além disso, podemos alterar as configurações do Cache Lifetime , se necessário.

Agora temos que salvar este widget e liberar o cache do Magento 2. Isso pode ser feito no admin ou na linha de comando. Podemos usar o seguinte comando para liberar o cache:

php bin/magento cache:clean and php bin/magento cache:flush

Em seguida, poderemos ver os novos produtos na página inicial.

Como criar um widget personalizado no Magento 2

Agora, aprenderemos como criar widgets personalizados para Magento 2. Os widgets personalizados oferecem a melhor maneira de adicionar e editar conteúdo dentro de blocos ou páginas do CMS, pois podem ser adaptados para atender às suas necessidades.

Vamos começar com o básico. Todos nós sabemos como criar um módulo, certo? Caso você não esteja familiarizado com a criação de módulos personalizados no Magento 2, temos um ótimo tutorial que aborda o processo em profundidade.

Agora, vamos passar para o processo passo a passo de criação de widgets personalizados no Magento 2.

Primeiro, precisamos criar um novo módulo que exigirá namespace e pastas de módulo. Para este exemplo, usaremos Toptal para namespace e CustomWidget para o nome do módulo. Então, vamos começar normalmente com composer.json , registration.php e etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

Este arquivo será carregado pelo Composer toda vez que o executarmos, mesmo que não estejamos realmente usando o Composer com nosso módulo.

Agora precisamos registrar nosso módulo no Magento, então precisamos criar o register.php no seguinte local: app/code/Toptal/CustomWidget/registration.php .

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

Agora, vamos criar o último arquivo de registro, module.xml .

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

Após concluir a etapa de registro, em seguida, criamos o arquivo de configuração widget.xml .

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

No código acima, obtemos Title e Content como parâmetros a serem exibidos onde quer que o widget seja chamado. A tag <widget> contém a classe de bloco Toptal\CustomWidget\Block\Widget\Samplewidget . Esta classe é desacelerada em Block/Widget/Samplewidget.php . A classe instrui nossos widgets sobre qual modelo usar.

O próximo trecho de código mostra como definir um bloco para o widget; vamos definir nosso modelo aqui. Vamos ver como fica.

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget é declarado acima do código. Nesse arquivo, atribuímos um arquivo de modelo personalizado dentro da variável $_template .

Em seguida, veremos o que contém nosso modelo de widget.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

Aqui, podemos ver como pegar o valor dos parâmetros do widget. É simples:

$this->getData('widgettitle');

e

$this->getData('widgetcontent');

Qual é o nosso resultado final? Deixe-me mostrar como é no Magento Admin:

Agora temos que salvar este widget e liberar o cache. Conforme descrito anteriormente, isso pode ser feito no admin ou na linha de comando, usando php bin/magento cache:clean e php bin/magento cache:flush

Você pode baixar este módulo simples aqui. Obviamente, não é um modelo de widget completo do Magento 2, mas ainda é uma ajuda de aprendizado. Caso você precise de mais recursos, ou se você é relativamente novo no Magento, a documentação oficial do Magento 2 é o lugar óbvio para começar.

Finalmente, gostaria de mencionar alguns blogs de desenvolvimento pessoal que achei bastante úteis. Alan Storm tem provavelmente o conteúdo mais didático quando se trata de aprender Magento, e acho que você deveria dar uma olhada no blog de Alan Kent também.

Widgets: uma parte crucial do panorama geral

O objetivo deste artigo foi fornecer um guia para a criação de widgets no Magento 2, começando com um tutorial básico passo a passo cobrindo o desenvolvimento de widgets Magento 2 e a criação de widgets personalizados. Obviamente, sou fã deste último, pois as soluções personalizadas tendem a fornecer mais flexibilidade e funcionalidade.

Widgets Magento fornecem funcionalidade de front-end crucial, então não é exagero dizer que widgets personalizados inteligentes podem ajudar a levar seu próximo projeto Magento para o próximo nível. Eles nos permitem implementar ainda mais funcionalidades, adicionar diferentes tipos de itens à página inicial usando widgets diferentes e, finalmente, eles simplesmente fornecem aos desenvolvedores mais liberdade criativa.

Mas não se trata apenas de melhorar a experiência do usuário e as conversões, ou criar um design incrível. Todos são obviamente uma prioridade para qualquer cliente, mas há ganhos menores e menos óbvios. Por exemplo, os widgets Magento também podem economizar muito tempo e dores de cabeça no lado administrativo, e todo cliente também está procurando economizar horas de trabalho.

No entanto, isso está além do escopo deste artigo. Minha intenção era fornecer uma visão geral técnica rápida, um tutorial de widget Magento 2 fácil de seguir, não discutir ROI e marketing.