Displaying Magento’s Configurable Options as Radio Buttons (Quick and Dirty)

By default Magento displays a product’s configurable options as select drop downs. This isn’t always appropriate for the project however; some clients prefer radio buttons, and longer product names will cause some of the text in the select box to be cut off on mobile devices.

Here’s a quick and dirty way to display those selects as radio buttons (this assumes a descendent of the RWD theme is being used and hasn’t been tested with a base theme). We don’t mess about with changing templates with this method – it’s all done in JavaScript.

XML

    <PRODUCT_TYPE_configurable>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/configurable.js</name>
            </action>
        </reference>
    </PRODUCT_TYPE_configurable>

JavaScript – configurable.js

;(function($j){
    var loadOptions = Product.Config.prototype.loadOptions;
    var containerClass = "options-list"

    // Create an option array for each of the configurable options
    Product.Config.prototype.loadOptions = function() {
        loadOptions.apply(this);
        var self = this;

        this.settings.each(function(element){
            var attributeId = element.id.replace(/[a-z]*/, '');
            var options = self.getAttributeOptions(attributeId);
            var radioId = attributeId + "-radio";

            var $optionContainer = $j('<ul />').addClass(containerClass);

            if(options){
                for(var i=0;i<options.length;i++){
                    var $radio = $j("<input type='radio' />" ).attr("name", radioId).addClass('radio');
                    var $li = $j("<li />");
                    var foundValue = $j(element).find('option[value="' + options[i].id + '"]').html();
                    var $span = $j("<span class='label' / >").append($j('<label />').html(foundValue));

                    $radio.attr('value', options[i].id);
                    $li.append($radio)
                        .append($span);

                    $optionContainer.append($li);

                    $radio.on('click', function(ev){
                        var val = $j(this).val();
                        $j(element).val(val);
                        self.reloadPrice();
                    });
                }
            }

            $j(element).parent().append($optionContainer);
            
            $j(element).css({
                'visibility':'hidden',
                'height': '0px',
                'position': 'absolute'
            });
        });
    }
}(jQuery));
  • We monkey patch the Product.Config object and add our own loadOptions method. This runs the original method, then recreates the select as a list of radio options in the same container as where the select box resides.
  • The select box is then hidden, however instead of applying a display: none on it, we change its visibility, height and position. This because Magento will not validate hidden options by default so appling this method allows us to keep Magento’s built in validation.
  • When the user changes the selected radio button, all the script does is changes the value of the hidden select box and then calls the reloadPrice() method.