ShopSite Forums

Your source for ShopSite user collaboration

Skip to content

HELP~ product page columns

General ShopSite user discussion
Post a reply

HELP~ product page columns

Postby moonie » Fri Oct 06, 2006 2:59 pm

Can anyone tell me~ how do I make my products show in 2 columns? I try to change loop products to loop products 2 and nothing happens!

Here is my page:

http://evaand.fatcow.com/store/page5.html


Here is my code:

[-- DEFINE LINK_TO_PAGE --]
<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- Page.FileName --]">[-- PAGE.Name --]</a>
[-- END_DEFINE LINK_TO_PAGE --]

[-- DEFINE PAGE --]
<HTML><HEAD><TITLE>products</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<LINK href="http://www.evaandyou.com/store/media/bodytext.css" type=text/css rel=stylesheet>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
<LINK href="http://www.evaandyou.com/store/media/bodytext.css" type=text/css rel=stylesheet>
</HEAD>
<BODY bgColor=#473427
onload="MM_preloadImages('http://www.evaandyou.com/images/how_we_over.gif','http://www.evaandyou.com/images/service_over.gif','http://www.evaandyou.com/images/portfolio_over.gif','http://www.evaandyou.com/images/eva_over.gif','http://www.evaandyou.com/images/contact_over.gif')">
<table width="750" border="0" cellpadding="0" cellspacing="0" bgcolor="#EFEFAE">
<tr>
<td><img src="http://www.evaandyou.com/PRODUCTHEADER.gif" width="750" height="129" border="0" usemap="#Map"> <map name="Map">
<area shape="rect" coords="225,28,351,46" href="http://evaand.fatcow.com/store/page3.html">
<area shape="rect" coords="225,51,351,69" href="http://evaand.fatcow.com/store/page2.html">
<area shape="rect" coords="225,73,351,91" href="http://evaand.fatcow.com/store/page4.html">
</map>
<TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 width=750 bgColor=#ffffff
border=0>
<TBODY>
<TR>
<TD width=200 height="425" valign="top" bgcolor="#C1DDD4">
<TABLE cellSpacing=0 cellPadding=0 width=200 border=0>
<TBODY>
<TR>
<TD class="bodytext"><A
onmouseover="MM_swapImage('Image9','','http://www.evaandyou.com/images/how_we_over.gif',1)"
onmouseout=MM_swapImgRestore()
href="http://www.evaandyou.com/consultation.html"><IMG height=36
src="http://www.evaandyou.com/how_we.gif" width=200 border=0
name=Image9></A></TD>
</TR>
<TR>
<TD class="bodytext"><A
onmouseover="MM_swapImage('Image10','','http://www.evaandyou.com/images/service_over.gif',1)"
onmouseout=MM_swapImgRestore()
href="http://www.evaandyou.com/custom.html"><IMG height=29
src="http://www.evaandyou.com/services.gif" width=200 border=0
name=Image10></A></TD>
</TR>
<TR>
<TD class="bodytext"><A
onmouseover="MM_swapImage('Image11','','http://www.evaandyou.com/images/portfolio_over.gif',1)"
onmouseout=MM_swapImgRestore()
href="http://www.evaandyou.com/port_before.html"><IMG height=28
src="http://www.evaandyou.com/portfolio.gif" width=200 border=0
name=Image11></A></TD>
</TR>
<TR>
<TD class="bodytext"><A href="http://www.evaandyou.com/products.html"><IMG height=28
src="http://www.evaandyou.com/products_over.gif" width=200 border=0></A></TD>
</TR>
<TR>
<TD class="bodytext"><a
onMouseOver="MM_swapImage('Image13','','http://www.evaandyou.com/images/eva_over.gif',1)"
onMouseOut=MM_swapImgRestore()
href="http://www.evaandyou.com/eva.html"><img height=28
src="http://www.evaandyou.com/eva.gif" width=200 border=0
name=Image13></a></TD>
</TR>
<TR>
<TD class="bodytext"><a
onMouseOver="MM_swapImage('Image14','','http://www.evaandyou.com/images/contact_over.gif',1)"
onMouseOut=MM_swapImgRestore()
href="http://www.evaandyou.com/contact.html"><img height=36
src="http://www.evaandyou.com/contact.gif" width=200 border=0
name=Image14></a></TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD vAlign=top width=550 bgColor=#efefae>
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr valign=top><td valign=top align=left width="100%">
<P align="left" class="bodytext">
[--PAGE.Name --]
[-- LOOP LINKS --] <br>
[-- LINK --] <br>
[-- END_LOOP LINKS --]
</P></td></tr>

