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.
Jose, you are god !! thanks a lot!! this was giving me headache
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!
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/
and what about configurable products ? simple works ok, but configurable didnt refresh second option…
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
Correction to my post above:
replace
document.maxPreselectedAttributeOptionCount = 2;
with
window.maxPreselectedAttributeOptionCount = 2;
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!
Yes. error checking on spConfig did the trick for me on IE 8. IE 9 apparently does not inhibit this behavior.