Jump to content
djodjo57

pouvoir choisir la quantité dans la liste des produits

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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)}") :

 

<!-- START quantity wanted -->

<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>

<!-- END quantity wanted -->

 

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 by fbrun (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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 by fbrun (see edit history)

Share this post


Link to post
Share on other sites

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 by FredCD (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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 by oblik (see edit history)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by dn-graphisme (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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.... :unsure:

Share this post


Link to post
Share on other sites

Bonsoir,

 

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

 

Modification de product_list.tpl


<div class="quantity">
 
<label> <b> {l s='Quantity :'} </b>  </label>
<select id="quantity_wanted_{$product.id_product|intval}" class="text" style="width:auto;" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" title="Quantity" type="text">
{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.

 

  • Like 1

Share this post


Link to post
Share on other sites

Bonjour,

Alors ce code marche finalement.

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

Share this post


Link to post
Share on other sites

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 ^^

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :

 

UsA6Ll.jpg

 

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 by mathurin (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :

 

UsA6Ll.jpg

 

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  :)

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Re,

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More