Créons notre site gratuitement avec VirtueMart

serge billon .

VirtueMart est un composant Joomla! gratuit et opensource de gestion de boutique en ligne.
Son ancienneté fait sa force : une communauté importante au niveau international permet de toujours pouvoir compter sur un conseil ou un support et la plupart des extensions tierces prennent en compte les articles VirtueMart (sliders, newsletters, etc.)
Je vous propose de construire ensemble une "petite" boutique en peu de temps !

virtuemart-ecommerce-joomla!

Notre objectif :

Avec VirtueMart, nous pouvons créer de grosses boutiques et en utilisant certaines extensions tierces payantes, faire tout ce qu'une boutique moderne doit apporter à ses clients en terme de fonctionnalités.
Mais avant de vouloir être un géant du webmarketing, soyons modestes et mettons en vente des produits simples en utilisant uniquement des extensions gratuites sur une boutique basique.

Notre site vendra du miel et des confitures, disponibles à la livraison ou sur place, payables en chèque ou par PayPal, proposera des promotions et sera pensé pour évoluer.

Ce dont nous avons besoin :

Un hébergement et Joomla!

Ça va mieux en le disant, mais il faudra évidemment avoir installé Joomla! sur votre hébergement.
Certains hébergeurs fournissent un service d'installation en un clic (SiteGround, o2switch, PlanetHoster... la liste est longue), choisissez un hébergement à la page : assez d'espace et du PHP 7, prenant en charge le HTTPS.


Pour l'installation de Joomla! sur un hébergement vierge, la documentation existe : https://docs.joomla.org/J3.x:Installing_Joomla/fr, nous n'allons pas la détailler ici.

Une version de VirtueMart

Téléchargement

Sur le site http://VirtueMart.net/download vous trouverez des versions du logiciel sous différentes formes :

  • Un zip comprenant la dernière version de VirtueMart3 + les modules afférents (All In One) + la bibliothèque TCPDF
  • Un package d'un site Joomla! 2.5.29 + vm3 + AIO + Tcpdf préinstallés avec les données exemple.
  • Les fichiers de langues
  • Les anciennes versions de VM (mais cela ne nous concerne pas)

Puisque nous avons un Joomla! vierge, prenons l'option de télécharger le composant et les modules, puis les fichiers langues nous intéressant.

Installation

L'installation se fera simplement comme pour tout composant, par l'interface Joomla! :
Après avoir décompressé le zip, il nous faudra envoyer tour à tour les fichiers ZIP de VirtueMart, VirtueMart AIO et TCPDF.

 installation-virtuemart Joomla!

Des messages nous guident le long du processus et lors de l'installation des modules et plugins AIO (all in one) vous proposant d'installer les données d’exemple.
Vous pouvez le faire pour visualiser toutes les possibilités d'exemple, sachant que vous pourrez les effacer avant de commencer votre boutique.

installation-virtuemart-donnees-exemple 

Un nouveau menu apparaît en haut de votre administration.

menu-administration-virtuemart

Pensez également à charger le package de langue correspondant à l'utilisation que vous en avez, VirtueMart est nativement en anglais.

Régler la configuration générale

Avant toute chose, quelques petites étapes pour avoir une boutique efficace.
Allez dans la configuration de VirtueMart pour procéder à quelques réglages.

  • Onglet boutique
    nous pouvons définir si la boutique est multilingue, ce n’est pas notre cas, utiliser la boutique en tant que catalogue ou la mettre momentanément hors service.
    Onglet e-mail
    c’est à cet endroit ou en fonction du statut de la commande que nous choisissons si un courriel est envoyé au client ou pas.
    Boutique frontale
    ici seront définis les paramètres de listes, les unités de poids ou de mesure par défaut (pour nous en kg) si nous acceptons les commentaires, si nous acceptons les questions, les recommandations.
    Onglet templates
    à cet endroit, nous allons choisir comment vont apparaître nos produits et nos catégories (nombres d’éléments par ligne, etc.), quel sera le template utilisé pour VirtueMart, et surtout quel sera le Chemin vers les médias de produits à vendre : ce chemin doit être un dossier situé hors de l’arborescence de votre site (au dessus de la racine)
    Onglet prix
    nous allons choisir ici quels seront les éléments constituant le prix qui apparaissent sur la boutique (prix HT, TTC, montant de la taxe, etc.)
    Onglet commande
    cette partie concerne toutes les étapes de commandes, si la commande se fait en une seule page, si les conditions générales de ventes doivent être validées, etc.
    Onglet tri des produits
    conditionne principalement l’affichage de champs de recherche et de tri dans la vue catégorie.
    Onglet SEO
    différentes options pour activer/désactiver le SEO de la boutique et choisir un suffixe pour un produit seul (afin de le différencier d’une catégorie qui pourrait porter le même nom)

