Afficher les images des produits dans le BlockCart ajax de prestashop 1.5.6

Le problème se situe dans le module blockcart, souvent placé dans le header du site.

Premier point : corriger bug affichage du nom du produit dans le blockcart ajax
Quand l’utilisateur ajoute un article dans son panier(cart), une petite animation javascript envoie l’image du produit dans le blockcart ajax. Si aucun rafraîchissement de la page n’est effectué le panier affiche « … » à la place du nom produit. Pas terrible.

Pour corriger ce bug :

1) Dans le répertoire du module blockcart, ouvrir le fichier ajax-cart.js et modifier :

prestashop bug affichage produit blockcart ajax

2) Ouvrir le fichier blockcart-json.tpl et modifier :

prestashop bug affichage produit blockcart ajax

3) Ouvrir le fichier blockcart.tpl et modifier :

prestashop bug affichage produit blockcart ajax

Affichage des produits dans le blockcart ajax

Deuxième point : Afficher les images des produits dans le blockcart.
Pour ce faire il faut intervenir sur le code tpl et ajax. Il faut ajouter le code html/smarty de l’image dans le tpl et ajouter un bout de code javascript dans le js. Sans l’ajout du code js, on se retrouve avec le même problème qu’au point précédent, l’image ne s’affichera qu’après un rafraîchissement de la page.

Pour afficher les images dans le blockcart ajax :

1) Dans l’admin de prestashop, Préférences / Images :

Memoriser les noms des images qui concernent l’affichage des produits dans le module homefeatured et dans les fichiers tpl : product et product-list. Dans mon cas, ils sont nommés home_default et large_default. J’ai besoin aussi de la miniature small_default et ses dimensions pour son bon affichage dans le blockcart.
prestashop bug affichage produit blockcart ajax

2) Ouvrir le fichier blockcart.tpl et ajouter le code html / smarty :

Dans ce code, j’appelle l’image nommée small_default qui possède ses attributs de height et width.
affichage image blockcart ajax prestashop

3) Ajouter un code spécifique dans la balise image :

Dans les fichiers homefeatured.tpl du module homefeatured, product.tpl et product-list.tpl du thème il faut ajouter ce code (data-id) dans la balise img. Il permet d’assigner l’id de l’article dans l’image et il est utiliser dans le js d’après.
affichage image blockcart ajax prestashop

4) Ouvrir le fichier ajax-cart.js et écrire le code :

Ecrire le code à la suite du code du Premier point.
affichage image blockcart ajax prestashop

Participer à l’article...

Vous devez être Connecté pour poster un commentaire.