Conversión de entrada de selección desplegable a botones de radio que requieren que se elija uno

Question

Estoy usando un sistema de comercio electrónico que le permite tener varias variaciones para cada producto (por ejemplo: camisetas grandes, medianas, pequeñas). Sin embargo, tenemos quejas de clientes que agregan una camiseta e ignoran la variación. Como resultado, muchas personas grandes reciben camisetas pequeñas (el valor predeterminado). Para resolver esto, me gustaría forzar al usuario a elegir un botón de radio (en lugar de una lista de selección desplegable), y solo entonces estará disponible el botón Agregar al carrito. Aquí está el php actual que muestra el menú desplegable de selección;

<?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()); ?>

Lo que escupe este tipo 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" />

¿Cómo sugeriría que convirtiera el menú desplegable en el botón de opción y me asegure de que no se pueda hacer clic en el botón de agregar al carrito hasta que hayan elegido una variación? Gracias

Answer 1

No soy un desarrollador de PHP, lo siento de antemano si elimino el idioma ...

Esto debería obtener la lista de botones de opción:

<?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()); ?>

Lo que con suerte te dará algo como esto:

<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" />

Luego, puedes usar jQuery para habilitar el botón cuando se hace clic en una de las opciones:

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

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

También puede considerar simplemente agregar un elemento 'Por favor, seleccione' falso al menú desplegable existente y hacer que sea el predeterminado.

Answer 2

¿Por qué no agregar una opción predeterminada con un valor de 0 y texto " Por favor, elija tamaño " ;?