Modification affichage dans un theme - Fiche Produit

[AGelenne]

Bonjour,

J'ai un soucis relatif a l'utilisation la quantité minimale de vente d'un produit. Je souhaiterais que, dans la liste des produits, sur la fiche de produit, lorsque l'utilisateur modifie la quantité a commander via les boutons + / - ou les fleches Up/down, la quantité ne peut être qu'un multiple de la quantité minimale définie pour la vente de ce produit: par ex, le produit REF_001 est définit avec une quantité minimale pour la vente de 6. Donc lorsque l'utilisateur augmente la quantité désirée, cela devriendrait par ex 12, 18 etc... 

Pour cela, j'ai modifié le fichier product.tpl tel que ci-dessous (le fichier complet est en pièce jointe), mais voici le bout de code modifié (en environ de la ligne 183), en ajoutant step="{$min_quantity}"

{if Module::isEnabled('an_theme')}
                    {if Module::getInstanceByName('an_theme')->getParam('product_addtocart') == 'button' or Module::getInstanceByName('an_theme')->getParam('product_addtocart') == 'qtyandbutton' }
                        <div class="atc_div">
                        {if Module::getInstanceByName('an_theme')->getParam('product_addtocart') == 'qtyandbutton'}
                            <input name="qty" step="{$min_quantity}" type="number"  min="{$min_quantity}" max="{$product.quantity}" class="form-control atc_qty" value="{$min_quantity}"/>
                        {/if}
                            <button class="add_to_cart btn btn-primary btn-sm" onclick="mypresta_productListCart.add({literal}$(this){/literal});">
                                {l s='Add to cart' d='Shop.Theme.Actions'}
                            </button>
                        </div>
                    {/if}
                {/if}

Cela fonctionne bien, sur la présentation en liste. Dans la zone contenant les quantités augmente / diminue bien de la quantité minimale définie pour le produit.

 

Cependant j'ai un soucis lorsque je me trouve sur la fiche détaillée du produit. Sur cette fiche, la zone contenant la quantité n'a pas le meme look (soit..) mais surtout je n'arrive pas de modifier le code pour obtenir le meme comportement que sur la fiche en mode catalogue (plusieurs produits sur la meme page..)

Pour tenter de modifier le code, j'ai modifier le fichier product-add-to-cart.tpl au environ de la ligne 16 pour y placer la même définition que dans le fichier product.tpl.

<div class="product-quantity product-variants-item clearfix">
      <span class="control-label">{l s='Quantity uuu' d='Shop.Theme.Catalog'}</span>
      <div class="atc_div">
        <input type="number" name="qty" id="quantity_wanted" value="{$product.quantity_wanted}" class="form-control atc_qty" min="{$product.minimal_quantity}"

             step="{$product.minimal_quantity}" aria-label="{l s='Quantity' d='Shop.Theme.Actions'}">
      </div>
    </div>

Lors de l'affichage de la page, on peut voir avec les outils de dev (Chrome), la div telle que définie dans le fichier tpl,

Contenu de la div

<div class="product-add-to-cart">    <div class="product-quantity product-variants-item clearfix"> 
          <span class="control-label">Quantity uuu</span>
                <div class="atc_div">
                         <div class="input-group bootstrap-touchspin">
                                 <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>            
                                  <input type="number" name="qty" id="quantity_wanted" value="6" class="form-control atc_qty" min="6" step="6" aria-label="Quantité" style="display:                                                          block;">

                                 <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
                                 <span class="input-group-btn-vertical">
                                           <button class="btn btn-touchspin js-touchspin bootstrap-touchspin-up" type="button">
                                                <i class="material-icons touchspin-up"></i>
                                           </button>
                                           <button class="btn btn-touchspin js-touchspin bootstrap-touchspin-down" type="button">
                                               <i class="material-icons touchspin-down"></i>
                                           </button> 

                                 </span>
                        </div>
               </div>
     </div>

cependant elle est maintenant  précédée d'éléments tels que 

• <div class="input-group bootstrap-touchspin">
• <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>

et suivie d'éléments tels que

• <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
•  <span class="input-group-btn-vertical">
•                           <button class="btn btn-touchspin js-touchspin bootstrap-touchspin-up" type="button">
•                                 <i class="material-icons touchspin-up"></i>
•                           </button>
•                           <button class="btn btn-touchspin js-touchspin bootstrap-touchspin-down" type="button">
•                                <i class="material-icons touchspin-down"></i>
•                           </button>
• </span>
•   </div>
• </div>
•  </div>

 

    Je ne comprend pas et donc je ne trouve pas le(s) fichier(s) que je dois modifier pour obtenir le bon résultat.

J'ai manuellement le bon résultat, si depuis les outils de dev sur Chrome, je modifie l'html en supprimant les div/class ajoutées.... mais un simple refresh de la page me reconstruit l'html avec les éléments non désirés. 

Avez vous une idée de comment procéder ? 

Merci d'avance

Alex

product.tpl

product-add-to-cart.tpl