Vous aimez cet article ? Achetez le magazine !

14,60 € l'unité E-commerce & joomla! - Édition papier

Paramétrer la boutique

La boutique

Dans le menu de gauche, accédons à la boutique.
Nous avons 3 onglets à remplir :

Vendeur

Entrons le nom de la Boutique et du vendeur ainsi que l'url du site (1), les devises utilisées dont la devise par défaut (2), l'image présentant la boutique (3).

Factures E-mail

De nombreux paramétrages permettent de générer des factures propres et correspondant visuellement à vos besoins.

facture-virtuemart

Nous pouvons également, grâce à un éditeur de texte, inclure des éléments dans l'entête et le pied de page de la facture.

Information client

Cet onglet vous permet de définir les informations sur le vendeur (Nom Adresse E-mail)
Ces renseignements sont obligatoires et leur absence vous empêchera d'aller plus loin !

Définir les modes de livraison

Il nous faut créer les modes de livraisons

C'est très simple : allons dans l'onglet modes de livraison et cliquons sur Nouveau dans le menu du haut.

Nous allons pouvoir donner un nom à ce mode de livraison et définir à quelle occasion il peut être sélectionnable, selon différents critères :

  • catégorie des produits
  • poids min et max
  • groupe client
  • pays du client
  • code postal
  • nombre de produits min et max
  • montant minimal.

Nous pouvons mettre un tarif pour la livraison, dans notre exemple nous choisissons d'appliquer un tarif de 5€ pour toute livraison par la poste et gratuit pour le retrait en magasin.

mode-de-livraison-virtuemart

Définir les modes de paiement

Avec VirtueMart, nativement, il est possible de choisir différentes plateformes de paiement de type PayPal, Amazon, SOFORT, Paybox, 2Checkout, etc.

Paiement par PayPal

Pour cette opération, il est nécessaire d'être inscrit sur PayPal, et au besoin d'avoir créé des comptes tests pour le sandbox (bac à sable).
Ouvrez l'onglet modes de paiement et cliquez sur nouveau dans le menu du haut.

Choisissez PayPal dans la liste déroulante, donnez un nom à votre mode de paiement (PayPal) et sauvegardez.

virtuemart-paypal 

De nouveaux éléments apparaîtront dans l'onglet configuration à droite.

Nous pouvons ainsi saisir notre adresse PayPal, choisir si le site est en mode production ou sandbox, et d'autres paramètres de réglages tels que des frais de paiement, la devise utilisée, un montant minimum, les pays où le paiement sera disponible, les images du paiement...
Tout est intuitif et ne nécessite pas d'installation de fichiers externes, une fois enregistré, le paiement est opérationnel tout de suite.

Paiement par chèque

Nous allons créer un autre paiement permettant au client d'envoyer un chèque, ce ne sera donc pas une passerelle de paiement.
Pour cela, il suffit de créer un nouveau mode de paiement de type STANDARD, de l'enregistrer et de régler la configuration en fonction de certains critères (pays, montant minimal, etc.).

Définir les taxes et les règles de calcul

Notre boutique peut avoir deux types de TVA : 5.5% ou 20% selon le type de produits.
Pour l'instant seul le taux de 5.5% sera utilisé.

