Blog
Widgets en Magento 2 como usarlos y para qué sirven
El componente Widgets en Magento 2 es una herramienta muy poderosa que permite inyectar, pequeños elementos dentro de casi cualquier sección existente en Magento, es la forma más precisa y funcional que permitirá tomar una pieza de código bien definida y colocarla justo en el espacio que necesitemos de una página nativa de Magento.
Lo interesante de los Widgets es que mediante la flexibilidad que tiene Magento nos permite poder crear elementos de contenido en cualquier sección de forma programable así como en elementos y paginas personalizadas.
Lo primero que necesitamos para crear un Widget es el tipo de contenido que necesitamos integrar, así como el Tema en el cual estará integrado esa pieza de código.
Type: Es el tipo de widget disponible para colocar nuestro bloque o elemento en alguna de las secciones de Magento.
Design Theme: esta opción listara los temas existentes en la plataforma para poder elegir cual es que necesitamos utilizar.
Una vez realizadas las primeras configuraciones ya podremos definir el resto de parámetros que con respecto a los elementos ya seleccionados nos permitirá poder elegir opciones para espacios y secciones nativas de Magento.
Widget Title: es el nombre que colocaremos a nuestro Widget para poder identificarlo del resto de Widgets.
Assign to Store Views: definirá el alcance de nuestro elemento, así como ya se ha mencionado representado para los sitios con multi vista, multi tienda y multi dominio, si fuera el caso.
Sort Order: cuando un elemento de Widget es colocado en alguna sección y esta sección ya contiene más Widgets o elementos, este parámetro le permitirá saber cuál debe colocar antes o después de otro ya existente.
Layout Updates: esta opción es la más importante de la herramienta de Widgets de Magento ya que con respecto a la configuración elegida para este componente, aquí es donde se le mostrar todas las opciones disponibles de colocación del widget en la estructura de una página sección o elemento en particular, incluso de las paginas estáticas creadas desde el mismo CMS del BackEnd de Magento, su forma de integración es muy limpia y bien definida le indicara el punto exacto de inyección.
Para continuar con un ejemplo real vamos a integrar una pieza de Bloque ya creada en la sección de Bloques estáticos en Magento 2 en donde creamos una pieza de bloque, mediante este ejercicio integraremos esa pieza de código utilizando un Widget.
Como hacerlo
- En el área administrativa, navegue hasta Content | Widgets.
- Clic en el botón Add New Widget.
- Elige como Type: CMS Static Block.
- Elige como Design Package: Tema Mi tema Magenters.
- Escribe en el campo Widget Title: Promociones.
- Seleccionar All Store Views
- Sort Order dejarlo en valor 0
- En el bloque Layout Updates, clic en el botón Add Layout Update.
- Selecciona la opción Specified Pages en Display On.
- Selecciona la opción Catalog Product View en Page.
- Selecciona Sidebar Main como Container.
- En la pestaña Widget Options del menú , navegue hasta Widget y seleccione el bloque Promoción en Select Block.
- Guarde el widget y borre el caché.
Tal vez hay algo que no te hace sentido en este artículo y es el nombre del Tema “Mi tema Magenters” que se ha elegido ya que no es el caso para este ejercicio, así que te invito a que revises el artículo de Diseño de un Tema en Magento 2 que te ayudara a desarrollar un tema para posterior poderlo utilizar en este ejercicio.
Ahora un segundo punto importante es que una vez que ya logramos crear un nuevo tema con al anterior recomendación y es tiempo de visualizar el nuevo elemento de Widget en la sección definida no se mostrara el resultado ya que aún nos falta personalizar el diseño del layout de la sección nativa del detalle de un producto para lo cual te invito a que revises el articulo Personalizando el diseño de una página nativa de Magento 2.
Una vez que consigamos revisar los artículos recomendados ya podremos ver el resultado de nuestro nuevo elemento de Bloque enviado a una sección nativa de una página de Magento mediante un Widget, si es necesario no olvidar que para ver los cambios se ejecutó el comando php bin/magento c:f:
