Frontend CSS/JS Loader for Odoo 18 (CE & EE)

Addon técnico para Odoo 18 Community y Enterprise.
Proporciona una estructura limpia y versionable para inyectar y mantener código CSS, JavaScript y vistas QWeb personalizadas en el frontend del Website.
Diseñado para desarrolladores que buscan un método profesional, reproducible y compatible con el sistema de caché y compilación de assets de Odoo.

✅ Probado en Odoo 18 Community Edition (CE) y Odoo 18 Enterprise Edition (EE)
✅ Compatible con website y website_sale
✅ Ideal para entornos con control de versiones y despliegues automatizados

Beneficios del enfoque

Modificar el frontend de Odoo mediante un addon estructurado (en lugar del editor “Custom Code”) ofrece ventajas técnicas importantes:

Persistencia total: los cambios permanecen intactos tras actualizaciones, reinicios o restauraciones de la base de datos.

Control de versiones: el código CSS/JS se mantiene junto al resto del proyecto en Git.

Integración con el sistema de caché: los archivos se procesan por el pipeline estándar de Odoo (web.assets_frontend), lo que garantiza compresión, minificación y cache busting automáticos.

Cumplimiento CSP: al evitar código inline, el sitio se mantiene compatible con políticas de seguridad estrictas.

Despliegues coherentes: el mismo código se replica fácilmente entre entornos (desarrollo, staging y producción).

Mantenimiento limpio: todo el código de frontend vive en un solo módulo, sin alterar addons oficiales ni vistas base.

Estructura del módulo
frontend_css_js_loader/
├─ __manifest__.py
├─ static/
│  └─ src/
│     ├─ css/style.css
│     └─ js/website.js
└─ views/
   └─ custom_templates.xml (opcional para overrides QWeb)

Uso básico
CSS y JS personalizados

Edite static/src/css/style.css para definir sus estilos globales.

Opcionalmente, modifique static/src/js/website.js para agregar lógica de frontend.

Actualice el módulo desde Apps → Upgrade o por terminal:

odoo -u frontend_css_js_loader


Limpie caché y verifique los cambios en incógnito.

Tip: en desarrollo puede usar el modo sin caché (?debug=assets) para forzar recompilación inmediata.

Uso opcional — QWeb personalizado

Si desea modificar vistas del Website o Shop, puede crear un archivo adicional en views/ (por ejemplo custom_templates.xml) con herencias xpath.
De esta forma, mantiene la personalización del layout dentro del mismo addon, sin tocar archivos nativos ni usar el editor visual.

Manifest (resumen)
{
  "name": "Frontend CSS/JS Loader",
  "version": "18.0.1.0.0",
  "license": "LGPL-3",
  "depends": [
    "website",
    "website_sale"
  ],
  "data": [
    "views/custom_templates.xml"
  ],
  "assets": {
    "web.assets_frontend": [
      "frontend_css_js_loader/static/src/css/style.css",
      "frontend_css_js_loader/static/src/js/website.js"
    ]
  }
}

Prueba rápida

Instalar el módulo desde Apps.

Editar los archivos style.css o website.js.

Actualizar el módulo y recargar el sitio.

Confirmar que los cambios se reflejan sin código inline ni pérdida tras reinicios.

Solución de problemas

Cambios no visibles: limpiar caché del navegador y reiniciar Odoo con --dev=reload o -u frontend_css_js_loader.

Error QWeb: revisar los xpath y dependencias declaradas en el manifest.

Assets no actualizados: verificar permisos de escritura en /static y ejecutar --update=frontend_css_js_loader.

Modo producción: confirmar que el parámetro --no-xmlrpc no impide la actualización de assets si se usa CI/CD.

Historial

18.0.1.0.0 — Versión inicial.
Estructura para carga de CSS/JS versionados y soporte para vistas QWeb personalizadas.

Soporte

Desarrollado por Tu Web Master — tuwebmaster.com.ar

¿Necesitás integrar personalizaciones o extender la estructura a tu tema o addon?
Podemos ayudarte.

© Tu Web Master — Distribuido bajo licencia LGPL v3.