0

I need to change view of size dorp down to ul li box like...

I need like this enter image description here and currently size attribute is coming in drop down....

I tried in 
app/design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml

i tried this code...

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());

?>

<?php if ($_product->isSaleable() && count($_attributes) ): 


;?>
    <dl>

    <?php print_r() ?>
    <?php foreach($_attributes as $_attribute): 

    ?>

        <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]"  id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select ">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>
              </div>
        </dd>

    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">


jQuery(function(){
    var id = "attribute150";
   jQuery('#'+id).after("<ul id='temp'   />")
        .children("option").each(function() {
            jQuery("#temp").append('<li value="'+jQuery(this).val()+'">'+jQuery(this).text()+"</li>");
        })
        .end().remove();
            jQuery('#temp').attr({"id":id,"name":id});
});
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>
2
  • Don't change anything, you can convert drop-down to ul li buttons using javascript.
    – mageUz
    Jan 14, 2015 at 14:38
  • @mageUz how to onvert drop-down to ul li buttons using javascript. Jan 14, 2015 at 17:26

1 Answer 1

1

I can recommend you this free extension. It allows you among other things to change any dropdown for configurable products to labels and/or images.
So you can change your size dropdown to labels but they will look slightly different than what you want, but with some css magic you can make them look as you want, or you can simply make the size options as images and upload them in the configuration area.
Here is the full documentation of hot it works and how it should be configured

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.