Changing the address book drop down (for shipping) from drop down list to radio buttons
-
16-10-2019 - |
Question
I need to know how to change the address book drop down on a registered account checkout to radio buttons (similar to Amazon)
Solution
I tried doing this some time ago and I found that modifying the billing address and shipping address templates was a time consuming job, a big error source.
I ended up doing it with javascript. I'm not 100% sure that it covers all the possible cases but I didn't find any issue so far.
The following piece of js did the trick.
function selectToRadio(selectid){
var selectname = jQuery('#' + selectid).attr('name');
jQuery('#' + selectid).hide().after('<div class="radio-field" id="' + selectid +'_radios"></div>').children('option').each(function(){
var optval = jQuery(this).val();
var opttext = jQuery(this).text();
var checked = '';
if (jQuery(this).is(':selected')){
checked = ' checked="checked"';
}
jQuery(this).parent().next().append('<div class="radio-entry"><input' + checked + ' type="radio" name="'+selectname+'" value="'+optval+'" id="' + selectid + '_' + optval + '" /><label class="radio-label" for="' + selectid + '_' + optval + '">'+opttext+'</label></div>');
});
jQuery('#' + selectid +'_radios input[type="radio"]').on('change', function(){
jQuery('#' + selectid).val(jQuery(this).val());
$(selectid).onchange();
});
}
Place this in one of your js files (note: it works with jQuery only) and in the billing and shipping address templates (or in checkout/onepage.phtml) and in the mutishipping pages just add these lines:
<script type="text/javascript">
jQuery(document).ready(function(){
selectToRadio('billing-address-select');//for billing address
selectToRadio('shipping-address-select');//for shipping address
});
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange