Setting default options for configurable products

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

   • Thanks for the tip! (sorry for late reply!)

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. Jose, you are god !! thanks a lot!! this was giving me headache

7. 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!

8. 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/

9. and what about configurable products ? simple works ok, but configurable didnt refresh second option…

10. 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');
    }
    });

    • Where paste this code ? configurable.phtml ?
      Thank’s a lot

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

12. 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…

    • Sorry Luka, I don’t have a solution for custom options (yet); but it should be quite similiar. You can avoid the “spConfig is not defined” error by testing if it exists:

      if ((typeof spConfig == ‘undefined’) || !spConfig) {
      return;
      }

      • but where paste this code ?

      • Replace

        if (!spConfig) {
        return;
        }

        with it.

      • ok. i found. and it works !
        thanks a lot!

13. Yes. error checking on spConfig did the trick for me on IE 8. IE 9 apparently does not inhibit this behavior.

Comments are closed.