Displaying Width, Depth, and Height with Dropdown for Units of Measure in Magento 1.9

configurable-productmagento-1.9productwidgets

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.

Best Answer

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

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

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

<?php
$_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>
</select>

<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
});
</script>

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

Related Topic