Jump to content

Styler boutons radio en CSS pour sélection de taille


iPoussin
 Share

Recommended Posts

Bonjour tout le monde !

 

Je travaille pour un site qui vend des chaussures.

A l'heure actuelle, j'ai réussi à changer la sélection de la taille dans une liste déroulante dans la fiche produit par des boutons radio.

 

Je voulais un rendu tel que celui-ci : http://www.laredoute.fr/ppdp/prod-500950667.aspx?docid=00000000000001

Si jamais le lien ne marche plus, jetez un oeil sur une fiche produit chaussure de la Redoute.

 

J'ai remarqué avec le thème que le code du formulaire s'articule de la façon suivante :

<div>

   <span>

      <input ....> <!-- Le bouton radio en question -->

    </span>

   <span>38</span> <!-- Le label taille associée au bouton radio -->

</div>

 

La problématique est donc la suivante : il ne m'est possible à l'heure actuelle de ne charter soit le bouton radio, soit le label mais pas les deux en même temps, donc impossible d'obtenir le rendu que je souhaite.

Je n'arrive pas à trouver de module Prestashop proposant un tel chartage.

 

Dois-je modifier le comportement du template ? Si oui, à quel endroit et comment ?
Ou tout simplement, quelle est la démarche à suivre (Si c'est possible dans la configuration actuelle du code HTML) pour charter en CSS ?

 

Je vous remercie !

 

Killian

Share this post


Link to post
Share on other sites

Oops, je parlais de la sélection de taille j'ai pas précisé pardon.

 

 

Donc ça c'est le rendu que je voudrais, sur la Redoute :

 

http://imageshack.com/a/img924/5201/jQChon.png

 

Et donc ça c'est ce que j'ai à l'heure actuelle sur mon site :

http://imageshack.com/a/img923/7696/5pz9Y0.png

 

En sachant que le texte à côté du bouton radio n'est pas cliquable (Ce que j'ai mis en avant dans l'extrait de code précédent, le label est dans une balise bien séparée).

 

Si jamais tu as besoin d'autres explications, je suis là bien entendu :)

 

Kiki

Share this post


Link to post
Share on other sites

En fait, toi tu as des boutons radio, sur la redoute c'est du ul li li li, avec un style css selected qui pose un border différent en largeur.

Mais c'est lié à du javascript, et après tu as la problématique du formulaire.

Problème donc un peu complexe.

C'est bien dans le template qu'il faut voir ça, mais voir aussi avec ton thème !

Donc, normalement c'est de l'ajax, ou modifier en un select option avec display in line, plus compliqué...

A voir sur place !

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More