Passer son site Joomla et sa boutique Virtuemart en multilingue.

Dans ce tutoriel, nous allons faire un site Français - Anglais, mais nous pourrions ajouter des langues supplémentaires facilement "voir à la fin de ce tutoriel".

En tout premier, nous allons publier les plugins pour la gestion des langues de Joomla!.

Dans extensions > plug-ins avec la recherche de cette page, rechercher "langue", vous aurez deux résultats :

Système - Filtre de langue
et
Système - Code langue

• publiez les deux plug-ins (ils doivent être cochés vert).

• Option : ouvrez le plug-in "Système - Code langue" puis ouvrez l'onglet "Code langue".
  sur la ligne fr-FR renseignez fr
  sur la ligne en-GB renseignez en
  puis "enregistrer & fermer"

Pour d'autres langue voir cette page :
http://www.lingoes.net/en/translator/langcode.htm

Maintenant, nous allons modifier le menu principal et ajouter des menus pour nos langues.

Ouvrez menus > gérer

• cochez sur "Menu principal" puis cliquez sur "modifier"
• changez le titre "Menu principal" en "Menu principal ALL"
• Puis "enregistrer & fermer"

Ce menu sera la base du multilingue avec un seul lien la page d'accueil du site "par défaut".
Si votre site à déjà un grand nombre de liens, vous pourrez les déplacer dans le menu français plus tard ;)

A présent, nous allons ajouter un menu pour le français

Ouvrez menus > gérer puis cliquez sur "nouveau"

• Choisissez un titre "menu-FR"
• Type de menu "menu-fr"
• Description "menu-fr"
• Puis "enregistrer & fermer"

Vous apercevez un bouton bleu sur la droite de menu-FR avec ce texte "Assignez un module à ce menu" cliquez dessus !

...ça ouvre une fenêtre modale (image ci-dessous) à remplir comme suit :

• Titre "menu-fr"
• Position "menu" ou celle de votre template habituel (vérifiez la position de menu "Menu principal ALL").
  Pour ma part, je le publie en position "offcanvas" avec le template helix3 comme ça c'est prêt pour les mobiles et tablettes
• Montrer le titre cochez "masquer"
• Langue, choisissez "Français (FR)"
• Puis cliquez sur "enregistrer & fermer"

 

Cliquez une nouvelle fois sur "nouveau"

• Choisissez un titre "menu-EN"
• Type de menu "menu-en"
• Description "menu-en"
• Puis "enregistrer & fermer"

Comme pour menu-fr, cliquez sur "Assignez un module à ce menu". (image ci-dessous)

• Titre "menu-en"
• Position "menu" ou celle de votre template habituel
• Montrer le titre cochez "masquer"
• Langue, choisissez "English (UK)" 
• Puis cliquez sur "enregistrer & fermer"

 

Désormais vérifions le paramétrage SEO du site : (image ci-dessous).

• Cliquez sur Système > Configuration puis activez :
• Réécriture d'URL en clair (SEF)
• (option préférable) Réécriture au 'vol' des URL
• (option préférable) Ajouter un suffixe aux URL

 

Puis, nous allons ajouter une catégorie pour chaque langue et une page d'accueil dans chacune des langues à chacun de nos menus.

• Dans le menu du haut de joomla, cliquez sur Contenu > Catégories > bouton "Nouveau"
• Dans la case titre renseignez : fr
• Dans la case langue choisissez : "Français (FR)"
• Puis cliquez sur "enregistrer & fermer"
  (un drapeau francais est affiché sur la droite du nom de votre catégorie "fr").
• Cliquez encore une fois sur le bouton "Nouveau"
• Dans la case titre renseignez : en
• Dans la case langue choisissez : "English (UK)"
• Puis cliquez sur "enregistrer & fermer"
  (un drapeau anglais est affiché sur la droite du nom de votre catégorie "en").

 

Vous pouvez créer des sous catégories dans vos catégories fr et en (Il faudra toujours créer leur équivalent dans les deux langues).  exemples : "nouvelles" et "news" etc selon ce que vous souhaiter classer....

C'est prêt, vous pouvez maintenant créer les pages d'accueil FR et EN de votre site...

Pour ma page FR je vais utiliser la page par défaut dont je vais changer la langue "tous" par "Français (FR)" puis l'ajouter dans la catégorie "fr"  ...je la publie en vedette pour la suite ! (page en données blog).

Puis je vais ajouter une copie de cette page avec la fonction "enregistrer une copie" puis je vais modifier le titre, l'alias puis modifier la catégorie pour choisir "en" pour poursuivre je change le contenu et enfin la langue en choisissant "English (UK)" avant d'enregistrer & fermer.

Maintenant, nous sommes prêts pour ajouter un lien dans nos menus "menu-FR" et "menu-EN"

En premier, rendez vous dans Menu > Menu principal ALL

• Ouvrez le lien "Accueil" et renommez-le en "accueil all" avec l'alias "accueil-all" et vérifiez que la publication en vedette est active puis cliquez sur "enregistrer & fermer"
• Dans Menus > menu-FR > Nouveau
• Ajoutez un Titre de menu : accueil
• Dans "Type de lien de menu" choisissez "articles" > "Blog des articles en vedettes"
  (mais j'aurais pu choisir article et sélectionner mon article fr précédemment créer).
• je sélectionne ma langue : "Français (FR)"
• Dans l'onglet affichage je paramètre ma page comme je souhaite puis cliquez sur "enregistrer & fermer"
• COCHEZ LE LIEN "accueil" PAR DÉFAUT !!

 

Pour aller plus vite, nous allons dupliquer le lien dans le menu-EN :)

