La guía para principiantes de bloques y widgets de Magento

Los bloques y widgets son las características de diseño clave en Magento. Estas dos características están muy estrechamente vinculadas y, a menudo, se usan juntas.

Una forma de pensar en los Bloques es que son mini-Páginas. Un bloque también puede contener texto, imágenes, video y más. Pero debido a que los bloques son más pequeños, los verá alrededor de los bordes de su sitio. Los bloques a menudo se insertan en encabezados, barras laterales y pies de página.

Sin embargo, los Bloques se colocan usando Widgets. Primero crea un Bloque y luego usa un Widget para decidir dónde se mostrará ese Bloque.

Vamos a mostrarte algunos ejemplos y mostrarte cómo funcionan los bloques y los widgets en Magento.

Esta guía está tomada de Magento 2 explicado, el libro más vendido para Magento 2. Usamos el ejemplo de una tienda llamada "Orangeville" en ese libro, por lo que verá que se hace referencia aquí.

Explicación de la creación de bloques de Magento

Repasemos el proceso de creación de nuestro primer Bloque. Esto contendrá un enlace HTML.

• Vaya a "Contenido" y luego a "Bloques".
• Haga clic en "Agregar nuevo bloque" en la esquina superior derecha.

• Introduzca "Enlaces clave" como "Título del bloque". Esto es lo que los visitantes verán en la pantalla.
• Introduzca "key_links" como identificador. Esta cadena es lo que Magento usa para identificar el bloque, pero los visitantes nunca la verán.

• Haga clic en el icono de viñeta en la barra de herramientas del editor:

• Escribe "Acerca de Orangeville" como viñeta:
• Seleccione el texto "Acerca de Orangeville" y haga clic en el icono del enlace.

• Ahora verá una ventana emergente. Ingrese la URL de su página "Acerca de Orangeville". Si no está seguro de qué se trata, puede abrir su sitio de Magento en una nueva pestaña del navegador y encontrar la URL, que probablemente sea ejemplo.com/acerca-de-orangeville/.
• Haga clic en "Insertar".
• Ahora tiene un enlace "Acerca de Orangeville" dentro de su Bloque:

• Haga clic en "Guardar bloque".

Explicación de la creación de widgets de Magento

Ahora tenemos el desafío de colocar su bloque en el diseño de su sitio. Aquí es donde los Widgets de Magento resultan útiles. En Magento, un bloque es solo una pieza de contenido. Es el widget el que controla la ubicación del bloque.

Sin embargo, eso no es todo lo que puede hacer un Widget. Un Widget puede colocar nuestros Bloques nuevos y simples, pero también puede colocar muchas otras características.

• Vaya a "Contenido" y luego a "Widgets".
• Haga clic en "Agregar widget".
• Para "Tipo", elija "Bloque estático CMS".
• Para "Tema de diseño", elija "Magento Luma".
• Haga clic en "Continuar".

• Ingrese "Enlaces clave de Orangeville" para el "Título del widget".
• En "Asignar a vistas de tienda", seleccione "Todas las vistas de tienda".

A continuación, vamos a controlar en qué URL aparece este bloque.

• Haga clic en "Agregar actualización de diseño".

• Elija "Todas las páginas".

• Elija "Enlaces de pie de página de CMS" para la opción "Contenedor".

Ambas opciones, "Todas las páginas" y "Enlaces de pie de página de CMS", pueden no tener mucho sentido para usted todavía. Sin embargo, terminaremos de crear el widget y más adelante en el capítulo, en la sección denominada "Explicación de la ubicación del widget de Magento", explicaremos más acerca de por qué tomamos estas decisiones.

En "Actualizaciones de diseño", vamos a hacer una segunda elección sobre dónde colocar nuestro widget.

• Elija "Todos los tipos de productos".
• Elija "Enlaces de pie de página de CMS" nuevamente.
• Después de agregar ambas opciones, su pantalla se verá como la imagen a continuación.

En este punto, ha creado el widget y le ha dicho a Magento dónde debe aparecer en su sitio: este widget aparecerá en todas nuestras páginas y todos nuestros productos.

Ahora es el momento de elegir el contenido del Widget, que será el Bloque que creó anteriormente.

• Haga clic en "Opciones de widget" en la barra lateral.
• Haga clic en "Seleccionar bloque".

• Ahora puede elegir el bloque "Enlaces clave" que creó anteriormente:

• Clic en Guardar".
• Visite la parte frontal de su sitio y verá que su enlace ahora está publicado en el pie de página. Creaste un Bloque con el contenido y lo publicaste dentro de un Widget.

Crear bloques y widgets juntos

Definitivamente hay algunos pasos complicados al crear bloques y widgets. Así que intentemos todo este proceso juntos. Crearemos un segundo Bloque y lo colocaremos en nuestro sitio con la ayuda de un Widget. Este Bloque le dirá a la gente que tenemos una garantía de satisfacción del 100%.

