Simplification du bouton "Ajouter au panier"

[Lumbreiser]

Bonjour à toutes et tous,

 

Je suis en cours d'adaptation du thème "default" sur une boutique Prestashop (v 1.5.5.0) et je me heurte à un problème dont, malgré mes recherches sur ce forum compris, je n'arrive pas à me dépétrer.

 

Je souhaite remplacer le bouton qui s'affiche en jaune par une simple image. Voici ma rapide adaptation du fichier product.tpl :

<p id="add_to_cart" class="buttons_bottom_block">
	<input type="image" name="Submit" src="{$img_dir}btn_ajouterAuPanier.png" class="exclusive__" />
</p>

Bien sûr, j'ai aussi regardé du côté des .css, afin de désactiver tout style pouvant venir interférer sur mon "input".

 

Si à l'arrivée sur la page mon bouton s'affiche correctement, c'est au clic que vient se rajouter systématiquement une bordure (cf. image jointe).

 

Où (et donc quand) cette modification a-t-elle lieu ? Par code javascript ?

 

En vous remerciant de votre future aide ! 

[doekia]

css :hover je présume. Url de ta shop

[Lumbreiser]

Salut Doekia, www.florianebijoux.com ! 

[doekia]

global.css ligne 142 car après avoir cliqué, Prestashop vérifie qu'il reste des produits et si il en reste il remet la classe exclusive

[Lumbreiser]

Je comprends ton explication (réattribution de la classe exclusive), mais je ne vois pas quelle modification à apporter ligne 142 de mon global.css, ligne concernant h1...

[doekia]

Rien encore que ... regarde ta page de liste produit...

 

Change ton "exclusive__exclusive" en "addtocart exclusive"

 

fait ta modif css en utilisant le selecteur .addtocart.exclusive, .addtocart ça devrait faire le café

[Lumbreiser]

Je suis désolé doekia, il doit être tard mais là je ne te suis plus du tout : où trouves-tu un "exclusive__exclusive" dans mon code stp ?

 

Puis quelle modification css dois-je faire ?

[doekia]

<p id="add_to_cart" class="buttons_bottom_block">
<input class="exclusive__" type="image" src="http://florianebijoux.com/themes/default/img/btn_ajouterAuPanier.png" name="Submit">
</p>

ça c'est ce que tu as

 

Laisse le exclusive tel qu'il est d'origine, ajoute une classe (j'ai proposé addtocart)

Fait tes modifs de mise en forme en utilisant le selecteur .addtocart et pour forcer ta règle avant celle native de prestashop le selecteur input.exclusive.addtocart qui aura précédance

 

donc:

 

input.exclusive.addtocart, .addtocart {

  tes choix en terme de css

}

[Lumbreiser]

J'ai pigé l'idée. Avec ce code...

<p id="add_to_cart" class="buttons_bottom_block">
<input class="exclusive" type="image" src="http://florianebijoux.com/themes/default/img/btn_ajouterAuPanier.png" name="Submit">
</p>

...le style de mon input sera désormais celui défini par input.exclusive.addtocart. J'ai donc rajouté ce dernier à mon global.css.

 

En ce qui concerne le style, je ne cherche pas à en appliquer un en particulier, je cherche juste à laisser affiché le bouton tel quel : que dois-je donc écrire en terme de CSS ???

Edited December 8, 2013 by Lumbreiser (see edit history)