I am new fairly new to Magento, and have been assigned a task which I am having trouble figuring out how to accomplish.

Below the product description there is W24 / D28 / H38 and a drop-down for units of measurement

As you can see in the image, Below the product description there is W24 / D28 / H38 and a drop-down for units of measurement.

The Width, height and depth are inserted on per product basis, so each product has their own value for these fields. The units of measurement drop-down contains two values "Centimeters (CM), and Inches (IN)".

When the unit of measurement is changed from CM to IN, the values of Width, Height and Depth are converted accordingly.

So I was wondering if some one can help me and point me the right direction on how i can accomplish something such as this in Magento 1.9 CE?

I think the biggest problem for me is that I have been told to do this using a Widget.. I was told to create a widget to do this.. Is such a functionality even possible using a widget? I have been studying regarding widgets but after creating a few sample widgets to test i felt like this wasn't what i needed to accomplish this? For instance, if i were to create a widget and then maybe create a new Widget Instance from the admin area and set it up to display on products page, but how could this widget collect values for each product?

Any help and/or guidance to the right track to accomplishing my goal will be appreciated.

1 Answer 1


I wouldn't go about using a widget but maybe create a block that is included on the product detail page. In the block you output the 3 attributes and a dropdown with the units switcher and use Javascript to convert the attribute values.

so... In your templates layout local.xml

   <reference name="product.info">
      <block type="catalog/product_view" name="unit_convert" template="catalog/product/view/units.phtml"/>

In your templates template directory catalog/product/view/units.phtml

$_product = $this->getProduct();
// attribute sizes are by default CM
<span id="unit_width"><?php echo $_product->getData('width');?></span>
<span id="unit_height"><?php echo $_product->getData('height');?></span>
<span id="unit_length"><?php echo $_product->getData('length');?></span>

<select id="unit_convert">
   <option value="cm">CM</option>
   <option value="in">IN</option>

<script type="text/javascript">
$("unit_covert").invoke('observe', 'change', function() {
    var ratio = ($("unit_covert").getValue() == 'cm') ? 1 : 0.393701 ;

    $('unit_width').innerHTML = parseFloat($('unit_width').innerHTML) * ratio;
    // repeat for other sizes

Small disclaimer, I kinda suck at javascript so please recheck it and don't put it on a live environment right away

  • Thank your help. I however accomplished it similarly using a Widget, the main trick was that I extended my block/widget class from Mage_Catalog_Block_Product_Abstract instead of Mage_Core_Block_Abstract because the product information wasn't being made available if i was using Mage_Core_Block_Abstract. But i appreciate your help, it also made me feel i was on the right track. So i will mark it as the right answer since the solution i came up with is pretty similar.. but as you already pointed out the JS doesn't work :) Thank you :)
    – Zubair1
    Nov 18, 2014 at 7:35

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.