Desarrollo dinámico en web con Kodavio (3/3)

Integración Avanzada Con Bricks, Iconos Y Contenido Reutilizable

Además del modelo de contenido y la interfaz editorial, se realizaron varias integraciones específicas con Bricks Builder para que el sistema dinámico pudiera trabajar de forma más natural dentro del editor visual.

El objetivo fue conectar los datos creados en WordPress con las plantillas Bricks, los shortcodes, los iconos y el selector de Dynamic Data.

Shortcodes Y Helpers Para Bricks

Algunos elementos de Bricks, especialmente ciertos campos text-basic, no ejecutaban shortcodes de forma directa en todos los contextos necesarios.

Para resolverlo se crearon helpers y buffers de salida que procesan dinámicamente ciertos shortcodes en frontend.

Entre los shortcodes implementados se encuentran:

• [pc_family_meta]
• [pc_product_icon]
• [pc_product_family_link]
• [pc_global_icon]

Estos shortcodes permiten insertar contenido dinámico en nodos Bricks existentes sin rehacer la plantilla completa.

Por ejemplo, el shortcode [pc_family_meta] permite que un texto de la plantilla archive lea un campo de la familia actual. Si el campo está vacío, puede mostrar un fallback.

Librería Global De Iconos SVG

Se creó una librería global editable de iconos SVG.

En lugar de pegar SVGs directamente en cada producto o bloque, se centralizaron los iconos mediante claves reutilizables.

Ejemplos de claves:

• bag
• weight
• print
• measure
• leaf
• recycle
• box
• gear
• sack
• medical
• school
• ecommerce

La ventaja es que un icono puede reutilizarse en distintos productos o familias. Si el SVG asociado a una clave cambia, se actualiza en todos los lugares donde se use esa clave.

La librería permite:

• Editar SVGs globales.
• Añadir nuevos iconos.
• Activar o desactivar iconos.
• Usar iconos en productos.
• Sanitizar el SVG con una whitelist segura.

Iconos En El Editor De Producto

Los productos incluyen campos de icono para beneficios e items de sustentabilidad.

Se conectó la librería global con los selectores del editor, de forma que los iconos disponibles ya no dependen sólo de una lista fija en código.

Esto permite ampliar la librería sin tener que modificar manualmente cada producto.

El usuario puede seleccionar una clave de icono desde el editor de producto, mientras que el SVG real queda gestionado desde la librería global.

Integración Con Dynamic Data De Bricks

Una mejora importante fue incorporar los campos propios dentro del selector de Dynamic Data de Bricks.

Bricks ya muestra datos nativos de WordPress y puede mostrar datos de JetEngine si el plugin está activo. Sin embargo, los campos creados a medida no aparecían de forma organizada para el usuario.

Para resolverlo se creó un MU plugin que usa filtros nativos de Bricks:

• bricks/dynamic_tags_list
• bricks/dynamic_data/render_tag
• bricks/dynamic_data/render_content
• bricks/frontend/render_data

Se añadió un grupo llamado Kodavio dentro del selector de campos dinámicos.

Algunos ejemplos de tags disponibles son:

• {kodavio_producto_material}
• {kodavio_producto_medidas}
• {kodavio_producto_descripcion_corta}
• {kodavio_producto_beneficio_1_titulo}
• {kodavio_producto_imagen_hero_silueta}
• {kodavio_familia_archive_h1}
• {kodavio_familia_list_title}
• {kodavio_familia_imagen_card}
• {kodavio_familia_contact_phone}

Esto permite crear o modificar elementos en Bricks usando directamente campos del sistema, sin memorizar claves internas ni depender de shortcodes.

Formatos De Tags

Se añadieron algunos formatos útiles.

Para imágenes:

• {kodavio_familia_imagen_card} devuelve una URL.
• {kodavio_familia_imagen_card:id} devuelve el ID del medio.
• {kodavio_familia_imagen_card:img} devuelve una etiqueta <img>.

Para textos:

• {kodavio_familia_archive_h1} permite HTML inline seguro.
• {kodavio_familia_archive_h1:plain} devuelve texto plano.
• {kodavio_producto_formulario_telefono:tel} devuelve una URL tel:.

Esto hace que los tags sean más flexibles según el contexto del campo Bricks donde se usen.

Creación De Productos Con Textos SEO

Se crearon productos con textos específicos, evitando duplicaciones.

Cada producto recibió:

• Título orientado al uso real.
• Descripción corta.
• Introducción.
• Beneficios.
• Datos técnicos.
• Bloque de sustentabilidad.
• Proceso.
• CTA de contacto.
• Relación con su familia.

La redacción se realizó con enfoque SEO, pero evitando repetir bloques genéricos. La intención fue que cada producto respondiera a una necesidad concreta del usuario y tuviera contenido propio.

Creación De Familias Con Textos SEO

También se redactaron archives de familia con contenido diferenciado.

Las familias no repiten literalmente el contenido de los productos. Funcionan como páginas de contexto comercial.

Por ejemplo:

• Una familia explica el tipo de solución y los canales de uso.
• Un producto explica características concretas, formatos, aplicaciones y beneficios.
• La familia agrupa y orienta.
• El producto detalla y convierte.

Esto ayuda a evitar contenido duplicado y mejora la calidad semántica del sitio.

Reestructuración De Familias Y Productos

Durante el proceso se ajustó la organización inicial.

Algunos cambios relevantes fueron:

• Bolsas para consumo interno pasó a Empaque grado alimenticio.
• Bobinas industriales se convirtió en producto dentro de esa familia.
• Se crearon productos específicos para Bolsas canal retail y Bolsas canal distribución.
• Se retiraron productos o enfoques que ya no encajaban en el nuevo mapa.

Esta reestructuración permitió que el contenido reflejara mejor la oferta real del negocio.

Verificación Y Seguridad

Cada cambio técnico se aplicó con un flujo controlado:

• Lectura previa del estado actual.
• Dry-run antes de escritura.
• Lint PHP remoto.
• Escritura real sólo después de validación.
• Backups automáticos de archivos modificados cuando aplica.
• Verificación del frontend.

Se comprobaron productos y archives tras los cambios para confirmar que seguían cargando correctamente y que no aparecían shortcodes literales o errores visibles.

Resultado Final

El resultado es un sistema avanzado de WordPress y Bricks donde:

• El contenido se gestiona desde WordPress.
• Las plantillas Bricks son reutilizables.
• Los campos aparecen en Dynamic Data.
• Los iconos son globales y editables.
• Los productos tienen contenido SEO específico.
• Las familias funcionan como landings dinámicas.
• El editor dispone de una interfaz más clara.
• El sistema está preparado para crecer.

El trabajo no consistió simplemente en crear páginas, sino en desarrollar una arquitectura dinámica sobre WordPress, Bricks y PHP personalizado, pensada para mantenimiento, escalabilidad y edición real por parte del cliente.