AyaSoftware

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)

  
<?php
  $sizeChartIcon= Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."size-charts/size-chart.gif"; ?>
            <?php echo '' ; ?>   
            
 <?php echo  Mage::app() ->getLayout() ->createBlock('cms/block') ->setBlockId($_product->getAttributeText('size_chart_template')) ->toHtml(); ?>