Making one of two attributes not required to buy in configurable product

Question

I'm making a shoe store. Different shoe types have different conversions between sizes - Running shoe size US 8 is 26 cm and Wrestling shoe size US 8 is 25 cm. I'm using two attributes for each shoe type - one with option "US ..." and one with "US ... / ... cm".

The idea is to use the first attribute to filter the results in the layered navigation so it looks like

• US 8
• US 9
• US 10

and not like

• US 8 / 26 cm
• US 8 / 25 cm
• US 9 / 26.5 cm
• US 9 / 25.5 cm
• US 10 / 27 cm
• US 10 / 26 cm

I need to use the second attribute on the Product page so the user can select the right size.

The problem is that both attributes are required to add the product to the cart.

How can be done only the second attribute to be required and the first attribute be used only for filtering? Am I on the right way?

Answer 1

Let’s assume that your first attribute’s ID is 1 and second attribute’s ID is 2. You can use CSS to hide the attribute you want on the product page like this:

#attribute1 {display: none;}

We will assume that the attribute selects look something like this (will depend on your actual attribute values):

<select name="super_attribute[1]" id="attribute1" class="required-entry super-attribute-select">
    <option value="">Choose an Option...</option>
    <option value="20">US 8</option>
    <option value="21">US 9</option>
    <option value="22">US 10</option>
</select>

<select name="super_attribute[2]" id="attribute2" class="required-entry super-attribute-select">
    <option value="">Choose an Option...</option>
    <option value="30">US 8 / 26 cm</option>
    <option value="31">US 8 / 25 cm</option>
    <option value="32">US 9 / 26.5 cm</option>
    <option value="33">US 9 / 25.5 cm</option>
    <option value="34">US 10 / 27 cm</option>
    <option value="35">US 10 / 26 cm</option>
</select>

Then you can set up a listener to automatically select the value from attribute1 when attribute2 is selected by a customer. Here’s an example I threw together but I have not tested it so may need to be tweaked:

document.observe('dom:loaded', function() {
    $('attribute2').observe('change', function(e) {
        // Get selected option from attribute2
        var a2 = this.options[this.selectedIndex];

        // Match the option value to one in attribute1
        $('attribute1').select('option').each(function(a1) {
            if (a2.text.match(a1.text)) {
                // Then use the option value to set attribute1
                $('attribute1').setValue(a1.value);
            }
        });
    });
});

Answer 2

I've managed to workaround the situation - made the type of the first attribute "Multiple Select". A little bit slower creation of the simple products, but it works as I want.