5

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.

Necreaux
  • 9,451
  • 7
  • 26
  • 43
Ricardo M
  • 393
  • 5
  • 17

1 Answers1

0

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!

Ricardo M
  • 393
  • 5
  • 17
  • Thanks Ricardo for the script & your time in responding, however I'mm trying to get thumbnail images of Associated products in the configurable product view page whereas this script's listing the attribute value labels of the configurable product in my case color. Lets say there is a conf product attr 'color' & 4 simple products as associated products with attr color values. Now what I want is a configurable product with NO drop down and just thumbnails of its associated products and when user clicks on any one of the thumbnail then the main image is replaced by associated product main image. – itsandy Apr 22 '13 at 23:46