CREATE MAGENTO SIZE CHARTS USING STATIC BLOCKS AND JAVASCRIPT
In my Old post I showed you how to create a size chart using alink 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 AttributesAdd 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
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 |
|
2 |
|
3 | $sizeChartIcon = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA). "size-charts/size-chart.gif" ; ?> |
5 |
|
6 |
|
No comments:
Post a Comment