Comme vous le savez, le thème par défaut et les nouvelles versions de PrestaShop permettent de profiter d’un panier AJAX.

Alors, concrètement l’AJAX permet d’effectuer des actions côté serveur sans rafraichir la page en cours, en clair, votre panier se met à jour et s’enregistre sans rafraichir la page. On le voit par défaut, en cliquant sur ‘Ajouter au panier’ sur un produit, un rectangle se forme et va jusqu’au panier pour ajouter le produit et mettre à jour le prix.

C’est vraiment une magnifique aide, car l’utilisateur dispose d’une navigation très facile.

Cependant, ce rectangle reste un peu triste, nous allons ici personnaliser notre ajout au panier aux couleurs de votre boutique.

Voici un résultat possible, que vous pourrez essayer sur notre boutique :

En cliquant sur Ajouter au panier, une icône apparait et conduit notre produit au panier, l’effet est bien plus personnalisé à votre boutique.

Nous allons voir ici comment faire cela.

Alors, premier objectif, contrôler la vitesse du transfert du panier. Pour ce faire, rendez-vous sur votre serveur, et chercher le dossier Modules (en accédant depuis un client FTP).

Ce dossier contient tous les modules de votre boutique, les modules sont les options que vous pouvez gérer depuis la partie Modules de votre panneau d’administration, logique non ? …

Dans le dossier ‘Modules’, cherchez un dossier qui s’appelle : ‘Blockcart’, qui est le module Panier de votre boutique. Dans ce dossier, le fichier qui va nous intéresser est le fichier : ‘ajax-cart.js’.

Ce fichier de script contient le code nécessaire pour votre panier. Rendez-vous à la ligne 177 (ouvrez ce fichier avec un éditeur de texte, Notepadd++ est idéal).

Vous devriez voir le bout de code suivant aux alentours :

else
 elementToTransfert = $(addedFromProductPage ? 'div#image-block' : ('.ajax_block_product_id_' + idProduct) );
 elementToTransfert.TransferTo({
 to: $('#cart_block').get(0),
 className:'transferProduct',
 duration: 1500,
 complete: function () {
 ajaxCart.updateCart(jsonData);
 //reactive the button when adding has finished
 if (addedFromProductPage)
 $('body#product p#add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
 else
 $('.ajax_add_to_cart_button').removeAttr('disabled');
 }
 });

La ligne qui va surtout nous intéresser est celle-la :

 duration: 1500,

C’est ici que la vitesse du transfert est gérée, en millisecondes. Par défaut, elle doit être à 600, une durée de 1300 à 1600 est une bonne valeur pour bien montrer l’icône. Gardez le fichier ouvert et nous allons maintenant afficher l’icône voulue.

Sur notre boutique, nous pouvons voir en regardant la source HTML de celle-ci qu’un élément est présent sur les pages, en fin de code. On le voit ici :

Cet élément est une Div avec comme id : transferHelper. Ceci est le rectangle qui bouge lors de l’ajout. Maintenant, nous allons donc lui ajouter une couche de CSS pour décorer cet élément.

Du coup, direction le dossier Themes de votre boutique, et rendez-vous dans le dossier du Theme installé (attention : seuls certains thèmes acceptent le panier Ajax, notamment le thème par défaut de PrestaShop).

Dans ce dossier, ouvrez le dossier CSS et ensuite le fichier global.css. Voici ici tout le CSS de votre boutique, beaucoup de lignes en général …

Direction la fin du fichier pour ajouter les lignes suivantes :

#transferHelper {
 background:url(../img/addToCart.png) no-repeat center top;
 border:none;
}

Ceci indique que nous appliquons un style à l’élément transferHelper, qui est à la base notre rectangle de transfert.

Alors, le border:none indique que nous enlevons la bordure du rectangle actuelle, qui nous ne servira plus.

Et enfin, le plus intéressant est l’ajout de l’image en fond en jouant sur le background.

Il faut évidement créer et ajouter votre image dans le dossier ‘img’ de votre thème. Pour l’image, l’idéal est une taille de 128×128 pixels, et PNG bien sûr pour avoir le fond transparent (la transparence est non supporté par défaut sur Internet Explorer 6).

Voila, vous possédez désormais profiter de votre nouvelle icône, n”hésitez pas à revenir sur la ‘duration’ de votre fichier ajax-cart.js, pour avoir le résultat désiré.

En espérant que tout marche pour vous !