pouvoir choisir la quantité dans la liste des produits

djodjo57 · June 28, 2012

Bonjour,

J'aimerais savoir si il existe un moyen pour pouvoir directement choisir la quantité des articles à mettre dans le panier au niveau de la liste des produits. C'est à dire sans passer par le détail d'un article ?

Comme il existe déjà le bouton "ajouter au panier" ça serait bien de pouvoir modifier la quantité aussi.

Merci de vos réponses.

Jonathan

travisti · July 9, 2012

je suis preneur si jamais quelqu'un se propose pour nous aider !!

Bouillou · October 10, 2012

Moi aussi! Ce serait vraiment pratique et plus rapide pour le client.

L'idéal serait d'afficher la liste de la vue "récapitulatif de la commande"

Une idée?

fbrun · November 13, 2012

En m'inspirant des divers sujets sur cette question sur le forum anglais, j'ai modifié le code de la façon suivante sur un prestashop 1.5.2:

ajax-cart.js

Copiez le modules/blockcart/ajax-cart.js dans votre themes/votre theme/js/modules/blockcart
ajouter, après le bloc "//for product page 'add' button..." le code suivant:

//for list product page 'add' button...

$('ul#product_list .ajax_add_to_cart_button').unbind('click').click(function(){

var idProduct = $(this).attr('rel').replace('ajax_id_product_', '');

if ($(this).attr('disabled') != 'disabled')

ajaxCart.add(idProduct, null, false, this,$('#quantity_wanted_'+ idProduct).val());

return false;

});

product-list.tpl

modifiez ce fichier dans votre thème en ajoutant ce code (à adapter selon besoin)

(dans le bloc ligne 58 "{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}" et juste avant "{if isset($static_token)}") :

<p class="erh-quantite-produit" {if (!$allow_oosp && $product.quantity <= 0) OR $virtual OR !$product.available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>

<label>{l s='Quantity:'}</label>

<input type="text" name="qty" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product.minimal_quantity > 1}{$product.minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product.minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product.minimal_quantity});"{/if} />

</p>

Il faudra aussi ajouter la traduction "Quantity" dans l'interface d'administration -> Localisation -> Traductions -> front-office -> Product-list

cette portion de code a été adaptée depuis le product.tpl

Edited November 15, 2012 by fbrun (see edit history)

damienf · November 13, 2012

merci, j'essaie ça dès que j'ai un peu de temps

FredCD · November 15, 2012

Idem je prendrai le temps de regarder à ça dès que possible.

Si ceux qui ont testé peuvent donner leurs retours ce serait super ;-)

damienf · November 18, 2012

hélas ça ne marche pas avec mon thème

fbrun · November 19, 2012

La manip que j'ai donné était pour un prestashop 1.5.2, jen 'ai pas testé sur les autres. Par contre vérifie que tu as bien fait les modifications dans ton thème et pas celui par défaut (sauf si tu utilises celui-là).

Vide aussi le cache et au besoin, dans l'onglet performance, force la compilation des templates le temps de tester si celà met bien à jour la page de liste.

Edited November 19, 2012 by fbrun (see edit history)

damienf · November 19, 2012

en fait j'avais fait une erreur, ça marche parfaitement apparemment

merci beaucoup

Edited November 19, 2012 by damienf (see edit history)

FredCD · November 21, 2012

J'ai suivi les instructions mais ca ne fonctionne pas

Le champ quantité est bien présent, je modifie la quantité avant de cliquer sur le bouton "Ajouter au panier" mais quand j'affiche le contenu du panier le produit est présent mais la quantité est "1"

Je réalise mes tests avec une version 1.5.0.17, j'ai vidé le cache navigateur, testé avec plusieurs navigateurs, réglé le cache des templates sur "Forcer la compilation", vidé le cache Smarty ... mais rien n'y fait.

Des idées ?

Edit :

Après une mise-à-jour ves PS 1.5.2 le problème est le même.

Je pense que le champ input ne récupère pas la quantité saisie pour remplacer la valeur "1" par défaut de l'attribut "value" avant de la communiquer au panier....

Edited November 21, 2012 by FredCD (see edit history)

meeting03 · February 7, 2013

Bonjour,

