100% Satisfaction Guaranteed. Click here to read why you should by from us.

Magento Configurable Products - Setting Default Value for Options


Have you ever wanted to be able to set the default value for options on configurable products?  We did!  So we decided to build this into our stores.

We use this feature for:

  • Allowing us to default options to the most popular options to save customers those extra few clicks
  • Lets us display search and category listings with all our available color options - just like Zappos!

 


Our Solution

To add this feature to our stores, we developed an extension that we are currently using internally. It adds radio buttons on the product edit page beside configurable options, allowing you to specify a default value.  Then on the frontend, there is logic to set the correct values in the product option dropdowns.  We were able to do this without any modification to core code.

The default behavior in Magento for configurable products is for the options to default to “Choose an option”.  There is no way to specify a default value to automatically be selected.

This extra feature we added lets us default options to any value we want. Another added benefit is that we can list products like popular online sites like Zappos.  We wanted the ability to list products on category and search grids in all available colors.  To do this, we create a configurable product for each color.  Then for each of the configurable products, we set a different default color. This way, a customer has the ability to see all colors on the product page, and they can still switch to any other color they desire.  Check it out here.

Update August 24 / 2010 - We have made this into an extension
Available Here.

The extension does not modify any core code, is very high quality code, and tested thoroughly.

 

Here are some screenshots:

1. Editing a configurable product, we can set the default value for an option by clicking a radio button:


 


2. When a customer goes to a product, they see this default option selected for them:



An Alternative Javascript Method

If you don’t have many products, there is a way to get the same type of behavior using a javascript “hack”.

This snippet of code, can be placed on a product page and it will select the first value for each configurable option. With a little modification, you can modify it so that it selects a specific option.

  1.  
  2. function fireEvent(element,event)
  3. {
  4. if (document.createEventObject)
  5. {
  6. // dispatch for IE
  7. var evt = document.createEventObject();
  8. return element.fireEvent('on'+event,evt);
  9. }
  10. else
  11. {
  12. // dispatch for firefox + others
  13. var evt = document.createEvent("HTMLEvents");
  14. evt.initEvent(event, true, true ); // event type,bubbling,cancelable
  15. return !element.dispatchEvent(evt);
  16. }
  17. }
  18.  
  19. Event.observe(window, 'load', function() {
  20. var spConfigIndex = 0;
  21. for (spConfigIndex=0; spConfigIndex<spConfig.settings.length; ++spConfigIndex)
  22. {
  23. spConfig.settings[spConfigIndex].selectedIndex = 1;
  24. obj = spConfig.settings[spConfigIndex]; // this grabs the first select item
  25. Event.observe(obj,'change',function(){});
  26. fireEvent(obj,'change'); // this simulates selecting the first option, which triggers
  27. }
  28. });
  29.  

UPDATE - August 11 / 2010

Here is an updated version of the code above.  It adds a small delay in between selecting each configurable option.  This allows just enough time for the next select box to load up.

  1.  
  2. function fireEvent(element,event)
  3. {
  4. if (document.createEventObject)
  5. {
  6. // dispatch for IE
  7. var evt = document.createEventObject();
  8. return element.fireEvent('on'+event,evt);
  9. }
  10. else
  11. {
  12. // dispatch for firefox + others
  13. var evt = document.createEvent("HTMLEvents");
  14. evt.initEvent(event, true, true );
  15. return !element.dispatchEvent(evt);
  16. }
  17. }
  18.  
  19. function setDefaultConfigOptions()
  20. {
  21. if (spConfigIndex >= spConfig.settings.length)
  22. {
  23. return; // stop
  24. }
  25.  
  26. spConfig.settings[spConfigIndex].selectedIndex = 1;
  27. var obj = spConfig.settings[spConfigIndex];
  28.  
  29. ++spConfigIndex;
  30.  
  31. Event.observe(obj,'change',function(){});
  32. fireEvent(obj,'change');
  33.  
  34. window.setTimeout("setDefaultConfigOptions()", 1); // Add a small delay before moving onto the next option
  35. }
  36.  
  37. var spConfigIndex = 0;
  38. Event.observe(window, 'load', function() {
  39. setDefaultConfigOptions();
  40. });
  41.  

The javascript hack above would have been too time consuming for us to use on a live store (too many products and too many options being changed over time).  That is why we decided to add this extra feature to our stores. Our store managers love it.

 


See • MagentoProblems and SolutionsCode Snippits

