Code:
Auto Multi Columns.
This readme will allow you to lay products out in any number of columns.
The number of columns can be easily altered by setting a Custom Property.
This uses JavaScript but will fail-safe on Non-JavaScript browsers by displaying a single product per row.
INSTRUCTIONS
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>');
}
// -->
</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 -->
Replace Act_ProductLine.html with the following:
<!-- 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:PRODUCTBEGINLINKNETQUOTEVAR: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 -->
Go into Actinic / Advanced / Custom Properties, click the "+" sign
and create a property called NUMCOLS of type text. OK out.
Go Design / Options / Site Defaults / Properties, 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)
OK out.
You can set this value on a per Section basis if required by opening the Section,
selecting Properties and setting it as above.
Comment