Adding Tables to Product Descriptions

[Paul Cooper]

Hi,

The build of my 2,000 item shop is progressing well with layout sorted, most pics and text imported. Now the problem, my existing shop has quite a few formated tables which were originated in Excel but I cannot see how to use them in V8. I had no problems using tables in but in Actinic has me beat. I tried pasting the table in Frontpage and then pasting the HTML into V8 but it came up with an error that the text was too long.

Here's a link to my old site which shows the tables in use

http://www.technobots.co.uk/contents/en-uk/d911.html

Many thanks in advance for any assistance.

Paul

[leehack]

First of all you need to learn how a table is created in html, search the web for this to get to grips with how it works. Then perhaps you could have a read of the embed section (towards the bottom) on this page, that will show you how to embed items with actinic.

You might also want to have a look at the 'tabber' on drillpine.biz as this will help tidy your layouts as much as possible.

[I-CC]

You might want to try removing any white spaces that are not needed and see if it fits then. If not, then possibly use variables so,

C01, C02, C03 for how ever many lines it might be possible to want for Current (A) and create the same again for T01, S01, E01 and O01 etc etc.

Then, programme into your product layout the header potion, and then for each line, use of changable content, use a condition around each row of content, i.e. a condition around the

<TR><first TD>

Your C01, and so on in there cells...

</end of TD></TR>

so in effect a condition surround those entries, which you could have along the line of 'if C01 not empty' (example not real code) then show the code within the condition...

Repeat for each possible line...

You then add the content to be shown to each product...

Not exact explanation, as would take too long, but a solution you can follow through on.

[Paul Cooper]

Thank you both for the tips, looks to be far more complicated than the software I currently use, that was simply a matter of pasting the table direct from Excel into the product description without even touching html. It's a shame that this is not supported, or multiple images or auto sizing thumbnails are directly supported, even so Actinic wins in lots of other areas.

Thanks again.

Paul

[leehack]

Norman at drillpine.biz has some add-ons to do all you could possibly need on the image front at fantastic prices.

The fact that you cannot just paste an excel table into the product descriptions is a plus and not a negative point IMO. Pasting such things into html pages turns up some horrific code at times and for people not too up on html, i think it is very good that they are forced to do it correctly.

[Duncan Rounding]

I agree. If you look at the code for your tables you will see tons of extra bloat html that is created by excel to be able to open the table again in excel. You could probably cut your page size down by 60% as well help your SEO by cleaning up those tables.

One way I've done this before is to copy the cells in Excel and paste them into the design view in Dreamweaver. You can then swop to the code view in Dreamweaver and copy the clean html code from there into Actinic.

[I-CC]

Another option is to say create a text file for each table in question, saved to the site1 folder (or as appropriate). Then create a new variable called MyTable say and have it as a filename variable, which you leave blank and allow to be blank.

Then, within your product layout create the filename variable, so that it pulls the content from the text file at site generation / upload time, plus surround the variable in a condition that states if not empty, then if you assign a text file to the product, it is not empty and is acted and pulled into the page, whereas for products which do not have a text file assigned, it is ignored.

This will then provide a simple copy n paste into a text file and pulled into the page solution... Another option.

Main thing trying to get across is that a number of solutions are possible, just depends on your own personal preference, cleanliness of the product text area, or product layout or what ever - all the best.

[Paul Cooper]

Some great advice there which I will try out. I have Emailed Drillpine as the multiple image and tabber look superb add ins.

I am very much a begineer at HTML but looking at the code, it is 'bloated' as you suggested Duncan. In fact each of the html motor data tables on my current site were approx 40kB each!

I have just tried saving the table in a gif format and it is perfect and only 11kB (not so good for future editing but I can live with that) so with the multiple image plug in that could also be a quick solution until I gain confidence with HTML and V8.

Thank you all for your continuing advice.

Paul

[completerookie]

try this for a solution:

the data was taken for the motor called Technobots Feather Gold 24V 150W 1410-010
when I create a simple html file (included inline style,then it comes to just 2557 bytes long)

once you get the hang of it, then it will be easy to change it for other tables, - write a simple macro from excel to generate the correct layout.

add a set of style definitions to the actinic.css (or other file) and ammend to suit.

.motorTable {
	width: 400px;
	margin-bottom: 10px;
}
.topline {
	font-size: 12px;
	background-color: #CAFFFF;
	text-align: center;
}
.title1 {
	background-color: #FFFF99;
	text-align: center;
}
.data1 {
	background-color: #FFBE5E;
	text-align: center;
}
.title2 {
	background-color: #FFFF00;
	text-align: center;
}

now create a new layout called cusTableMotor within the fragments of the library
within the new layout, enter the following:

