À la découverte de Odoo CMS

Une grande partie des nouveautés de la version 8 d'Odoo est dédiée au frontal web. L’idée est de pouvoir exposer au web un site public avec la plateforme Odoo. Ce site peut également exposer des fonctionnalités transactionnelles aux utilisateurs identifiés. Dans ce cas le site web et les données de l’ERP communiquent simplement et nativement. Plus besoin de connecteurs pour faire communiquer son ERP et son site web !

Cet article est le premier d’une série d’articles au sujet de ce nouveau frontal web.Je vais m’intéresser dans ce premier exemple à la base, le CMS (Content Management System, système de gestion de contenus en Français).

La démonstration est faite à partir de la version de développement d'Odoo, qui devrait être publiée fin juillet 2014 (La branche 8 est apparue sur github autour du 10 juillet 2014).

Chrome (ou mieux, Chromium) est le navigateur recommandé pour le moment pour profiter des toutes les fonctionnalités d’édition.

Odoo Cms

Le module à installer s’appelle « Website Builder ».

Il offre les fonctionnalités métiers standards d’un CMS moderne :

• Gestion de menus, de pages, de modèles de pages
• Gestion des contenus multi-langues
• Gestion des médias
• Gestion de thèmes graphique
• Fonctionnalités d’aide à la qualification des pages pour le référencement

Et il bénéficie de fonctionnalités qui renforcent la facilité d’utilisation et plus globalement l’expérience utilisateur des rédacteurs :

• Système de composition avancé (glisser / déposer de blocks / widgets, système de grille CSS “responsive”, édition visuelle du contenu tel qu’il sera rendu)
• Facilitation de la consultation du site sur tablettes et smartphones
• Édition en ligne du code des templates et css

Configuration du site

La configuration du site consiste en le paramétrage des langues utilisées et la configuration des informations de présentation et contact de l’organisation.

Langues

Par défaut la langue de Odoo est l’anglais. Nous allons installer la langue Française.

Et passer notre utilisateur en Français.

Enfin nous configurons les langues du site.

Informations à propos de l’organisation

Nous commençons par renseigner les informations de contact de l’organisation.

Les informations sont automatiquement affichées dans le pied de page du site, le logo est également repris en en-tête. Une page de contact est là par défaut. Elle reprend l’adresse de la société, affiche une Google Map et offre une fonctionnalité de contact (qui sera adressée par défaut à l’adresse email précédemment renseignée).

Personnalisation de l’en-tête

Pour le moment l’en-tête du site contient :

• Le logo
• Un menu principal avec pour le moment : “Home | Contact us”

La partie centrale :

• Rien

Le pied de page :

• Une colonne “Products and service”
• Une colonne “Connect with us”
• Une colonne “Anybox / About us”

Certains des contenus sont restés en anglais. Il est temps de les modifier. En mode édition il suffit de cliquer sur le texte et de le modifier.

Il reste encore quelques contenus en anglais, “Contact us” par exemple, mais c’est un élément de menu. Allons voir l’édition du menu.

Depuis le menu “Content” on choisit “Edit Menu” L’interface permet de modifier les libellés des entrées de menu, d’ordonner et hiérarchiser par glissé-déposé les éléments de menu.

En cliquant sur l’icône d’édition on accède au détail de l’élément de menu, son label, la page liée, son url...

Le logo carré Anybox ne convient pas dans ce contexte, changeons le. En mode édition en cliquant sur le logo carré, la fenêtre de téléversement de fichier (upload) s’ouvre et permet d’importer des images.

Structure du site

L’en-tête et le pied de page étant prêts, passons à la structure du site. Nous pourrions mettre en place la structure suivante :

• Accueil
• Nos services
• Intégration / Conseil
• Formation
• Nos produits
• Hébergement
• Maintenance
• Références
• Projets
• Documentation
• Contribution
• A propos
• Société
• Equipe
• Valeurs
• Contact

L’édition du menu comme nous l’avons vu précedemment est triviale. Attention toutefois, car cette fois il faut que les pages existent avant de les associer au menu. Plutôt que de passer par “Customize / Edit menu” nous allons créer de nouvelles pages via “Customize / New page”. Si “Add page in menu” est coché l’entrée sera ajoutée au menu automatiquement.

Une fois toutes les pages créées, nous pouvons éditer le menu pour ordonner et hierarchiser.

Au final, le menu s’affiche correctement avec ses sous-menu.

Si l’on regarde bien, Odoo à également automatiquement fabriqué les URLs de nos pages en utilisant la technique des slugs. Basé sur le titre de la page, un slug est une séquence unique de caractères, utilisée dans les URLs, afin d’identifier la page à la place d’une série arbitraire de chiffres.

