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

Answer 1

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

Answer 2

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.

Answer 3

Hi, this was just the problem I have been having, I followed this coding but not exactly - just to try to fit it to the coding I have for my cart. The radio buttons are there and just what I wanted, you can select the item and it goes to the cart but it is not picking up the price - would anyone be able to help with this? I am popping some of the coding here - really hope you can help :)

<?php /** the variation group HTML and loop */?>
 <div class="wpsc_variation_forms">
  <?php while (wpsc_have_variation_groups()) : wpsc_the_variation_group(); ?>
   <p>
    <label for="<?php echo wpsc_vargrp_form_id(); ?>"><?php echo wpsc_the_vargrp_name(); ?>:</label>
    <?php /** the variation HTML and loop */?>
    <ul class='select_variation' name="variation[<?php echo wpsc_vargrp_id(); ?>]" id="<?php echo wpsc_vargrp_form_id(); ?>">
    <?php while (wpsc_have_variations()) : wpsc_the_variation(); ?>
    <li><input type="radio" name="variation[<?php echo wpsc_the_variation_id(); ?>]"  value="<?php echo wpsc_the_variation_out_of_stock(); ?>"/><?php echo wpsc_the_variation_name(); ?></li>
    <?php endwhile; ?>
    </ul>
    </select> 
   </p>
  <?php endwhile; ?>
 </div>
 <?php /** the variation group HTML and loop ends here */?>


 <!-- THIS IS THE QUANTITY OPTION MUST BE ENABLED FROM ADMIN SETTINGS -->
 <?php if(wpsc_has_multi_adding()): ?>
  <label class='wpsc_quantity_update' for='wpsc_quantity_update'><?php echo TXT_WPSC_QUANTITY; ?>:</label>

  <input type="text" id='wpsc_quantity_update' name="wpsc_quantity_update" size="2" value="1"/>
  <input type="hidden" name="key" value="<?php echo wpsc_the_cart_item_key(); ?>"/>
  <input type="hidden" name="wpsc_update_quantity" value="true"/>
 <?php endif ;?>



 <input type="hidden" value="add_to_cart" name="wpsc_ajax_action"/>
 <input type="hidden" value="<?php echo wpsc_the_product_id(); ?>" name="product_id"/>

 <?php if(wpsc_product_is_customisable()) : ?>    
  <input type="hidden" value="true" name="is_customisable"/>
 <?php endif; ?>


 <!-- END OF QUANTITY OPTION -->

Answer 4

sorry, i worked it out, me being silly!

<li><input type="radio" name="variation[<?php echo wpsc_the_variation_id(); ?>]"  value="<?php echo wpsc_the_variation_out_of_stock(); ?>"/><?php echo wpsc_the_variation_name(); ?></li>

to

<li><input type="radio" name="variation[<?php echo wpsc_the_variation_id(); ?>]"  value="<?php echo wpsc_the_variation_id(); ?>" <?php echo wpsc_the_variation_out_of_stock(); ?>/><?php echo wpsc_the_variation_name(); ?></li>