PanierAjax

Un des intérêts majeurs de Thelia est l'intégration possible de n'importe quelle interface utilisateur.

La plupart du temps, vous allez vous contenter d'une simple interface HTML. Il est néanmoins possible d'adapter n'importe quel 'frontal'. Nous allons voir ici comment intégrer à Thelia des bouts de scripts Ajax, afin de mettre en place un mécanisme de Drag'n'Drop : au lieu de cliquer sur un bouton "Ajouter au panier", on va pouvoir faire glisser les images des produits dans son panier.

Pour ce faire, nous allons utiliser la librairie Scriptaculous, aujourd'hui universellement reconnue, et qui permet de faire de petits miracles. Comme vous allez le constater, cette librairie s'intègre à merveille à Thelia.

Intégrer scriptaculous

Commencez par télécharger le code source de Scriptaculous à l'adresse suivante : http://script.aculo.us

Intégrez ensuite tous les .js du répertoire /src de Scriptaculous dans un répertoire quelconque de votre site d'eCommerce (dans notre exemple, le répertoire s'appelle "/scriptaculous"). Recopiez également le fichier lib/prototype.js qui est nécessaire à l'exécution de Scriptaculous.

Par la suite, il faudra intégrer les lignes suivantes dans le header de n'importe quelle page de votre site utilisant Ajax :

<script src="scriptaculous/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/scriptaculous.js" type="text/javascript"></script>

Rendre les images "draggables"

Première vraie étape de notre adaptation : on prend une page listant divers produits, et on va rendre les images de ces produits saisissables à la souris.

Pour ce faire, il faut suivre les étapes suivantes :

1. Intégrer un identifiant à l'image, et s'assurer que toutes les images utilisent la même classe
2. Insérer l'appel Javascript rendant l'image draggable

Par exemple, vous allez adapter le code suivant, utilisé pour afficher chacun des produits :

<THELIA_img type="IMAGE" num="1" produit="#ID"  largeur="75" hauteur="75">
<img src="#GRANDE" alt="#PRODTITRE" title="#PRODTITRE" border="0" class="classimages" />
</THELIA_img>

de la manière suivante :

<THELIA_img type="IMAGE" num="1" produit="#ID"  largeur="75" hauteur="75">
<img src="#GRANDE"  id="#PRODREF" alt="#PRODTITRE" title="#PRODTITRE" border="0" class="classimages" />

<script type="text/javascript" language="javascript">
 new Draggable('#PRODREF', {revert:true} );
</script>
		
</THELIA_img>

On utilise ici la référence du produit (#PRODREF) en tant qu'identifiant. Notez que cet identifiant est également utilisé dans l'appel Javascript

Pensez à noter le nom de la classe attribuée à chaque image (ici, "classimages"), on en aura besoin un peu plus tard.

Définir la zone du panier

La zone dans laquelle on pourra glisser les photos de produit est une simple balise

, qui pourra avoir l'apparence de son choix

<div id="monpanier" style="background-color: #F49500;">
<script type="text/javascript" language="javascript">
    	new Ajax.Updater('monpanier','ajaxvuepanier.php',{evalScripts:true});
</script>	
</div>

Cette balise 'div' est ici nommée par son id, "monpanier".

Elle intègre un bout de code Javascript qui appelle une page "ajaxvuepanier.php", que nous allons créer un peu plus loin.

Juste après cette balise, nous allons écrire le bout de Javascript qui va rendre cette zone apte à recevoir vos produits :

<script type="text/javascript" language="javascript">
Droppables.add('monpanier', {
  accept: 'classimages',
  onDrop: function(element) 
    { 
    	new Ajax.Updater('monpanier','ajaxvuepanier.php',
       {
        evalScripts:true,
      	 parameters:'action=ajouter&ref='+encodeURIComponent(element.id)
       });
     }});
</script>

Il s'agit là de déclarer une nouvelle zone 'Droppables' :

• on désigne cette zone par le nom de la balise div ("monpanier")
• on définit les éléments qui seront acceptés par cette zone (toutes les images de la classe "classimages")
• on associe une action a accomplir si une image est glissée sur la zone.

Cette action est de type "Ajax.Updater", c'est à dire qu'une fonction va être appelée sur le serveur, sans que vous ayez besoin de recharger la page : la magie d'Ajax est donc ici à l'oeuvre :)

Cet appel sera un appel à la page 'ajaxvuepanier.php', qui aura deux rôles :

• prendre en compte les actions telles que 'ajouter un produit', 'supprimer un produit'...
• afficher un panier qui s'intègre à la page que vous êtes en train de concevoir.

Nous allons voir dans le paragraphe suivant comment écrire ce fichier.

Gérer le réaffichage du panier

Vous allez maintenant écrire la page ajaxvuepanier. Comme d'habitude avec Thelia, cette page est en fait constituée de deux fichier, ajaxvuepanier.php et ajaxvuepanier.html. Le premier fichier est très classique, nous allons donc nous concentrer sur le second.

Voici à quoi ressemble ce fichier :

<T_panier>
<THELIA_panier type="PANIER">
 <div id="pan_#ARTICLE">
 <table border="0" width="200">
 <tr>
   <td>#TITRE</td>
   <td>#QUANTITE</td>
   <td>#TOTAL€</td>
 </tr>
</table>
 </div>
</THELIA_panier>
</T_panier>
Glissez les photos de produit ici
<//T_panier>
 

Il s'agit donc d'un affichage très classique de panier. Notez que :

• Nous gérons un affichage spécial si aucun produit n'est présent dans le panier. Ce message tient lieu d'aider pour que l'utilisateur comprenne quoi faire.
• Chaque élément du panier est entouré d'une balise div. Cette balise va nous servir dans le paragraphe suivant pour pouvoir effacer les éléments un à un. Chaque balise est nommée avec la syntaxe pan_XXX

Gérer le bouton de suppression du panier

Petite sophistication : l'insertion d'une fonction de suppression de produits dans le panier tel qu'il est affiché par ajaxvuepanier.html

Commençons par insérer une petite image devant chacun des produits affichés dans le panier :

<a href="javascript:supprpanier(#ARTICLE);"><img src="trash-icon.png" border="0" /></a>

Cette ligne est un simple affichage à une fonction Javascript que l'on aura pris soin d'insérer au préalable :

<script type="text/javascript" language="javascript">
    function supprpanier(monid) 
    { 
       new Effect.SwitchOff("pan_"+monid);
    	new Ajax.Updater(' ','ajaxvuepanier.php',
       {
        evalScripts:true,
      	 parameters:'action=supprimer&article='+encodeURIComponent(monid)
       });
     };
</script>

On utilise là une des fonctions de Scriptaculous, "Effect.Switchoff", qui permet d'effacer avec un petit effet visuel une zone de la page. La zone mentionnée reprend le nom de type pan_XXX que nous avons utilisé précédemment.

On appelle ensuite à nouveau Ajax.Updater, mais cette fois-ci dans une optique un peu différente :

• Cette fois-ci, l'action évoquée est 'supprimer'
• On ne précise pas de nom de zone à rafraichir à l'issue du réaffichage, ce qui aura pour conséquence... de ne rien réafficher (ce n'est pas nécessaire, vu que la ligne supprimée l'aura été visuellement par le SwitchOff)