Cómo crear un widget personalizado en Magento 2

Los widgets son características increíbles que le permiten agregar contenido dinámico o estático a páginas y bloques de CMS en su sitio web Magento 2. Son herramientas reutilizables y esenciales que proporcionan múltiples funcionalidades que se pueden utilizar en el bloque CMS de una tienda Magento 2.


Cuando se agrega a la tienda Magento, los widgets permiten a los visitantes navegar y ver su tienda con facilidad. Crean plantillas y diseños llamativos para sitios web que enriquecen la experiencia del usuario al tiempo que ofrecen un control y flexibilidad sin precedentes en el panel de administración.

Este tutorial lo ayudará a crear un widget personalizado en su tienda Magento 2 para mejorar la experiencia de los visitantes y mejorar la navegación dentro de la tienda.

Listo? Empecemos.

Paso 1 – Crear un nuevo módulo

El primer paso al crear un widget personalizado en Magento 2 es establecer un nuevo módulo. El módulo requiere una carpeta de módulo y un espacio de nombres, en nuestro caso, utilizaremos HostAdvice como el espacio de nombres y CustomWidget como el nombre de la carpeta del módulo. La carpeta del módulo se ubicará en la carpeta del proveedor titulada aplicación / código.

Por el bien de este tutorial, usaremos aplicación / código / HostAdvicel / CustomWidget / composer.json. El compositor cargará este archivo cuando lo ejecutemos, a pesar de que no usaremos el compositor con el módulo.

Paso 2 – Creando registro.php

Necesitamos registrar el módulo con Magento. Para lograr esto, primero, cree un registrarse.php en el lugar aplicación / código / HostAdvice / CustomWidget / Registration.php usando el siguiente código.

<?php
\ Magento \ Framework \ Component \ ComponentRegistrar :: register (
\ Magento \ Framework \ Component \ ComponentRegistrar :: MÓDULO,
‘Toptal_CustomWidget’,
__DIR__
);

Luego, use el siguiente código para crear un archivo de registro, module.xml en la ubicación app / code / HostAdvice / CustomWidget / module.xml.

<?versión xml ="1.0" ?>

Paso 3 – Inicializando el widget

Una vez que cree los archivos de registro necesarios, el siguiente paso es inicializar el widget. Crear un widget.xml archivo de configuración en la ubicación app / code / HostAdvice / CustomWidget / etc / widget.xml. Use el siguiente comando:

<?versión xml ="1.0" ?>

HostAdvice Sample Widget

Título

Contenido

En el comando anterior, hemos etiquetado dos campos de entrada, Título, y Contenido. Siempre que se llame al nuevo widget, se mostrarán los valores de ambos campos. Además, en la etiqueta, hemos declarado la clase de bloque, HostAdvice \ CustomWidget \ Block \ Widget \ Samplewidget para dirigir el nuevo widget para utilizar la plantilla particular.

Paso 4: crear un bloque de widgets

A continuación, cree un campo de bloque titulado Samplewidget.php, en el lugar HostAdvice / CustomWidget / Block / Widget /, usando el siguiente código:

<?php

espacio de nombres HostAdvicel \ CustomWidget \ Block \ Widget;

use Magento \ Framework \ View \ Element \ Template;
use Magento \ Widget \ Block \ BlockInterface;

clase Samplewidget extiende Plantilla implementa BlockInterface
{

protegido $ _template = "widget / samplewidget.phtml";

}

En el comando anterior, HostAdvice \ CustomWidget \ Block \ Widge \ Samplewidget se declara correctamente y se asigna una plantilla personalizada dentro del $ _template variable.

Ahora, usaremos el siguiente comando para crear un archivo de plantilla samplewidget.phtml, en el lugar HostAdvice / CustomWidget / view / frontend / templates / widget.

<?php if ($ bloque->getData (‘widgettitle’)): ?>

<?php echo $ block->getData (‘widgettitle’); ?>

<?php endif; ?>
<?php if ($ bloque->getData (‘widgetcontent’)): ?>

<?php echo $ block->getData (‘widgetcontent’); ?>

<?php endif; ?>
En el código anterior, los parámetros del widget se seleccionaron llamando a $ this->getData (‘widgettitle’); y $ this->getData (‘widgetcontent’); valores.

Paso 5 – Publicar el widget

Por ahora, su widget personalizado se ha creado correctamente. Inicie sesión en el área de administración de Magento 2 y seleccione Contenido entonces Páginas.

Hacer clic Seleccione en la opción Página de inicio y seleccione Editar.

Ampliar la Contenido sección y haga clic en el Insertar widget icono para publicar el widget personalizado.

Esto te llevará a la Insertar widget zona. Haga clic en la flecha en el Tipo de widget, seleccione HostAdvice Sample Widget, de la lista desplegable.

En el Opciones de widgets, introducir el Contenido y Título para que se muestre en la página de inicio y haga clic en Insertar widget.

Por último, para realizar cualquier cambio, vacíe el caché de Magento 2 iniciando la CLI y ejecutando los siguientes comandos:

php bin / magento cache: limpio
php bin / magento cache: flush

Cargue el front-end de su tienda.

Conclusión

¡Eso es! Ha desarrollado y publicado con éxito un nuevo widget personalizado en su tienda Magento 2. El nuevo widget será crucial para su operación front-end ya que ofrece más libertad creativa y le permite comercializar sus productos con facilidad.

Echa un vistazo a estos 3 principales servicios de alojamiento de Magento:

FastComet

Precio inicial:
$ 2.95


Fiabilidad
9,7


Precios
9.5


Fácil de usar
9,7


Apoyo
9,7


Caracteristicas
9.6

Leer comentarios

Visita FastComet

Alojamiento A2

Precio inicial:
$ 3.92


Fiabilidad
9.3


Precios
9.0


Fácil de usar
9.3


Apoyo
9.3


Caracteristicas
9.3

Leer comentarios

Visita A2 Hosting

ScalaHosting

Precio inicial:
$ 4.95


Fiabilidad
9.4


Precios
9.5


Fácil de usar
9.5


Apoyo
9.5


Caracteristicas
9.4

Leer comentarios

Visita ScalaHosting

Artículos de procedimientos relacionados

  • Cómo crear productos de paquete en Magento 2
    intermedio
  • Cómo crear un nuevo producto en Magento
    novato
  • Cómo configurar el cifrado SSL / TLS en Magento
    intermedio
  • Cómo crear un nuevo tema de Magento
    intermedio
  • Cómo instalar Magento en Cpanel
    novato
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me