Application Site Web / E-Commerce v16
Gérér son site web et son e-commerce
- Présentation générale de l'application e-Commerce
- Processus de vente en ligne
- Configuration de l'application e-Commerce
- Menu des configurations
- Utiliser le paiement par Mollie
- Gérer les connexions des client·es pour les commandes en ligne
- Publier et dépublier des produits
- Modules complémentaires pour l'e-Commerce
- Afficher les frais de livraison avec ou sans TVA
- Forcer les utilisateurs à se connecter avant d'acheter sur le SiteWeb
- Suggérez à l'acheteur de se connecter ou de créer un compte
- Publier automatiquement un article en fonction du stock
- Extension du portail empêchant la modification des données sensibles par les utilisateurs
- Permettre le tri des articles par date d'arrivée
- Afficher le menu de connexion (login)
- Afficher le poids sur la page e-commerce d'un produit
- Afficher les unité sur la vue kanban du webshop
- Afficher par défaut les variants qui ont du stock
- Afficher les unités sur la vue kanban du webshop
- Passer l'étape de paiement des commandes en ligne
- Générer des URL privées pour certains produits
- Afficher un texte descriptif par produit
- Affichage de la quantité disponible en stock sur les différentes vues du webshop
- Rediriger vers la page du magasin lors de la selection d'un produit
- Fermer et ouvrir le eCommerce (le rendre disponible ou indisponible aux clients)
- Carte Cadeau dans le e-commerce
- Fermer l'e-commerce : mode "browse only"
- Configurations
Présentation générale de l'application e-Commerce
Prérequis
L’application e-Commerce permet de gérer une page “Boutique” sur le front-end et d’y vendre des articles.
Installation
Pour installer l'application, allez dans le menu Application et installez l'application eCommerce (website_sale).
L’application possède des dépendances sur les modules suivants :
- sale
- website
- website_payment
- website_mail
- website_form
- website_rating
- digest
Gérer le site web
L'application "site web"
Cette application vous permet d’avoir une interface web configurable et liée votre outil de gestion Odoo.
L’option langue permet de paramétrer les langues dans lequel est disponible le site
L’option compte client permet de paramétrer les comptes utilisateurs créés pour les clients (voir point sur les utilisateurs).
Enfin l’option captcha permet de protéger vos formulaires via un captcha.
Un CAPTCHA est un test qu’on vous demande quand vous voulez vous enregistrer sur un site ou laisser un commentaire afin de prouver que vous êtes humain.
Processus de vente en ligne
Boutique en ligne
La boutique en ligne présente une vue des articles disponibles en vignettes avec un outil de recherche.
Les articles peuvent être sélectionnés et placés dans le panier avant de valider la commande et de passer au paiement. Il suffit alors au client de compléter ses coordonnées puis de sélectionner un mode de paiement et de valider.
Mettre des articles en vente en ligne
Accéder aux articles de manière habituelle ou dans le module Site Web via le nouvel onglet Articles.
Créer un nouvel article ou modifier un article existant. Dans l’onglet “eCommerce”, choisir éventuellement une catégorie de l’e-Commerce (voir-ci après) et sélectionner un type de disponibilité.
Pour mettre l’article en vente sur la boutique en ligne, cliquer sur le smart button “Non publié". Cliquer sur le switch rouge (en haut à droite de la page) pour marquer l’article “publié”.
L’article est maintenant visible sur la boutique en ligne. En fonction du stock et de la règle de disponibilité choisie, l’article apparaîtra comme disponible à la vente ou non.
Catégorie de l'E-commerce
Les catégories de l'E-commerce sont configurables dans l'onglet 'Configuration>Articles>Catégories d'e-commerce'.
Il faut ensuite les afficher dans le Shop, dans l'onglet Personnaliser.
Le rendu final :
Configuration de l'application e-Commerce
Menu des configurations
Après l’installation de l’application eCommerce, dans le module Site Web, l’onglet Configuration reprend les configurations de l’e-Commerce.
eCommerce > Intermédiaires de paiement
Permet d’installer et de configurer les moyens de paiement pour les achats via le site web. Le paiement par virement bancaire est le plus utilisé car il ne nécessite pas de recourir à un service de paiement en ligne.
Pour configurer un intermédiaire de paiement comme Mollie, consulter cette page.
Articles > Catégories d’e-commerce
Permet de créer des catégories spécifiques pour les articles vendus sur la boutique en ligne.
Pour les configurations suivantes, il est nécessaire d’activer le mode développeur dans le tableau de bord du module Configuration (voir tuto).
eCommerce > Sauvez les données de paiement
A documenter
eCommerce > Icônes de paiement
A documenter
eCommerce > Transactions de paiement
Reprend toutes les commandes réalisées sur la boutique en ligne. Lorsqu’une personne qui n’est pas connectée à Odoo commande en ligne, une fiche contact est créée automatiquement avec les coordonnées fournies dans le formulaire de commande ainsi qu’une transaction. Ces données sont aussi présentes dans le module Comptabilité via Configuration > Paiement > Transactions de paiement.
Une transaction de paiement associée au profil client (si la personne est connectée) ou au "public user" (sinon) est initiée à l'état de brouillon lorsque la personne ajoute des articles dans son panier et passe à l'étape paiement. La transaction de paiement est confirmée lorsque le paiement est validé.
Utiliser le paiement par Mollie
Configurer Mollie comme intermédiaire de paiement
1. Dans Applications, installer l'application Mollie
2. Dans Facturation (ou Comptabilité), activer Mollie. Par défaut, Mollie est désactivé et disponible sur l'environnement de tests.
L'identifiant Profile ID et les clés API (de test et de production) sont à copier depuis son compte Mollie. Tant que le smart button est "environnement de test", c'est la clé de test qui sera utiliser pour simuler des paiements etc.
Configuration des moyens de paiement Mollie dans l'onglet "Mollie Payment Methods"
Cliquer sur "Sync payment methods" pour synchroniser les moyens de paiement configurés sur votre compte Mollie avec Odoo.
Configuration
Dans l'onglet Configuration, choisir un journal qui sera utilisé pour enregistrer les paiements lorsque des clients paient en ligne (voir étapes ci-dessous) :
Étapes d'un paiement Mollie
Vente via la boutique en ligne
Lors d'un achat sur la boutique en ligne, le client peut choisir parmi les méthodes de paiement disponibles. Les méthodes ajoutées via Mollie sont ici marquées "Test Mode" lorsqu'elle sont réalisées dans l'environnement de test (pour modifier cela, voir plus haut).
Lorsque le client clique sur "Payer maintenant", une proposition de devis (SO) est créée par le système dans le back-end. Une transaction Mollie est initiée. Une fenêtre externe Mollie s'ouvre pour valider le paiement.
Enregistrement automatique du paiement dans le back-end
Si le paiement est effectué, la proposition de devis est confirmée en bon de commande de vente. La transaction Mollie est confirmée et un paiement (CUST.IN) est automatiquement créé dans le back-end au statut "comptabilisé" dans le module Facturation/Comptabilité (dans l'onglet Vente > Paiements). Une transaction de paiement y est associée (Comptabilité > Configuration > Paiements > Transactions de paiement).
Deux écritures comptables correspondant au paiement sont créées, la première au crédit du compte comptable Clients, la seconde au débit du compte Mollie.
Créer manuellement la facture client
Une fois la commande passée, il faut manuellement créer une facture depuis le bon de commande. Des écritures comptables correspondant aux articles facturés et à la TVA sont alors générées, ainsi qu'au débit du compte Clients :
Comme le paiement Client a déjà été enregistré, le système lettre automatiquement les deux écritures et la facture est marquée directement "payée".
Réconciliation (lettrage)
Après l'import des relevés bancaires, la ligne correspondant à un paiement de Mollie regroupe habituellement plusieurs transactions pour différents clients. Pour réaliser la réconciliation, on lettrera d'un coup les différents paiements Mollie correspondant au relevé. Le solde correspond aux frais prélevés par Mollie, qu'on peut comptabiliser en ajoutant depuis l'interface de lettrage une écriture sur le compte comptable adéquat (à valider avec le ou la comptable).
Cas de figure : lorsque le paiement mollie n'est pas validé
Le paiement est annulé
Lorsque le paiement est annulé, le devis (SO) reste à l'état de proposition.
La transaction de paiement, elle, passe en statut "annulé".
Gérer les connexions des client·es pour les commandes en ligne
Par défaut, les internautes sur la boutique en ligne peuvent uniquement commander en s'identifiant au moment de passer au paiement. Seule une fiche contact est créée pour les client·es. Si une personne se connecte à deux reprises pour faire des achats, elle devra s'identifier deux fois, et il y aura deux fiches contact dans odoo à son nom. Il n'y a pas de limite au nombre de fiches contact au nom d'une personne, et cela peut très rapidement polluer la liste des contacts.
Permettre aux clients et clientes de créer un profil utilisateur.
Dans la configuration du Site Web, l'option "Compte client" permet aux internautes de se créer un profil utilisateur·rice et d'accéder à un mini "espace personnel" où consulter leurs documents éventuels (bons de commande, etc.). Le profil utilisateur·rice ainsi créé est de type "utilisateur portail".
Pour cela, cocher l'option "Inscription libre". Cela n'empêchera pas la majorité des clientes et clients de remblir plutôt leurs coordonnées lors de l'achat sans s'identifier et de créer de multiples fiches contact.
A la création de leur profil, les utilisatrices et utilisateurs recevront automatiquement un email leur demandant de définir un mot de passe. Pour leur permettre de demander la réinitialisation de leur mot de passe en cas d'oubli (via un nouveau mail automatique), permettre la réinitialisation du mot de passe.
Suggérer aux internautes de s'identifier (ou se créer un profil) plutôt que de s'indentifier directement
Le module website_sale_suggest_create_account permet d'inciter les internautes à se créer un compte (ou s'identifier, s'ils ont déjà un profil utilisateur·rice), en affichant d'emblée la page de connexion au moment de finaliser la commande avant de passer à l'étape du paiement. Il est toujours possible pour l'internaute de commander sans se créer un profil utilisateur·rice, mais cela limite les doublons de contacts.
Forcer les clients à s'identifier (ou se créer un profil) pour commander
Le module oblige les internautes à créer un profil utilisateur pour finaliser leur commande.
Cette option est nécessaire si l'on désire éliminer le doublons dans la base de donnée. Dans ce cas, les client·es ne pourront pas créer un nouveau profil avec la même adresse email, et devront s'identifier avec leur mot de passe pour finaliser leur commande.
Publier et dépublier des produits
Pour facilement publier et dépublier des produits, ouvrir l'appli Paramètres et cliquer sur Technique > Actions-serveur :
Ajouter une action-serveur, sélectionner le modèle "Article". Ajouter une ligne avec le champ "Est Publié", le type "Expression Python" et la valeur "True", comme illustré ci-dessous :
Enfin cliquer sur "ajouter une action contextuelle", ce qui ajoutera l'option dans le menu "Actions" depuis les produits.
On peut de la même manière ajouter une action "Dépublier les articles" en remplçant "True" par "False" :
Modules complémentaires pour l'e-Commerce
Afficher les frais de livraison avec ou sans TVA
Le module fait par Coop IT Easy "website_sale_delivery_vat_label" permet d'afficher sur la boutique en ligne les frais de livraison avec la mention HTVA ou TVAC, selon la configuration de chaque frais de livraison.
Par exemple, 3 modes de livraisons ont été configurés :
- frais de livraison gratuit (et sans taxe)
- La Poste (le montant s'affichera hors tva)
- Frais de livraison normaux (la taxe sur cet article a été définie comme incluse dans le prix de vente) :
Forcer les utilisateurs à se connecter avant d'acheter sur le SiteWeb
Le module
Ce module possède une dépendance sur les modules ; web_tour, website_sale_suggest_create_account
Suggérez à l'acheteur de se connecter ou de créer un compte
Le module website_sale_suggest_create_account permet de suggérez à l'acheteur de se connecter ou de créer un compte mais sans l'obliger de le faire.
Ce module possède une dépendance sur le module ; webiste_sale
Publier automatiquement un article en fonction du stock
Les modules website_sale_stock_autopublish et website_autopublish doivent être installés.
Ces modules ajoutent un champ "Publication gérée automatiquement" de type case à cocher sur la fiche article.
Si la case est cochée, le champ "availability" (onglet eCommerce) est obligatoire et le système automatique doit contrôler la valeur du champ Availability et agir en fonction :
- Sell regardless of inventory => ne rien faire de particulier.
- Show product specific notification => ne rien faire de particulier.
- Show inventory on website and prevent sales if not enough stock => l'article doit être publié uniquement s'il y a assez de stock.
Lorsque le champ quantity on hand (stock réel (champ stock) - toutes les quantités réservées) est =<0 => le produit n'est plus visible sur l'eCommerce.
- Show inventory below a threshold and prevent sales if not enough stock avec le seuil défini. => l'article doit être publié uniquement s'il le stock est supérieur au seuil défini sur la fiche article.
Lorsque le champ quantity on hand (stock réel (champ stock) - toutes les quantités réservées) est =<seuil => le produit n'est plus visible sur l'eCommerce.
Extension du portail empêchant la modification des données sensibles par les utilisateurs
Le module website_portal_restrict_modification permet d'empêcher un utilisateur portail de modifier les champs "Votre Nom", "Courriel", "Nom de la société"et "Numéro de TVA intracommunautaire".
Les champs ville, pays, téléphone, rue, code postal sont obligatoires.
Ce module possède une dépendance sur les modules ; portal, website
Permettre le tri des articles par date d'arrivée
Les modules website_sale_product_sort_recent_arrival et doivent être installés.
Le module website_sale_product_sort permet de définir un critère de tri par défaut sur les articles dans le e-commerce.
Le module website_sale_product_sort_recent_arrival permet de définir une date d'arrivée sur les produits et ajoute la possibilité de faire un tri sur ce champs depuis la liste des produits de l'e-commerce.
Configurer la date d'arrivée du produit
Allez sur une fiche produit, dans l'onglet e-commerce et adapter le champ "recent arrival date".
Par défaut,
- à l'installation du module, la date est mise à la date d'installation du module
- par la suite, c'est la date de création de l'article qui est reprise
Définir un critère de tri par défaut
Allez sur la configuration du site web et sélectionnez le site à configurer.
Dans la section "articles", sélectionnez le critère à mettre par défaut.
Afficher le menu de connexion (login)
Pour permettre aux utilisateurs de se connecter depuis le site web Odoo, il suffit de cliquer sur "Personnaliser" < "Show Sign In".
Dans la barre de menu, l'option pour Se connecter est affichée en haut à droite :
Afficher le poids sur la page e-commerce d'un produit
Le module website_sale_product_weigh doit être installé.
Ce module ajoute les informations de poids des produits sur le site de vente en ligne.
Afficher les unité sur la vue kanban du webshop
Le module website_sale_product_display_unit permet de faire apparaitre les unités à coté du prix sur la vue kanban du webshop.
Afficher par défaut les variants qui ont du stock
Sur le webshop, par défaut, les variants d'un produit s'affichent s'affichent dans l'ordre de création.
Le module website_sale_sort_variants_by_availability permet de changer l'affichage pour que les variants ayant du stock soient affichés en premiers.
Afficher les unités sur la vue kanban du webshop
Le module website_sale_product_display_unit permet d'afficher les unités sur la vue Kanban.
Passer l'étape de paiement des commandes en ligne
Le module permet de ne pas afficher l'étape du paiement lors d'une commande en ligne et de sauter directement à l'écran de confirmation de paiement (dont les textes peuvent être modifiés via les traductions).
Une fois le module installé, cette fonctionnalité se configure sur la fiche contact des clients et clientes individuellement, dans l'onglet Ventes et Achats.
Activer cette configuration pour tous les clients et clientes existantes
Il est possible d'utiliser le module d'édition en lot pour modifier d'un coup toutes les fiches contact.
Activer cette configuration par défaut pour les futurs clients et clients
Ce qu'il faut faire dépend de votre gestion des connexions pour les commandes en ligne.
- Si vous permettez aux internautes de passer commande sans s'identifier à un profil utilisateur·rice existant
Pour que les nouveaux contacts soient créés avec cette configuration, il est nécessaire d'ajouter un paramètre par défaut pour les contacts :
- Si vous permettez aux internautes de s'enregistrer librement avec un profil utilisateur·rice
Pour que les contacts liés aux profils utilisteur ou utilisatrice soient créés avec cette configuration, il faut modifier le contact lié au modèle d'utilisateur portail, souvent appelé "Portal Template User" (c'est un utilisateur inactif)
Rechercher les utilisateurs inactifs :
Ouvrir le contact lié :
Et, dans l'onglet Ventes et Achats, activer la configuration "Passer l'étape de paiement des commandes du site web" comme illustré plus haut.
- Si les deux options sont possibles, il est nécessaire de réaliser les deux configurations ci-dessus.
Générer des URL privées pour certains produits
Le module website_sale_private_product_page permet de générer des URL privés pour un article et ses variantes. Cet URL permet que les détenteurs de l'URL puisse consulter l'article en ligne, sans qu'il soit visible pour les clients qui naviguent sur la boutique en ligne.
Sur la fiche produit , un nouveau champ est ajouté dans l'onglet ecommerce. Si ce champ est vide, un bouton "Générer URL" est affiché et permet de générer un URL. L'utilisateur peut copier/coller cet URL et l'envoyer aux clients "VIP" (il ne peut pas modifier son contenu).
Si l'URL doit être désactivé, un bouton "Clear" est affiché (affiché uniquement si le champ est non vide).
Les clients qui suivent ce lien après qu'il soit désactivé auront une page "404 page not found". Ils devront naviguer sur la boutique normale pour retrouver le produit s'il a été publié "publiquement" entre temps.
L'URL est différent de celui de l'ecommerce et n'est pas devinable, mais permet de voir le produit et de le mettre dans son panier
- si le stock n'est pas à 0
- si le bouton add to cart est bien activé.
Afficher un texte descriptif par produit
Le module website_sale_product_description ajoute un champ "Description pour l'e-Commerce" sur la fiche article, dans l'onglet "e-Commerce". Se rendre dans l'application Site web et le menu Produits, cliquer sur Produits et sur un article :
Ce texte apparaîtra sur la vue du produit dans la boutique en ligne :
Affichage de la quantité disponible en stock sur les différentes vues du webshop
Le module website_sale_product_availability permet d'afficher la quantité disponible déjà visible dans la fiche produit dans la vue kanban.
Lorsque la configuration est mise sur "vendre sans tenir compte du stock", rien ne s'affiche sur cette vue.
Dans le cas de variant, c'est la somme de tous les variants en stock qui est reprise.
Rediriger vers la page du magasin lors de la selection d'un produit
Quand on choisit un produit dans le magasin et qu'on l'ajoute au panier, le module website_sale_redirect_to_shop redirige directement vers la page du magasin plutôt que celle du panier.
Ce module existe uniquement sur Odoo v11.
Fermer et ouvrir le eCommerce (le rendre disponible ou indisponible aux clients)
Certains magasins en ligne travaillent par cycle de commande. Les clients et clientes peuvent commander sur la boutique en ligne du vendredi 15h au lundi 9h. Après 9h, la boutique doit être indisponible : les clients ne peuvent plus faire leurs achats en ligne.
Cette fonctionnalité est rendue possible grâce au module .
Prérequis
Installer le module sur la base de données.
Configuration
Décocher la case pour pouvoir configurer le texte à afficher en cas de fermeture de la boutique en ligne :
Cliquer sur le texte bleu, puis sur la ligne du site web à configurer (en principe, vous n'avez qu'une seule ligne dans cet écran) :
Cliquer sur le bouton Modifier pour entrer en mode d'édition et indiquer le texte à afficher dans le champ "Text closed e-commerce". Si vous avez plusieurs langues sur votre site web, cliquez sur l'icône de traduction dans la zone à droite, en haut de l'éditeur de texte.
Sauvegarder la configuration.
Utilisation
Pour ouvrir la boutique en ligne, cocher cette case.
Pour la fermer, décocher la case. Le message configuré apparaitra quand on se rend sur la boutique :
Carte Cadeau dans le e-commerce
Voir la documentation à ce sujet ici
Fermer l'e-commerce : mode "browse only"
Le module website_sale_browse_only permet d'empêcher les visiteurs de faire des achats sur le site. Ils peuvent toujours voir les articles publiés, mais ils ne peuvent pas les acheter.
Le module contient un bug actuellement, lorsque le site est fermé, le boutton en bas du site qui sert à changer la langue du site ne s'affiche plus.
On active l'interdiction via Configuration>Site Web puis on coche Browse Only.
On peut également activer/désactiver sur la configuration du site web : Site Web>Configuration>Site Web, puis cliquer sur le site web choisi et cocher la case "Browse Only".
Un bandeau va s'afficher sur tout le site pour prévenir les visiteurs que les achats ne sont pas possible. Le bandeau est traduisible.
Les boutons "ajouter aux paniers" ne s'affichent plus, en vue grille/liste, et en vue produit.
De même le panier ne s'affiche plus, même s'il avait déjà été rempli.
Le panier n'est pas perdu cependant, il réparaitra quand le mode "browse only" sera désactivé.
Configurations
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