Cómo crear widgets personalizados de Magento 2

Los widgets permiten a los administradores de la tienda Magento 2 agregar contenido estático/dinámico a las páginas y bloques de CMS, proporcionando una gran cantidad de funciones y una implementación sencilla. Los widgets son componentes reutilizables que se pueden agregar en cualquier bloque CMS de Magento 2.

Por lo tanto, permiten a los desarrolladores y administradores de tiendas de Magento 2 agregar interfaces y funciones interactivas en el front-end sin tener que saber mucho sobre programación. Por supuesto, todavía necesitan conocer Magento para crear un widget.

El objetivo de este artículo es demostrar cómo crear widgets en Magento 2, con énfasis en widgets personalizados.

Widgets de Magento 2

Magento 2 es la última versión de Magento, una de las plataformas de comercio electrónico líderes en la actualidad. Los widgets juegan un papel importante en Magento 2, especialmente desde el punto de vista de la funcionalidad. Además de ofrecer más funciones del lado del usuario, los widgets de Magento ayudan a los administradores a agregar contenido estático o dinámico a las páginas y bloques de CMS.

Pero, desde una perspectiva técnica… ¿Qué es un widget de Magento?

Un widget de Magento 2 es esencialmente una extensión de Magento diseñada con un conjunto de opciones de configuración avanzadas. Debido a una mayor flexibilidad y control, se utilizan para proporcionar información y contenido de marketing a través del panel del Administrador de Magento. Una de las ventajas de los widgets de Magento 2 es que puede "llamarlos" desde cualquier parte del sitio.

Los widgets también permiten a los administradores agregar interfaces y funciones interactivas en el front-end de Magento, sin tener que codificar (en realidad, sin siquiera saber cómo codificar).

Magento 2 ofrece múltiples tipos de widgets

Antes de pasar a la implementación, echemos un vistazo más de cerca a la gama estándar de widgets admitidos en Magento 2:

• Productos comparados recientemente : debe haber observado este widget mientras buscaba productos en sus sitios de comercio electrónico favoritos. Este widget se utiliza para mostrar productos vistos o comparados recientemente en la barra lateral de una página de catálogo. También pueden aparecer en tu tienda dependiendo del tema. Uno de los puntos cruciales es que se puede configurar la cantidad de productos que se enumeran en cada bloque.
• Pedidos y devoluciones : cada vez que compra un producto en línea, hay un widget imprescindible que brinda acceso rápido a pedidos y devoluciones. Si un usuario desea revisar los productos pedidos o devueltos, puede completar los detalles necesarios, como ID de pedido, Facturación de la última fecha, Buscar pedido por, Correo electrónico, etc.
• Lista de productos del catálogo : este es otro widget muy utilizado; todos están familiarizados con las secciones de "productos destacados" en los sitios de comercio electrónico, ya que casi todos los sitios tienen uno. Los productos destacados generalmente se colocan en la página de inicio con el propósito de promocionar el producto. El producto en particular se muestra con breves detalles como precio, características y opciones como agregar al carrito, agregar a la lista de deseos y agregar a una función de comparación.
• Vínculo de productos de catálogo : el objetivo principal del widget Vínculo de productos de catálogo es que permite a los administradores administrar vínculos para productos, incluidos productos relacionados, ventas cruzadas, ventas adicionales y productos agrupados. Cuando visite la página de enlaces de productos del catálogo, verá diferentes categorías del catálogo iniciadas con una introducción. Allí encontrará enlaces de productos de catálogo con varios subenlaces, como asignación de enlaces de productos de catálogo, atributos de enlaces de productos de catálogo, eliminación de enlaces de productos de catálogo, tipos de enlaces de productos de catálogo y más.
• Enlace de categoría de catálogo : en los sitios web de comercio electrónico, especialmente los basados ​​en productos, no encontrará escasez de widgets de enlace de categoría de catálogo.
• Widget de bloque personalizado : es posible combinar bloques, widgets y páginas personalizadas para mostrar partes del catálogo u otra información que los clientes puedan encontrar útil.

Estos se pueden usar para mejorar la experiencia del usuario y agregar funcionalidad a la tienda. Los bloques y widgets son elementos importantes de la mayoría de los sitios web de comercio electrónico. Permiten a los usuarios generar y controlar contenido rápidamente y se pueden usar para hacer cosas como:

• Agregar bloques dinámicos/informativos en las barras laterales
• Agregar banners en las páginas de CMS
• Añadir menús personalizados
• Agregar interfaces de usuario interactivas

