[Résolu] Modification du bouton ajouter au panier

Vectorus · April 12, 2013

Bonjour,

Je suis actuellement avec une boutique prestashop en 1.5.4 qui a un thème basé de base, j'aimerai modifier les boutons ajouter au panier que l'on a quand on parcours les catégories.

Dans les réglages ils est possible de faire en sorte de l'afficher ou non lorsque le produit à des variables, mais lorsqu'il est affiché il ajoute automatiquement le produit avec la première variable au panier.

Ce que j'aimerai c'est que ce bouton, lorsque le produit à des variables, c'est qu'il renvoi vers la fiche du produit plutôt que l'ajouter au panier, en faite je voudrais qu'il ai la même fonction que le lien "voir" juste en dessous.

Si vous avez une idée de comment faire ça m'aiderai beaucoup.

Merci d'avance

Edited April 15, 2013 by Vectorus (see edit history)

Bondaty and Co · April 12, 2013

Quelque chose dans ce gout là devrait peut être faire l'affaire à remplacer dans le productlist.tpl (rechercher dans le bas du fichier j'ai fait le test avec un modifié donc mes lignes ne sont pas les mêmes):

 {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}
	 {if ($product.allow_oosp || $product.quantity > 0)}
	  {if isset($static_token)}
	   {if $product.id_product_attribute > 0}
	   <a class="exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Choice'}">{l s='Choice'}</a>
	   {else}
	   <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
	   {/if}
	   {else}
	   <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", false)} title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
	  {/if} 
	 {else}
	  <a class="exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
	 {/if}
   {/if}

Vectorus · April 12, 2013

Merci, je teste ça dès lundi

BoutikShop69 · April 13, 2013

Bonjour

Est-il possible de modifier uniquement le bouton Ajouter au Panier, que sur la page produit ? Tout le monde arrive à l'agrandir sans modifier la taille des autres sur le site, sauf moi :-(

Je suis sous prestashop 1.4.4.0

Cordialement

Bondaty and Co · April 15, 2013

Bonjour

Est-il possible de modifier uniquement le bouton Ajouter au Panier, que sur la page produit ? Tout le monde arrive à l'agrandir sans modifier la taille des autres sur le site, sauf moi :-(

Je suis sous prestashop 1.4.4.0

Cordialement

dans votre product.css, ajoutez:

#primary_block input.exclusive2, input.exclusive2_disabled, a.exclusive2, span.exclusive2 {
   background-image: url("../img/button-medium_exclusive2.png");
   color:#fff;
   width:200px;
   height:40px
}

Il faut créer une image bouton "button-medium_exclusive2.png" de 200 x (3x40)

dans le product.tpl vers la ligne 366 remplacez class="exclusive" par class="exclusive2".

Vous aurez surement quelques ajustements à faire, mais l'esprit y est

Vectorus · April 15, 2013

Quelque chose dans ce gout là devrait peut être faire l'affaire à remplacer dans le productlist.tpl (rechercher dans le bas du fichier j'ai fait le test avec un modifié donc mes lignes ne sont pas les mêmes):

 {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}
	 {if ($product.allow_oosp || $product.quantity > 0)}
	  {if isset($static_token)}
	   {if $product.id_product_attribute > 0}
	   <a class="exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Choice'}">{l s='Choice'}</a>
	   {else}
	   <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
	   {/if}
	   {else}
	   <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", false)} title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
	  {/if}
	 {else}
	  <a class="exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
	 {/if}
{/if}

Merci beacoup, c'est exactement ce que je cherchais et ça fonctionne très bien, il y a juste un petit problème, mon bouton apparaît sous le nom "choice" je dois changer quoi pour régler ce problème ?

Il n'a pas non plus exactement la même apparence que le bouton ajouter au panier, peut-on changer son apparence pour qu'il y ai aussi le petit chariot à côté ?

Edit : pour changer le nom du bouton j'ai trouvé, il faut simplement changer "Choice" en "Add to cart" dans le code, mais c'est quand même étrange que Choice s'affiche en Anglais même sur le site.

Edited April 15, 2013 by Vectorus (see edit history)

Bondaty and Co · April 15, 2013

remplacer la ligne du Choice par ceci:

<a class="button ajax_add_to_cart_button exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Choice'}"><span></span>{l s='Choice'}</a>

pour modifier le Choice, il faut aller dans l'outil de traduction "front office"

Vectorus · April 15, 2013

