Table Lists

[AndyBorrett]

As regular readers will know I have been creating a list of products that display on a seperate page using a custom variable.

http://community.actinic.com/showthread.php?t=39366

This now works fine (Thanks to Norman and Jont) but I am having problems trying to display the results in a table rather than one after each other. I have tried copying a list layout (as I can't workout how to create a new one from scratch) and using that but nothing displays.

Has anyone got any advice for lists as there doesn't seem to be much in either the help file or the AUG

[NormanRouxel]

Using an Actinic List layout probably won't work as you have a condition around your product item.

One route would be to use PHP to keep track of the counter and to output the new rows when required.


Something like (UNTESTED):

Before your list

<table><tr>
<actinic:block php="true">$counter=0;</actinic:block>

around your actual item

<td>PRODUCT DETAILS HERE</td>
<actinic:block php="true">
if ( $counter++ > 2)
{
echo "</tr><tr>";
$counter = 0;
}
</actinic:block>


And at the end of everything

</tr></table>


You may have too few cells in the final row. Code to fix that might need to be added.

[jont]

Andy - what exactly are you wanting to do with the table?

If you are wanting say 3 across products rather than 1 across you can strip out the table tags and using a new product layout simply float:left your new products using CSS.

[AndyBorrett]

Hi Jont,

I don't have many strong points when it comes web design but CSS is right down there at the bottom of my skills. It is one of those things that you know you should learn more about but never seem to have the time. I know enough to change the appearance of fonts and thats about it :-(

Hi Norman,

What can I say....
I wish I had a brain that worked like yours. Your solutions are always simple and elegant and as usual work.

He is the final (for now) code for any searchers in the future.

<table><tr>
<actinic:block php="true">$counter=0;</actinic:block>

 <actinic:block type="EntireSectionList" >
<actinic:block type="ProductList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductName%22%20%2f%3e%20%21%3d%20%22%22" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22GiftSection%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22MainSection%3a%3aSectionName%22%20%2f%3e" >

<td align="center">
         <a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self">
            <img alt="<actinic:variable name="SectionName" encoding="strip"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" />
         </a>
         <strong><a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"><actinic:variable name='SectionName'/></a></strong><br />
         <actinic:variable name='SectionDescription'/>
      </td>
<actinic:block php="true">
if ( $counter++ > 4)
{
echo "</tr><tr>";
$counter = 0;
}
</actinic:block>

</actinic:block>
	
</actinic:block>
	
</actinic:block>
	
</actinic:block>
 
 </tr></table>

[jont]

Andy.. well worth picking up a book on CSS as it will reduce your code and make life a lot nicer. The above could be resolved with:

<div class="sectionLayout"> .... you Actinic code for for name, image etc </div>

in the stylesheet for example :

.sectionlayout {
width: 150px;
float: left;
margin: 10px;
text-align: center;
}

simple and elegant and a lot less bloat on the page and quicker to generate.

[jont]

You can see this in place here http://www.barrelsandbottles.co.uk/a...g/germany.html

[NormanRouxel]

I've a feeling that the CSS route may not cleanly display items that differ widely in height.

[jont]

Thats true - tables handle size to fit in a far better way than CSS is able to at the moment.

As Jonty-no-mates I tend to edit images to the same size to provide a uniform layout - beauty in symmetry (it keeps my OCD in check also)

[Duncan Rounding]

...I tend to edit images to the same size to provide a uniform layout - beauty in symmetry (it keeps my OCD in check also)

Ditto... saves a multitude of coding hassles.

[AndyBorrett]

Its nice to see I have something in common with you both, I always have the Images the same size and nearly always square.

Next time I'm in town I will call in at our local cheapo book store and pick up a couple of CSS books.

[Stitch]

I've been fighting this most of the day but can't get the list of products to stop.
They keep listing to the left even though I've specified the width of the table.

Can anyone please help?

<table border=1 width="450px"> <tr>
<actinic:block type="EntireSectionList" >
	<actinic:block type="ProductList" >
		<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductName%22%20%2f%3e%20%21%3d%20%27%27" > 
			<actinic:block if="%3cactinic%3avariable%20name%3d%22GarmentType%22%20%2f%3e%20%3d%3d%20%22Workwear%5fTrouser%22" >
<td class="tsfsection"> 
<div class="tsfsection_image"><a href="<actinic:variable name="SectionPageName" />">
<img  height="200" border="0" src="<actinic:variable name="ProductImageFileName" />" alt="<actinic:variable name="ProductName" />"></a></div>
<p class="sectionProduct"><a href="<actinic:variable name="SectionPageName" />"><actinic:variable name="ProductName" /></a></p>
<p class="section_product_price"> <actinic:variable name="ProductPriceRaw" /></p></div></td>  
    			</actinic:block>
		</actinic:block>	
	</actinic:block>
</actinic:block></tr>

</table>

[leehack]

You don't add 'px' when specifying a table width, just the number.

[Stitch]

I've removed the px but still no difference!

[NormanRouxel]

Chris

You have coded a table with a single row and one cell for each product. Thus you will get a single extremely wide row, depending on your product count. You need additional code (like in posts #2 and #4) that includes a counter to start a new row after n cells.

[Stitch]

Hi Norman,

I got distracted with Jont's CSS thinking that would keep the columns in check.

I've put your code back in and it works for me up to a point as I only get three columns.
I've tried altering the "if ( $counter++ > 4)" value but that throws it into confusion. I've altered the image sizes also with no luck.

Am I missing something to make it 4 columns?