Utiliser ibrowser avec osCommerce

I. Introduction à iBrowser

Ce tutoriel, très ciblé et spécifique, a pour but de vous expliquer le fonctionnement du plugin iBrowser pour TinyMCE (que nous allons utiliser sur osCommerce).
Qu’est-ce que TinyMCE ? C’est un éditeur HTML WYSIWYG pour sites web, c’est-à-dire concrètement qu’il vous fourni quelque chose qui va ressembler à une barre d’outils Word pour mettre en forme du texte, insérer des images etc. Il se charge de transformer tout ce que vous tapez en code HTML, et vous évite ainsi de connaître le language HTML pour pouvoir mettre du contenu sur une page web. Les éditeurs WYSIWYG (“what you see is what you get” -> vous obtiendrez ce que vous voyez à l’écran) sont donc très utilisés de nos jour, notamment avec le grand boom des blogs qui ont nécessité des éditeurs comme cela pour les utilisateurs.

Maintenant qu’est-ce que le plugin iBrowser ajoute à l’éditeur TinyMCE ?
iBrowser est un plugin d’exploration d’images pour les éditeurs WYSIWYGiBrowser peut envoyer des images sur un serveur et propose des fonctions de gestion de celles-ci. Les images peuvent être redimensionnées à la volée et bien d’autres choses, mais ce qui va nous intéresser particulièrement ici c’est de pouvoir créer des fenêtres popup qui s’ouvrent et permettent d’agrandir les images insérées.

Comme je vous l’ai dit, cela est utilisable sur tout site web qui a besoin d’édition de contenu dynamique. Mais sur cet exemple, nous allons voir comment s’en servir intelligemment sur les boutiques en ligne de type osCommerce pour pouvoir insérer plusieurs photos d’un produit sur la fiche de description de celui-ci. Cela peut être particulièrement utile pour montrer plusieurs vues d’un produit afin que le client puisse se faire une idée précise avant d’acheter, et c’est ce qui manque cruellement dans osCommerce.

II. Explications

1. Installation de iBrowser sur TinyMCE

Je ne vais pas vous détailler toute l’installation de TinyMCE ici, car ce n’est pas le but du tutoriel. Sachez qu’il faut copier le répertoire de TinyMCE téléchargé quelque part dans votre site web. Puis dans chaque page où vous aurez besoin de l’éditeur TinyMCE, il faudra inclure “tiny_mce.js” qui est dans le répertoire de TinyMCE :

Puis il faudra initialiser celui-ci :

Sur cet exemple, je l’initialise en anglais, avec le plugin iBrowser, avec le thème avancé et pour qu’il se mette automatiquement à la place des “textarea” , c’est-à-dire toutes les zônes de texte qu’il va y avoir dans la suite de ma page web.

Mais pour plus d’informations sur la configuration et l’installation de TinyMCE, n’hésitez pas à consulter la documentation de celui-ci.
Si vous utilisez la solution e-commerce de notre partenaire boutique-ecommerce.fr, sachez que vous n’avez aucunement besoin de vous préoccuper de cette installation, TinyMCE et iBrower sont déjà installés sur votre boutique en ligne.

2. Ajouter un produit sur osCommerce

Avant de se servir de iBrowser, voyons comment ajouter un produit basique sur osCommerce.
Rendez vous dans l’administration de votre catalogue produits osCommerce :

oscommerce ibrowser image 1

Puis dans la catégorie dans laquelle vous souhaitez ajouter ou éditer un produit, et cliquez sur “nouveau produit” pour créer une fiche produit ou “éditer” pour modifier un produit existant :

oscommerce ibrowser image 2

Pour l’exemple, je vais alors ajouter un téléphone mobile SPV M3100 afin de vous montrer comment cela fonctionne. Je commence à remplir tous les champs de façon classique :
(notez la barre d’outils TinyMCE que vous devez avoir pour la description du produit si cet éditeur est installé sur votre catalogue produits)

oscommerce ibrowser image 3

J’ai également ajouter une photo pour le produit dans le champ “Image du produit”, comme vous le faites déjà habituellement aussi, donc jusqu’ici rien de particulier :

oscommerce ibrowser image 4

Cliquez alors sur le bouton “aperçu” quand vous avez terminé, puis cliquez sur “Insérer” pour valider :

oscommerce ibrowser image 5

Rendez vous maintnant sur la partie de consultation de votre catalogue produits (celle que voient les clients), puis sur la fiche du produit que vous venez d’ajouter. Vous devriez alors voir la photo que j’ai inséré sur le produit et qui peut s’agrandir en cliquant dessus :

oscommerce ibrowser image 6

Seulement, on ne peut mettre qu’une seule photo comme vous l’avez vu en partie d’administration (il n’y avait qu’un seul champ “image du produit”). Nous allons donc maintenant essayer de mettre deux photos supplémentaires sur cette fiche produit, pour montrer deux autres vues.
Nous allons, par exemple, les insérer en dessous de la description du produit.

3. Ajouter des photos de produits sur osCommerce

Voyons maintenant comment se servir de iBrowser pour ajouter des photos de produits qui peuvent être agrandies dans osCommerce. Je supposerai donc ici que TinyMCE + iBrowser sont correctement installés sur l’administration de votre catalogue osCommerce.

Retournez dans votre espace d’administration de votre boutique en ligne osCommerce, puis sur votre produit précédemment ajouté pour pouvoir l’éditer :

oscommerce ibrowser image 7

