How To Show Size Chart in Magento Detail Page

Create Magento Size Charts Using Static Blocks and Javascript

In my Old post I showed you how to create a size chart using a
link that pop-ups an external php page.
In this tutorial, I will show you how to use static blocks and JavaScript to create size charts . Demo Here
Suppose you want to create a size chart for the product type Jackets.
Here are steps you have to follow:

• STEP 1: Create a new static block called "Jackets Size Chart" identified by "jackets-size-chart"
• STEP 2: Create a new attribut called size_chart_template

STEP 1

STEP 2

Go to Admin->Attributes->Manage Attributes
Add new attribute with the following properties:

• Attribute Code : size_chart_template
• Scope: Global
• Catalog Input type  for Store Owner : Dropdown
• Unique Value : No
• Required value : No
• Input Validation for store owner: No
• Apply to * : All Product Types
• Use to create Configurable Product   : No

For Frontend Properties: No everywhere and Position to 0
In Manage Label/Options:
Admin : Size Chart Template
add your options for example:
jackets-size-chart (remember this is the identifier of your static block)
...
Save your attribute.
Now go to Catalog->Attributes->Manage Attribute Sets
Select your set and add the attribute you have just created. (drag and drop)
Now we are going to assign to the product  Icon Retro Motorcycle Jacket, the size chart identified by "jackets-size-chart".
Go to Icon Retro Motorcycle Jacket Item and select "jackets-size-chart" from your dropdown list (You should add this attribut before use it).
Open app/design/frontend/default/yourtemplate/template/catalog/product/view.phtml and paste the following code. (where you like to see your size chart info)

1	<!-- BOF SIZE CHART --><!-- BOF SIZE CHART -->

2

<?php

3	$sizeChartIcon= Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."size-charts/size-chart.gif"; ?>

4	<a onclick="$('size-chart').show();"><?php echo '<img src="%27.$sizeChartIcon.%27" alt="size chart">' ; ?>  </a>

5	<div id="size-chart" style="display:none;"> <?php echo  Mage::app() ->getLayout() ->createBlock('cms/block') ->setBlockId($_product->getAttributeText('size_chart_template')) ->toHtml(); ?></div>

6	<!-- EOF SIZE CHART --><!-- EOF SIZE CHART -->