Comments

By peter
11 08 2010 at 02:41 AM

hi,

the javascript does not really work with Firefox (tried on 3.6.8) for some reason ... As long as there is only one option it’s fine, but stops at any choice that has 2 or more…
I’ve done a trace of spConfig.settings[spConfigIndex].length and it shown a value of 1 where there should be 3 options (‘choose’ and the 2 options..) Where there is only 1 option, 2 is displayed in the trace…


By Iceberg Commerce
11 08 2010 at 11:43 AM

Hi Peter,

I tested the javascript again (using firefox 3.6.8 and the javascript console).

I tried it on this page: http://helmetsandarmor.com/sixsixone-vapor-pressure-suit.html

And also on this page: http://merinowoolapparel.com/womens-long-sleeve-merino-crew-neck.html

In both cases it worked for me.  Can you send me a link to the product page where you were trying to use the javascript code?

- Raman


By Iceberg Commerce
11 08 2010 at 01:36 PM

Thank you Peter for helping me make the code work for the case where there are more than 2 configurable options. 

I posted the updated code that adds a small delay in between selecting each configurable option.  This allows just enough time for the next select box to load up.


By Eric
06 09 2010 at 10:06 PM

Does your module also sort the items?


By Iceberg Commerce
06 09 2010 at 10:23 PM

Hi Eric,
The module doesn’t sort the items/options.  Magento lets you order options on the Attributes > Manage Options section.

Do you need to have a different order for options on different products?


By Matt
02 02 2011 at 02:43 PM

Just wanted to thank you so much for your javascript hack! The updated code works as described. Thank you!!!!!


By Ryan
18 02 2011 at 12:05 PM

Hi Raman,

Wonderful code that works great! I have 1 question - I have 2 options that are being default selected as your code does. However, I wish to only have the 1st option defaulted, and leave the second option as “Choose an Option…”.

What would need to be modified in the code above to make that work?


By Iceberg Commerce
18 02 2011 at 12:15 PM

Hi Ryan,

To only have only the first option defaulted, try removing line #34:
> window.setTimeout(“setDefaultConfigOptions()”, 1);

I think that should work for you.

- Raman


By Ryan
18 02 2011 at 03:06 PM

Thanks Raman, that works perfectly! The only issue now is me wanting each product to display a different default attribute. It seems no matter what I do the attributes I list under “Manage Label / Options” always stay in that order regardless if I add them in a different order in the Associated Products section of the product creating page…

Any suggestions?


By Iceberg Commerce
18 02 2011 at 03:15 PM

Hey Ryan,

I’m not sure how to control order - the value of “position” under “Manage Label / Options” should work? I guess you have already tried that.

If that doesn’t work, maybe there is a bug in the core code?

Only suggestion i can think of is to delete the magento cache to see if it is a caching issue.


By Ryan
18 02 2011 at 03:24 PM

Raman,

You are right, the value of “position” does control order, but it will stay in that order for every product it’s associated with. I want different products to have the colors listed in different order…

Does that make any sense?


By Iceberg Commerce
18 02 2011 at 03:32 PM

Hey Ryan,

Oh yes, I understand now.  We wanted that same behavior.  That is why we decided to add the extra feature to be able to select the default option from the Product edit page. 

That way we could default to most popular options for each product.

Thats what this extension adds:
http://icebergcommerce.com/software/magento-configurable-product-default-options-extension.html


By Quentin
07 04 2011 at 02:15 AM

Hi,

Thank’s a lot for your work. But I have one problem :
I have 2 listbox.
When I change my first listbox, my second listbox doesn’t update her default value.

Thank you.


By Iceberg Commerce
07 04 2011 at 06:48 AM

Hi Quentin,

The way the javascript is written, it only sets the default values on page load.  There are no more updates to the listboxes as you start changing the options.


By Chris Schuler
09 09 2011 at 10:49 AM

I posted the wrong code above.  Have mercy on my soul.
====================================================


// Our products have multiple attributes (3-5).
// I wanted the script to recheck all the other attributes after each selection (the above script only runs on initial load),
//  ( I had same problem as you, Iceberg Commerce )
// If only 1 option is available in dropdown (and if it hasn’t yet been set), script will set it it to only available option.
// This is my first Magento mod (and first experience with prototype, for that matter), so excuse the sloppy code.
// If you can do better, please do (and please post it here!)


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 );
      return !element.dispatchEvent(evt);
  }
}

