Ajouter une notification lors de l'ajout au panier

[Olivier CLEMENCE]

Bonjour tout le monde,
je créé actuellement une boutique sous prestashop et j'avais un petit problème lors de l'ajout d'un produit au panier.
En effet mon panier n'étant pas toujours visible à l'écran (à cause des ascenseurs lorsqu'il y a beaucoup de produits affichés), lorsque le visiteurs ajoute un produit au panier il ne voit pas l'animation dans le panier. Par conséquent il ne sait pas que le produit a bien été ajouté.

J'ai donc décidé de faire également apparaître à coter du bouton "ajouter au panier" une phrase clignotante.

Je vous livre ici le code qu'il faut ajouter:

Dans votre fichier product_list.tpl placez cette ligne juste après le bouton "ajouter au panier":

{l s='Added to cart'}

ATTENTION: Pensez à traduire 'added to cart' dans les outils de traduction pour le front office


Dans le fichier "modules/blockcart/ajax-cart.js" vers la ligne 178 vous trouverez le code suivant:

elementToTransfert.TransferTo({
 to: $('#cart_block').get(0),
 className:'transferProduct',
 duration: 800,
 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');
         }
       });    

Il suffit de le remplacer par:

elementToTransfert.TransferTo({
 to: $('#cart_block').get(0),
 className:'transferProduct',
  duration: 800,
  complete: function () {
     ajaxCart.updateCart(jsonData);
     if(!jsonData.hasError)
       $('#product_msg_'+idProduct).fadeIn(500).fadeTo("fast",0).fadeTo("fast",1).fadeTo("fast",0).fadeTo("fast",1).fadeTo("fast",0).fadeTo("fast",1).fadeOut(500);
          //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');
             }
        });    

Pour ce qui veulent modifier l'effet de clignotement il suffit de jouer avec cette ligne:

$('#product_msg_'+idProduct).fadeIn(500).fadeTo("fast",0).fadeTo("fast",1).fadeTo("fast",0).fadeTo("fast",1).fadeTo("fast",0).fadeTo("fast",1).fadeOut(500);                            

[leeloo]

Bonjour,
Petite astuce trouvée par hasard puis testée et aussitôt adoptée.

Merci!
PS: Il faudrait faire l'adaptation aussi pour la page product.tpl