[-- LOOP PRODUCTS --]
<tr valign=top><td valign=top align=left width="100%">
<P align="left" class="bodytext">
[-- PRODUCT --]
</P></td></tr>
[-- END_LOOP PRODUCTS --]
</table>
<p>&nbsp;</p>
</TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
</table>
<P class=bodytext>&nbsp;</P>
<P>&nbsp;</P></BODY></HTML>[-- END_DEFINE PAGE --]
moonie
 
Posts: 13
Joined: Sat Sep 30, 2006 12:36 pm
Top

Postby Jim » Fri Oct 06, 2006 3:17 pm

The loop product section needs to be in a table by itself. The tags [-- loop products--] and [-- end_loop products --] will be turned into <tr> and </tr> tags after the number of columns is reached. So you need something like

<table >
[-- LOOP PRODUCTS 2 --]
<td valign=top align=left width="100%">
<P align="left" class="bodytext">
[-- PRODUCT --]
</P></td>
[-- END_LOOP PRODUCTS --]
</table>

Of course if this table is within another table you would need the appropriate <td> and <tr> around it.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah
Top

Thank you

Postby moonie » Fri Oct 06, 2006 3:37 pm

IT WORKED :) Thanks so much!

But, if you dont mind, can you also tell me how to get the item names and descriptions underneath the images rather than to the side like they are??

http://evaand.fatcow.com/store/page5.html

Thanks so much!

Tammy
moonie
 
Posts: 13
Joined: Sat Sep 30, 2006 12:36 pm
Top

Postby loren_d_c » Fri Oct 06, 2006 3:44 pm

The layout of the product attributes in relation to one another is a product template issue, not a page template issue. Start with the examples in the product template documentation:

http://www.shopsite.com/help/8.1/en-US/ ... oduct.html

-Loren
loren_d_c
 
Posts: 2572
Joined: Fri Aug 04, 2006 12:02 pm
Location: Anywhere
Top

:(

Postby moonie » Fri Oct 06, 2006 5:35 pm

I have tried everything... I cant figure it out... anyone have any shortcuts on how to make the title, and text appear underneath these images?

http://evaand.fatcow.com/store/page5.html
moonie
 
Posts: 13
Joined: Sat Sep 30, 2006 12:36 pm
Top

Postby Jim » Fri Oct 06, 2006 6:57 pm

Define the product so it is in a table by itself. Then put the image in a row, the title in a row, the description in a row, the add/view cart in a row etc.

[-- define product --]
<table>
<tr><td>
[-- product.graphic --]
</td></tr>
<tr><td>
[-- product.name --]
</td></tr>
<tr><td>
[-- product.productdescripton --]
</td></tr>
<tr><td>
[-- PRODUCT.OrderCheckout --]
</td></tr>
</table>
[-- end_define product --]
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah
Top

:)

Postby moonie » Fri Oct 06, 2006 10:46 pm

Okay one more little thing :) I think Ive got the other fixed! The only other thing I cant figure out is that my tables are not centered if you notice, the products on the right are too far over...
I set the <td "width 50%"> but its not splitting the age in half. Am I making sense? Thanks! Here is the page

http://evaand.fatcow.com/store/page5.html
moonie
 
Posts: 13
Joined: Sat Sep 30, 2006 12:36 pm
Top

Postby Jim » Sat Oct 07, 2006 6:02 am

Since you are trying to have a specific width for the yellow area so it matches the width of your header area you probable want to use set pixel widths instead of %.

In the page template set the table width for the table the products are in to the specific number of pixels needed to completely fill the area that is yellow.

In the product template set the table width to a specific number of pixels that is 1 less than half of the width set for the table on in the page template.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah
Top
Post a reply

Return to User Forum

Who is online

Users browsing this forum: No registered users and 120 guests

Powered by phpBB® Forum Software © phpBB Group