El caso de los widgets personalizados de Magento 2

Cualquier sitio web o página web necesita mucha funcionalidad para funcionar sin problemas y atraer a más visitantes, y crear una experiencia de usuario atractiva es imprescindible en el comercio electrónico. Ahí es donde entran en juego los widgets personalizados de Magento 2, y eso es lo que se supone que deben hacer.

Los widgets son conjuntos de código más pequeños que podemos agregar a la tienda. Usando enlaces simples a código dinámico, los widgets pueden mostrar todo tipo de datos útiles diseñados para ayudar a los visitantes y mejorar su experiencia. Obviamente, la capacidad de aumentar la interacción con widgets reutilizables y de bajo costo significa mucho, pero a veces no se trata solo de elegir y agregar un widget listo para usar.

El uso de la funcionalidad Custom Widget en Magento 2 nos permite crear nuestras propias plantillas de widgets. Un widget personalizado a veces puede ofrecer una forma aún mejor de editar o agregar contenido de calidad dentro de bloques o páginas de CMS.

Sin embargo, antes de pasar a los widgets personalizados, debemos examinar un caso de uso estándar para widgets en Magento 2. Echemos un vistazo a algo básico y ampliamente utilizado, por ejemplo:

Cómo agregar una nueva lista de productos a la página de inicio usando un widget

Este widget simple nos permite agregar una nueva lista de productos donde sea necesario en el sitio web, y hay varias formas en que se pueden enumerar nuevos productos en Magento 2.

Para agregar una lista de productos de Magento a la página de inicio, solo necesita seguir un proceso simple:

• Inicie sesión en la página de administración de Magento 2 y vaya a Contenido > Widget

• Haga clic en el botón Agregar widget . Después de eso, seremos redirigidos a la pestaña Configuración , donde tenemos que seleccionar las opciones y temas de Tipo y Diseño .

• Podemos ver la captura de pantalla a continuación, en la que ya hemos seleccionado la Lista de nuevos productos del catálogo que mostraremos en el front-end.

• Seleccionamos LUMA como la opción de tema de diseño.

• Después de seleccionar ambos valores, tenemos que pasar al segundo paso, donde tenemos que llenar las propiedades del escaparate. Ahora tenemos que establecer el título del widget y las propiedades de la tienda , como el título del widget y la vista de la tienda . Estamos utilizando la lista de nuevos productos de Toptal y todas las vistas de la tienda .

• La parte más importante es la sección Actualizaciones de diseño , que nos dirá dónde aparecerá este widget (p. ej., página de inicio, página de listado, página de pago, etc.). También es posible definir un área en la que aparecerá el contenedor, por ejemplo, debajo del encabezado, arriba del pie de página, pie de página, etc.

La configuración de Actualizaciones de diseño le brinda las siguientes opciones:

• Mostrar en: Página especificada o Todas las páginas.
• Página: Página de inicio de CMS
• Contenedor: área de contenido principal
• Plantilla: aquí, puede seleccionar en qué estilo le gustaría mostrar los nuevos productos Modo de cuadrícula o modo de lista

Una vez que seleccionamos la opción Página especificada , podemos proceder a establecer las propiedades, lo que nos permite mostrar el widget en una página en particular. Aquí tenemos el menú desplegable Página , que nos permite seleccionar Página de inicio de CMS . A continuación, debemos seleccionar el contenedor y la plantilla que vamos a usar para mostrar el widget en una sección en particular.

Finalmente, pasamos a la última pestaña, que incluye opciones de widgets. Aquí, podemos establecer la Condición , como qué tipo de productos se mostrarán, o incluir límites en la cantidad de productos, etc.

Si seleccionamos Todos los productos , en esta sección se mostrará el producto agregado más recientemente. Si seleccionamos Nuevos Productos , entonces solo aquellos productos que marcamos como “Nuevos” se mostrarán en esta sección. Si queremos permitir que nuestros clientes controlen la navegación de varias listas, debemos configurar el Control de página de visualización en "Sí". Si hemos seleccionado “Sí”, entonces es necesario ingresar la cantidad de productos en la lista.

En Número de productos a mostrar , podemos definir cuántos productos se pueden mostrar en la sección Nuevos productos . Además, podemos cambiar la configuración de Cache Lifetime si es necesario.

Ahora tenemos que guardar este widget y vaciar el caché de Magento 2. Esto se puede hacer desde el administrador o la línea de comandos. Podemos usar el siguiente comando para vaciar el caché:

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

Entonces podremos ver los nuevos productos en la página de inicio.

Cómo crear un widget personalizado en Magento 2

Ahora, aprenderemos a crear widgets personalizados para Magento 2. Los widgets personalizados ofrecen la mejor manera de agregar y editar contenido dentro de bloques o páginas de CMS, ya que se pueden adaptar para que coincidan con sus requisitos.

Empecemos con lo básico. Todos sabemos cómo crear un módulo, ¿verdad? En caso de que no esté familiarizado con la creación de módulos personalizados en Magento 2, tenemos un excelente tutorial que cubre el proceso en profundidad.

Ahora, pasemos al proceso paso a paso de crear widgets personalizados en Magento 2.

Primero, necesitamos crear un nuevo módulo que requerirá un espacio de nombres y carpetas de módulos. Para este ejemplo, vamos a utilizar Toptal para el espacio de nombres y CustomWidget para el nombre del módulo. Entonces, comencemos como de costumbre con composer.json , registration.php y etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

Composer cargará este archivo cada vez que lo ejecutemos, aunque en realidad no estemos usando Composer con nuestro módulo.

Ahora necesitamos registrar nuestro módulo con Magento, por lo que debemos crear el register.php en la siguiente ubicación: app/code/Toptal/CustomWidget/registration.php .

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

Ahora, crearemos el último archivo 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>

Después de completar el paso de registro, a continuación creamos el archivo de configuración 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>

En el código anterior, obtenemos Title y Content como parámetros que se mostrarán donde se llame al widget. La etiqueta <widget> contiene la clase de bloque Toptal\CustomWidget\Block\Widget\Samplewidget . Esta clase se desacelera dentro de Block/Widget/Samplewidget.php . La clase instruye a nuestros widgets sobre qué plantilla usar.

El siguiente fragmento de código muestra cómo definir un bloque para el widget; estableceremos nuestra plantilla aquí. Veamos cómo se ve.

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 se declara arriba del código. En este archivo, asignamos un archivo de plantilla personalizado dentro de la variable $_template .

A continuación, veremos qué contiene nuestra plantilla 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; ?>

Aquí, podemos ver cómo recoger el valor de los parámetros del widget. Es simple:

$this->getData('widgettitle');

y

$this->getData('widgetcontent');

¿Cuál es nuestro resultado final? Déjame mostrarte cómo se ve en Magento Admin:

Ahora tenemos que guardar este widget y vaciar el caché. Como se describió anteriormente, esto se puede hacer desde el administrador o la línea de comando, usando php bin/magento cache:clean y php bin/magento cache:flush

Puede descargar este sencillo módulo aquí. Obviamente, no es una plantilla completa de widgets de Magento 2, pero sigue siendo una ayuda para el aprendizaje. En caso de que necesite más recursos, o si es relativamente nuevo en Magento, la documentación oficial de Magento 2 es el lugar obvio para comenzar.

Finalmente, me gustaría mencionar un par de blogs de desarrollo personales que encontré bastante útiles. Alan Storm tiene probablemente el contenido más didáctico cuando se trata de aprender Magento, y creo que también deberías consultar el blog de Alan Kent.

Widgets: una parte crucial del panorama general

El objetivo de este artículo era proporcionar una guía para la creación de widgets en Magento 2, comenzando con un tutorial básico paso a paso que cubre el desarrollo de widgets de Magento 2 y la creación de widgets personalizados. Obviamente, soy un fanático de este último, ya que las soluciones personalizadas tienden a brindar más flexibilidad y funcionalidad.

Los widgets de Magento brindan una funcionalidad de front-end crucial, por lo que no es exagerado decir que los widgets personalizados inteligentes pueden ayudarlo a llevar su próximo proyecto de Magento al siguiente nivel. Nos permiten implementar aún más funciones, agregar diferentes tipos de elementos a la página de inicio usando diferentes widgets y, en última instancia, simplemente brindan a los desarrolladores más libertad creativa.

Pero no se trata solo de mejorar la experiencia del usuario y las conversiones, o de crear un diseño atractivo. Todos son obviamente una prioridad para cualquier cliente, pero hay ganancias más pequeñas y menos obvias. Por ejemplo, los widgets de Magento también pueden ahorrar mucho tiempo y dolores de cabeza en el lado del administrador, y cada cliente también busca ahorrar horas de trabajo.

Sin embargo, eso está más allá del alcance de este artículo. Mi intención era proporcionar una descripción técnica rápida, un tutorial de widgets de Magento 2 fácil de seguir, no hablar sobre el ROI y el marketing.