2

I'm setting up a custom configurable product screen, replacing the select boxes with radio buttons (amazon style). The thing is, I would like to display all possible options on the product view, and the default option is that Magento enables the second attribute once the first one has been set (it filters the attributes according to availability). I would like to show all options and disable them (visually by graying them out) once the user has interacted with the attributes (Think of buying sneakers on Amazon. If a color is not available for a specific size, the color is grayed out).

How can I do this?

Update:

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

  • 1
    What have you tried so far? The answer would be a quite extensive one writing a large piece javascript and modifying the way Magento outputs configurable products. Posting snippets of code of what you've already done/tried will persuade people to answer and contribute more quickly mattgemmell.com/what-have-you-tried – Sander Mangel Mar 21 '14 at 19:28
  • I am currently playing around with the configurable.js. The solution might be there. I'll post an update when I have something worth showing. – Niche Mar 21 '14 at 19:43
1

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

| improve this answer | |
-1

I will give you a hint.

Mage::helper('catalog/product')->setSkipSaleableCheck(true);

Nice question by the way.

| improve this answer | |
  • Can you explain how this is related to the configurable options view? – phagento Sep 2 at 4:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.