3. Laying Out Your Products in Multiple Columns

What follows is code to use in your templates in Actinic, which will allow you to set the number of columns to lay products out in with a custom property value.
This code is also available within a file on the Actinic Knowledge Base (http://knowledge.actinic.com/), which may be more reliable to copy and paste into your templates.
To begin, replace Act_ProductBody.html with the following:-

<!-- ProductBody HTML begin -->
<!-- Insert HTML for the top of the product body -->

<script language=JavaScript>
<!--
var currentcol = 0;
var colwidth = Math.floor(100 / CUSTOMVAR:NUMCOLS);
// -->
</script>

<div align="right"><a name="sectiontop">
NETQUOTEVAR:PARENTSECTIONSTOP
</a><a name="sectiontop">
<!-- NETQUOTEVAR:TOPLEVELSECTIONSTOP -->
NETQUOTEVAR:SECTIONLISTTOP
NETQUOTEVAR:TOPSECTIONSEPARATOR
NETQUOTEVAR:CARTERRORLISTXML
</a>
NETQUOTEVAR:HIDDENINPUT

<BR>

<TABLE WIDTH="500" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">

NETQUOTEVAR:PRODUCTBULK

<script language=JavaScript>
<!--
if ( currentcol != 0 )
{
while ( currentcol++ < CUSTOMVAR:NUMCOLS ) document.write('<td width="' + colwidth + '%"></td>');
document.write('</tr></table></td></tr>');
currentcol = 0;
}
// -->
</script>
</TABLE>
</div>
<DIV ALIGN="RIGHT"><a name="sectionbottom">
NETQUOTEVAR:SINGLEADD
</a></DIV>
<a name="sectionbottom">NETQUOTEVAR:BOTTOMSECTIONSEPARATOR
NETQUOTEVAR:SECTIONLISTBOTTOM
<!-- NETQUOTEVAR:TOPLEVELSECTIONSBOTTOM -->
</a>
<!-- <DIV ALIGN="CENTER"><a name="sectionbottom">
NETQUOTEVAR:PARENTSECTIONSBOTTOM
</a></DIV> -->
<!-- Insert HTML for the bottom of the product body -->
<!-- ProductBody HTML end -->

Then, replace Act_ProductSeparator.html with the following:

<!-- ProductSeparator HTML begin -->
<!-- This template specifies the product separators -->

<script language=JavaScript>
<!--
if ( currentcol != 0 )
{
while ( currentcol++ < CUSTOMVAR:NUMCOLS ) document.write('<td width="' + colwidth + '%"></td>');
document.write('</tr></table></td></tr>');
currentcol = 0;
}
// -->
</script>

<TR><TD COLSPAN="3">NETQUOTEVAR:TEMPLATEBEGINXML<HR SIZE="1" ALIGN="CENTER" WIDTH="100%">NETQUOTEVAR:TEMPLATEENDXML</TD></TR>

<!-- This template specifies the product separators -->
<!-- ProductSeparator HTML end -->

Finally, replace Act_ProductLine.html with the following

(or save this code to a new filename if you want to have some original layouts):

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<!-- NETQUOTEVAR:INCLUDE Act_ProductSeparator.html -->
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
<script language=JavaScript>
<!--
if ( currentcol++ == 0 ) document.write('<tr><td colspan=3><table border=0><tr>');
document.write('<td width="' + colwidth + '%" valign=top>');
// -->
</script>
<noscript><tr><td width="100%"></noscript>
<!-- START each product lives in this table - alter below to rearrange items -->
<table width="100%">
<tr>
<td colspan=2>
<a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="actregular"><b>NETQUOTEVAR:PRODUCTNAME</b></span></a>
<span class="actxsmall">NETQUOTEVAR:PRODUCTREF
</td>
</tr>
<tr>
<td valign="TOP" align="CENTER"> NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE </td>
<td valign="TOP">
NETQUOTEVAR:EXTINFOLINK</span>NETQUOTEVAR:EXTINFOBUTTON
<br>
<span class="actxsmall">NETQUOTEVAR:PRODUCTBEGINLINK NETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK
NETQUOTEVAR:PRICEEXPLANATION </span><br>
<b>NETQUOTEVAR:PRODUCTPRICE</b>
</td>
</tr>
<tr>
<td colspan=2>
NETQUOTEVAR:PRODUCTDESCRIPTION
<span class="actxsmall">NETQUOTEVAR:OTHERINFOPROMPT </span>
<span class="actxsmall">NETQUOTEVAR:DATEPROMPT </span>
</td>
</tr>
<tr>
<td align="LEFT" colspan="2">
<span class="actxsmall">
NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY<br>
<Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
</span>
NETQUOTEVAR:TEMPLATEENDXML
</td>
</tr>
</table>
<!-- END each product lives in this table - alter above to rearrange items -->
</td>
NETQUOTEVAR:PRODUCTFORMEND
<script language=JavaScript>
<!--
if ( currentcol >= CUSTOMVAR:NUMCOLS )
{
document.write('</tr></table></td></tr>');
currentcol = 0;
}
// -->
</script>
<noscript></tr></noscript>


NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- ProductLine HTML end -->

To set the number of columns:
Go into 'Advanced | Custom Properties', click the "+" sign and create a property called 'NUMCOLS' of type 'text'. Click 'OK'.
Next, go to 'Design | Options | Site Defaults | Properties' and click the "+" sign and select NUMCOLS. Set its value to '3' (for 3 columns, 4 for 4 , etc). (if using Business uncheck 'Searchable' and check 'Use as Customvar').
You can set this value on a per Section basis, if required, by opening the Section, selecting 'Properties' and setting it as above.