Je rencontre le même problème, le champs et bien présent, mais ne prend pas en compte le changement de quantité, c'est toujours 1 article qui s'ajoute peu importe le nombre que je choisi.

Une idée ?

Merci d'avance

meeting03 · February 11, 2013

Un UP please ?

MathieuB · February 25, 2013

Bonjour,

si la boutique est configuré en mode dev (forcer la compile, désactiver le cacher)

aucune raison de vous user à penser que cela vient d'un cache mal vidé.

C'est probablement un soucis de fonction, attention si vous utilisez un theme personnalisé certains font appel à leur propre fichier .js donc vous pouvez aussi passer bcp de temps à modifier ceux du blockcart initial sans succès.

Je viens de réaliser ce développement en 1.4 sans difficulté (boutons ajout au panier par produit, modification qtt via input et bouton + ou - )

Je vais le faire pour une boutique 1.5, donnez moi le lien de la page de votre boutique, je regarderai déjà très rapidement si vous faites appel à la bonne fonction et si oui pourquoi celle-ci ne récupère pas la valeur.

il est simple de débugger ce genre de soucis avec un peu de maitrise de firebug.

damienf · February 25, 2013

pas de problème de mon côté avec une 1.5.2

les problèmes sont sans doute dû effectivement à un thème personnalisée

Vinc3nzo · March 19, 2013

Fonctionne Nickel sur Prestashop 1.5.3

cointech · April 24, 2013

Bonjour,

J'ai essayé sur version 1.5.4 (thème par defaut), le champs et bien présent, mais ne prend pas en compte le changement de quantité, c'est toujours 1 article qui s'ajoute quelque soit le nombre choisi.

Pourriez vous m'aider,

cointech · April 24, 2013

quelqu'un peut m'aider?

oblik · April 25, 2013

Cela m'interesse également.

Pouvoir afficher la quantité sur les produits en page d'accueil, ainsi que sur les produits associés serait aussi un plus pour prestashop.

Edited April 25, 2013 by oblik (see edit history)

admin974 · May 27, 2013

En m'inspirant des divers sujets sur cette question sur le forum anglais, j'ai modifié le code de la façon suivante sur un prestashop 1.5.2: ajax-cart.js
Copiez le modules/blockcart/ajax-cart.js dans votre themes/votre theme/js/modules/blockcart

ajouter, après le bloc "//for product page 'add' button..." le code suivant:

//for list product page 'add' button... $('ul#product_list .ajax_add_to_cart_button').unbind('click').click(function(){ var idProduct = $(this).attr('rel').replace('ajax_id_product_', ''); if ($(this).attr('disabled') != 'disabled') ajaxCart.add(idProduct, null, false, this,$('#quantity_wanted_'+ idProduct).val()); return false; }); product-list.tpl modifiez ce fichier dans votre thème en ajoutant ce code (à adapter selon besoin) (dans le bloc ligne 58 "{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}" et juste avant "{if isset($static_token)}") :

{l s='Quantity:'} 1}onkeyup="checkMinimalQuantity({$product.minimal_quantity});"{/if} />

Il faudra aussi ajouter la traduction "Quantity" dans l'interface d'administration -> Localisation -> Traductions -> front-office -> Product-list cette portion de code a été adaptée depuis le product.tpl

MERCI, FONCTIONNE TRES BIEN. presta 1.5.3.1

Nats · June 10, 2013

Bonjour,

J'ai essayé sur version 1.5.4 (thème par defaut), le champs et bien présent, mais ne prend pas en compte le changement de quantité, c'est toujours 1 article qui s'ajoute quelque soit le nombre choisi.

Pourriez vous m'aider,

Bonjour j'ai le même problème sous la version 1.5.4.1 et le changement de quantité n'est pas pris en compte.

Il faudrait juste pouvoir passer la valeur du champ texte à la place de add=1

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "[color=#ff0000]add=1[/color]&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart'}" >

Si je ne me trompe pas le traitement doit se faire également sur la classe "button ajax_add_to_cart_button exclusive" dans le js et non ajax_add_to_cart_button si je ne me trompe pas. Le product-list.tpl je n'ai pas de classe de ce nom

S'il vous plait aidez nous les 1.5.4.1 prestashop users

Nats · June 10, 2013

Je pensais que ça fonctionnait en passant la quantité dans add=xx mais ça ne marche la quantité ajoutée au panier est toujours de 1

