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;?>
  • Don't change anything, you can convert drop-down to ul li buttons using javascript. – mageUz Jan 14 '15 at 14:38
  • @mageUz how to onvert drop-down to ul li buttons using javascript. – Deepak Kumar Jan 14 '15 at 17:26
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, privacy policy and cookie policy

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