Ouvrons taxes et règles de calcul dans le menu déroulant de gauche "produits" et cliquons après sur nouveau dans le menu du haut.

Il nous suffit de remplir les champs :

  • nom de la règle
  • montant
  • nous déclarons que c'est de la tva
  • type de règle de calcul (+ - % )
  • catégorie (par défaut toutes)
  • groupe d'utilisateur (client, fournisseur, client gold, etc.)
  • pays (les règles peuvent être différentes).

taxe-virtuemart

Mise en place des produits

Maintenant que notre boutique est paramétrée, il nous faut créer les catégories, les produits et créer au besoin des champs personnalisés.

Déclarer les fournisseurs

La première étape consiste en la déclaration des fournisseurs. Car au moment de la création d'un produit cette précision pourra nous être demandée.

Nous n'en aurons pas besoin ici car nous vendons nos propres produits.

Toutefois, par précaution et parce que nous risquons de vendre des produits d'autres fournisseurs, je crée un fournisseur à mon nom.

fournisseur-virtuemart

Créer et gérer les catégories

Comme dans tout composant Joomla, les éléments (produits) sont rangés dans des catégories qui peuvent être imbriquées.

Pour cela, rien de plus simple : dans l'onglet catégories de produits, cliquez sur nouveau dans le menu du haut puis remplissez les champs en fonction de vos produits.


Vous pouvez désigner la catégorie parente pour créer une arborescence, mettre une description, une image de catégorie, entrer des méta-descriptions pour les moteurs de recherche et définir la mise en page de la catégorie.

Voici l'arborescence choisie pour notre site exemple :

Les catégories sont évidemment modifiables par la suite et nous pourrons les ranger différemment si notre site prend de l’ampleur (le mieux étant d’y penser dès maintenant).


Créer des champs personnalisés

Pour la gestion des produits, il convient de créer des champs personnalisés.

À titre d'exemple pour des t-shirts, nous pouvons créer des champs taille, forme du col, couleur.
Ainsi, chaque produit pourra soit avoir plusieurs déclinaisons (taille), soit avoir des produits enfants en fonction de ces champs.

champs-personnalises-virtuemart

Nous avons dans notre boutique des pots de miel de 250g, 500g et 1kg vendus à des prix différents et nécessitant du stock.
Nous pouvons aussi imaginer que d'autres options soient envisageables plus tard (miel d'automne, miel de printemps).

Nous pouvons bien sur créer des champs personnalisés pour chaque particularité, mais nous n'en aurons besoin que d’un : le champ multi-variantes.

Nous créons donc celui-ci dans l'onglet "champs personnalisés"

Après avoir rempli les champs une première fois et choisi le type multi-variante, nous sauvons pour configurer le champ en bas.

Créer et gérer les produits.

La création d'un produit se fait de manière simple.
Dans l'onglet de la gestion produits, nous cliquons sur nouveau dans le menu du haut.
Puis nous remplissons minutieusement les champs des différents onglets.

