Configurations
- Ajouter et utiliser des fontes - v14
- Personnaliser le look&feel du site web (couleurs, menu, ...)
- Customization du site web : un exemple
Ajouter et utiliser des fontes - v14
Il est possible dans Odoo v14 de télécharger et d'utiliser d'autres polices de caractères (fontes) que celles présentes nativement dans l'outil.
En effet, pour cela, il faut
- télécharger la fonte et extraire le fichier (OTF, TTF, WOFF2, etc)
- se connecter à Odoo en mode débug
- aller dans configurations < Technique < "Structure" < Pièces jointes
- créer un nouvel élément
- uploader la font et cocher "est un document public"
Dans l'url, vous pouvez voir l'identifiant de la font qui vient d'être créée. Il est très important de pouvoir s'en rappeler pour l'utiliser par la suite (en effet, c'est comme ça qu'elle sera nommée).
Dans l'exemple ci-dessous, l'ID = 1027
Vous pouvez créer ainsi vos différentes fonts.
Pour les utiliser :
- Aller dans site web < personnaliser < "éditeur html/CSS"
- choisir SCSS
- il faut ensuite ajouter une règle CSS dans le fichier
Exemple :
@font-face {
font-family: "Albula Pro";
//font-weight: bold;
src: url(/web/content/1057);
}
body {
font-family: "Albula Pro";
}
Le numéro 1057 est l'id de la pièce jointe dans odoo ("ir.attachment").
Personnaliser le look&feel du site web (couleurs, menu, ...)
En version 16, Odoo Community propose de nombreuses options de personnalisations (couleurs, fonte, taille de police), comme illustré ci-dessous (panel de droite).
Voir un exemple concret de customization ici
Pour aller plus loin, l’application d’une feuille de style CSS est également possible (et pérenne en cas de mise à jour du site web en version 16).
Attention, il faut choisir "SCCS" et non pas "HTML" : tout changement fait au code HTML disparaitra à la prochaine mise à jour du code (effectué minimum une fois par mois chez Coop IT Easy).
Customization du site web : un exemple
Odoo permet de créer un site web et un e-commerce avec de grandes possibilités de customizations.
Voici un premier aperçu webshop, dans lequel on a mis beaucoup de fonctionalité de filtre et de tri. Notamment
- Dans la barre latérale
- des filtre par attributs de produit (taille, type de matériau). Ces attributs sont activés quand on configure les produits avec variants.
- un filtre par prix
- Dans la première barre du haut
- une barre de recherche
- selection de la liste de prix utilisé (si plusieurs listes sont configurées).
- un critère de classement
- un changement de layout (vue par icône vs liste)
- Dans la seconde barre du haut : un filtre par catégorie
Cela donne une interface très chargée. On va essayer de créer une interface plus minimaliste, en se basant sur le modèle suivant :
Pour modifier les fonctionalités de présentation du webshop (filtres, preview, etc), il faut cliquer sur Edit, puis sur Customize dans la barre latérale.
Dans cette barre latérale nous avons plusieurs configurations :
 |
|
On obtient alors une interface plus épurée, qui laisse la place aux images des produits.
|
On va changer aussi les couleurs pour privilégier des couleurs neutres. On selectionne une palette en nuance de gris, que l'on modifie pour pas que la bannière du haut soit trop foncée. Il y a de grandes possibilité de customizations du thème.
En plus des couleurs, on peut aussi customiser les fonts (taille et police), le padding, la taille des bordures, l'affichage des bouttons... |
|
Et si on ajoute une bannière pour acceuillir les visiteurs, on obtient cette interface :
Voici un exemple de fiche produit. On peut y ajouter des descriptions, en format texte et même en format html (avec mise en page, images, etc.)
Voici ensuite le flux d'achat
Voici un exemple d'un webshop bien fait sur Odoo : https://www.coucoushop.be/shop