Customizing Product Description Text Formatting on Category Page

[permissiontopost?]

couldnt get the whole product admin area in the screen shot, but hope this sheds a little light on whats happening see attached file.

[gjh42]

You're using multiple languages? I have only used English, so don't know what this page should look like for more than one language. It does look somewhat disorderly.

At any rate, I don't think there is any way that changes to tpl_product_info_display.php or the catalog stylesheet can be seen by the admin to affect it, even if by chance one of the class/id tags in the new code matched an admin tag. Maybe someone with authoritative knowledge can confirm this? I hope someone can figure out why your problem would be happening and if it is connected to this code.

[permissiontopost?]

fixed the problem, in collect_info.php there was this line
<tr>
<td class="main" valign="top"><?php if ($i == 0) echo TEXT_PRODUCTS_DESCRIPTION; ?></td>
<td colspan="2"><table border="0" cellspacing="0" cellpadding="0">

I copied the code from
http://anekostudios.com/2007/04/25/m...t-zencart-tip/

and it was missing the
<table border="0" cellspacing="0" cellpadding="0">

[gjh42]

That clears up the mystery. The thread referred to at the top actually contains references to two completely different solutions to the problem. Mine is a simple block of code added to tpl_product_info_display.php, and some stylesheet manipulation. Anekostudios' is a full-featured new field in the database with admin control. Both can achieve the same output results.

The missing code from anekostudios' tip would certainly account for a messed-up display in admin.

[Andy McG]

Hi Glen,
This is continuing on from our discussion in another thread.
And for reference my site is here.

Just to re-cap I'm wanting to show an image of 1) measurements diagram, 2) a table of measurements and 3) a product description all on the Product Info Page.
Example below:


And this is the code which is in the product description field in ZC admin:

<span class=productDescList><img src = images/DiaCorn_sm.jpg>
</span>
<span id=productDesc1><table width="180" border="1" align="left" cellpadding="3" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
<tr>
<td width="50">Name</td>
<td width="121"><strong>Criss Cross </strong></td>
</tr>
<tr>
<td width="50">A</td>
<td>3000 mm</td>
</tr>
<tr>
<td width="50">B</td>
<td>100 mm</td>
</tr>
<tr>
<td width="50">C</td>
<td>160 mm</td>
</tr>
</table>
</span>
<p><span id=productDesc2>Product description text here.
</span></p>

As you can see I've managed this with your help last week.
But I need to know how to "switch off" the measurements diagram (no.1 in the above image ex) when the products are displayed in the Products Listing Page.
As far as all the different listing pages go I'll only ever be using the Products Listing Page as I've disabled the Featured, New, All, Discounted etc etc pages.

Thanks.

[gjh42]

You're doing well so far, but this is going to require a bit of tweaking for your situation.

It occurs to me that a table, being a block-level element, is not supposed to be inside a span. You should change the <span id=productDesc1> to <div id=productDesc1>, and maybe the others as well - not sure how much difference they will make. It will probably eliminate the need to have the <p> around the span.

The diagram you have labeled as productDescList is actually the only part you don't want in the listing. (For semantic clarity, you should probably change its name to productDescNoList.) Since you do want productDesc1 and productDesc2 in the listing, and id's are supposed to be unique on a page, change all the id="... to class="...

Next for the styling to get display organized.

[gjh42]

The styling will differ depending on whether you want to have the parts of the description in different places on the product info page. I will proceed on the assumption that you basically like the arrangement that shows now and will not want it radically different. This will eliminate the need to add new divs to the code in tpl_product_info_display.php. Let me know if it is otherwise.

Modified from post #2:

Next, turn off all display of .productDescNoList, .productDesc1 and .productDesc2, and turn them on again selectively. Add to your stylesheet:

 .productDescNoList, .productDesc1, .productDesc2 { display: none; }

#productListing .productDesc1 { display: block; } /*or inline*/

#productListing .productDesc2 { display: block; } /*or inline*/

#productGeneral .productDescNoList { display: block; } /*or inline*/

#productGeneral .productDesc1 { display: block; } /*or inline*/

#productGeneral .productDesc2 { display: block; } /*or inline*/

If all of these end up with the same display values, you can collect them all into one declaration. There are many things you can do to get the display arranged in specific ways. If there is some arrangement you can't figure out how to get, let me know.

[Andy McG]

The styling will differ depending on whether you want to have the parts of the description in different places on the product info page. I will proceed on the assumption that you basically like the arrangement that shows now and will not want it radically different.

Thanks Glen. Yes indeed absolutely correct. The client wanted quite large prod images so space is at a premium. I think the present layout is best for now.

This will eliminate the need to add new divs to the code in tpl_product_info_display.php. Let me know if it is otherwise.

Great to hear not much tweaking required. Anything over a moderate difficulty level involving CSS or .php often leads to a world of pain for an oldskool tables boy like myself.

Modified from post #2:

Next, turn off all display of .productDescNoList, .productDesc1 and .productDesc2, and turn them on again selectively.

Sorry for a daft question but does the:

 .productDescNoList, .productDesc1, .productDesc2 { display: none; }

Turn off all the displays? If so to turn them on selectively do I just /* */ out the above line of code and then add { display: none;} selectively to the #prod.... codes below?

Add to your stylesheet:

 .productDescNoList, .productDesc1, .productDesc2 { display: none; }

#productListing .productDesc1 { display: block; } /*or inline*/

#productListing .productDesc2 { display: block; } /*or inline*/

#productGeneral .productDescNoList { display: block; } /*or inline*/

#productGeneral .productDesc1 { display: block; } /*or inline*/

#productGeneral .productDesc2 { display: block; } /*or inline*/

Done.

If all of these end up with the same display values, you can collect them all into one declaration. There are many things you can do to get the display arranged in specific ways. If there is some arrangement you can't figure out how to get, let me know.

I'll start tweaking and getting used to what exactly this code does. I'll no doubt return to this space for some guidence.
Thanks Glen.

ps An off topic question, Is table design really a dying technique these days?

[Andy McG]

Just a thought but I posted the given code into the /*the main content classes*/ section of my stylesheet.
Does it matter where it sits within the stylesheet?

.productDescNoList, .productDesc1, .productDesc2 { display: none; }

#productListing .productDesc1 { display: block; } /*or inline*/

#productListing .productDesc2 { display: block; } /*or inline*/

#productGeneral .productDescNoList { display: block; } /*or inline*/

#productGeneral .productDesc1 { display: block; } /*or inline*/

#productGeneral .productDesc2 { display: block; } /*or inline*/

[Andy McG]

Well there it is!
After a little fiddling around it seems to be functioning very well with the test data.
Glen, I had to add the red highlighted text below to your suggested code in order for it to work:

.productDescNoList, .productDesc1, .productDesc2 { display: block; }

#productListing .productDescNoList { 
    display: none; /*or inline*/
	}

#productListing .productDesc1 { 
    display: block; /*or inline*/
	} 

#productListing .productDesc2 { 
    display: block; /*or inline*/
    } 

#productGeneral .productDescNoList { 
    display: block; /*or inline*/
	} 

#productGeneral .productDesc1 { 
    display: block; /*or inline*/
	} 

#productGeneral .productDesc2 { 
    display: block; /*or inline*/
	}

Many thanks for your time on this issue.