Magento changing the dropdown configurable product

Question

I need to show the options of a configurable product as divs with an "a" inside that let the user perform a click in the option and select it, instead of a dropdown list. Like a menu (the goal is to show shoe sizes).

As many of you know, Magento uses a Json response to fill the options of the dropdown menu. (var spConfig = new Product.Config(getJsonConfig() ?>) and the class is located in js/varien/product.js (Product.Config = Class.create() ).

Then, what I did was to edit the file template/catalog/product/view/type/options/configurable.phtml and replace the original behavior for something like this.

'<?php
     echo ' 
                <ul class="super-attribute-select">';
         $resultado = json_decode($this->getJsonConfig(), true);
         $atributo=$resultado['attributes'][162]['options'];
         foreach($atributo as $att){
             echo '<li>';
             echo '<a value="'.$att['id'].'" price="'.$att['price'].'" href="javascript:void()" onclick="return assignValue()">'.$att['label'].'</a>';
             echo '</li>';
             }
     echo ' </ul>
            <div class="clear"></div>';
     ?>'

This simple mod let me replace the menu for a little grid formed by divs. Now I'm trying to make a Javascript function that emulates the native behavior but just for the option that is selected (in this case the shoe size). As I understand the code it sends the option value with the form, so my idea was to create a hidden input and then assign the value through a Javascript function when the user performs a click, something like this:

'<script>
  function assignValue(value){
   //assign the value       
      document.getElementById('super_attribute[162]').value = value;
   //mod the class of the selected item
      this.addClassName("selected");
</script>'

I think it could be necessary to create a function or call a method that magento already has to make the value required. Even I don't know if it could be a good idea to set the class "required-entry" on the hidden input.

Could you help me please? Any kind of help or other ideas will be highly appreciated.

Answer 1

Here you have a code snippet. Is too simple =) !!..

    <script type="text/javascript">
        function assignValue(idattribute,price,value){
            var sal = new String(value); //this value is what you are showing to the user in the div grid
            var disp = new String(idattribute);

            $('nameinputhidden').value=disp;
            $('advice-required-entry-attribute').fade();
                    $$('.nameinputhidden').each(
                     function(e){
                   e.removeClassName('active');
                      }
                      )
                    $(sal).addClassName('active');

    </script>

And don't forget to get the input value as hidden. This input value have to be the attribute you are showing on the grid.

Hope this helps. Any way if I can help you just let me know!

Regards!