• Vaya a "Contenido" y luego a "Bloques".
• Haga clic en "Agregar nuevo bloque".
• Título: Satisfacción Garantizada
• Identificador: garantía

• Ingrese el texto para su bloque. Escribí "Aquí en Orangeville, su satisfacción es nuestra principal prioridad. Si no está satisfecho, le devolveremos su dinero".

A continuación, vamos a cargar una imagen para nuestro bloque.

• Coloque el cursor en el área de contenido principal, debajo del texto que acaba de escribir.
• Haga clic en el icono del árbol en la barra de herramientas de su editor.
• Cuando vea el cuadro emergente, haga clic en el icono de cuadro pequeño.
• Encuentra una imagen que puedas subir. He elegido una insignia del 100 %.

• Haga clic en "Insertar archivo".
• Descripción de la imagen: Garantía de satisfacción
• Haga clic en "Insertar".

• Ahora tiene un Bloque que contiene texto y su nueva imagen.
• Haz clic en "Guardar bloque" para terminar de crear este bloque.

A continuación, creemos el widget que mostrará este bloque en nuestro sitio.

• Vaya a "Contenido" y luego a "Widgets".
• Haga clic en "Agregar widget".
• Tipo: bloque estático CMS
• Tema de diseño: Magento Luma

• Título del widget: Satisfacción garantizada
• Asignar a vistas de tienda: todas las vistas de tienda

• Actualización de diseño: categorías de anclaje
• Contenedor: barra lateral principal
• Haga clic en "Opciones de widget" y elija el bloque "Satisfacción garantizada" que acaba de crear.

• Clic en Guardar".
• Visite el frente de su sitio. Haga clic en uno de los enlaces de categoría en el menú superior. En la imagen de abajo, hice clic en "Fruta". Ahora verá su Bloque de garantía en la barra lateral izquierda:

Ubicación del widget de Magento explicada

Una pregunta común que recibo de los estudiantes de Magento es sobre la ubicación de los widgets.

¿Cómo sabe elegir "Enlaces de pie de página de CMS" o "Barra lateral principal" para el contenedor? Después de todo, hay 22 opciones diferentes, como puede ver en la imagen a continuación.

¿Cuál es la diferencia entre "Encabezado de página posterior" y "Encabezado de página posterior superior"? ¿Cuál es la diferencia entre "Pie de página" y "Contenedor de pie de página"? Esos nombres son tan similares que definitivamente pueden ser confusos.

Desafortunadamente, no hay una forma segura de saberlo con anticipación, aunque el nombre le dará una buena idea de la ubicación:

• Encabezado posterior a la página: es probable que se encuentre debajo del menú principal.
• Parte inferior del contenido principal: probablemente se encuentre en la parte inferior central de la pantalla, debajo de nuestros productos o contenido de la página.
• Parte superior de la página: aparecerá en la parte superior de las páginas, pero no en las pantallas de productos.

Vale la pena señalar que estas opciones cambian, incluso en el mismo sitio. Si está tratando de colocar un bloque y elige "Todos los tipos de productos" para las "Opciones de diseño" de su widget, obtendrá un conjunto diferente de opciones, que se muestran en la imagen a continuación. Estas opciones proporcionan algunas ubicaciones que solo tienen sentido para las pantallas de sus productos. Por ejemplo, ahora ve opciones que incluyen "Contenedor de enlaces sociales de productos" y "Revisar campos de formulario antes". Esas ubicaciones de Widgets no tienen sentido en ninguna parte excepto en las pantallas de Producto.

Por otro lado, esta lista a veces puede ser mucho más corta. En la siguiente parte de este capítulo, veremos que algunos Widgets solo vienen con tres opciones de Contenedor.

Por lo tanto, no hay una forma garantizada de saber exactamente dónde aparecerá su widget si elige un contenedor en particular. Habrá algunas pruebas y experimentación involucradas a medida que pruebe estas diferentes opciones.

Resumen de bloques y widgets de Magento

Los bloques y widgets le permiten agregar nuevos elementos al diseño de su sitio. Sin embargo, hay algunos elementos en su sitio que no se pueden modificar o reemplazar fácilmente desde la interfaz de administración de Magento. Parece que deberían ser Bloques y Widgets, pero Magento no los ha creado de esa manera. Entonces, creé una página con instrucciones para actualizar algunos de esos elementos predeterminados.

Si está listo para obtener más información sobre Magento, consulte Explicación de Magento 2, el libro más vendido sobre Magento 2.

También tenemos otros excelentes tutoriales de Magento en línea, que incluyen:

• La guía para principiantes para comprender los impuestos de Magento
• Imágenes base, pequeñas, en miniatura y de muestra en Magento
• Aprenda qué son los índices de Magento 2 y cómo puede administrarlos