Categories
Magento 1

Fixing Magento’s Configurable Attribute Ordering

Somewhere along the way in a 1.9.x update, configurable attribute sorting stopped working on the fronted. Magento should use an attribute’s position parameter (in the options tab when editing a product attribute), to order the dropdown on a product detail page.

The issue appears to be where Magento assigns prices to an attribute collection in Mage_Catalog_Model_Resource_Product_Type_Configurable_Attribute_Collection

Magento first gets the options for the attribute here:

 $options = $productAttribute->getFrontend()->getSelectOptions();

At this point, all is good. In Magento’s SQL to get the options, sort_order is used correctly and the array of options is in the correct order.

The problem seems to occur in the loop on line 257:

 foreach ($this->getProduct()->getTypeInstance(true)
->getUsedProducts(array($productAttribute->getAttributeCode()), $this->getProduct())
   as $associatedProduct) {
...
}

The order of the attributes will now be determined by the order of items in this loop, which is the order of associated products.

What we need to do is re-order the $values array which is populated in the above loop, we can do this using the order of the $options array:

$order = 0;
$optionsByValue = array();
foreach ($options as $option) {
    $optionsByValue[$option['value']] = $option['label'];
    $orders[$option['value']] = $order;
    $order++;
}

Here we utilise the existing loop which populates the $optionsByValue array to log the ordering of each option. We can then use those values by passing them into our custom sort method just before Magento adds the prices to each item:

/* Resort the values array using the order we've logged against options */
usort($values, array($this, 'sortValues'));

foreach ($values as $data) {
    $this->getItemById($data['product_super_attribute_id'])->addPrice($data);
}

Here’s the sort method which puts the array back to the correct sort order:

public function sortValues($value1, $value2){
    if(isset($value1['sort_order']) && isset($value2['sort_order'])){
        if($value1['sort_order'] > $value2['sort_order']){
            return 1;
        }

        if($value1['sort_order'] < $value2['sort_order']) {
            return -1;
        }

        return 0;
    }
}
Categories
Magento 1

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.