Present: Automatic table generation.

[NormanRouxel]

Automatic table generation.

Sometimes it's useful to have a little table of data somewhere in your product description.
You can do this by embedding HTML, e.g.:

!!<
<table>
	<tr>
		<td>Size</td><td>Small</td><td>Medium</td><td>Large</td>
	<tr>
		<td>length</td><td>20</td><td>30</td><td>40</td>
	</tr>
	<tr>
		<td>Weight</td><td>100</td><td>150</td><td>200</td>
	</tr>
</table>
>!!

But this is a real pain for more than a few entries.

How about some simple typing instead. E.g.

[(Size, Small, Medium, Large)
(Length, 20, 30, 40)
(Weight, 100, 150, 200)]

Where [( means start the table (and first row).
Comma , separates items on each row
End each row with a round bracket )
Start subequent rows with a round bracket (
End the final row (and the table) with )]
Make sure you have the same mumber of entries on each line.

Implementation.

Edit your Product Layout(s) and replace the variable:

<actinic:variable name="ProductDescription" />

With:

<actinic:block php="true">
	// automatic table generator V1.2
	$desc = <<<ENDOFCODE
<actinic:variable name="ProductDescription"/>
ENDOFCODE;
	while ( preg_match('/(.*?)&#38;#91;(&#38;#40;.*?&#38;#41;)&#38;#93;(.*$)/s', $desc, $bits) )	// is there at least one table
		{
		$tablehtml = '<table id="lpsizes">';
		$tablecode = $bits[2];
		$rowcount = 0;
		while ( preg_match('/&#38;#40;(.*?)&#38;#41;(.*$)/', $tablecode, $rbits) )	// each row of table
			{
			$tablehtml .= $rowcount++ ? '<tr id="lpother"><td class="lprow">' : '<tr id="lpsizetop"><td class="lprow1">';
			$tablehtml .= str_replace('&#38;#44;', '</td><td>', $rbits[1]) . '</td></tr>';
			$tablecode = $rbits[2];
			}
		$desc = $bits[1] . $tablehtml . '</table>' . $bits[3];	// reassemble description and look for another table
		}
	echo $desc;
</actinic:block>

Here's a few lines of CSS (stick them at the bottom of the Actinic Stylesheet) that will prettyfy it.

#lpsizes {background-color:#ccc; text-align:center;}	/* Overall table */
#lpsizes td {background-color:#fff; padding:2px;}	/* Data cells */
#lpsizetop td {font-weight:bold;}			/* Top row */
.lprow1	{}						/* Top row, 1st cell */
.lprow	{text-align:left;}				/* Other rows, 1st cell */

That's it.

You can even have several tables on the page.

Updated April 2011: Was omitting text before table.

Updated November 2011: Comma wasn't being parsed.

Updated September 2013: Removed sensitivity to newlines in embedded HTML,

[Goz]

Genius. Thanks for sharing that with us.

Shame there is no "Thank you" button like on some other bulletin boards

[leehack]

Nice one Norman, impressive stuff. The inability to add a table or bullets via the interface in an easy fashion really is a big failing. I hope they sort out bullet points for v10, it is mandatory and really really needed IMO.

[leehack]

Shame there is no "Thank you" button like on some other bulletin boards

Agreed, it's a very good feature, saves umpteen threads that are just to say thanks also. The rating of threads should be more prominent too.

[NormanRouxel]

I've just amended post #1 to improve the lump of PHP code. less lines and it will be easier to add to layouts with tweaked descriptions (like Tabber).

[JGLIGHTING]

What a great bit of code! This is just what i am looking for one of our ranges we sell.

Can someone point me in the right direction to add this to Tabber.

Thanks

Elliott

[NormanRouxel]

Adding it to Tabber is possible but you place a subset of the table code inside the Tabber.

Edit layout "TabbedProductDescription" and look for the line:

TBPRDSC;

Immediately after that add:

	// Start table code
	while ( preg_match('/(.*?)[((.*?))](.*$)/s', $desc, $bits) )	// is there at least one table
		{
		$tablehtml = '<table id="lpsizes">';
		$tablecode = $bits[2];
		$rowcount = 0;
		while ( preg_match('/&#38;#40;(.*?)&#38;#41;(.*$)/s', $tablecode, $rbits) )	// each row of table
			{
			$tablehtml .= $rowcount++ ? '<tr id="lpother"><td class="lprow">' : '<tr id="lpsizetop"><td class="lprow1">';
			$tablehtml .= str_replace('&#38;#44;', '</td><td>', $rbits[1]) . '</td></tr>';
			$tablecode = $rbits[2];
			}
		$desc = $bits[1] . $tablehtml . '</table>' . $bits[3];	// reassemble description and look for another table
		}
	// End table code

That should be it.

UPDATED 29-09-13 to fix newline sensitivity in embedded HTML

[NormanRouxel]

I've amended posts #1 and #7 (now V1.2) to make the code more concise and also to add extra CSS classes in case you want to style the first / row / column seperately.

[Sean Williams]

Great job Norman - thanks for sharing

[JGLIGHTING]

Adding it to Tabber is possible but you place a subset of the table code inside the Tabber.

Edit layout "TabbedProductDescription" and look for the line:

That works great.

Thank You

[JGLIGHTING]

Hi
I have been using Automatic table generation in tabber as per to post 7. It has been working out great, saving me a lot of time and making it look better.

I have just found out that the table it not laying out right in tabber using Fire Fox 3.5.3

It is working fine in IE and chrome.

For some reason the table is on the out side of the tabber and that the rows are staying the same size of the first row.

I have attached three photos of what it is doing.


Any help would be much appreciated