dn-graphisme · October 31, 2013

Bonjour, cette astuce m'intéresse, mais effectivement il y'a bien une erreur avec le changement de quantité. Je suis sur Presta 1.5.5. Si quelqu'un a trouvé l'astuce merci d'avance

EDIT: J'ai réussi la manip en suivant ce tuto: http://www.psdtoopensource.com/how-to-add-quantity-box-in-product-list-in-prestashop/

A+

Edited November 1, 2013 by dn-graphisme (see edit history)

akinom · April 16, 2014

Bonjour,

Est-ce que quelqu'un a trouvé la solution? Pour moi le champs quantité est aussi bien présent, mais pareil ne prend pas en compte le changement de quantité, c'est toujours 1 article qui s'ajoute quelque soit le nombre choisi. J'utilise un template personnalisé.

bonne journée

shazamic · April 21, 2014

Salut,

chez moi, ça marche. J'ai utilisé un autre bout de code (je ne me rappelle plus la source).

Je suis en 1.5.6.2, avec le theme par défaut un peu customisé au couteau.

Dans Themes\tonnomdetheme\product-list.tpl :

ajouter vers la ligne 58, juste après {if ($product.allow_oosp || $product.quantity > 0)} et avant {if isset($static_token)}:


					<!-- ajout choix quantité -->
					{l s='Quantité :'}
<input id="quantity_wanted_{$product.id_product|intval}" type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />
					<!-- fin ajout choix quantité -->

j'espère n'avoir rien oublié. Dites-le moi au kazou

akinom · April 22, 2014

Merci shazamic pour votre réponse. le champ quantité s'affiche bien mais c'est toujours le même problème c'est toujours 1 article qui s'ajoute quelque soit le nombre choisi

guil182 · July 7, 2014

Bonjour,

Quelqu'un arrive t il à ajouter la quantité sur product_list en 1.6 ?

Si oui, merci de votre aide, les différents codes en 1.5 ne semblent pas fonctionnels....

guil182 · July 15, 2014

Bonsoir,

Je vais essayer d'être plus précis. Donc en V1.6.0.8

Modification de product_list.tpl

<label> <b> {l s='Quantity :'} </b> </label>

{section name=nbproduct loop=$product.quantity}

{if $smarty.section.nbproduct.iteration%$conditV==0}

<option value ="{$smarty.section.nbproduct.iteration}">{$smarty.section.nbproduct.iteration} </option>

{/if}

{/section}

</select>

</div>

Ma select apparait bien comme je le souhaite avec comme id : quantity_wanted_{$product.id_product|intval}

Modification de ajax-cart.js :

//for every 'add' buttons...

$('.ajax_add_to_cart_button').unbind('click').click(function(){

var idProduct = $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');

if ($(this).attr('disabled') != 'disabled')

//ajaxCart.add(idProduct, null, false, this); //ajout quantité product_list

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct+'').val());

return false;

});

et la malheureusement, la quantité ajoutée reste toujours à 1, la ligne

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct+'').val());

ne semble pas être prise en compte...

Merci d'avance pour votre aide.

guil182 · July 17, 2014

Bonjour,

Alors ce code marche finalement.

Même en désactivant le cache, videz le cache smarty sur le serveur, ca peut aider...

xavier-fr-uk-vn · October 3, 2014

nikel sur le 1.6.0.8

papich · December 1, 2014

Bonjour,

Alors ce code marche finalement.

Même en désactivant le cache, videz le cache smarty sur le serveur, ca peut aider...

bonjour,

puis je voir le résultat?

d'ailleurs si un developpeur passe par la pour développer directement un module ou à la team prestashop pour l'intégrer dans la prochaine version ^^

nertius · February 27, 2015

Le code a marché très bien pour moi, en revanche je suis d'accord avec le fait qu'il serait bien d'avoir cette fonctionnalité présente de base dans prestashop

mathurin · April 28, 2015

1.6.0.11

Petite Variante pour avoir un input (non un select) et les boutons pour ajouter ou diminuer la quantité :

Résultat sur la liste des produits :

product-list.tpl

Après ouverture de <div class="button-container">

<div class="quantity">

