Editor de bloques para PrestaShop 9: maqueta la home y las páginas CMS

VEO Block Editor es un editor de bloques para PrestaShop 9 hecho con los paquetes del editor de bloques de WordPress (Gutenberg). Con él maquetas la home y las páginas CMS, por ejemplo la landing de una campaña, colocando bloques en vez de escribir HTML en el editor de texto de PrestaShop.

La home de Hummingbird se arma con los módulos que se enganchan en ella (slider, productos destacados, banner…) y cada uno tiene su pantalla y su forma de configurarse. Las páginas CMS solo tienen el editor de texto clásico, con el que es difícil hacer algo más que texto e imágenes una debajo de otra. Si vienes de WordPress, este editor ya lo conoces.

Cómo se trabaja

La home se edita en Diseño > Editor de bloques y se muestra donde Hummingbird pinta la home (hook displayHome). Al editar una página CMS aparece el botón «Editar con bloques», y desde el propio editor puedes saltar de la home a cualquier página CMS con el selector de arriba.

El editor ocupa toda la pantalla. El lienzo carga el CSS de tu tema, así que lo que ves al editar es muy parecido a lo que verá el cliente. Tiene deshacer y rehacer, la vista de estructura para mover bloques, vista previa a tamaño de escritorio, tablet y móvil, el botón «Ver en la tienda» y guardado con el botón o con Ctrl/Cmd + S.

Si la página ya tenía contenido hecho con el editor clásico, al abrirla se convierte en bloques. Lo que no encaja en ningún bloque se queda como un bloque de HTML para que no se pierda.

Bloques disponibles

Párrafo, encabezado, lista, cita, imagen, portada (imagen o color de fondo con texto encima), imagen y texto, botones, columnas, grupo (también en fila o en pila), separador, espaciador y la rejilla de productos. Son los que hemos dejado a propósito: los del editor de WordPress que no tienen sentido en una tienda no se pueden insertar.

Las imágenes se suben al editor arrastrándolas o desde su biblioteca, y se guardan en img/cms/, la misma carpeta que usa PrestaShop para las páginas CMS. Admite JPG, PNG, GIF y WebP. Si tienes instalado VEO Media Library, el editor abre su biblioteca en lugar de la propia.

Al poner un enlace, el buscador encuentra productos, categorías y páginas CMS de la tienda por su nombre.

Rejilla de productos

Es el bloque propio de tienda. Eliges de dónde salen los productos: de una categoría, elegidos a mano (buscándolos por nombre o referencia), las novedades, los que están en oferta o los más vendidos. Le pones un título, cuántos productos enseña (hasta 24) y en cuántas columnas (de 2 a 6).

En el editor ves una vista previa con la foto, el nombre y el precio. En la tienda la rejilla se pinta con la miniatura de producto de tu tema, la misma del catálogo, así que se ve igual que una categoría. Si quieres cambiar su marcado, la plantilla se puede copiar al tema.

Patrones de campaña

Cuatro secciones ya maquetadas que insertas y cambias a tu gusto:

• Portada a todo el ancho, rejilla de 8 productos en oferta y tres columnas de ventajas (envío, devoluciones, pago).
• Solo la portada, con título, texto y botón.
• Llamada a la acción sobre fondo claro, pensada para la suscripción.
• Imagen y texto con botón, para presentar una colección.

Límites de diseño para no romper la marca

Quien edita no puede meter cualquier color ni cualquier tamaño de letra. Tiene cinco colores (principal, secundario, oscuro, claro y blanco), que en la tienda toman su valor de las variables de color del tema, cuatro tamaños de letra y cinco espaciados. No hay colores libres, degradados ni tamaños a mano.

Varios idiomas

Cada idioma tiene su propio contenido: cambias de idioma arriba en el editor y maquetas esa versión. El historial de deshacer va por separado en cada idioma y, si hay cambios sin guardar, el editor avisa antes de cambiar.

Lo que carga en la tienda

El contenido se guarda en el mismo formato que usa WordPress: HTML normal con comentarios que marcan dónde empieza y termina cada bloque. En la tienda solo se añade el CSS de los bloques permitidos, unos 7 KB comprimido, y ningún JavaScript; se carga en la home y en las páginas CMS, no en el resto. El editor pesa alrededor de 1,1 MB comprimido, pero eso se queda en el back office.

Las páginas CMS hechas con bloques añaden la clase has-veo-blocks al <body>. El título de la página se oculta por defecto, porque lo normal es que la propia maqueta lleve el suyo, y se puede volver a mostrar página a página desde el editor.

Es una beta: qué hace y qué le falta

La versión 0.2.0 hace todo lo que se cuenta arriba y la hemos probado en dos tiendas, con PrestaShop 9.1.4 y 9.2.0. Aún no tiene:

• Borrador ni vista previa sin guardar: lo que guardas se publica.
• Historial de versiones para volver a una maqueta anterior.
• Paleta y tamaños configurables desde el back office.
• Más bloques de tienda, como categorías destacadas, cuenta atrás o carrusel.
• Caché de la rejilla de productos.

Antes de convertir la home o una página CMS, copia su contenido. Y una vez que una página está hecha con bloques, no la vuelvas a abrir con el editor clásico: podría estropear los comentarios que delimitan los bloques.

Compatibilidad y licencia

Solo PrestaShop 9 con el tema Hummingbird o un tema hijo suyo. Probado en PrestaShop 9.2.0 con Hummingbird 2.1.2 y PHP 8.4, y en PrestaShop 9.1.4 con un tema hijo de Hummingbird. Necesita PHP 8.1 o superior. No sirve para PrestaShop 1.7 ni 8.

Si la tienda tiene activado HTMLPurifier (Parámetros de la tienda > General), el módulo le enseña el marcado de sus bloques para que no lo rompa al guardar. El resto lo sigue filtrando igual.

La licencia es GPL-2.0-or-later, no la AFL de nuestros otros módulos, porque lleva dentro el editor de bloques de WordPress, que se distribuye con GPL.

Si quieres cambiar también los colores y las fuentes de Hummingbird, tienes el módulo gratuito para personalizar el tema Hummingbird. Las rejillas y los botones del editor toman el color principal del tema.

Instalación

Sube el ZIP desde Módulos > Gestor de módulos y abre Diseño > Editor de bloques. Desactiva o mueve los módulos de la home que ya no quieras ver (slider, productos destacados…). Los pasos, con capturas, están en el manual en PDF.

Preguntas frecuentes

¿Funciona con un tema que no sea Hummingbird?

Solo lo hemos probado con Hummingbird y temas hijos suyos. El lienzo carga el theme.css del tema activo y la rejilla usa su plantilla de listado de productos; con otros temas no te podemos asegurar el resultado.

¿Qué pasa con el contenido si desinstalo el módulo?

Las páginas CMS conservan su HTML y se siguen viendo, pero sin las rejillas de productos, que las pinta el módulo. El contenido de la home se guarda en una tabla del módulo y se borra al desinstalarlo.

¿Puedo seguir usando el editor clásico en otras páginas CMS?

Sí. Solo cambian las páginas que abres con «Editar con bloques»; las demás siguen con el editor de siempre.

¿El editor está en español?

Sí, si tu back office está en español: la interfaz del editor y los textos del módulo vienen traducidos. Con el back office en otro idioma, la interfaz del editor sale en inglés y los textos propios del módulo siguen en español.