Creación de Widgets personalizados en Magento2

En este breve tutorial explico como funcionan los Widgets en Magento2.

Que són los Widgets en Magento

Magento2 usa la librería de Javascript JQuery para poder implementar funcionalidades.

Estas funcionalidades mayormente suelen ser contenido dinámico para que el usuario pueda interactuar con la tienda de una forma mas sencilla.

Por lo que los Widgets son elementos que visualizan o muestra información al usuario para que pueda interactuar con ella.

Hay diferentes tipos de widgets, desde menús de navegación, listas, búsquedas, pestañas, galerías, calendarios, etc …

Veamos que necesitamos para poder crear un Widget.

Declaración del Widget

Para poder crear un widget primero debemos declararlo. Esto lo hacemos creando un fichero llamado widget.xml en el directorio etc/ de nuestro módulo.

Por lo que veis es un widget sencillito con dos parámetros de configuración, los cuales pueden ser accedidos desde nuestros bloques o templates.

Por ejemplo, si queremos acceder al valor de news_count lo haremos usando $this->getData(‘news_count’); en nuestro bloque o template.

Creación del Bloque

El segundo paso es crear el bloque que genera la información para poder enviársela al template.  Este lo crearemos en nuestra carpeta Block/Widget/ y lo vamos a llamar NewsList.php

Vamos a explicar como funciona:

  • Todos los bloques extienden la clase Template e implementarán el interfaz BlockInterface.
  • El método getNews() consultará en la base de datos un número limitado de noticias que tenga configurado nuestro Widget.
  • En mi caso necesito un método para poder deserializar los datos de la imagen que tengo guardada en la base de datos.

Creación del Template

Ahora necesitamos crear el template que hemos definido en nuestro bloque.

Lo crearemos en la carpeta view/frontend/templates/widget/ y lo vamos a llamar como lo definimos en nuestro bloque newsList.phtml.

Insertar el Widget en la Tienda

Como ya tenemos creado el Widget, solo queda incluirlo en la sección de la tienda que deseemos.

Para ello tenemos que ir al panel de gestión de Magento2  y en Content -> Pages. Editamos nuestra Home Page y pulsamos en insertar Widget.

Seleccionamos el Widget que acabamos de crear y configuramos sus opciones.

Si vamos a la página principal de nuestra tienda podremos ver como queda.

Etiquetado

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.