Set cart66 shipping rates as radio buttons WordPress
Hello,
I'm looking to have some customization done to the Cart66 plugin customized to have the shipping rates set as radio buttons instead of an option select field. The reason I want this is because Cart66 does not provide the shipping options based on the shipping address so I'm having customers select the wrong shipping rates even though it doesn't apply to them.
One of the features would be to have none of the radio buttons selected by default that way if the customer clicks the 'checkout' button they'll get an error message asking to select an appropriate shipping rate. Or, disable the 'checkout' button until the shipping rate is selected.
Ideally, the best way to handle this would be to have the shipping options moved to the checkout page instead of the cart page and only give certain options based on the shipping address entered in the 'shipping information' area.
I'm looking for a fixed price for this customization. I'm also only open to customizing this feature if it's possible to build it in a way that would not get affected by plugin updates.
Answers (2)
Arnav Joy answers:
can you show me the url where it is located?
Denis Leblanc comments:
Indeed. Here it is: [[LINK href="http://173.236.7.160/~polestar/"]]http://173.236.7.160/~polestar[[/LINK]]
We're in beta so we're working off of the IP.
daas answers:
views/checkout.php
Edit :
<th colspan='4' class="alignRight"><?php _e( 'Shipping Method' , 'cart66' ); ?>:
<select name='shipping_method_id' id='shipping_method_id'>
<?php foreach($shippingMethods as $name => $id): ?>
<option value='<?php echo $id ?>' <?php echo ($id == Cart66Session::get('Cart66Cart')->getShippingMethodId())? 'selected' : ''; ?>><?php echo $name ?></option>
<?php endforeach; ?>
</select>
</th>
into:
<th colspan='4' class="alignRight"><?php _e( 'Shipping Method' , 'cart66' ); ?>:
<?php foreach($shippingMethods as $name => $id): ?>
<label for="<?php echo $id ?>"><?php echo $name ?></label><input type="radio" Name="shipping_method_id" value="<?php echo $id ?>" <?php echo ($id == Cart66Session::get('Cart66Cart')->getShippingMethodId())? 'checked' : ''; ?>>
<?php endforeach; ?>
?>
<script type="text/javascript">
/* <![CDATA[ */
(function($){
$(document).ready(function(){
$('#Cart66CartForm').submit(function( e ) {
if( !$( "input[name='shipping_method_id']:checked" ).val() ) {
e.preventDefault();
return false;
}
});
});
})(jQuery);
/* ]]> */
</script>
</th>
It will display radio buttons instead and prevent to submit form without checking any of radios
Denis Leblanc comments:
Max,
There must be something wrong with the code cause it checks the first option by default.
Denis Leblanc comments:
Is there any way to have to cart total update when a radio button gets selected?
Denis Leblanc comments:
I'm finding a few more issues with that code. For example, if I select the third option the price doesn't update and if I click on the 'checkout' button the shipping price isn't set to the new value on the checkout page. Instead it's set to the previous value. If I click on the 'Update Total' button first the cart total and shipping rate will update.
daas comments:
Try this:
<th colspan='4' class="alignRight"><?php _e( 'Shipping Method' , 'cart66' ); ?>:
<?php foreach($shippingMethods as $name => $id): ?>
<label for="<?php echo $id ?>"><?php echo $name ?></label><input type="radio" Name="shipping_method_id" value="<?php echo $id ?>" >
<?php endforeach; ?>
<script type="text/javascript">
/* <![CDATA[ */
(function($){
$(document).ready(function(){
$('#Cart66CheckoutButton').click(function( e ) {
if( !$( "input[name='shipping_method_id']:checked" ).val() ) {
$('#Cart66CartForm').before('<div id="Cart66ShippingMethodWarn" class="Cart66Unavailable"><h2><?php _e( 'No Shipping Service Method' , 'cart66' ); ?></h2><p><?php _e( 'We cannot process your order because you have not selected a shipping method. If there are no shipping services available, we may not be able to ship to your location.' , 'cart66' ); ?></p><input type="button" name="close" value="Ok" id="close" class="Cart66ButtonSecondary modalClose" /></div>');
e.preventDefault();
return false;
}
});
});
$("input[name='shipping_method_id']").change(function() {
$('#Cart66CartForm').submit();
});
})(jQuery);
/* ]]> */
</script>
</th>
It should update shipping price now.
Denis Leblanc comments:
Max,
Works great except that the selected field gets unselected after the price updates.
Any suggestions?
daas comments:
Hmm... I'm not sure if this works, but try using
<?php foreach($shippingMethods as $name => $id): ?>
<?php if( isset( $_POST['shipping_method_id'] ) ): ?>
<label for="<?php echo $id ?>"><?php echo $name ?></label><input type="radio" Name="shipping_method_id" value="<?php echo $id ?>" <?php echo ($id == Cart66Session::get('Cart66Cart')->getShippingMethodId())? 'checked' : ''; ?>>
<?php else: ?>
<label for="<?php echo $id ?>"><?php echo $name ?></label><input type="radio" Name="shipping_method_id" value="<?php echo $id ?>" >
<?php endif; ?>
<?php endforeach; ?>
instead of
<?php foreach($shippingMethods as $name => $id): ?>
<label for="<?php echo $id ?>"><?php echo $name ?></label><input type="radio" Name="shipping_method_id" value="<?php echo $id ?>" >
<?php endforeach; ?>
Denis Leblanc comments:
Great, that worked.
The only pitfall is that it creates a plugin updated nightmare.
Thanks for the help.