<actinic:block php="true">
	unset ($sTextArea);
	unset ($txtLines);
	$sTextArea = "<actinic:variable name="FragmentText" />";
	$re = "<br />";
	$re1 = "¬";
	$txtLines = explode($re, $sTextArea);

	echo "<table class='motorTable' border=1>\r";
	echo "<tr><td colspan=5 class='topline'>Performance</td></tr>\r";
	echo "<tr><td class='title1'>Current (A)</td>";
	echo "<td class='title1'>Torque (Nm)</td>";
	echo "<td class='title1'>Speed (rpm)</td>";
	echo "<td class='title1'>Efficiency (%)</td>";
	echo "<td class='title1'>O/P Power (W)</td></tr>\r";
	for ($k = 4; $k<count($txtLines); $k++){
		if ($txtLines[$k] != "") {
			echo "<tr>";
			$cells = explode($re1, $txtLines[$k]);
			for($j = 0; $j < count($cells); $j++){
				echo "<td class='data1'>";
				if ($cells[$j] == "") 
					echo "&nbsp;";
				else
					echo "$cells[$j]";
				echo "</td>";
				}
			echo "</tr>\r";
			}
		}
	echo "</table>";
	
	echo "<table class='motorTable' border=1>\r";
	echo "<tr><td colspan=5 class='topline'>Dimensions</td></tr>\r";
	$cells = explode($re1, $txtLines[0]);
	echo "<tr>";
	echo "<td class='title2'>Body Diameter</td><td class='data1'>$cells[0]</td>";
	echo "<td class='title2'>Shaft Dia / Length</td><td class='data1'>$cells[1]</td>";

	$cells = explode($re1, $txtLines[1]);
	echo "<tr>";
	echo "<td class='title2'>Body Length</td><td class='data1'>$cells[0]</td>";
	echo "<td class='title2'>Shaft Flat Length</td><td class='data1'>$cells[1]</td>";

	$cells = explode($re1, $txtLines[2]);
	echo "<tr>";
	echo "<td class='title2'>Overall Length</td><td class='data1'>$cells[0]</td>";
	echo "<td class='title2'>Fixings</td><td class='data1'>$cells[1]</td>";

	$cells = explode($re1, $txtLines[3]);
	echo "<tr>";
	echo "<td class='title2'>Weight</td><td class='data1'>$cells[0]</td>";
	echo "<td class='title2'>Connection</td><td class='data1'>$cells[1]</td>";

	echo "</table>";

</actinic:block>

now everywhere you want a table defined, create a new fragment and change the layout to cusTableMotor
within the fragment text enter the following:

101mm¬TBA/26.5mm
81.5mm¬TBA
108mm¬4 off on Foot Bracket
1980gms¬Wire Tails
1.25¬ 0¬ 5400¬No Load¬0
2.2¬0.047¬5090¬43.85¬25.08
4.4¬0.151¬4606¬63.66peak¬72.83
7.7¬0.298¬3850¬60.02¬120.16
12.2¬0.491¬2900¬47.03¬149.17rated
25.4¬1.1¬0¬Stall¬0

you need to note the following when entering your table definitions:
the FIRST FOUR rows of text is the data for the Dimensions table

(you MUST enter FOUR rows)

the REST OF THE ROWS is the data for the Dimensions table (you can enter as many rows as you want.)
each cell of the table should be separated by the ¬ sign

when you have finished, just preview the page.
if you have

• entered the CSS corectly
• and defined, cut and pasted the layout correctly
• and defined the fragment text correctly

the layout should look like the attached picture.
the code has been tested upto a point and the picture is the resultant table(s) but you may need to tweak it a little bit.
Hope it makes sense

[Paul Cooper]

Wow! what can I say Kevin, the resulting table is fine, the code is so compact compared to that produced in Front Page etc. I will study it to make sure I understand how it works as it is much easier to learn by example. Thank you for taking to the time to explain how in so much detail, greatly appreciated.

Paul

[Paul Cooper]

Hi Kevin, I have I believe followed your detailed instructions and it does not give the same layout as you got. I have attached a screen shot of the resulting table which has some error messages on it. Have I missed something?

Many thanks

Paul

[Duncan Rounding]

For some reason the parser doesn't like the < (less than) operator here:
for ($k = 4; $k<count($txtLines); $k++){

EDIT: red herring - read below.

[completerookie]

sorry about that, it was totally unintentional.
the problem is higher up and its a fault of the cut and paste of the code

<actinic:block php="true">
	unset ($sTextArea);
	unset ($txtLines);
	$sTextArea = "<actinic:variable name="FragmentText" />";
	$re = "<br />";
	$re1 = "¬";

what should have come out was the ascii value of the ¬ symbol

replace the line with the following:

$re1 = "#172;";

the clue is in the picture you have attached - if you look closely the ¬ is still present in each of the lines (ie it hasn't split those lines)

when you look at the generated code, you see something like this:

<tr><td class='data1'>1.25& #172; 0& #172; 5400& #172;[/No Load& #172;0</td></tr>

so the splitting of each of the lines is done using the #172;

the line that is the red herring is saying that its expecting an array of $txtLines and the array isn't there because the match didn't happen.

I apologise for this slip up, it actually took me a while to work out how I show the line of code, I had to split the & and the # apart so that is doesn't treat it as code

so to sum up, change line 6 of the layout to read

<actinic:block php="true">
	unset ($sTextArea);
	unset ($txtLines);
	$sTextArea = "<actinic:variable name="FragmentText" />";
	$re = "<br />";
	$re1 = "#172;";

ps. I was going to change the master code, but that would then confuse people

[Paul Cooper]

Hi Kevin

That solved it! I did follow your code through as best I could and checked that the ¬ symbol was in line 6 and it was so I was totally beat as to why it wouldn't work.

I now have the ability to produce tables, I also now have the Tabber & Multiple Images patches so nothing stopping me completing the product layouts I was after

Thanks again for all your help.

All the best

Paul

Edit - I just looked again and an '&' has appeared in many of the cells?

[completerookie]

sorry, it was quite late when I checked the solution. and its an issue with the way the forum displays the solution

Look at line six,

the

$re1 = "#172;";

is the marker that is used to split the line into individual cells and you need to add the & symbol into that variable as well.

add an & to the front of the search string

$re1 = "&

problem is, that when I enter the exact code in the forum, it changes it back again to the ¬ symbol

so, in summary, the total code on that line should be

$re1 = "ampersand hash one seven two semicolon";

(without any spaces insde the quote marks)

this will instantly remove the & symbol from your tables.

glad you've got a working solution, actinic is very powerful once you learn how to bend the system and make it do what you want.

as a note, does anyone know of any tweaks the admins can make to the system so that whatever we put into the [code] modules, it truely shows EXACTLY what we enter WITHOUT interpreting it in any way shape or form. ?