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

Cuando se agregan widgets a la tienda Magento, los visitantes pueden navegar y ver su tienda fácilmente. Crean diseños y plantillas de sitios web llamativos que enriquecen la experiencia del usuario al tiempo que brindan un control y una flexibilidad incomparables en el panel de administración.

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

¿Listo? Vamos a empezar.

Paso 1: creación de un nuevo módulo

El primer paso para crear un widget personalizado en Magento 2 es configurar un nuevo módulo. El módulo requiere una carpeta de módulo y un espacio de nombres, en nuestro caso se usa Hosting mas barato como espacio de nombres y Widget personalizado como nombre de la carpeta del módulo. La carpeta del módulo se encuentra en la carpeta del proveedor con el título Aplicación / código.

Para este tutorial usaremos aplicación / código / HostAdvicel / CustomWidget / composer.json. El compositor carga este archivo cuando lo ejecutamos, incluso si no estamos usando el compositor con el módulo.

Paso 2 – Crear Registration.php Creando

Necesitamos registrar el módulo con Magento. Para hacer esto, primero cree un register.php en el lugar aplicación / código / Hosting mas Barato/ CustomWidget / registration.php con el código de abajo.

<?php
MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'Toptal_CustomWidget',
    __DIR__
);

A continuación, use el siguiente código para crear un archivo de registro llamado module.xml en la ubicación aplicación / código / Hosting mas Barato/ CustomWidget / 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>

Paso 3: inicializa el widget

Ahora que ha creado los archivos de registro necesarios, el siguiente paso es inicializar el widget. A … crear Widget.xml Archivo de configuración en la ubicación aplicación / código / Hosting mas Barato/ CustomWidget / etc / widget.xml. Utilice el siguiente comando:

<?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="HostAdviceCustomWidgetBlockWidgetSamplewidget" id="HostAdvice_customwidget_samplewidget">
    <label>Hosting mas BaratoSample 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 comando anterior hemos etiquetado dos campos de entrada, título, y contenido. Siempre que se llama al nuevo widget, se muestran los valores de ambos campos. Tambien tenemos el -Tag declara la clase de bloque, Hosting mas Barato CustomWidget Block Widget Samplewidget para indicarle al nuevo widget que use la plantilla en particular.

Paso 4: creación de un bloque de widgets

A continuación, cree un campo de bloque con el título Samplewidget.php, en la ubicación Hosting mas Barato/ CustomWidget / Block / Widget /, con el siguiente código:

<?php

namespace HostAdvicelCustomWidgetBlockWidget;

use MagentoFrameworkViewElementTemplate;
use MagentoWidgetBlockBlockInterface;

class Samplewidget extends Template implements BlockInterface
{

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

}

En el comando anterior, Hosting mas Barato CustomWidget Block Widge Samplewidget se declara correctamente y una plantilla personalizada dentro de la $ _template Variable.

Ahora usemos el siguiente comando para crear un archivo de plantilla Ejemplo widget.phtml, en la ubicación Hosting mas Barato/ CustomWidget / view / frontend / templates / widget.

<?php if($block->getData('widgettitle')): ?>
            <h2 class="cloudways-title"><?php echo $block->getData('widgettitle'); ?></h2>
<?php endif; ?>
<?php if($block->getData('widgetcontent')): ?>
            <h2 class="cloudways-content"><?php echo $block->getData('widgetcontent'); ?></h2>
<?php endif; ?>
 In the above code, the widget parameters have been picked by calling $this->getData('widgettitle'); and $this->getData('widgetcontent'); values.

Paso 5: publique el widget

Su widget personalizado ahora se ha creado correctamente. Inicie sesión en el área de administración de Magento 2 y seleccione contenido luego paginas.

hacer clic Escoger en la opción de la página de inicio y seleccione Para editar.

Ampliar la contenido Sección y haga clic en el Insertar widget Icono para publicar el widget personalizado.

Esto te lleva al Insertar widget Área. Haga clic en la flecha en el tipo de widget, seleccione Widget de muestra de HostAdvice, de la lista desplegable.

Haciendo Opciones de widget, ingresa esto contenido y título en la pantalla de inicio y haga clic en Insertar widget.

Finalmente, para realizar cambios, borre el caché de Magento 2 iniciando la CLI y ejecutando los siguientes comandos:

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

Cargue la parte delantera de su tienda.

Conclusión

¡Eso es! Ha desarrollado con éxito un nuevo widget personalizado y lo ha publicado en su tienda Magento 2. El nuevo widget será vital para sus operaciones de front-end, ya que le brinda más libertad creativa y le permite comercializar fácilmente sus productos.