Tutorial :Converting drop-down select input to radio buttons which require one to be chosen



Question:

I'm using an e-commerce system which allows you to have several variations for each product - (for instance: large, medium, small t-shirts). However, we are having complaints from customers who add a t-shirt and ignore the variation. As a result, a lot of big people are getting small t-shirts (the default). To solve this, I'd like to force the user to choose a radio button (instead of a drop-down select list), and only then will the add to cart button become available. Here is the current php which displays the select drop-down;

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

Which spits out this sort of 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" />  

How would you suggest I convert the drop-down to radio button, and make sure the add-to-cart button is not clickable until they have chosen a variation? Thanks


Solution:1

I'm not a PHP developer, so sorry in advance if I butcher the language...

This should get you the list of radio buttons:

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

Which will hopefully give you something like this:

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

Then you can use some jQuery to enable the button when one of the options is clicked:

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

You might also consider just adding a dummy 'Please select' item to the existing drop down and making it the default.


Solution:2

Why not add a default option with a value of 0 and text "Please Choose Size"?


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »