I'm setting up a custom configurable product screen, replacing the select boxes with radio buttons (amazon style). The thing is, I would like to display all possible options on the product view, and the default option is that Magento enables the second attribute once the first one has been set (it filters the attributes according to availability). I would like to show all options and disable them (visually by graying them out) once the user has interacted with the attributes (Think of buying sneakers on Amazon. If a color is not available for a specific size, the color is grayed out).
How can I do this?
Update:
I've toyed around for a while with configurable.js and replaced the fillSelect() function for a fillRadio() function that reads like this:
fillRadio: function(element){
var attributeId = element.id.replace(/[a-z]*/, '');
var attributes = this.getAttribute(attributeId);
var options = this.getAttributeOptions(attributeId);
var prevConfig = false;
if(element.prevSetting) {
prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
}
if(options) {
var index = 1;
var inputs = [];
for(var i = 0; i < options.length; i++) {
var allowedProducts = [];
var input = document.createElement('input');
jQuery(input).attr({
type: 'radio',
name: attributes.code,
disabled: 'disabled',
value: options[i].id,
price: options[i].price,
id: attributes.code + attributeId + '-' + i
}).appendTo(element);
var label = document.createElement('label');
jQuery(label).attr({
for: attributes.code + attributeId + '-' + i
}).html(this.getOptionLabel(options[i], options[i].price)).appendTo(element);
if(prevConfig) {
for(var j = 0; j<options[i].products.length; j++) {
if(prevConfig.config.allowedProducts
&& prevConfig.config.allowedProducts.indexOf(options[i].products[j])>-1){
allowedProducts.push(options[i].products[j]);
}
}
} else {
allowedProducts = options[i].products.clone();
}
if(allowedProducts.size() > 0) {
options[i].allowedProducts = allowedProducts;
jQuery(input).removeAttr('disabled');
}
if(!element.options)
element.options = [];
element.options[i] = input;
element.options[i].config = options[i];
}
}
}
I have also modified configurable.phtml file and removed the select tags and moved the id and classes to the input container:
<?php foreach($_attributes as $_attribute): ?>
<dt><label class="required"><?php echo $_attribute->getLabel() ?></label></dt>
<dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
<div class="input-box super-attribute-select" id="attribute<?php echo $_attribute->getAttributeId() ?>">
</div>
</dd>
<?php endforeach; ?>
Now I'm only debugging the javascript functions (event firing, etc) so that the radio buttons are disabled with every "main" option change
