Setting default options for configurable products

We are using the configurable products feature of Magento to group together some of our products that differ for example only by colour or number of items in a pack. In our case there is just a single “option” for the product and we wanted it to default to the “first” option in the dropdown, rather than the Magento default of forcing the user to choose an option.

As the dropdown for a configurable product is filled in on the client side with javascript this required some javascript code to “switch” to the first option and then reload the price. Here is the javascript we used to do this . This is a diff file to be applied against the /design/frontend/default/default/template/catalog/product/view/type/options/configurable.phtml file. This path will differ when you are using your own skin.

Index: view/type/options/configurable.phtml
===================================================================
--- view/type/options/configurable.phtml	(revision 73)
+++ view/type/options/configurable.phtml	(revision 74)
@@ -42,5 +42,10 @@
     </dl>
     <script type="text/javascript">
         var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
+        // set the defaults to the first option
+        for(var i=spConfig.settings.length-1;i>=0;i--) {
+          spConfig.settings[i].selectedIndex = 1;
+        }
+        spConfig.reloadPrice();
     </script>
 <?php endif;?>

*Update*

Unfortunately the code doesn’t work as expected on IE due to http://support.microsoft.com/kb/927917 “Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)”.  My fix was to just disable this for now for IE by wrapping the changes in

if ( ! Prototype.Browser.IE ) {
...
}

If anyone knows a workaround for this, please let me know! Did I mention how much I hate IE? !

21 thoughts on “Setting default options for configurable products”

  1. It doesn’t seem to work correctly with two or more configurable options in version 1.3.2.1.

    It appears to be selecting the first option in the dropdown fine. But if you have a dropdown for Color and one for Size it doesn’t select the size.

    I also tried manually setting the selected index. I looked at the source code on the magento pages and at least for me the dropdowns have these ID’s.

    document.getElementById(‘attribute497’).selectedIndex = 1;
    document.getElementById(‘attribute496’).selectedIndex = 1;

    I think maybe placing this javascript in another location to ensure it doesn’t fire until the DOM layer is fully loaded may help.

    Thanks for your time. Have any ideas?

    • Because we only have one option on our store, I never tested with more, sorry. I should try it and see. I did try moving part of the javascript but it didn’t help, but it was late and I was tired so I should maybe try again. I’ll let you know my progress.

      Thanks for the feedback.

  2. In out website also we are using more options,Please tell any one how to select default options in configurable product.Any ideas,very urgent

    Thank you

  3. Hi,

    this code runs in IE:

    var spConfig = new Product.Config(getJsonConfig() ?>);
    // set the defaults to the first option – marlon 121109
    Event.observe(window, ‘load’, function() {
    spConfig.settings[0].selectedIndex = 1;
    spConfig.reloadPrice();
    });

    Regards

  4. If you have two, and you want to set the first and also have the second option become active, use the following. The function for firing the onchange event came from http://jehiah.cz/archive/firing-javascript-events-properly

    function fireEvent(element,event){
    if (document.createEventObject){
    // dispatch for IE
    var evt = document.createEventObject();
    return element.fireEvent(‘on’+event,evt)
    }
    else{
    // dispatch for firefox + others
    var evt = document.createEvent(“HTMLEvents”);
    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
    return !element.dispatchEvent(evt);
    }
    }

    Event.observe(window, ‘load’, function() {
    spConfig.settings[0].selectedIndex = 1;
    obj = spConfig.settings[0]; // this grabs the first select item
    Event.observe(obj,’change’,function(){});
    fireEvent(obj,’change’); // this simulates selecting the first option, which triggers
    spConfig.settings[1].selectedIndex = 1; // this selects the first option of the second attribute drop menu

    });

    This code can , of course, be made better. The second part assumes you have two attributes. It may throw an error if you only have one. It can be modified to be more flexible and account for any number of attributes.

  5. For simple products you can do the following:

    // set the defaults to the first option
    Event.observe(window, ‘load’, function() {
    $$(’.product-options select’).each(function(element) {
    element.selectedIndex = 1;
    opConfig.reloadPrice();
    });
    });

    Basically, loop through all select items in the product options container and set each one to the first option.

    You might also need the line opConfig.reloadPrice() to update the price if the selected option has a price increment.

  6. Hi,

    None of these worked for me with IE – especially older versions are giving syntax and unexpected errors.

    Also, this does not work if the customer tries to add the product to the cart from the main category screen – instead, he’s redirected to the product page where he’s asked to make a selection (even though the added JS has already done that).
    Thanks!

    • PS: For simple products – I presume this is for custom options selection – where do you put the JS code?
      Thanks!

  7. After a lot of hard work, I actually was able to add the ability to specify default options for configurable products from the admin. We are using it in one of our stores and its been working great for over a month.

    I also posted a javascript solution based on what Jose wrote above. The javascript soln works in all browsers but it wasn’t flexible enough so that is why I ended up spending time on extending the codebase.

    http://icebergcommerce.com/software/blog/iss/article/magento-configurable-products-setting-default-value-for-options/

  8. Hi Jose, I modified your script a bit and this is what I came up with. It seems to work fine.

    // simulate firing a DOM event
    if (typeof fireEvent !== ‘function’) {
    document.fireEvent = document.createEventObject ? // IE
    function(element, event) {
    var evt = document.createEventObject();
    return element.fireEvent(‘on’ + event, evt);
    } : // FX
    function(element, event) {
    var evt = document.createEvent(‘HTMLEvents’);
    evt.initEvent(event, true, true); // event type, bubbling, cancelable
    return !element.dispatchEvent(evt);
    };
    }

    // preselect the 1st option of the 1st-maxPreselectedAttributeOptionCount’th configurable attribute
    document.maxPreselectedAttributeOptionCount = 2;
    Event.observe(window, ‘load’, function() {
    if (!spConfig) {
    return;
    }
    for (var i = 0; i < Math.min(maxPreselectedAttributeOptionCount, spConfig.settings.length); ++i) {
    var attr = spConfig.settings[i];
    attr.selectedIndex = 1;
    Event.observe(attr, 'change', Prototype.emptyFunction);
    fireEvent(attr, 'change');
    }
    });

  9. Correction to my post above:
    replace
    document.maxPreselectedAttributeOptionCount = 2;
    with
    window.maxPreselectedAttributeOptionCount = 2;

  10. Tobias work great with Configurable
    but simple products with custom options
    in IE show error (and firebug shows it too)

    spConfig is not defined

    can you help ?
    i have in my store simple and configurable products…

Comments are closed.