PERSONALIZAR EL FRONTEND DE ODOO 18 SIN PERDER CAMBIOS

Hace poco me tocó mover un módulo de pestañas en la página de producto de Odoo 18. Lo que parecía una tarea simple terminó siendo una pequeña odisea. Desde el personalizador visual no se podía mover ese bloque, y al intentar modificar la vista XML directamente en el módulo, los cambios no surtieron efecto. Para colmo, al actualizar el addon, todo lo que había editado se perdió.

CUANDO LA TEORÍA NO COINCIDE CON LA PRÁCTICA

Investigando, encontré varias guías que explicaban cómo hacer este tipo de modificaciones. Pero la mayoría estaban pensadas para versiones anteriores de Odoo, y a partir de la 18 (Community y Enterprise), muchas cosas cambiaron. La documentación oficial no cubre estos casos en profundidad, y los foros están llenos de soluciones que ya no aplican. Frustrante, sí. Pero también una buena excusa para aprender algo nuevo.

LA IDEA: UN MÓDULO PROPIO PARA CAMBIOS EN EL FRONTEND

Después de probar varias alternativas, decidí crear un módulo técnico que me permitiera hacer este tipo de ajustes sin depender del editor visual ni arriesgarme a perder cambios en futuras actualizaciones. Ya que estaba, pensé que también sería útil incluir soporte para CSS, JavaScript y vistas QWeb. Así nació Frontend CSS/JS Loader, un addon que comparto por si a alguien más le sirve.

¿QUÉ HACE ESTE MÓDULO?

No agrega funciones nuevas al sitio. Su propósito es darte una estructura limpia para manejar personalizaciones de frontend como parte del código fuente del proyecto. Todo se integra al sistema de compilación y caché de Odoo, sin romper nada ni dejar código suelto en el editor.

VENTAJAS DE USAR UN ADDON PROPIO

• Evitás perder cambios: tus modificaciones se versionan junto al resto del proyecto.
• Control total: trabajás con archivos CSS, JS y QWeb desde tu repositorio.
• Carga optimizada: los archivos se procesan dentro de web.assets_frontend.
• Compatible con políticas CSP: sin JavaScript inline ni estilos sueltos.
• Fácil de mantener: todo está en un solo módulo, portable entre entornos.

ESTRUCTURA DEL MÓDULO

frontend_css_js_loader/
├─ __manifest__.py
├─ static/
│  └─ src/
│     ├─ css/style.css
│     └─ js/website.js
└─ views/
   └─ custom_templates.xml (opcional)

En style.css escribís tus estilos personalizados. En website.js agregás scripts de comportamiento. Y si necesitás ajustar alguna vista QWeb, lo hacés en custom_templates.xml, sin tocar archivos del core.

CÓMO USARLO

1. Instalá el módulo desde Apps (o copiá la carpeta en tus addons).
2. Editá tus archivos: style.css, website.js y custom_templates.xml.
3. Actualizá el módulo (Apps → Upgrade o -u frontend_css_js_loader).
4. Recargá la página: tus cambios estarán activos, compilados y cacheados.

¿PARA QUIÉN ES ÚTIL?

• Desarrolladores y agencias que mantienen sitios en Odoo.
• Diseñadores que quieren aplicar su CSS sin tocar el backend.
• Equipos que trabajan con Git y despliegues automatizados.
• Quienes quieren dejar de perder cambios cada vez que Odoo se actualiza.

EN RESUMEN

👉 Si estás personalizando el frontend de Odoo 18, no uses el editor visual.
👉 Creá un addon con tus archivos CSS, JS y vistas QWeb.
👉 Integrá todo al flujo técnico del proyecto para mantener control, rendimiento y seguridad.

Este módulo nació de una necesidad concreta, y lo comparto por si a alguien más le sirve. Está disponible en GitHub, y si querés adaptarlo, mejorarlo o dejar comentarios, sos más que bienvenido.

DESCARGA Y CONTACTO

🔗 GitHub: Frontend CSS/JS Loader for Odoo 18
📩 ¿Querés extender la estructura o integrarla a tu tema? Podemos ayudarte.