Des champs de quantités rapides sur Prestashop (ép. 100)

Sur une partie des sites e-commerce il est parfois frustrant de devoir accéder au détail de la fiche produit pour pouvoir mettre l’article dans son panier (et bien sûr pouvoir indiquer la quantité désirée).

Est-ce que vos clients achètent beaucoup de produits ?

Il y a 2 types de sites e-commerce, ceux où les clients achètent en principe entre 1 et 5 produits et ceux ou le panier peut-être rempli de nombreux articles (plus de 10). Si vous vendez des produits pas chers, vos clients peuvent tout à fait acheter une 20aine de références différentes et dans ce cas, il est « énervant » pour le client de devoir entrer dans la fiche produit à chaque fois… pour déclencher l’ajout au panier avec le bon choix de quantité.

Une règle importante en e-commerce ? Limiter le nombre de clics

Il est important de pouvoir faciliter le processus d’achat et aussi de faire gagner du temps à vos clients. En affichant le champ de la quantité directement dans les listings des produits, cela permet d’économiser 1 clic + 1 retour en arrière de page (puis multipliez ça par le nombre de produits & visiteurs, ça peut être important). Attention « mais pas que »… vous économisez aussi des ressources niveau serveur (car moins de pages sont chargées)… et cela est bien plus confortable pour la navigation surtout si vous êtes sur un smartphone et que votre connexion n’est pas super rapide.

Sur les accessoires c’est bien utile

Peut-être que pour votre business cela n’est pas forcément ultra-pertinent d’ajouter cette fonctionnalité sur tous les listing. En revanche, il peut-être intéressant de l’activer uniquement sur la fiche produit en utilisant la gestion des accessoires (je montre une méthode alternative dans la vidéo). Au fait, vous avez configuré vos produits accessoires ? C’est super intéressant pour proposer une offre complète & concise et cela va vous permettre d’augmenter le montant du panier moyen.

Cet ajout ne pénalisera pas votre référencement

Ah ben oui l’autre jour je parlais des mots clés qui tuent votre SEO et bien ce qui est intéressant avec ma méthode c’est qu’elle n’injecte pas de texte. Oui, il n’y a pas de mention « Ajouter au panier » ou encore le terme « Quantité », tout est simplifié au minimum afin de ne pas diluer le contexte sémantique de votre page. Un autre avantage aussi c’est que vous n’avez pas besoin de traduire l’interface, c’est universel… D’ailleurs si vous êtes en galère avec les traductions Prestashop, vous pouvez lire ce billet.

Economiser encore 49,99€ ?

Ahahaha déjà que je vous ai déjà fait économiser 50€ sur les produits en nouveauté… et bien BAM je remets ça encore cette semaine. Pour ceux qui veulent pas s’embêter avec la technique (et vous avez raison), vous pouvez bien sûr acheter le module Prestashop suivant qui semble faire le même travail. Comme toujours j’insiste vraiment sur ce point, ne surchargez pas Prestashop de modules… vous n’avez pas besoin de 36’000 fonctionnalités pour vendre, la plupart des modules que vous installez « ne vous aident pas à vendre plus ». Si vous ne connaissez pas encore ma méthode « DESAKTIVTOUT » pour Prestashop je vous invite à la lire, je suis sûr que ça vous amusera beaucoup.

Pour ce tutoriel Prestashop vous avez à disposition :

• 1 x fichier stylesheets.tpl (pour ajouter Font Awesome)
• 1 x fichier product.tpl (pour le bouton ajout au panier)
• 1 x fichier custom.js (pour gérer la notion +/-)
• 1 x fichier custom.css (pour mettre en forme le tout)

Télécharger

Résumé de la vidéo : Dans les listes produits Prestashop intégrez la gestion des quantités

• Comme d’habitude assurez-vous d’avoir bien désactivé tous les caches Prestashop afin de bien pouvoir visualiser vos changements.
• La 1ère étape est d’intégrer la librairie Font Awesome afin de pouvoir afficher les icônes « + » et « – » … hum oui on aurait pu faire plus simple avec 2 images.
• Dans le fichier TPL du produit, on ajoute un nouveau bout de formulaire avec le champ de quantité & le bouton d’ajout au panier.
• On intègre ensuite le comportement Javascript dans le fichier « custom.js » pour gérer la notion du clic sur les 2 boutons des quantités et augmenter / décrémenter les quantités.
• Enfin on met en forme tout ça… Wouaaaa c’est beau finalement !
• Sur la tablette et le mobile on teste, yes ça marche aussi.
• Pour finir je teste un exemple d’affichage « que » sur la partie accessoires de la fiche produit… qui sera certainement utile pour une majorité d’e-commerçants.