Magento – Magento dropdown attribute default value

configurable-productproduct-attribute

As I found the option box default value in magento here:

/app/design/frontend/default/mytheme/template/catalog/product/view/type/options/configurable.phtml

<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
<option><?php echo $this->__('Choose an Option...') ?></option>
</select>

It shows 'Choose an Option…' as a default value

I try

<script>
 $(function() {
 $("#attribute525 option:first-child").attr("selected", true); //color
 $("#attribute272 option:first-child").attr("selected", true); //size
});
</script>

to make the default value each attribute set to the first option of each attribute,

but it doesn't work. Any suggestion will be appreciated, thanks.

Best Answer

This is how I do it. In

/app/design/frontend/default/mytheme/template/catalog/product/view/type/options/configurable.phtml

Add this

    Product.Config.prototype.checkOptions = function(element) {
        var numOptions = element.options.length-1;
        if(numOptions > 1) {
            element.up('dd').show().previous().show();
        }
        if(numOptions === 1) {
            element.options[1].selected = true;
            this.configureElement(element);
        }
    };
    Product.Config.prototype.initialize = (function(_super) {
        return function() {
            _super.apply(this, arguments);
            this.settings.each(function(element) {
                element.up('dd').hide().previous().hide();
            });
            this.checkOptions(this.settings.first());
        };
    })(Product.Config.prototype.initialize);
    Product.Config.prototype.configureElement = (function(_super) {
        return function() {
            _super.apply(this, arguments);
            if (!arguments[0].nextSetting) {
                return;
            }
            this.checkOptions(arguments[0].nextSetting);
        };
    })(Product.Config.prototype.configureElement);

above

var spConfig = new Product.Config(<?php echo $_jsonConfig ?>);

This also adds show/hide but you can remove those lines if you prefer.

Related Solutions

Magento – Convert multiple configurable product select boxes to checkbox

The general recommendation to re-styling the configurable options (especially those that are the pivot attributes which are generally required to be of type Global / Dropdown) follows this sort of a workflow:

Use Javascript to "hide" the original form elements via CSS style: display: none
Create new form elements that more closely model the UX that you want your customer to use
Again, with Javascript, monitor the update of the new form elements and update the hidden (real) configurable elements accordingly

As for HTML markup - it's the same as any other table:

<table>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">small</th>
            <th scope="col">medium</th>
            <th scope="col">large</th>
            <th scope="col">xlarge</th>
        </tr>
    </thead>
    <tfoot></tfoot>
    <tbody>
        <tr class="row">
            <th scope="row">Red</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="red-small" name="red"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="red-medium" name="red"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="red-large" name="red"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="red-xlarge" name="red"></td>
        </tr>
        <tr class="row">
            <th scope="row">Blue</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="blue-small" name="blue"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="blue-medium" name="blue"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="blue-large" name="blue"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="blue-xlarge" name="blue"></td>
        </tr>
        <tr class="row">
            <th scope="row">Green</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="green-small" name="green"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="green-medium" name="green"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="green-large" name="green"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="green-xlarge" name="green"></td>
        </tr>
    </tbody>
</table>

Magento – Show All Configurable Product Options in View

I've toyed around for a while with configurable.js and replaced the fillSelect() function for a fillRadio() function that reads like this:

fillRadio: function(element){
    var attributeId = element.id.replace(/[a-z]*/, '');
    var attributes = this.getAttribute(attributeId);
    var options = this.getAttributeOptions(attributeId);

    var prevConfig = false;
    if(element.prevSetting) {
        prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
    }

    if(options) {
        var index = 1;
        var inputs = [];
        for(var i = 0; i < options.length; i++) {
            var allowedProducts = [];

            var input = document.createElement('input');
            jQuery(input).attr({
                type: 'radio',
                name: attributes.code,
                disabled: 'disabled',
                value: options[i].id,
                price: options[i].price,
                id: attributes.code + attributeId + '-' + i
            }).appendTo(element);

            var label = document.createElement('label');
            jQuery(label).attr({
                for: attributes.code + attributeId + '-' + i
            }).html(this.getOptionLabel(options[i], options[i].price)).appendTo(element);

            if(prevConfig) {
                for(var j = 0; j<options[i].products.length; j++) {
                    if(prevConfig.config.allowedProducts
                        && prevConfig.config.allowedProducts.indexOf(options[i].products[j])>-1){
                        allowedProducts.push(options[i].products[j]);
                    }
                }
            } else {
                allowedProducts = options[i].products.clone();
            }

            if(allowedProducts.size() > 0) {
                options[i].allowedProducts = allowedProducts;
                jQuery(input).removeAttr('disabled');
            }
            if(!element.options)
                element.options = [];
            element.options[i] = input;
            element.options[i].config = options[i];
        }
    }
}

I have also modified configurable.phtml file and removed the select tags and moved the id and classes to the input container:

<?php foreach($_attributes as $_attribute): ?>
    <dt><label class="required"><?php echo $_attribute->getLabel() ?></label></dt>
    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
        <div class="input-box super-attribute-select" id="attribute<?php echo $_attribute->getAttributeId() ?>">
        </div>
    </dd>
<?php endforeach; ?>

Now I'm only debugging the javascript functions (event firing, etc) so that the radio buttons are disabled with every "main" option change

Best Answer

Related Solutions

Magento – Convert multiple configurable product select boxes to checkbox

Magento – Show All Configurable Product Options in View

Related Topic