Jump to content

[Résolu] Ajouter - et + pour la Qté sur la fiche produit

lordbdp
 Share

Recommended Posts

lordbdp Newbie

lordbdp

Posted
Posted (edited)

Bonjour,

 

Je voudrais savoir comment ajouter - et + à coté de la valeur de la quantité affichée sur la fiche produit en front-office afin que le client augmente ou diminue la valeur de la quantité, tout en lui laissant la possibilité de saisir la valeur qu'il souhaite.

 

Merci d'avance pour votre aide.

Edited by lordbdp (see edit history)
Link to comment
Share on other sites
Vectorus Newbie

Vectorus

Posted
Posted
Topic [Résolu]

 

Si, après avoir posté dans un topic, vous trouvez une solution à votre problème, merci de venir le signaler et de décrire cette solution.

Il n'y a rien de plus frustrant pour les utilisateurs qui tomberont plus tard sur votre post que de lire "C'est bon, j'ai trouvé, merci…".

 

De plus, si vous êtes l'auteur du topic pour lequel une solution a été apportée, éditer le premier post et ajouter la mention [Résolu] au début du titre.

 

Pour marquer un topic comme [Résolu] :

- Editer le premier post du topic en cliquant sur le bouton "Editer",

- Cliquer sur le bouton "Utiliser l'éditeur complet",

- Ajouter la mention "[Résolu] " au début du titre de votre topic et cliquez sur le bouton "Envoyer le message modifié".

 

 

 

Les personnes n'appliquant pas ceci (à la demande des modérateurs ou des autres utilisateurs) verront leurs nouveaux topics fermés le temps d'y remédier.

Link to comment
Share on other sites
  • 3 weeks later...
lordbdp Newbie

lordbdp

Posted
  • Author
Posted (edited)

Je reviens sur le sujet pour connaître une autre solution pour avoir + et - sur le coté du nb de qté et l'un au dessous de l'autre.

Comme dans le récapitulatif de commande 2013-05-09_1709.png. Comme je ne trouve pas à quelle page le récapitulatif se trouve, je ne peux voir le code...

 

Merci d'avance.

Edited by lordbdp (see edit history)
Link to comment
Share on other sites
lordbdp Newbie

lordbdp

Posted
  • Author
Posted

Alors j'ai tenté de modifier

<!-- quantity wanted -->
<p id="quantity_wanted_p"{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" 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>

par

 

<td class="cart_quantity"{if isset($customizedDatas.$productId.$productAttributeId) AND $quantityDisplayed == 0} style="text-align: center;"{/if}>
 {if isset($cannotModify) AND $cannotModify == 1}
  <span style="float:left">
   {if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}
   {else}
 {$product.cart_quantity-$quantityDisplayed}
   {/if}
  </span>
 {else}
  {if isset($customizedDatas.$productId.$productAttributeId) AND $quantityDisplayed == 0}
   <span id="cart_quantity_custom_{$product.id_product}_{$product.id_product_attribute}_{$product.id_address_delivery|intval}" >{$product.customizationQuantityTotal}</span>
  {/if}
  {if !isset($customizedDatas.$productId.$productAttributeId) OR $quantityDisplayed > 0}
   <div class="cart_quantity_button">
   <a rel="nofollow" class="cart_quantity_up" id="cart_quantity_up_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" href="{$link->getPageLink('cart', true, NULL, "add=1&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_address_delivery={$product.id_address_delivery|intval}&token={$token_cart}")}" title="{l s='Add'}"><img src="{$img_dir}icon/quantity_up.gif" alt="{l s='Add'}" width="14" height="9" /></a><br />
   {if $product.minimal_quantity < ($product.cart_quantity-$quantityDisplayed) OR $product.minimal_quantity <= 1}
   <a rel="nofollow" class="cart_quantity_down" id="cart_quantity_down_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" href="{$link->getPageLink('cart', true, NULL, "add=1&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_address_delivery={$product.id_address_delivery|intval}&op=down&token={$token_cart}")}" title="{l s='Subtract'}">
 <img src="{$img_dir}icon/quantity_down.gif" alt="{l s='Subtract'}" width="14" height="9" />
   </a>
   {else}
   <a class="cart_quantity_down" style="opacity: 0.3;" href="#" id="cart_quantity_down_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" title="{l s='You must purchase a minimum of %d of this product.' sprintf=$product.minimal_quantity}">
 <img src="{$img_dir}icon/quantity_down.gif" width="14" height="9" alt="{l s='Subtract'}" />
   </a>
   {/if}
   </div>
   <input type="hidden" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}_hidden" />
   <input size="2" type="text" autocomplete="off" class="cart_quantity_input" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}"  name="quantity_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" />

  {/if}
 {/if}
</td>

 

Mais je confirme que c'est pas ça du tout. Pourtant ce sont ces lignes que l'on retrouve dans quasiment chaque *product*.tpl du thème...

Link to comment
Share on other sites
Vectorus Newbie

Vectorus

Posted
Posted

Je n'ai pas testé mais ça devrait resembler à quelque chose comme ça dans le product.tpl

<!-- quantity wanted -->
<p id="quantity_wanted_p"{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>
<span class="btn-qty"><a href="#" class="btn-down">-</a></span>
<br />
<span class="btn-qty"><a href="#" class="btn-up">+</a></span>
<input type="text" name="qty" id="quantity_wanted" 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>

Après il faudra surement jouer aussi avec le css pour avoir le style désiré.

Link to comment
Share on other sites
Vectorus Newbie

Vectorus

Posted
Posted

Comme ça peut-être :

<!-- quantity wanted -->
<p id="quantity_wanted_p"{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>
<div style="height:40px;width:25px;"><span class="btn-qty"><a href="#" class="btn-down">-</a></span>
<br />
<span class="btn-qty"><a href="#" class="btn-up">+</a></span></div>
<input type="text" name="qty" id="quantity_wanted" 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 faut jouer avec height:XXpx;width:XXpx; et le css pour obtenir le résultat souhaité ensuite.

Link to comment
Share on other sites
lordbdp Newbie

lordbdp

Posted
  • Author
Posted

Jai fait ça :

dans global.css, j'ai ajouté :

#bt_plus {
background : #eee url(../img/plus.png) no-repeat left top;
}
#bt_moins {
background : #eee url(../img/moins.png) no-repeat left top;
}

 

Et dans product.tpl :

<!-- quantity wanted -->
  <p id="quantity_wanted_p"{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>
   <span class="btn-qty"><a href="#" class="bt_moins">-</a></span>
   <input type="text" name="qty" id="quantity_wanted" 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} />
   <span class="btn-qty"><a href="#" class="bt_plus">+</a></span>
  </p>

 

Mais aucun changement ensuite ne se fait :wacko:

Link to comment
Share on other sites
lordbdp Newbie

lordbdp

Posted
  • Author
Posted (edited)

Alors j'ai fait de cette façon mais maintenant j'ai des carrés noirs à la place :

Dans global.css :

/* Boutons + et - pour quantite ******************************************************************* */
.bt_plus {
background:url(../img/plus.png) no-repeat left top;
}
.bt_moins {
background:url(../img/moins.png) no-repeat left top;
}

 

Dans product.tpl :

<!-- quantity wanted -->
  <p id="quantity_wanted_p"{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>
<span class="btn-qty"><a href="#" class="bt_moins" width:"16px" height:"21px"></a></span>
<input type="text" name="qty" id="quantity_wanted" 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} />
<span class="btn-qty"><a href="#" class="bt_plus" width:"16px" height:"21px"></a></span>
  </p>

 

J'ai testé aussi comme cela mais aucun changement :

<!-- quantity wanted -->
  <p id="quantity_wanted_p"{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>
   <span class="btn-qty"><a href="#" img scr="../img/moins.png" alt="Moins" width="16px" height="21px"></a></span>
   <input type="text" name="qty" id="quantity_wanted" 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} />
   <span class="btn-qty"><a href="#" img scr="../img/plus.png" alt="Plus" width="16px" height="21px"></a></span>
  </p>

 

Comment faire disparaître ces carrés noirs ?

Edited by lordbdp (see edit history)
Link to comment
Share on other sites
lordbdp Newbie

lordbdp

Posted
  • Author
Posted (edited)

J'ai trouvé d'où il y a conflit mais je ne vois pas comment changer sans tout faire disparaître. En plus de global.css il y a aussi dans product.css :

/* QUANTITY ##################################################################### */
.btn-qty{display: inline-block;}.btn-qty a{width:20px;height:20px;background:#000;color:#fff;display:none;text-align:center;line-height:18px;text-decoration:none;font-weight:bold;}.btn-qty a:hover{background:#333333;color:#fff;}

 

Si j'ai le maleur de modifier ou supprimer un morceau de ce code, tout disparait...

 

C'est soit cette partie à modifier soir dans le footer.tpl la partie Javascript:

<!-- on affiche le script uniquement si l'on se trouve sur la page produit -->
{if $page_name eq 'product'}
{literal}
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
var btn = $(".btn-qty a");
//on affiche les boutons +/-
$(btn).css('display','block');
$(btn).click(function() {
var $button = $(this);
var input_qtity = $('#quantity_wanted');
var qty_value=$(input_qtity).val();
var qty_min=parseFloat($('#minimal_quantity_label').html());
var qty_min_p = $('#minimal_quantity_wanted_p');
//on vérifie si le le produit ou la combinaison a une quantité minimum de commande
if($('#minimal_quantity_wanted_p').is(':hidden')){
var min=false;
}
else
{
var min=true;
}
//si le btn a la class btn-up, on est sur le btn +
if ($button.hasClass('btn-up')) {
var newVal = parseFloat(qty_value) + 1;
$(input_qtity).val(newVal);
$(qty_min_p).css('color','');
$(input_qtity).css('border', '');
}
else
{
//btn -
//condition pour vérifier que le champ est >= 1
if (qty_value - 1 >= 1) {
//minimum de commande et qtité >= mini de commande
if (min=true && qty_value - 1 >= qty_min) {
var newVal = parseFloat(qty_value) - 1;
$(input_qtity).val(newVal);
$(qty_min_p).css('color','');
$(input_qtity).css('border', '');
}
// qtité <= mini de commande
else if(min=true && qty_value - 1 <= qty_min)
{
$(qty_min_p).css('color','red');
$(input_qtity).css('border', '1px solid red');
}
}
}
return false;
});
});
// ]]></script>
{/literal}
{/if}

 

Dans quoi je me lance moi....

Edited by lordbdp (see edit history)
Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...