<label> <b> {l s='Quantity :'} </b>  </label><span class="clearfix"></span>
<input type="text" id="quantity_wanted_{$product.id_product|intval}" class="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" title="Quantity" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product.minimal_quantity > 1}{$product.minimal_quantity}{else}1{/if}{/if}"></input>

<a href="#" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}" class="btn btn-default button-minus product_quantity_down">
<span><i class="icon-minus"></i></span>
</a>
<a href="#" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}" class="btn btn-default button-plus product_quantity_up">
<span><i class="icon-plus"></i></span>
</a>
<span class="clearfix"></span>
</div>

Ajout de la bonne quantité au panier (ajax) :

/themes/mon-theme/js/modules/bockcart/ajax-cart.js

Recherchez "//for every 'add' buttons..."

Remplacez :

ajaxCart.add(idProduct, null, false, this, minimalQuantity);

Par :

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct+'').val());

Activer les boutons [ + ] et [ - ] :

/themes/mon-theme/js/category.js

A la fin du fichier ajoutez (addaptation des fonctions de product.js) :

// The button to increment the product value
$(document).on('click', '.product_quantity_up', function(e){
    e.preventDefault();
    fieldName = $(this).data('id-product');
	minQ = $(this).data('minimal_quantity');
	
    var currentVal = parseInt($('#quantity_wanted_'+fieldName).val());
		quantityAvailableT = 100000000;
    if (!isNaN(currentVal) && currentVal < quantityAvailableT)
        $('#quantity_wanted_'+fieldName).val(currentVal + 1).trigger('keyup');
    else
        $('#quantity_wanted_'+fieldName).val(currentVal + 1).trigger('keyup');
});
 // The button to decrement the product value
$(document).on('click', '.product_quantity_down', function(e){
    e.preventDefault();
   fieldName = $(this).data('id-product');
	minQ = $(this).data('minimal_quantity');
    var currentVal = parseInt($('#quantity_wanted_'+fieldName).val());
    if (!isNaN(currentVal) && currentVal > minQ)
        $('#quantity_wanted_'+fieldName).val(currentVal - 1).trigger('keyup');
    else
        $('#quantity_wanted_'+fieldName).val(minQ);
});

Un peu de CSS pour finir :

/themes/mon-theme/css/product_list.css

div.quantity .text{
  width: 78px;
  height: 27px;
  padding: 0 6px;
  float: left;
  line-height: 27px;
  }
  ul.product_list.list > li .right-block .right-block-content .button-container div.quantity .btn{
	 float: left;
	 clear:none;
	 margin-left:5px;
  }
  .grid div.quantity{
	display:none;   
   }

Voila je pense avoir été assez explicite

Edited April 28, 2015 by mathurin (see edit history)

TELEMATIQUE · May 5, 2015

Mathurin,

Nous venons de réaliser ton tutoriel sur un PrestaShop 1.6.0.14 mais cela ne marche pas.

Pourrais-tu me dire dans le CSS où tu place le code ?

Merci

tahoma22 · August 15, 2015

1.6.0.11

Petite Variante pour avoir un input (non un select) et les boutons pour ajouter ou diminuer la quantité :

Résultat sur la liste des produits :

product-list.tpl

Après ouverture de <div class="button-container">

<div class="quantity">

<label> <b> {l s='Quantity :'} </b>  </label><span class="clearfix"></span>
<input type="text" id="quantity_wanted_{$product.id_product|intval}" class="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" title="Quantity" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product.minimal_quantity > 1}{$product.minimal_quantity}{else}1{/if}{/if}"></input>

<a href="#" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}" class="btn btn-default button-minus product_quantity_down">
<span><i class="icon-minus"></i></span>
</a>
<a href="#" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}" class="btn btn-default button-plus product_quantity_up">
<span><i class="icon-plus"></i></span>
</a>
<span class="clearfix"></span>
</div>

Ajout de la bonne quantité au panier (ajax) :

/themes/mon-theme/js/modules/bockcart/ajax-cart.js

Recherchez "//for every 'add' buttons..."

Remplacez :

ajaxCart.add(idProduct, null, false, this, minimalQuantity);

Par :

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct+'').val());

Activer les boutons [ + ] et [ - ] :

/themes/mon-theme/js/category.js

A la fin du fichier ajoutez (addaptation des fonctions de product.js) :

