Le Blog Baobaz

Comme vous le savez peut-être déjà, le framework Javascript Prototype est inclus par défaut dans magento. Combiné avec script.aculo.us, c'est un outil puissant pour programmer les interactions du côté client. Il fournit aussi un framework Ajax, ce qui rend n'importe quelle requête ajax plus facile à réaliser.

Beaucoup de templates magento utilisent les fonctionnalités de Prototype, pour par exemple, afficher/masquer des éléments selon le choix de l'utilisateur ou pour afficher des messages d'erreur avec un sympathique effet 'fade'.

Mais Prototype n'est pas la seule bibliothèque Javascript à proposer un ensemble de fonctions utiles. JQuery est une autre bibliothèque très populaire – très légère (19KB dans sa version minimisée et compressée), simple à utiliser et, à dire vrai, ma favorite. Créée en 2006, elle a désormais une large communauté et un énorme ensemble de plugins.

Cependant, est ce une bonne idée d'utiliser ces deux bibliothèques sur un site magento? A mon avis, non. En tout cas dans la plupart des cas. Pourquoi? Il y a plusieurs raisons :

• Elles fournissent les mêmes fonctionnalités. Ce qui est donc possible avec l'une l'est aussi avec l'autre.
• Inclure plus de bibliothèques implique augmenter le nombre de données à télécharger par le navigateur et ralentir le chargement des pages
• Elles utilisent une structure commune ce qui peut engendrer des conflits

Néanmoins, dans certains cas vous pourriez être amené à inclure jQuery dans votre site magento. Par exemple, vous avez besoin d'utiliser une bibliothèque JavaScript supplémentaire qui a été crééez en tant que plugin jQuery. Comment pouvons nous alors forcer Prototype et jQuery à fonctionner ensemble sans conflit ? Premièrement, vous devez télécharger une version récente de jquery (la version actuelle est la 1.3.2) et la placer dans le dossier /js/jquery. Vous devez alors l'inclure dans toutes vos pages magento – la façon la plus logique de faire cela est de placer le code suivant dans la section <block type="page/html_head"> du fichier /app/design/frontend/.../.../layout/page.xml:

Maintenant, vous devez éviter les conflits avec Prototype – elles utilisent toutes deux la notation $ (dans jQuery c'est un raccourci pour jQuery et dans Prototype c'est un alias pour la fonction getElementById). Heureusement, il existe un méchanisme dans jQuery pour remplacer la fonction $ : jQuery.noConflict(). Vous pouvez mettre un tel code a la fin de votre fichier jquery-1.3.2.min.js :

et désormais, vous devez utiliser $j à la place de la fonction $ (ou, si vous préférez, vous pouvez toujours utiliser jQuery). Prenez alors bien soin de modifier tous vos appels de $ dans vos plugins jquery (mais il y a déjà beaucoup de plugins qui incluent le code jQuery.noConflict()).

Et cela serait tout s'il n'y avait pas un navigateur qui pose encore problème pour faire cohabiter Prototype et jQuery. Étonnamment, il ne s'agit pas d'Internet Explorer. C'est Firefox 2. Il retourne des erreurs et refuse d'exécuter le JavaScript. Bien sûr, il existe de nouvelles version de Firefox où le problème n'apparaît plus, mais il existe encore un petit pourcentage d'internautes qui utilisent Firefox 2 et qui voudraient dépenser de l'argent dans votre magasin. Heureusement, il existe un moyen simple pour résoudre ce problème. Vous devez inclure le fichier jQuery avant Prototype. Vous avez alors quelque chose comme ça dans page.xml:

Et maintenant vous pouvez oublier les conflits et apprécier ces superbes bibliothèques fonctionnant ensemble.

Traduction par Laurent Clouet