Vous avez opté pour le module E-commerce ? Créez votre site en plusieurs langues.
Baqio n'a pas objectif d'être un prestataire de webdesign. Nous vous donnons tout de même quelques billes pour traduire votre site si vous n'êtes pas accompagné.
Tout le processus se passe dans le menu Site Web.
1. Créez vos pages dans toutes les langues
Allez dans le sous-menu Pages.
Créez toutes les pages que vous souhaitez traduire (bouton “Ajouter une page” en haut à droite).
Il est nécessaire d’avoir une page par langue. Par exemple, si vous souhaitez traduire votre page d’accueil en 3 langues, créez trois pages :
Page accueil
Home page
Startseite
Il faudra penser par la suite à bien activer la page pour que celle-ci soit visible sur votre site internet :
A savoir : certaines pages seront automatiquement traduites. Vous n’avez pas besoin de les créer et les traduire. C’est le cas de la liste des produits, des fiches produits et du panier.
2. Créez un menu de navigation par langue
Allez ensuite dans le sous-menu Navigation.
Créez un nouveau menu par langue (bouton “Ajouter un menu” en haut à droite).
Pour plus de clarté, indiquez la langue dans le titre. Par exemple “Navigation (EN)” pour le menu de la version anglaise du site.
Si vous cliquez ensuite sur “Modifier” à côté du titre, vous trouverez le nom de code du menu. Exemple : pour “Navigation (EN)”, le handle est “navigation-en”.
Cela sera utile pour la suite.
3. Associez vos pages au menu de la même langue
Toujours dans le sous-menu Navigation, associez à chaque menu navigation les pages qui seront visibles pour chaque version du site.
Pour cela, cliquez sur le bouton “Ajouter un élément” en bas du menu, puis ajoutez :
le type : liste des produits
Par défaut, le menu s’appelera “product list”. Indiquez autre chose dans le champ "Nom affiché" si vous le souhaitez.
le type : page d’accueil
Par défaut, elle s’appelera “Home page”. Indiquez autre chose dans le champ "Nom affiché" si vous le souhaitez.
A noter : votre texte n’est pas traduit. Si vous voulez créer une page d’accueil avec votre texte en anglais, créez une page à l’étape 1 et liez-la comme une page classique, comme suit :
le type : pages…
Ajoutez vos pages traduites. Par défaut, une page aura le titre donné à l'étape 1. Indiquez autre chose dans le champ "Nom affiché" si vous le souhaitez.
4. Activez les langues que pourra choisir l’internaute sur votre site.
Allez dans le sous-menu Paramètres.
Ajoutez le langues dans lesquelles votre site sera disponible.
5. Associez le menu de navigation et la langue
Allez dans le sous-menu Thèmes > Entrez dans le thème.
Au niveau Snippets > topbar.liquid, copiez ce texte sur la 22è ligne :
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> {{shop.language}} <span class="caret"></span> </a> <ul class="dropdown-menu"> {% for language in shop.languages %} <li><a href="/{{language.locale}}">{{language.name}}</a></li> {% endfor %} </ul> </div>
Au niveau Snippets > navigation.liquid, copiez ce texte sur la 1ère ligne :
{% if shop.locale == 'fr' %} {% assign menu = linklists.main-menu %} {% elsif shop.locale == 'en' %} {% assign menu = linklists.navigation-en %} {% elsif shop.locale == 'de' %} {% assign menu = linklists.navigation-de %} {% elsif shop.locale == 'nl' %} {% assign menu = linklists.navigation-nl %} {% elsif shop.locale == 'es' %} {% assign menu = linklists.navigation-es %} {% elsif shop.locale == 'pl' %} {% assign menu = linklists.navigation-pl %} {% elsif shop.locale == 'it' %} {% assign menu = linklists.navigation-it %} {% elsif shop.locale == 'ru' %} {% assign menu = linklists.navigation-ru %} {% elsif shop.locale == 'el' %} {% assign menu = linklists.navigation-gr %} {% endif %}
Sur les lignes 4, 6, 8, etc. : remplacez {% assign menu = linklists. navigation-en %} par {% assign menu = linklists. nomduhandledenavigation %}
A savoir : "nomduhandledenavigation" correspond le nom de code de votre menu navigation dont on vous parlait à l’étape 2.
Sur la ligne 34 (numéro de ligne à titre indicatif. Cela peut être une autre ligne si vous avez laissez plus qu’un espace entre votre code et le code qui était déjà écrit) : remplacez {% for link in main-menu.links %} par {% for link in menu.links %}
Ca y est, votre site est disponible en plusieurs langues !
L’utilisateur peut choisir la langue en haut :
