Size Charts With Static Blocks and Javascript

Size Charts With Static Blocks and Javascript

How to use static blocks and JavaScript to create size charts in Magento.
SKU: size-chart-with-static-blocks-and-javascript
Looking for an easy to install version?
Consider the commercial version

Solution 1:

Size chart using a link that pop-ups an external php page.

1 Create a new attribute called size_chart_template with the following properties:

  • Attribute Code : size_chart_template
  • Scope: Store View
  • Apply to: Configurable Product

2 Paste this code snippet in app/design/frontend/default/yourtemplate/template/catalog/product/view.phtml where the link must be displayed.
       if($_product->getAttributeText('size_chart_template') != ""){ 
            $sizeChartURL =  Mage::getBaseUrl().'sizechart.php?template='.$_product->getAttributeText('size_chart_template'));
               $sizeChartIcon= Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."size-charts/size-chart.gif";
               echo 'size chart';       
3 Create a root file called sizechart.php with the following content:

define('MAGENTO_ROOT', getcwd());
$mageFilename = MAGENTO_ROOT . '/app/Mage.php';
require_once $mageFilename;
if(isset($_GET['template']) ) {
   echo  Mage::app() ->getLayout() ->createBlock('cms/block') ->setBlockId($_GET['template']) ->toHtml(); 
4How to use it?
  • Go to Catalog > Attributes > Manage attributes
  • Enter size_chart_template and hit enter, then click on size_chart_template
  • Click on Manage Label/Options – and add your new options
    eg: Under admin: Boys Shoes
    Default Store View: boys_shoes (all in lower cases and replace space with underscore “_”)
    Click on save attribute button.
  • Go to CMS > Static Blocks
  • Click on the Add New Block button
  • Enter the following info:
    Block Title: Boys Shoes - Size Chart (for example)
    Identifier: boys_shoes
    remember that boys_shoes is the option value we have added in 3) – please use the same (it is case sensitive)
    In content : enter your HTML code (text and/or images) . When you are done click on the save block button.
  • Now Go to Catalog > Manage Products, click on the product with Shoes Size chart template,
    Choose Boys Shoes from dropdown, and save the product.
    Now you will be able to see size chart on the product page (for this product)
Solution 2:

Size chart using static blocks and JavaScript to show content in the same page

Let's say you want to create a size chart for a product from the category 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 attribute called size_chart_template



Go to Admin->Attributes->Manage Attributes

Add new attribute with the following properties:

  • Attribute Code : size_chart_template
  • Scope: Store View
  • Catalog Input type  for Store Owner : Dropdown
  • Unique Value : No
  • Required value : No
  • Apply to * : Configurable Product

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  my Jacket, the size chart identified by "jackets-size-chart".

Go to Icon my Jacket Item and select "jackets-size-chart" from the dropdown list.

Open app/design/frontend/default/yourtemplate/template/catalog/product/view.phtml and paste the following attached code. (where you like to see your size chart info)
 $sizeChartIcon= Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."size-charts/size-chart.gif"; ?>
   <?php echo 'size chart' ; ?>