Two column

[jackmac]

Hi all,

I've managed to get my products so they display in two columns but I 'd like to know if there's any way they can be displayed in alphabetical order, vertically rather than horizontal.

Any help much appreciated.

TIA

Jackmac

[chrisbrown]

Short answer

No, not automatically. You will have to rearrange them yourself. This will be a bit tedious, especially if the number of products on a page changes often.

[NormanRouxel]

It's not quite Automatic but here's a way where you can keep all your products in alphabetic order and you simply insert a dummy product where you want the second column to start.

When you add/remove items just move this dummy product to keep the layout even:-

Products in 2 columns and alphabetic order down one column and then down the other.

This works using original Actinic product templates (but they will of course have to fit sensibly into a half width column).

You have to create a dummy product at the very start of the section using the "Very First" template below.
You also create a dummy product at the very end of the section using the "After Final" template below.
Now between these dummy products put your list of products in alphabetic order.   
Where you want the split between columns to appear insert another dummy product 
using the "Second Column Start" template below.

When you add / remove products all you need to do is move the "Second Column Start" dummy product to the appropriate place.


<!-- 2 column layout Very First Dummy ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<!-- NETQUOTEVAR:INCLUDE Act_ProductSeparator.html -->
NETQUOTEVAR:ENDSEPARATOR
<tr> <!-- Actinic's usual row -->
 <td colspan=3>  <!-- use full width -->
  <table width="100%">  <!-- and start a new table -->
   <tr>
    <td width="50%" valign="top">  <!-- a half width column - all following product will go in here -->
     <table width="100%">   <!-- now start a table that the usual product templates expect --> 
<!-- NETQUOTEVAR:PRODUCTFORMBEGIN
     NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE
     NETQUOTEVAR:PRODUCTANCHOR
     NETQUOTEVAR:PRODUCTNAME
     NETQUOTEVAR:PRODUCTREF 
     NETQUOTEVAR:PRODUCTDESCRIPTION
     NETQUOTEVAR:EXTINFOLINK
     NETQUOTEVAR:EXTINFOBUTTON
     NETQUOTEVAR:PRODUCTBEGINLINK
     NETQUOTEVAR:PRODUCTLINKTEXT
     NETQUOTEVAR:PRODUCTENDLINK
     NETQUOTEVAR:PRICEEXPLANATION
     NETQUOTEVAR:PRODUCTPRICE
     NETQUOTEVAR:OTHERINFOPROMPT
     NETQUOTEVAR:DATEPROMPT
     NETQUOTEVAR:CARTERRORXML
     NETQUOTEVAR:PRODUCTQUANTITY
    <Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
     NETQUOTEVAR:TEMPLATEENDXML
     NETQUOTEVAR:PRODUCTFORMEND -->
NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- 2 column layout Very First dummy ProductLine HTML end -->






<!-- 2 column Second Column Start Dummy ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<!-- NETQUOTEVAR:INCLUDE Act_ProductSeparator.html -->
NETQUOTEVAR:ENDSEPARATOR
     </table>  <!-- now end the table that the usual product templates expect --> 
    </td>  <!-- end the first column -->
    <td width="50%" valign="top">  <!-- start the second column - all following products will go here -->
     <table width="100%">   <!-- now start a table that the usual product templates expect --> 
<!-- NETQUOTEVAR:PRODUCTFORMBEGIN
     NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE
     NETQUOTEVAR:PRODUCTANCHOR
     NETQUOTEVAR:PRODUCTNAME
     NETQUOTEVAR:PRODUCTREF 
     NETQUOTEVAR:PRODUCTDESCRIPTION
     NETQUOTEVAR:EXTINFOLINK
     NETQUOTEVAR:EXTINFOBUTTON
     NETQUOTEVAR:PRODUCTBEGINLINK
     NETQUOTEVAR:PRODUCTLINKTEXT
     NETQUOTEVAR:PRODUCTENDLINK
     NETQUOTEVAR:PRICEEXPLANATION
     NETQUOTEVAR:PRODUCTPRICE
     NETQUOTEVAR:OTHERINFOPROMPT
     NETQUOTEVAR:DATEPROMPT
     NETQUOTEVAR:CARTERRORXML
     NETQUOTEVAR:PRODUCTQUANTITY
    <Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
     NETQUOTEVAR:TEMPLATEENDXML
     NETQUOTEVAR:PRODUCTFORMEND -->
NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- 2 column Second Column Start Dummy ProductLine HTML end -->





<!-- 2 column After Final Product Dummy ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<!-- NETQUOTEVAR:INCLUDE Act_ProductSeparator.html -->
NETQUOTEVAR:ENDSEPARATOR
     </table>   <!-- now end the table that the usual product templates expect --> 
    </td>  <!--  end the second column -->
   </tr> 
  </table> <!-- end our page table -->
 </td>  <!-- end our full width on page -->