Par défaut, tous les slugs sont préfixés de la manière suivante “website.nom_de_la_page”.

Préfixer avec “website.”, cela ne nous convient pas. Changeons ces slugs ! On peut changer ces urls via le menu en repassant sur chaque page. Si l’on veut effectuer cette opération plus vite, nous pouvons retourner dans l’ERP et via “Configuration / Configuration / Website settings” on peut accéder à une page “Configure website menu” dans laquelle on peut éditer à la volée les URLs.

Édition du contenu des pages

Nous pouvons à présent nous concentrer sur le contenu. Intéressons-nous aux pages de la section Service et commençons avec Intégration / Conseil. Une fois sur la page, passons en mode édition en cliquant sur Edit.

Une barre d’outils apparaît avec un bouton Insert blocks, suivi d’icônes dédiées au formatage de contenus et aux styles.

Les blocks

Les blocks sont en quelque sorte des widgets graphiques, qui permettent d’ajouter à notre page du contenu HTML structuré.

Il y a 4 types de blocks :

• Structure (Des élements de structure / layout)
• Content (Des éléments de contenu isolés)
• Features (Des éléments de structures et contenus avancés)
• Effects (Widgets avancés d’effets d’animation, notamment le parallax)

Une fois le block choisit, via glisser/déposer nous le déposons dans la zone d’affichage.

Je choisis le block “structure/Big message”.

J’édite le contenu en cliquant sur les textes que je veux modifier.

Je fais de même pour les images que je remplace par des icônes.

Nous avons 3 colonnes, mais imaginons que nous en voulions quatre. Comment faire ? À chaque fois que l’on clique sur un bloc il s’entoure d’un marqueur de sélection et un menu contextuel apparaît. Dans ce menu contextuel une icône représente la fonction duliquer, Duplicate container.

Nous pouvons donc, dans un premier temps, dupliquer le troisième bloc.

Puis redimensionner la largeur de chaque colonne de manière à ce que les quatre tiennent sur une seule ligne. Pour cela, nous selectionnons chaque bloc, et en manipulant les ancres se situant sur les quatres côtés du bloc, nous redimensionnons ces derniers.

Odoo utilise le framework CSS bootstrap. Celui-ci offre un système de grille css fluide. C’est à dire qu’en fonction de la largeur de l’écran disponible, les colonnes vont progressivement s’adapter pour faire en sorte que le contenu reste toujours lisible et accessible. C’est pratique pour la consultation du site sur tablette et smartphone.

Une icône dans la barre de menu principale permet de simuler la consultation sur smartphone.

Occupons nous à présent d’une nouvelle page dans laquelle nous allons présenter plusieurs services qui ont un prix.

C’est la page “Formation”.

Nous allons découvrir cette fois le block Feature / Comparisons qui nous propose, sur 3 colonnes, une comparaison de services / produits avec un prix. Comme précédemment nous passons sur 4 colonnes et saisissons les contenus.

L’éditeur HTML

À présent j’aimerais pouvoir mettre le détail des formations en dessous des colonnes de comparaison, et faire en sorte que si le visiteur clique sur un des boutons “en savoir plus” il accède au détail de la formation. Nous allons utiliser des ancres HTML pour atteindre cet objectif. Pour le moment il n’y a pas de fonctionnalités intégrée pour celà. C’est l’occasion pour nous de découvrir l’éditeur HTML intégré.

Le principe est d’ajouter un id au titre que l’on souhaite atteindre puis de changer le lien de nos boutons “en savoir plus” vers chacun de ces id.

<a href=”#formation_1”> En savoir plus</a> . . . <h1 id=”formation_1”>

Odoo fournit un éditeur HTML, pour l’activer, “Customize / HMTL Editor”. Il suffit de retrouver le titre et de lui ajouter un id.

Enfin, en cliquant sur le bouton en savoir plus correspondant on édite le lien pour lui indiquer quel id atteindre.

Cet éditeur HTML en ligne est plutôt de bonne facture (il est basé sur le populaire Ace Editor) :

• Si la syntaxe n’est pas bonne il surligne l’erreur
• Chaque bloc parent est repliable en cliquant sur le triangle à côté du numéro de ligne
• Le bouton format réindente le code pour une meilleure lisibilité
• On peut profiter du langage de template pour avoir un rendu avancé sur le code HTML

Voilà, c’est tout pour aujourd’hui. La suite très prochainement avec le blog, puis la personnalisation graphique avancée du site et enfin le E-Commerce !

N’hésitez pas à nous contacter si vous avez besoin de services autour de cette solution de gestion de contenu basée sur Odoo.