A force de tâtonnements j'ai réussi à faire ce que je voulais je pense, pouvez-vous me confirmer que c'est bon s'il vous plait ?

 {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}
 {if ($product.allow_oosp || $product.quantity > 0)}
  {if isset($static_token)}
  {if $product.id_product_attribute > 0}
   <a class="button ajax_add_to_cart_button exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
  {else}
   <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
  {/if}
 {else}
   <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", false)} title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
  {/if}
 {else}
   <a class="exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
 {/if}
   {/if}

Bondaty and Co · April 15, 2013

A priori ça a l'air OK, à voir à l'affichage

Vectorus · April 15, 2013

Merci pour votre réponse, cependant j'ai un soucis lorsque je tente une traduction du front office, ce problème vient-il du fait que je sois en local, si oui, ce n'est donc pas un gros soucis, il faudra juste que j'y remédie en ligne.

Attention, votre configuration PHP limite le nombre maximum de champs d'un formulaire 1000 pour max_input_vars
Veuillez contacter votre hébergeur pour augmenter cette limite à 1443 au moins ou modifiez le fichier de traduction manuellement.

Edit: à l'affichage ça fonction bien aussi, le bouton fait parfaitement l'illusion

Merci beaucoup pour votre aide.

Edited April 15, 2013 by Vectorus (see edit history)

Bondaty and Co · April 15, 2013

dans votre .htaccess ajoutez au début: php_value max_input_vars 2000

celà devrait faire l'affaire pour la traduction

BoutikShop69 · April 15, 2013

dans votre product.css, ajoutez:
#primary_block input.exclusive2, input.exclusive2_disabled, a.exclusive2, span.exclusive2 {
background-image: url("../img/button-medium_exclusive2.png");
color:#fff;
width:200px;
height:40px
}
Il faut créer une image bouton "button-medium_exclusive2.png" de 200 x (3x40)

dans le product.tpl vers la ligne 366 remplacez class="exclusive" par class="exclusive2".

Vous aurez surement quelques ajustements à faire, mais l'esprit y est

Bonjour

Merci de m'avoir répondu, je vais essayer, car des fois mon thème ne réagit pas toujours comme je le voudrais

Bonne journée.

Vectorus · April 15, 2013

dans votre .htaccess ajoutez au début: php_value max_input_vars 2000

celà devrait faire l'affaire pour la traduction

Merci, ça fonctionne bien, cependant je ne vois pas ou ce trouve "choice" j'ai déroulé toutes les listes et je l'ai pas vu, mais c'est pas grave, je vais surement laisser "Ajouter au panier".

Bondaty and Co · April 15, 2013

En toute logique il devrait être dans product

Vectorus · April 15, 2013

J'ai 58 expressions dans product mais il n'y a pas "choice", mais ce n'est pas grave je ferais sans.

Encore en grand merci pour votre aide

BoutikShop69 · April 15, 2013

rebonjour

J'ai ça dans mon product.css :

}

#primary_block ul#usefull_link_block {

list-style-type: none;

margin-top: 1em

}

#primary_block ul#usefull_link_block li { margin: 0.4em 1em 0.5em 0; display: block }

#primary_block ul#usefull_link_block li a,

#primary_block ul#usefull_link_block span.span_link,

#primary_block ul#usefull_link_block span.span_link:hover {

text-decoration: none;

color: #76839b;

font-size: 0.9em;

background: white url('../img/bullet_alt.jpg') no-repeat top left;

padding-left: 15px;

height: 15px

}

#primary_block #pb-left-column {

float: right;

margin-left: 0.1em;

width: 233px

}

#primary_block #short_description_block {

background: url('../img/product-short-desc-bg.gif') repeat-y top left;

border: 1px #d0d3d8 solid;

padding: 0.7em;

margin-bottom: 1.5em

}

#primary_block #color_picker p {

margin-bottom: 0.4em;

padding: 0

}

#primary_block #color_picker {

padding: 0.6em 0.7em 0.4em 0.7em;

background: url('../img/product-short-desc-bg.gif') repeat-y top left;

border: 1px #d0d3d8 solid;

margin-bottom: 1.5em

}

#primary_block #color_to_pick_list li {

display: inline;

float: left;

margin: 0 0.4em 0.4em 0

}

#primary_block a.color_pick {

display: block;

width: 20px;

height: 20px;

border: 1px solid #666;

cursor: pointer

}

#primary_block a.color_pick:hover { border: 1px solid #000 }

#primary_block a#color_all { cursor: pointer }

#primary_block #image-block img#bigpic.jqzoom {

cursor: crosshair;

position: relative

}

#primary_block p.buttons_bottom_block { margin: 0 }

#primary_block p.buttons_bottom_block a,

#primary_block p.buttons_bottom_block input { margin: 0.9em auto 0 auto }

#primary_block #short_description_content { margin-bottom: 0.5em; text-align:justify; }

#primary_block #buy_block {

background: url('../img/product-buy-bg.gif') repeat-y top left;

font-size: 1.1em;

padding: 0.7em;

color: #000000;

border: 1px #d0d3d8 solid;

margin-bottom: 1.5em

}

#primary_block #buy_block p {

padding: 0;

margin-top: 0;

clear: both

}

#primary_block #buy_block img.on_sale_img { float: left }

#primary_block #buy_block span.on_sale {

color: #E36212;

text-transform: uppercase;

font-weight: bold;

float: right

}

#primary_block #buy_block span.discount {

color: #E36212;

text-transform: uppercase;

font-weight: bold;

float: right

}

#primary_block #buy_block span.our_price_display { float: right; font-size: 1.3em; }

#primary_block #buy_block span#availability_label {

float: left;

margin-right: 1em

}

#primary_block #buy_block label { text-align: right }

#primary_block #buy_block label,#primary_block #buy_block select {

display: block;

width: 47%;

float: left

}

#primary_block div#attributes p, #quantity_wanted_p {

clear: left;

height: 2em

}

#primary_block div#attributes p, #minimal_quantity_wanted_p {

clear: left;

text-align: center

}

/* prices */

#primary_block #buy_block p.price {

font-size: 1.05em;

text-align: right

}

#primary_block #buy_block span#pretaxe_price {

font-size: 0.9em;

text-align: right

}

#primary_block #buy_block p#old_price {

font-size: 0.9em;

text-align: right;

text-decoration: none;

color: #76839b;

}

#primary_block #buy_block p#reduction_percent {

color: #E36212;

font-size: 0.9em;

font-weight: bold;

text-align: right

}

#primary_block #buy_block p.price-ecotax {

font-size: 0.75em;

text-align: right

}

#admin-action {

color: #000000;

background-color: transparent;

margin-bottom:10px;

padding: 4px;

border: 1px solid #72CB67

}

#admin-action input.exclusive

{

float: right

}

.product_accessories_price

{

margin-top: 5px

}

J'ai un total de 163 lignes, donc où placer l'ajout de code que vous me conseillez ? J'ai fait deux essais, choux blanc. De plus je pense, qu'il faudrait aussi l'ajouter dans le global.css, car sinon l'image que j'ai envoyé dans montheme/img ... n'est pas prise en compte. Mais là aussi, où ?

D'avance merci pour votre aide.

Cordialement

Bondaty and Co · April 15, 2013

Vous pouvez l'ajouter à la fin.

Avez vous bien dans le product.tpl vers la ligne 366 remplacez class="exclusive" par class="exclusive2"..

j'ai fait les test chez moi ça fonctionne.

Avez vous bien forcé la compilation et vidé les caches .

Edited April 15, 2013 by Muche (see edit history)

BoutikShop69 · April 15, 2013

Vous pouvez l'ajouter à la fin. Avez vous bien dans le product.tpl vers la ligne 366 remplacez class="exclusive" par class="exclusive2".. j'ai fait les test chez moi ça fonctionne. Avez vous bien forcé la compilation et vidé les caches .

Merci pour votre aide, mais ça ne veut toujours pas fonctionner

C'est l'image d'origine, reliée dans le global.css qui est pris en compte.

Et en plus après avoir compilé et vidé le cache, voilà ce que ça donne :

- Link to database cannot be established. -

Cordialement

Edited April 15, 2013 by shooping (see edit history)

Bondaty and Co · April 15, 2013

Attention ce n'est pas l'exlusive en bas de page c'est celui au dessus de {if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}

BoutikShop69 · April 15, 2013

Vous voulez dire ici : <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="exclusive2" /></p>

{if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}

C'est bien ce que j'ai fait comme ci-dessus, et ça provoque l'erreur mentionnée plus haut.

Cordialement

Bondaty and Co · April 15, 2013

le - Link to database cannot be established. - n'a rien à voir avec le fait d'avoir changé le nom de class.

Edited April 15, 2013 by Muche (see edit history)

BoutikShop69 · April 15, 2013

Possible, mais en remettant les fichiers d'origine, j'ai récupérer mes pages produits

J'avais réussi un léger agrandissement de 120 à 140px, mais ça s'est appliqué partout.

J'aurais vraiment aimé pouvoir l'agrandir en hauteur, mais le mieux est souvent l'ennemi du bien.

J'avais joué sur le global.css, pour y parvenir.

Encore merci, d'avoir essayé de m'aider.

Cordialement

[Résolu] Modification du bouton ajouter au panier

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

Create an account or sign in to comment

Create an account

Sign in