// The button to increment the product value
$(document).on('click', '.product_quantity_up', function(e){
    e.preventDefault();
    fieldName = $(this).data('id-product');
	minQ = $(this).data('minimal_quantity');
	
    var currentVal = parseInt($('#quantity_wanted_'+fieldName).val());
		quantityAvailableT = 100000000;
    if (!isNaN(currentVal) && currentVal < quantityAvailableT)
        $('#quantity_wanted_'+fieldName).val(currentVal + 1).trigger('keyup');
    else
        $('#quantity_wanted_'+fieldName).val(currentVal + 1).trigger('keyup');
});
 // The button to decrement the product value
$(document).on('click', '.product_quantity_down', function(e){
    e.preventDefault();
   fieldName = $(this).data('id-product');
	minQ = $(this).data('minimal_quantity');
    var currentVal = parseInt($('#quantity_wanted_'+fieldName).val());
    if (!isNaN(currentVal) && currentVal > minQ)
        $('#quantity_wanted_'+fieldName).val(currentVal - 1).trigger('keyup');
    else
        $('#quantity_wanted_'+fieldName).val(minQ);
});

Un peu de CSS pour finir :

/themes/mon-theme/css/product_list.css

div.quantity .text{
  width: 78px;
  height: 27px;
  padding: 0 6px;
  float: left;
  line-height: 27px;
  }
  ul.product_list.list > li .right-block .right-block-content .button-container div.quantity .btn{
	 float: left;
	 clear:none;
	 margin-left:5px;
  }
  .grid div.quantity{
	display:none;   
   }

Voila je pense avoir été assez explicite

tahoma22 · August 15, 2015

Cela fonctionne... On peut même modifier

.grid div.quantity{
margin-left:auto;

margin-right:auto;

margin-bottom:10px;

width: 156px;
}

pour obtenir le même résultat en grille... Par contre cela ne fonctionne pas pour homefeatured...Si quelqu'un a la solution ? Merci d'avance.

cd85 · September 21, 2015

Bonjour et merci mathurin !

Tuto très clair, suivit à la lettre pour un résultat qui marche en 1.6.0.14.

Juste un petit soucis au niveau des frais de port. Avec l'ajout direct depuis la "product_list", les frais de port ne s'actualisent pas.

J'ai un franco à 99 € HT, et les frais de port restent bloqués sur le montant au dessous du franco (soit 9 €). Impossible de les actualiser non plus dans le récap de la commmande.

Une petite idée ?

merci d'avance pour l'aide.

CD

cd85 · September 22, 2015

Re,

Je retire ce que j'ai écris, ça marche nikel... merci encore !

cd85 · September 29, 2015

Bonjour,

J'ai une petite question. Donc, tout cela fonctionne très bien, mis à part sur la page des promotions et sur celle des nouveaux produits. Quelqu'un a-t'il le même problème ? Quel(s) fichier(s) faut-il modifier pour que cela fonctionne ? Je vous remercie par avance.

CD

benadada · August 25, 2016

Bonjour,

déjà super cette méthode marche bien... mais voilà je suis pas une flèche en programmation en gros je se survol à peine...

j'aimerai bien avoir un renvoi de la quantité d'un article qui est déjà dans le panier dans le champ quantité que vous venez de créer... et, si possible modifier les boutons + et - sur leur fonctionnement... c'est à dire le plus incrémente le champ quantité et le moins le décrémente (je sais pas si c'est français ça) et fais varier automatiquement le panier, ce qui permet de se passer du bouton ajouter au panier...

exemple le site auchandrive.....

en vous remerciant pour l'aide que vous pourrez m'apporter.

Bondaty and Co · July 5, 2017

Bonjour,

Je déterre le sujet.
Quelqu'un a t'il eu à ajouter un select pour chaque attribut dans le product list avec un seul bouton de mise au panier.

Pour mieux comprendre

1 produit

4 déclinaisons avec 4 selects quantité
1 bouton ajout au panier

Le client renseigne la quantité pour chaque chaque déclinaison et ajoute le tout au panier.

Merci,

Christophe

ds2kx · October 30, 2017

Bonjour, je déterre un peu.

ca fonctionne dans la liste des produits mais pas dans les populaires et les promos.

Une idée ?

Merci.

pouvoir choisir la quantité dans la liste des produits

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment