Déplacer le bouton +Panier sur la fiche produit

[Asten]

Bonjour à tous,

 

Je souhaiterais déplacer le bouton " + Panier " de ma fiche Produit pour qu'il se retrouve sur la même ligne que " Quantité ". J'ai en effet ajouté un style à la ligne Quantité (background + border) et j'aimerais que mon bouton + panier soit intégré à ce style à la droite de Quantité.

 

Voilà j'espère avoir réussi à exprimer clairement mon besoin et qu'une personne aguerrie dans l'art de Prestashop pourra m'apporter une réponse

 

Merci !

[Game7]

Salut,

 

Tu es sous quel version de prestashop ?

Un lien vers la boutique éventuellement ?

 

Sans plus de précisions c'est pas évident d'apporter une aide directement, étant donner que c'est une modificaion personnalisé propre à ta boutique.

 

Sinon pour désplacer le bouton ajouter au panier en terme générale; il faut modifier le fichier product.tpl et ajuster la style dans le fichier product.css de ton thème. Utilise le plug in firebug sous firefox pour voir ou ça se trouve dans le fichier, t'auras juste à déplacer le bouton ajouter au panier dans la div de la barre de quantité.

[Asten]

Salut et merci beaucoup pour ta réponse !

 

Voici le bout de code du fichier product.tpl où se trouve le " Quantité " et le bouton " + Panier " (tout en bas)

 

</div>
  {/if}
  {if $product_manufacturer->name}
   <p class="marque"><label>{l s='Manufacturers'} : </label><a href="{$link->getPageLink('manufacturer.php')}?id_manufacturer={$product_manufacturer->id}"><span class="editable">{$product_manufacturer->name}</span></a></p>
  {/if}

  <p id="product_reference" {if isset($groups) OR !$product->reference}style="display: none;"{/if}><label for="product_reference">{l s='Reference :'} </label><span class="editable">{$product->reference|escape:'htmlall':'UTF-8'}</span></p>
  <!-- quantity wanted -->
  <p id="quantity_wanted_p" class="quantity-product"{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>
   <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="btn-up">+</a></span>
  </p>
  <!-- minimal quantity wanted -->
  <p id="minimal_quantity_wanted_p"{if $product->minimal_quantity <= 1 OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>{l s='You must add '} <b id="minimal_quantity_label">{$product->minimal_quantity}</b> {l s=' as a minimum quantity to buy this product.'}</p>
  {if $product->minimal_quantity > 1}
  <script type="text/javascript">
   checkMinimalQuantity();
  </script>
  {/if}
  <!-- availability -->
  <p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
   <span id="availability_label">{l s='Availability:'}</span>
   <span id="availability_value"{if $product->quantity <= 0} class="warning_inline"{/if}>
 {if $product->quantity <= 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{else}{$product->available_now}{/if}
   </span>
  </p>
  <!-- number of item in stock -->
  {*if ($display_qties == 1 && !$PS_CATALOG_MODE && $product->available_for_order)}
  <p id="pQuantityAvailable"{if $product->quantity <= 0} style="display: none;"{/if}>
   <span id="quantityAvailable">{$product->quantity|intval}</span>
   <span {if $product->quantity > 1} style="display: none;"{/if} id="quantityAvailableTxt">{l s='item in stock'}</span>
   <span {if $product->quantity == 1} style="display: none;"{/if} id="quantityAvailableTxtMultiple">{l s='items in stock'}</span>
  </p>
  {/if*}
  <!-- Out of stock hook -->
  {if !$allow_oosp}
  <p id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}>
   {$HOOK_PRODUCT_OOS}
  </p>
  {/if}
  {*if $product->online_only}
   <p>{l s='Online only'}</p>
  {/if*}
  <p{if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE} style="display: none;"{/if} id="add_to_cart" class="buttons_bottom_block"><input type="submit" name="Submit" value="{l s='Add to cart'}" class="btn btn-shadow add-cart" /></p>
  {if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}
  <div class="clear"></div>
 </form>
 {/if}

 

Pouvez-vous me dire exactement où mettre déplacer le bout de code du bouton add_to_cart pour qu'il soit sur la même ligne que Quantité ?

 

Je suis sur la version 1.4.8 de Prestashop

 

Merci infiniment pour votre aide.

[Asten]

Petite précision : la class que je souhaite ajouter à Quantité et au bouton + Panier sur la même ligne est la "class = quantité-product" que l'on trouve à la ligne 8.

 

J'ai créé cette class dans le global.css qui est appliqué à la ligne Quantité, il ne reste plus qu'à y joindre le bouton

[Game7]

Avant toute chose sauvegarde ton fichier product.tpl d'origine avant toutes modifications, par mesure de prévention.

 

Donc normalement il faut déplacer les lignes suivantes :

 

<p{if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE} style="display: none;"{/if} id="add_to_cart" class="buttons_bottom_block"><input type="submit" name="Submit" value="{l s='Add to cart'}" class="btn btn-shadow add-cart" /></p>
  {if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}

 

et les coller comme ceci :

 

<!-- quantity wanted -->
  <p id="quantity_wanted_p" class="quantity-product"{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>
<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="btn-up">+</a></span>
  </p>
<p{if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE} style="display: none;"{/if} id="add_to_cart" class="buttons_bottom_block"><input type="submit" name="Submit" value="{l s='Add to cart'}" class="btn btn-shadow add-cart" /></p>	{if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}

 

Et après faut juste ajuster le style dans le product.css

Edited November 12, 2012 by Game7 (see edit history)