How to add a size chart to products info?

[celina2007]

hello buddies,

 

I would really appreaciate if someone tell me how to add a size chart to product info page, in the description, either a table or a jpg with the size chart is ok. I have easypopulate so this might help me add it, i don't know if it would help :$

 

 

Thanks a lot

[Guest]

On my test site you can see a table here. http://www.javaroasters.com/dark-sky-p-46.html. It is just an html table inserted into the product description.

 

Very simplistically tables are made like;

 

  <table border="1">
<tr>
  <td>Row 1 - Column 1</td>
  <td>Row 1 - Column 2</td>
</tr>
<tr>
  <td>Row 2 - Column 1</td>
  <td>Row 2 - Column 2</td>
</tr>
<tr>
  <td>Row 3 - Column 1</td>
  <td>Row 3 - Column 2</td>
</tr>
 </table>

This creates a table where you place it in your product description. You can add borders or set widths to the tables, background colors, etc. Just search the internet for tables and you will find a good description of how to build them.

 

An image can be added like;

 

<img alt="Size Chart" title="Size Chart" src="images/size-chart.jpg" border="0" />

 

That will display the image where you place it in your product description.

 

You can also have it as a popup in your product descriptions like this;

<a href="java script:openwindow('/size_chart.php', 450, 450, 0, 0)">Size Chart</a>

 

This creates a text link to the popup so it would look like (Find your perfect size by using our built in Size Chart so you don't complain it doesn't fit!)

 

And then create a page called size_chart.php and have a table in it that is 450 by 450 px. There is some code that you have to add at the top of product_info.php also to make the JS work. Right under the stylesheet definition add

 

<script language="javascript" type="text/javascript">
<!--
var open_window = false;
var new_window = null;

function openwindow(url,width,height,resizable,scrollbars,posx,posy)
{
if(posx==null) posx = 20;
if(posy==null) posy = 20;
now = new Date();
new_window=window.open(url, now.getHours()+now.getMinutes()+now.getSeconds(), 'width='+width+',height='+height+',resizable='+resizable+',scrollbars='+scrollbars+',screenY='+posy+',screenX='+posx+',top='+posy+',left='+posx);

try {
new_window.focus();
} catch(e) {}
}
//-->
</script>

 

 

There is also a contribution called attribute info that will place a little Info Icon at the end of your attributes (like Choose Size) which will lead to a pop up with your size chart.

 

Lots of choices for you.

[celina2007]

Thanks a lot for your great ideas, i will try some of them :)