</tr>  <!-- Actinic's usual row end -->
<!-- NETQUOTEVAR:PRODUCTFORMBEGIN
     NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE
     NETQUOTEVAR:PRODUCTANCHOR
     NETQUOTEVAR:PRODUCTNAME
     NETQUOTEVAR:PRODUCTREF 
     NETQUOTEVAR:PRODUCTDESCRIPTION
     NETQUOTEVAR:EXTINFOLINK
     NETQUOTEVAR:EXTINFOBUTTON
     NETQUOTEVAR:PRODUCTBEGINLINK
     NETQUOTEVAR:PRODUCTLINKTEXT
     NETQUOTEVAR:PRODUCTENDLINK
     NETQUOTEVAR:PRICEEXPLANATION
     NETQUOTEVAR:PRODUCTPRICE
     NETQUOTEVAR:OTHERINFOPROMPT
     NETQUOTEVAR:DATEPROMPT
     NETQUOTEVAR:CARTERRORXML
     NETQUOTEVAR:PRODUCTQUANTITY
    <Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
     NETQUOTEVAR:TEMPLATEENDXML
     NETQUOTEVAR:PRODUCTFORMEND -->
NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- 2 column After Final Product Dummy ProductLine HTML end -->

Norman

[chrisbrown]

Thinking INSIDE the box

Wow! Very good Norman.

[NormanRouxel]

Actually if you want to do this for ALL your product sections then a much simpler way would be to put the Start and End stuff into Act_ProductBody.html and then you would only need the single dummy product template for the Second Column Start.

E.g.

Products in 2 columns and alphabetic order down one column and then down the other.

This works using existing Actinic product templates (but they will of course have 
to fit sensibly into a half width column).

Put your list of products in alphabetic order.   
Where you want the split between columns to appear insert a dummy product 
using the "Second Column Start" template below.

When you add / remove products all you need to do is move the "Second Column Start" 
dummy product to the appropriate place.





<!-- ProductBody for Double Column Alphabetic Layout HTML begin -->
<!-- Insert HTML for the top of the product body -->
<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">

   <tr> <!-- Actinic's usual row -->
    <td colspan=3>  <!-- use full width -->
     <table width="100%">  <!-- and start a new table -->
      <tr>
       <td width="50%" valign="top">  <!-- a half width column - all following product will go in here -->
        <table width="100%">   <!-- now start a table that the usual product templates expect --> 

  	 NETQUOTEVAR:PRODUCTBULK

        </table>   <!-- now end the table that the usual product templates expect --> 
       </td>  <!--  end the second column -->
      </tr> 
     </table> <!-- end our page table -->
    </td>  <!-- end our full width on page -->
   </tr>  <!-- Actinic's usual row end -->

  </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 -->




<!-- 2 column Second Column Start Dummy ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<!-- NETQUOTEVAR:INCLUDE Act_ProductSeparator.html -->
NETQUOTEVAR:ENDSEPARATOR
     </table>  <!-- now end the table that the usual product templates expect --> 
    </td>  <!-- end the first column -->
    <td width="50%" valign="top">  <!-- start the second column - all following products will go here -->
     <table width="100%">   <!-- now start a table that the usual product templates expect --> 
<!-- NETQUOTEVAR:PRODUCTFORMBEGIN
     NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE
     NETQUOTEVAR:PRODUCTANCHOR
     NETQUOTEVAR:PRODUCTNAME
     NETQUOTEVAR:PRODUCTREF 
     NETQUOTEVAR:PRODUCTDESCRIPTION
     NETQUOTEVAR:EXTINFOLINK
     NETQUOTEVAR:EXTINFOBUTTON
     NETQUOTEVAR:PRODUCTBEGINLINK
     NETQUOTEVAR:PRODUCTLINKTEXT
     NETQUOTEVAR:PRODUCTENDLINK
     NETQUOTEVAR:PRICEEXPLANATION
     NETQUOTEVAR:PRODUCTPRICE
     NETQUOTEVAR:OTHERINFOPROMPT
     NETQUOTEVAR:DATEPROMPT
     NETQUOTEVAR:CARTERRORXML
     NETQUOTEVAR:PRODUCTQUANTITY
    <Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
     NETQUOTEVAR:TEMPLATEENDXML
     NETQUOTEVAR:PRODUCTFORMEND -->
NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- 2 column Second Column Start Dummy ProductLine HTML end -->

Indeed this seems to work OK on ordinary sections but perhaps someone could check it more.


Norman