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