Editing Frontend Product Configurable Attributes in Magento

If you’ve ever tried to make any changes to the product options on the frontend of a configurable product in Magento, you will have noticed that they aren’t generated as you may have expected. All of the configurable attributes are generated using a JSON object. While this is a clean way of
generating the options, it makes it difficult to make any modifications to them. In the following example, we’ll be using a product that is configurable by size and colour. The only file you will need to make any changes to is: /app/design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml. Just copy that file into your theme, to begin making changes.

Step One: Change Attribute Dropdown

Before making changes to the product options on the front end, you must change the attribute dropdown from:

</pre>
<div class="input-box">


</div>
<pre>

to:

<!--?php foreach($_attributes as $_attribute): ?--><label class="required"><em>*</em><!--?php echo $_attribute--->getLabel() ?></label>

	<dd<!--?php if ($_attribute--->decoratedIsLast){?> class="last"<!--?php }?-->></pre>
<div class="input-box">


</div>
<pre>
	

<!--?php endforeach; ?-->

<!--?php foreach($_attributes as $_attribute): ?-->
	<!--?php if($_attribute--->getAttributeId() == "[COLOUR_ATTRIBUTE_ID]"): ?></pre>
<div class="size-wrapper" id="size-wrapper"></div>
<pre>




	<!--?php elseif($_attribute--->getAttributeId() == [SIZE_ATTRIBUTE_ID]): ?></pre>
<div class="colour-wrapper" id="colour-wrapper"></div>
<pre>
	<!--?php endif; ?-->
<!--?php endforeach; ?-->

Just insure that you change [SIZE_ATTRIBUTE_ID] & [COLOUR_ATTRIBUTE_ID] to the ids of the attributes you are using as I just used those as placeholders and you will need to be able to specifically reference your custom or built in attribute.

Step 2: Adding Javascript to The Bottom of The Page

Now that you have set up the attribute dropdown, you can add javascript to the bottom of the page. This will insure that once you select an option, the corresponding option in the hidden dropdown that was originally being shown on the page. Also, once you select the first option, in this case “size”, the colour values for that selected option will be generated.

<script type="text/javascript">// <![CDATA[
    function sizeClick(sizeId)
    {
        var id_array = sizeId.split("-");
        var selectReference = "attribute"+id_array[0];

        var element = document.getElementById(selectReference);
        element.value = id_array[1];

        $(element).simulate('change');

        var colourReference = "attribute"+179;

        var colourElement = document.getElementById(colourReference);

        if(colourElement)
        {
            var colourWrapper = document.getElementById('colour-wrapper');
            colourWrapper.innerHTML = "";

            jQuery(colourElement).children().each(function(){
                if(jQuery(this).val())
                {
                    colourWrapper.innerHTML += '<span onClick=colourClick(this.id) id="179-'+jQuery(this).val()+'">'+jQuery(this).text()+'</span>';
                }
            });
        }

    }

	function colourClick(colourId)
    {
        var id_array = colourId.split("-");
        var selectReference = "attribute"+id_array[0];

        var element = document.getElementById(selectReference);
        element.value = id_array[1];

        $(element).simulate('change');
    }
// ]]></script>

In order for this to work, you will need the simulate.js library loaded on your page. This function is used to properly select the correct attribute value in the hidden dropdown. So what we have done here is not actually change the original dropdown directly, but hide the original, and create a new set of controls that will actually select the values in the original dropdown. That way, we don’t have to make any other changes to the code in order for the attribute values to be recognized and have the product properly added to the cart.

Now all that is left to do is apply any styling you would like to the new controls and you will have a new set of functioning attribute selectors that will work the same as the original dropdowns.