Dans la zône d’édition de la description de votre produit, vous devez avoir l’icône du plugin iBrower comme sur l’image ci-dessous :

oscommerce ibrowser image 8

Cliquez sur cette icône, puis dans la fenêtre iBrower qui s’ouvre, cliquez sur “Insérer” dans le menu à gauche :

oscommerce ibrowser image 9

Cliquez alors sur l’icône de transfert d’image (1) avec une flèche verte, puis sur le bouton “parcourir” (2) pour choisir la photo que vous souhaitez ajouter :

oscommerce ibrowser image 10

Choisissez la photo sur votre pc en parcourant, puis il vous reste deux choses à indiquer :
– la taille : ceci permet de redimensionner une image à 400px ou 120px maximum par exemple (un choix est obligatoire)
– pivoter : cette option permet de faire une rotation de votre photo si celle-ci n’est pas dans le bon sens, c’est bien sûr optionnel.

iBrowser est assez puissant en fonctionnalités, et va nous permettre ici d’envoyer la même image dans deux tailles différentes sur le serveur. Cela va nous permettre d’avoir une image en petite taille pour afficher sur la page de description d’un produit, ainsi qu’une image de plus grande taille que le visiteur aura quand il voudra cliquer dessus pour l’agrandir.
Cochez donc à la fois les tailles “400 px” et “120 px” et cliquez enfin sur la flèche verte à droite du bouton “parcourir” (ne cliquez pas sur le bouton “Insérer”encore) :

oscommerce ibrowser image 11

Une fenêtre qui s’ouvre vous demande alors une confirmation, cliquez sur “OK” :

oscommerce ibrowser image 12

Patientez le temps de l’envoi de l’image sur le serveur et vous devriez finir par voir votre photo envoyée en double. Un fichier du même nom que votre image originale qui est l’image en taille 400 px, et ce même suivi de “_120” qui est l’image miniature en taille 120 px :

oscommerce ibrowser image 13

Ensuite sélectionnez le nom de l’image miniature (“spv_m3100_face_120.jpg” sur mon exemple) et cliquez sur le bouton “Propriétés” à gauche :

oscommerce ibrowser image 14

Dans les propriétés, vous pouvez mettre “0” dans le champ “Bordure” afin que nous n’ayons pas de bordures autour de l’image. Puis cliquez sur le bouton “Insérer” en bas :

oscommerce ibrowser image 15

En cliquant sur “Insérer”, vous allez revenir à votre fiche produit et vous voyez maintenant que l’image miniature s’est insérée dans la description à l’endroit où se trouvait votre curseur :

oscommerce ibrowser image 16

Sélectionnez alors votre image miniature en cliquant dessus et recliquez sur l’icône d’iBrowser, nous allons maintenant créer la fenêtre popup qui va permettre d’agrandir l’image. Pour cela cliquez sur le bouton “Insérer” à gauche de nouveau et séléctionnez votre image en grande taille cette fois ci :

oscommerce ibrowser image 17

Vérifiez que son nom est bien sélectionné, et cliquez sur le 2ème bouton du menu à gauche, à savoir “Propriétés“.
Dans les propriétés, vous n’aurez en général pas grand chose à changer, si ce n’est de choisir un titre et une description de cette image. La différence est que le titre sera affiché quand l’utilisateur laissera sa souris 3-4 secondes sur l’image, alors que la description correspond à l’attribut “alt” HTML qui permet de fournir un texte alternatif à une image qui ne s’afficherait pas, ce dernier est important pour les moteurs de recherche :

oscommerce ibrowser image 18

Enfin cliquez sur le 3ème bouton à gauche, à savoir “Popup” :

oscommerce ibrowser image 19

Cliquez à nouveau sur votre image en grande taille (400px) à insérer en cliquant dessus, changer éventuellement le titre, puis cliquez sur le bouton “Insérer” tout en bas :

oscommerce ibrowser image 20

Vous retournez alors sur votre fiche produit, et normalement si vous cliquez à côté de votre image pour la désélectionner, puis que vous recliquez dessus pour la sélectionner à nouveau, vous devriez maintenant voir qu’il y a un lien sur cette image (icône en forme de chaîne enfoncée) :

oscommerce ibrowser image 21

Il ne vous reste plus qu’à cliquez sur le bouton “Aperçu” tout en bas de votre fiche produit comme vous le faites d’habitude. Vous apercevez alors le résultat de votre fiche produit et vous devez voir votre nouvelle image. Vous devez même pouvoir cliquer dessus pour l’agrandir, sinon c’est que vous avez mal fait quelque chose.
Si c’est bon, cliquez sur le bouton “mise à jour” tout en bas pour mettre à jour votre produit :

oscommerce ibrowser image 22

Enfin si vous retournez sur la fiche de votre produit du côté “clients”, vous devez avoir votre nouvelle photo qui peut être agrandie en cliquant dessus :

oscommerce ibrowser image 23

III. Conclusion du tutorial

Et voilà, vous savez maintenant comment ajouter la photo d’un produit, répétez l’opération autant que vous voulez si vous souhaitez mettre plusieurs photos d’un seul produit. Le tutoriel peut paraître un peu long certes, mais c’est parce que j’ai voulu détailler au maximum. Lorsque vous aurez fait la manipulation une ou deux fois et compris la chose, vous pourrez ajouter des photos beaucoup plus vite par vous même. Voici un petit exemple montrant que vous pouvez ajouter plusieurs vues sans problème :

oscommerce ibrowser image 24

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*