function setDefaultConfigEvents()  //Add Change events to all attributes on load
{
  for (var iisd=0;iisd < spConfig.settings.length; iisd++)
  {
      var objsd = spConfig.settings[iisd];
      if (objsd) Event.observe(objsd,‘change’,function(){setDefaultConfigOptionsStart();} );
  }
}

function setDefaultConfigOptionsStart()  //After a change re-check other attributes, unless re-check is already in progress
{
  if (!(stoprecursive)) {     
      setDefaultConfigOptions(0)
  }
}


function setDefaultConfigOptions( spConfigIndexNum)  //Check an attribute, and set timeout to check next attribute
{
  if (spConfigIndexNum >= spConfig.settings.length)
  {
      spConfigIndex=0;
      stoprecursive = false;
      return; // stop
  }else{
      stoprecursive = true;
      var obj = spConfig.settings[spConfigIndex];

      if (checkConfigOptions(obj))
      { 
        //++spConfigIndex;
   
        Event.observe(obj,‘change’,function(){});
        fireEvent(obj,‘change’);
      }
   
      spConfigIndex = spConfigIndexNum + 1;
      window.setTimeout(“setDefaultConfigOptions(spConfigIndex)”, 5); // Add a small delay before moving onto the next option
  }
}

function checkConfigOptions(cmsObj)  //Check attribute. If only 1 option in dropdown (and if it hasn’t yet been set) set only available option.
{
  if ( (cmsObj) && (cmsObj.length) && (cmsObj.length == 2) && (cmsObj.selectedIndex == 0) )
  {
      //alert(“Setting it (was ” + cmsObj.selectedIndex + “) ” );
      cmsObj.selectedIndex = 1;
      //alert(“Set it (now ” + cmsObj.selectedIndex + “) ” );
      return true;
  //}else{  //Debugging
  //  alert(cmsObj.length + ”—” + cmsObj.selectedIndex);
  }
  return false;
}


var spConfigIndex = 0;
var stoprecursive = false;
Event.observe(window, ‘load’, function() {
  //setDefaultConfigOptions();
  setDefaultConfigEvents();
  setDefaultConfigOptions(0);
});

  //]]>
  [removed]


By Andy
21 09 2011 at 09:22 AM

Anyone have a fix for IE9… Have to force compatibility mode!


By Andy
21 09 2011 at 10:05 AM

Here is my IE9 fix:

[removed]
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == ‘Microsoft Internet Explorer’)
{
var ua = navigator.userAgent;
var re = new RegExp(“MSIE ([0-9]{1,}[\.0-9]{0,})”);
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}

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

function setDefaultConfigOptions()
{
if (spConfigIndex >= spConfig.settings.length)
{
return; // stop
}
spConfig.settings[spConfigIndex].selectedIndex = 1;
var obj = spConfig.settings[spConfigIndex];
++spConfigIndex;
Event.observe(obj,‘change’,function(){});
fireEvent(obj,‘change’);
window.setTimeout(“setDefaultConfigOptions()”, 0); // Add a small delay before moving onto the next option
}
var spConfigIndex = 0;
var ver = getInternetExplorerVersion();
Event.observe(window, ‘load’, function() {
setDefaultConfigOptions();
});
[removed]


By Zuiko
26 09 2011 at 08:28 AM

Thanks Andy,
your code works fine for IE9, but I have question:

with your test:
if (ver == -1 || ver >= 8.0) {
it seems that the behaviour of your patch will be the same for IE8 and IE9

To have this behaviour only for IE9, the test would have been:
if (ver == -1 || ver > 8.0) {
What do you think about my remark?

Zuiko


By Rob
05 06 2012 at 04:08 PM

Hi,
I came across this searching for a solution for a magento issue I am having.  Any insight is greatly appreciated!

I have configurable products that use colors(each color has a number code assigned to it) as the configurable attribute.  Currently,  the magento internal order is not correct, so on the front end, the colors are listed in a completely random order. 
The attibute order should display in ascending order using the first character and then to the next character like this: 1, 1b, 2, 27, 30, 4…). 

Thank you for your time!


By Steve
11 09 2012 at 06:20 AM

THX it was such a help, you saved me a day of work…


By Michael
15 02 2013 at 11:56 AM

Great work!

Thanks a lot for this smile


Leave a Comment

Name:

Email: (required but not publicly shown)

URL:

Please enter the word you see in the image below.: