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