Conversion de la liste déroulante de sélection en boutons radio qui en nécessitent une

Question

J'utilise un système de commerce électronique qui vous permet d’avoir plusieurs variantes pour chaque produit - (par exemple: grands, moyens, petits t-shirts). Cependant, nous recevons des plaintes de clients qui ajoutent un t-shirt et ignorent la variation. En conséquence, beaucoup de grandes personnes reçoivent de petits t-shirts (par défaut). Pour résoudre ce problème, j'aimerais forcer l'utilisateur à choisir un bouton radio (au lieu d'une liste de sélection déroulante), et ce n'est qu'à ce moment-là que le bouton Ajouter au panier sera disponible. Voici le php actuel qui affiche la liste déroulante de sélection;

<?php while (have_variation_groups()) : the_variation_group(); ?>
  <?php /** variation HTML and loop */?>
  <select class='select_variation' name="variation[<?php echo variation_id(); ?>]" id="<?php echo variation_group_form_id(); ?>">
  <?php while (have_variations()) : the_variation(); ?>
     <option value="<?php echo the_variation_id(); ?>"><?php echo the_variation_name(); ?></option>
   <?php endwhile; ?>
</select> 
<?php endwhile; ?>
<?php echo add_to_cart_button(the_product_id()); ?>

Ce qui crache ce genre de HTML ...

<select class='select_variation' name="variation[1]" id="variation_select_22_1">
<option value="1">Small</option>
<option value="2">Big</option>
</select> 
<input type='submit' id='product_22_submit_button' class='buy_button' name='Buy'  value="Add To Cart" />

Comment suggérez-vous que le menu déroulant soit converti en bouton radio et que le bouton d'ajout au panier ne soit pas cliquable tant qu'il n'a pas choisi de variante? Merci

Answer 1

Je ne suis pas un développeur PHP, donc, excusez-moi d'avance si je dépouille le langage ...

Ceci devrait vous donner la liste des boutons radio:

<?php while (have_variation_groups()) : the_variation_group(); ?>
  <?php /** variation HTML and loop */?>
  <ul class='select_variation' name="variation[<?php echo variation_id(); ?>]" id="<?php echo variation_group_form_id(); ?>">
  <?php while (have_variations()) : the_variation(); ?>
     <li><input type="radio" name="variation[<?php echo variation_id(); ?>]" value="<?php echo the_variation_id(); ?>"/><?php echo the_variation_name(); ?></li>
   <?php endwhile; ?>
</ul>
<?php endwhile; ?>
<?php echo add_to_cart_button(the_product_id()); ?>

Ce qui, espérons-le, vous donnera quelque chose comme ceci:

<ul class='select_variation' name="variation[1]" id="variation_select_22_1">
<li><input type="radio" name="variation[1]" value="1" />Small</li>
<li><input type="radio" name="variation[1]" value="2" />Big</li>
</ul> 
<input type='submit' id='product_22_submit_button' class='buy_button' name='Buy'  value="Add To Cart" />

Vous pouvez ensuite utiliser jQuery pour activer le bouton lorsque l’une des options est cliquée:

$(function()
{
    $('.buy_button').attr('disabled', 'true');

    $('ul li input').click(function()
    {
        $('.buy_button').removeAttr('disabled');
    });
});

Vous pouvez également envisager simplement d'ajouter un élément factice "Veuillez sélectionner" dans le menu déroulant existant et en faire le paramètre par défaut.

Answer 2

Pourquoi ne pas ajouter une option par défaut avec une valeur de 0 et un texte "Veuillez choisir une taille"?