Bienvenue, Invité
Merci de vous identifier ou de vous inscrire.    Mot de passe perdu?

[TUTORIEL] Gestion des images multi-langues gérées en CSS avec Magento 1.4
(1 lecteur(s)) (1) Invité(s)
Aller en basPage: 1
SUJET:

[TUTORIEL] Gestion des images multi-langues gérées en CSS avec Magento 1.4

*
#27128
Pyksel
Platinum Boarder
Messages: 1402
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur
Sexe: Masculin Lieu: Nice Date anniversaire: 12/09

[TUTORIEL] Gestion des images multi-langues gérées en CSS avec Magento 1.4

Il y a 8 Années, 1 Mois
Karma: 19  
Si Magento gère parfaitement le multi linguisme avec le texte et les images, c'est une autre paire de manche quand il s'agit de gérer le CSS. Notamment quand nos fonds images CSS contiennent du texte avec plusieurs langues. Dans ce tutoriel nous allons par une astuce simple gérer les éventuelles images en plusieurs langues qui seraient utilisées comme fond. Dans cet exemple, mon menu des catégories utilise des images comme fond avec de conserver le texte pour le référencement et pour les personnes mal voyantes.

Image réservée aux membres.
Veuillez vous connecter ou vous enregistrer.


Dans cet exemple, nous avons un site en Français et en Anglais. Le menu des catégories utilise des images. Plutôt que de remplacer le texte par des images, j'ai conservé le texte et c'est le CSS qui va travailler pour nous en substituant celui-ci par une image de fond correspondant au libellé de nos catégories...

Dans Magento, si vous souhaitez utiliser des images qui correspondent à une langue, par exemple le boutons ajouter au panier. il suffit d'aller dans la configuration du Site :

Configuration > Design

Puis de sélectionner la vue magasin correspondant à la langue du site web et de saisir dans cette configuration le nom de notre template dans le champ Skin (Image/CSS). En général ce thème ne contient que le dossier images avec les images modifiée pour correspondre à la langue voulues. On se retrouve donc avec les dossiers skin/frontend/default/[thème de base] et skin/frontend/default/[thème langue] qui ne contient au final qu'un dossier image. C'est très pratique, simple et efficace. Cependant, celà se complique un peu plus quand il s'agit de gérer le CSS quand on utilise des images qui servent de traduction comme dans notre exemple.

La théorie voudrait qu'on duplique notre thème de base dossier image + CSS), qu'on définisse le thème de traduction dans le champs Skin (Image/CSS) de la configuration de la vue magasin puis qu'on modifie les images utilisées en fond. Ceci pour la simple et bonne raison que Magento ira chercher la feuille de style correspondant au thème utilisé. Les feuilles de style de Magento étant plutôt conséquentes, il paraît assez déraisonnable de maintenir deux feuilles de styles pour deux langues différentes...

On va donc réduire notre code CSS et par conséquent la maintenance de celles-ci en ne modifiant que les parties liées aux traductions.

Pour comprendre comment est géré mon menu voici des extrait du code CSS :

Code :

#nav a span { display: none; } /* On n'affiche pas le texte des catégories... car ca sera des image */
/* Début géstion des menu */
#nav a:hover { background-position: left bottom; }
#nav .nav-1 a { background-image: url(../images/menu/babies.png); }
#nav .nav-2 a { background-image: url(../images/menu/boys.png); }
#nav .nav-3 a { background-image: url(../images/menu/girls.png); }
#nav .nav-4 a { background-image: url(../images/menu/women.png); }
#nav .nav-5 a { background-image: url(../images/menu/accessories.png); }
/* Fin géstion des menu */



La première chose à faire consiste à créer notre théme de langue. Mon théme de base en anglais par défaut se nomme chamaille. Je vais créer mon théme qui correspondra à la langue française et je le nommerais chamaillefr. Dans le dossier chamaillefr, ajouter votre dossier images qui sera la réplication de l'arborescence du thème chamaille mais qui ne contiendra que les images modifiée pour être visible dans la langue française.

skin/frontend/default/chamaile avec les dossiers images et css
skin/frontend/default/chamailefr avec le dossier images qui contiendra nos images de traduction


Le dossier chamaille contient l'ensemble de mon thème (css, JavaScript, et images). Notre thème de langue, sera réduit à son plus simple appareil et ne contiendra que les fichiers possédant des modifications relatives à la langue. Notamment les images (boutons et fond css).

A présent, nous allons configurer le théme suivant la langue. Allez dans :

Configuration > Design

Sélectionnez la vue magasin Française :

Image réservée aux membres.
Veuillez vous connecter ou vous enregistrer.


Puis définissez le nom du dossier de thème relatif à la langue. Dans mon cas ce sera chamaillefr.

Image réservée aux membres.
Veuillez vous connecter ou vous enregistrer.


Videz votre cache et rendez-vous dans votre frontend. Et actualiser votre page... Pour l'anglais, rien à signaler. L'affichage est conforme à ce que l'on souhaite. Ceci est normal car on utilise le thème par défaut. Si on bascule en français on s'aperçoit qu'un changement ne s'effectue pas au niveau des langues de notre menu on a toujours la langue anglaise définie par nos images de fonds. La raison est simple, Magento sait chercher des images quand il s'agit d'aller chercher des images issues d'un code html (balise <img>) dans la gestion multi-langues... Mais il est perdu quand c'est le css qui gère l'affichage de ces images.

Créer à présent un fichier style.css dans le dossier skin/frontend/default/chamaillefr/css et insérez le code suivant :

/* Début géstion des menu */
Code :

#nav a:hover { background-position: left bottom; }
#nav .nav-1 a { background-image: url(../images/menu/babies.png); }
#nav .nav-2 a { background-image: url(../images/menu/boys.png); }
#nav .nav-3 a { background-image: url(../images/menu/girls.png); }
#nav .nav-4 a { background-image: url(../images/menu/women.png); }
#nav .nav-5 a { background-image: url(../images/menu/accessories.png); }
/* Fin géstion des menu */



Celà paraît logique. Mais nous verrons qu'en actualisant, l'affichage est catastrophique. Vous me direz donc qu'il suffit de copier l'intégralité du fichier style.css dans le nouveau fichier de style crée. Oui, c'est la solution. Mais en terme de maintenance vous aurez deux fichiers à mettre à jour. On va donc garder notre code entré et ne pas copier l'intégralité du CSS dans ce fichier mais y ajouter une ligne en début de fichier.

Code :

@import url("../../chamaille/css/styles.css");


chamaille étant le nom de notre théme par défaut. Nous allons simplement importer l'intégralité de clui-ci. Le code modifié sera une mise à jour des classes gérant les fond de langues. Actualisez votre page. Et miracle tout est correcxtement affiché. De plus la langue est parfaitement gére quand il s'agit d'utiliser des images de fond comme support de traduction.

Il s'agit là d'une solution simple qui fonctionnera la plupart du temps.

SOURCE : ici
 
L'administrateur a désactivé l'accès public en écriture.
#35454
crxman
Junior Boarder
Messages: 32
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

Re:[TUTORIEL] Gestion des images multi-langues gérées en CSS avec Magento 1.4

Il y a 7 Années, 8 Mois
Karma: 0  
Post très utile, je vais gagner beaucoup de temps merci !
 
L'administrateur a désactivé l'accès public en écriture.
Revenir en hautPage: 1
Modérateur: Gabriiiel, ILOA, zuiko