# Personnaliser l’interface d’Odoo 18 sans modifier son cœur

Vues CSS, JS et QWeb professionnelles

## PERSONNALISER L’INTERFACE D’ODOO 18 SANS PERDRE SES MODIFICATIONS

Récemment, j'ai eu besoin de déplacer un module d'onglets sur une **Odoo 18**page de produit. Une tâche apparemment simple est devenue une petite épreuve. L'éditeur visuel ne pouvait pas déplacer le bloc, les modifications XML directes n'avaient aucun effet et la mise à jour de l'addon effaçait mes modifications.

##  

## QUAND LA THÉORIE N'EST PAS LA PRATIQUE

J'ai trouvé des guides pour ces modifications, mais les plus ciblées versions antérieures d'Odoo. Beaucoup de choses ont changé dans la version 18, à la fois Community et Enterprise. La documentation officielle ne couvre pas ces cas en profondeur, et les forums contiennent des solutions obsolètes. Frustrant, mais aussi une occasion d'apprendre.

##  

## L’idée : un modèle personnalisé pour les changements de front

Après avoir essayé plusieurs approches, j’ai créé un module technique pour ces ajustements sans m’appuyer sur l’éditeur visuel ou perdre des modifications lors de futures mises à jour. J'ai également inclus un soutien pour **CSS**, **JavaScript** et **QWeb**vues. C'est devenu **Chargeuse CSS/JS frontale**, un addon que je partage au cas où ça aiderait quelqu'un d'autre.

##  

## QUE FAIT CE MODULE?

Il n'ajoute aucune nouvelle fonctionnalité de site web. Il fournit une structure propre pour les personnalisations frontales dans le code source du projet. Tout s'intègre au système de compilation et de mise en cache d'Odoo, sans casser les choses ni laisser de code dans l'éditeur.

##  

## AVANTAGES D'UN ADDON PERSONNALISÉ

- **Conservez vos modifications :** vos personnalisations sont versionnées avec le reste du projet.

- **Contrôle total :** travailler avec des fichiers CSS, JS et QWeb dans votre référentiel.

- **Chargement optimisé :** Les fichiers sont traités à l'intérieur `web.assets_frontend`.

- **Compatible avec les politiques CSP :** Pas de JavaScript en ligne ou de styles lâches.

- **Entretien facile:** tout reste dans un module, portable à travers les environnements.

##  

## STRUCTURE DE MODULE

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

En`style.css` vous écrivez des styles personnalisés. En `website.js` vous ajoutez des scripts de comportement. Pour les réglages de la vue QWeb, utilisez `custom_templates.xml`sans changer de fichiers.

##  

## COMMENT L'UTILISER

- Installez le module à partir des applications ou copiez le dossier dans vos modules complémentaires.

- Modifier vos fichiers : `style.css`, `website.js` et `custom_templates.xml`.

- Mettre à jour le module (Applications  Mise à niveau ou `-u frontend_css_js_loader`).

- Rechargez la page : vos modifications seront actives, compilées et mises en cache.

##  

## À QUI SOMMES-NOUS?

- Développeurs et agences gérant les sites web Odoo.

- Les concepteurs qui veulent appliquer CSS sans changer le backend.

- Équipes utilisant Git et déploiements automatisés.

- Les gens qui veulent arrêter de perdre des changements chaque fois que Odoo met à jour.

##  

## Résumé

. Lorsque vous personnalisez le frontend Odoo 18, évitez l'éditeur visuel.

. Créez un addon avec vos vues CSS, JS et QWeb.

Intégrez-le dans le flux de travail technique du projet pour garder le contrôle, la performance et la sécurité.

Ce module est né d'un besoin spécifique, et je le partage au cas où il aiderait quelqu'un d'autre. Il est disponible sur GitHub, et vous êtes invités à l'adapter, l'améliorer ou commenter.

##  

## TÉLÉCHARGER ET CONTACTER

🔗 **GitHub:** [Chargeur frontal CSS/JS pour Odoo 18](https://github.com/TuWebMaster/odoo18-frontend-css-js-loader.git)

📩 [Vous souhaitez étendre la structure ou l’intégrer dans votre thème ?](https://tuwebmaster.com.ar/fr/#contacto) On peut aider.

Étiquette d'auteur intégrée à la frontière

Note de l'auteur

Contenu

    Je suis **Sasha Herscovich**, et je conçois, développe et fournit un assistance technique pour les boutiques en ligne construits avec WordPress et Odoo. Je résolve de vrais problèmes tous les jours et je partage parfois ce que je rencontre au cas où cela aiderait quelqu’un d’autre.
  

    Ce blog contient des idées, des solutions et des extraits de code que j'utilise dans de vrais projets. Certains sont pour les personnes qui gèrent leurs propres sites web; d'autres sont pour les développeurs et les concepteurs qui cherchent à améliorer leur travail, gagner du temps ou comprendre comment résoudre un problème particulier.
  

    Je ne vends pas de formules magiques ou de solutions universelles. Je partage ce qui fonctionne pour moi, ce que je teste et ce que j'apprends en cours de route. Si cela vous aide, bienvenue. Et si vous souhaitez commenter, améliorer ou adapter quelque chose, je serais ravi de le faire.

Page canonique : https://tuwebmaster.com.ar/fr/personnaliser-interface-odoo-18/