• Sélectionnez le lien accueil du menu-Fr, puis cliquez sur le bouton "traitement"
• Dans la fenêtre modale choisir une langue prenez "English (UK)"
• Dans "Sélectionnez le menu ou son parent pour déplacer/copier" choisissez : Menu-EN ajouter à ce menu puis "copier" et enfin cliquez sur traitement
• Maintenant allez dans menu-EN cliquez sur le lien accueil(2)
• Remplacez le Titre de menu par "Home" et supprimez le contenu de l'alias puis cliquez sur "enregistrer & fermer"
• COCHEZ LE LIEN "home" PAR DÉFAUT !!

 

Dès à présent, passons à l'association des deux liens "accueil" et "home".

Une fois associés, le système permet de rester sur la page en cours dans la langue sélectionnée lors d'un clic sur le drapeau du pays choisi. C'est important de réaliser cette opération sur l'ensemble des liens de vos menu.

• Ouvrez "menu-fr" puis cliquez le lien "accueil" puis ouvrez "l'onglet association"
• sélectionnez le lien "home (en-GB)" puis cliquez sur "enregistrer & fermer"

 

Maintenant, nous allons ajouter le module de changement de langue sur le site.

Ici, nous avons deux choix :

1. Utilisez le module standard fourni avec Joomla!
   (vous devrez associer chaque page pour passer d'une langue vers l'autre à l'aide du module de langue).
2. Ou ajouter le module commercial de Studio42 qui va faire vos associations automatique de vos produits Virtuemart.
   "Ce Module associe directement les produits, catégories et fournisseurs pour toutes les langues configurer dans votre boutique, tout le reste est automatique!" l'auteur ajoute également que "ce module améliore le référencement".

Voyons les deux procédures en détails en commençant par le module par défaut de Joomla :

• Extensions > Modules > Nouveau ...puis cliquez sur "Changement de langue"
• donnez-lui un titre : "module_langue"
• une position, moi j'ajoute "module_langue" ou je choisis "top1" avec helix3 ou "left" sur un autre template de base.
• Montrer le titre mettre : "Masquer"
  Dans langue assurez vous d'avoir mis "toutes" !! c'est important que ce soit visible sur toutes les langues.
  Sur l'onglet assignation des menus, veillez à mettre "sur toutes les pages"
• Puis cliquez sur "enregistrer & fermer"

 

Voyons à présent la seconde méthode : avec l'installation du module "mod_vmlang" de Studio42 disponible à shop.st42.fr :

Installons le module  : Extensions > Gérer > installation > parcourir puis "Transférer et installer" (image ci-dessous).

Pour la suite, nous allons activer le module.

• cliquez sur "Changement de langue Boutique"

L'interface du module s'ouvre : (en image ci-dessous)

• Montrer le titre = Masquer
• position = moi j'ajoute "module_langue" ou je choisis "top1" avec helix3 ou "left" sur un autre template de base.
• statut = Publié
• Langue = Toutes

Vous pouvez laissez le reste du module par défaut ou choisir de personnaliser, mais les options par défaut sont bonnes (voir image ci-dessous).

• Dans l'onglet "Assignation des menus" choisissez "Sur toutes les pages"
  
• Cliquez sur "Enregister et fermer"

Reste à modifier l'ordre de votre module si vous en avez plusieurs dans la même position de template :

 

Ajoutons les styles de templates à nos langues !
C'est un point important pour personnaliser les apparences et dédier des menus aux deux habillages :)

• Cliquez sur Extensions > templates ou Extensions > templates > Styles
• Sélectionnez votre template puis cliquez sur dupliquer

Maintenant ouvrez le style nouvellement créé, "il doit avoir un (2)".

• Dans la case "Défaut" sélectionnez : "Français (FR)"
  
• Puis si disponible (comme dans helix3) sélectionnez le "menu-FR"
  
  évidement vous pouvez renommer le style "Nom du style" en ajoutant FR ce qui donne par exemple "Beez3-FR" ou protostar-FR ou shaper_helix3 FR

répétez la même opération pour créer un style EN

Maintenant si tout va bien, vous devez pouvoir accéder aux deux versions "en Front" avec un simple clic sur les drapeaux.

Nous allons installer Virtuemart avec le tutoriel de Valérie disponible ici :
http://www.virtuemart.fr/documentation/23-installation/93-installation-du-composant-modules-et-plugins

Ensuite, il vous suffit d'ajouter un lien vers votre boutique dans menu-FR et dans menu-EN et votre boutique cause deux langues :)
N'oubliez pas le faire l'association entre les deux liens "Boutique" et "Shop".

 

Pour ajouter des langues dans Joomla
Extensions > langues > installées > Installation de langues

Pour ajouter des langues dans Virtuemart, voir le tutoriel de Valérie :
http://www.virtuemart.fr/documentation/31-multilingue/73-installation-des-paquets-de-langues