gestion-produits-virtuemart 

  • Onglet informations produit
    ici nous mettrons le nom du produit (1), sa référence (2), si le produit est publié ou pas (3), sa catégorie (4), son prix(5), la tva appliquée (6), s'il est disponible pour un groupe de clients ou pour tous (7).
    Nous pourrons également gérer des prix par plage de quantités si nous appliquons des tarifs dégressifs (8).
  • Onglet description
    Dans cette zone nous allons renseigner la petite description qui s'affiche dans la vue catégorie et la longue description utilisée dans la vue produit.
    Onglet statut du produit
    Cette partie nous permet de définir l'état des stocks du produit, la quantité minimale et maximale d'achat et de configurer un e-mail spécifique au client en fonction d'un statut de la commande. (Au moment de l'expédition d'un bœuf surgelé, pourquoi ne pas prévenir le client de faire de la place dans le congélateur ?)
    Onglet dimensions et poids du produit
    cet onglet prend en charge le poids, la taille en longueur, largeur, hauteur, le format (certains produits sont à l'unité, d'autres au kg, d'autres au litre) et le nombre de produits dans le lot.
    Images du produit
    depuis cet onglet, vous pouvez charger, une ou plusieurs images pour votre produit, pour notre boutique de miel et de confitures nous en chargerons une seule par produit.

SAUVEGARDEZ !

  • Onglet champs personnalisés
    une fois sauvegardé, nous pouvons configurer nos produits enfants en fonction des multi-variantes (une seule pour l'instant, le poids !).

Allez dans cet onglet, sélectionnez le type de champ personnalisé (ici variantes miel) (1)



type-de-champs-personnalises-virtuemart

Sélectionnez le type de variante (le poids) (2) puis donnez un nom à ce champ (3) et enfin entrez les données (4).

SAUVEGARDEZ !

En dessous, cliquez sur ajouter un produit enfant autant de fois que souhaité (1).

ajout-produit-virtuemart

Modifiez les références, les prix de revient (3) (attention en HT !!) puis sélectionnez le poids de chaque produit.

SAUVEGARDEZ !

Désormais en cliquant sur votre produit enfant vous accéderez à un produit qui aura repris certaines caractéristiques du parent mais avec un prix et un poids différent. 
En frontend sur le site, cela se traduira par un champ de sélection dans la fiche produit, qui, à la sélection, aura pour effet de modifier directement en AJAX le prix du produit, sans avoir besoin de recharger la page.

miel-virtuemart Joomla! 


Les étapes de finalisation

Maintenant que nous avons un produit, il faut le voir, puis le rendre joli, l'entourer de toutes nos attentions pour finir par le vendre, attardons-nous encore un peu sur certaines taches qu'il nous reste à accomplir.

Afficher la boutique sur le site

Vous ne l'aviez pas déjà fait ? Allons dans le gestionnaire de menu et déclarons la page d'accueil de la boutique VirtueMart dans un lien de menu. Dans notre cas, cela sera le menu par défaut.
Des liens de menus vers des catégories, les produits, les fournisseurs, peuvent être aussi crées, ainsi que des liens utilisateurs vers le panier, la gestion du compte, etc.

type-de-liens-de-menu-virtuemart

Trouver un beau template

Maintenant c'est à vous de jouer, allez sur des sites de templates ou téléchargez un framework, veillez à ce qu'il soit compatible VirtueMart et installez le.
Il vous faudra l'agrémenter, mais c'est un autre sujet.

Afficher les modules

VirtueMart est livré avec plein de modules.
En fonction de nos besoins nous les afficherons dans des positions diverses et appliquerons les paramétrages nécessaires.
Voici un petit exemple de ce que pourrait être votre site.

modules-virtuemart 

Tester notre site

À présent que le site est paramétré avec quelques produits, et avant de le lancer en production, le mieux est de le tester, passer quelques commandes, voir comment elles arrivent chez le client, chez le vendeur, comment apparaît la facture.
Puis, pourquoi pas, demander à un cercle d’amis ou un panel de client ce qu’ils en pensent afin d’effectuer quelques modifications avant le lancement.

La suite...

Un site marchand est vivant, il va falloir continuer à le faire vivre, Joomla! et VirtueMart vous permettent d’aller plus loin dans votre démarche, imaginons…

  • des modules défilants sur certaines pages
  • une newsletter intégrant les promotions
  • des groupes d’acheteurs avec des produits ou des prix différents
  • des chèques boutiques avec des codes promos (natif)
  • un système de coupons pour fidéliser vos clients (awocoupon)
  • des campagnes sur les réseaux sociaux ou sur les moteurs de recherche
  • un système de récolte d’avis produits
  • etc.

Maintenant, vous avez les idées, vous avez les outils, à vous de jouer et de bien vendre !

À propos de l'auteur

Serge Billon

Serge est intégrateur Joomla. Il propose sur son site professionnel http://www.web54.fr des tutoriels sur la migration Joomla, les frameworks de templates. Il est également modérateur sur http://virtuemart.fr et sur http://aidejoomla.com

Sur ce site, nous utilisons des cookies.