Customizing Product Description Text Formatting on Category Page

I'm going to start a separate thread for this question. Referencing this page...

*** URL removed *** index.php?main_page=product_info&cPath=1

You can see that the "preview text" of the product description here doesn't have the proper formatting that it does on the actual product page shown here...

*** URL removed *** /index.php?main_page=product_info&cPath=1&products_id=1

How can this be resolved?

Ideally, to be honest, I'd like that preview text to be different than the full text on the product page. Any tips on either of these?

Thanks for the great forum support, I've found about all the answers I seek so far.

This looks like a good opportunity to post a mod I've had on the back burner for a while. I worked this out a few months ago here; the current version is just tidied up from that.

This is more complex than your requirement, but can be simplified to fit.

Multiple Product Descriptions

This mod gives the ability to have different descriptions in product listing and product info pages, and different parts of the info page description in different places.

First you need to allow HTML to function on the product listing page. Edit /includes/modules/your_template/product_listing.php to comment out zen_clean_html in two places around lines 98 & 100, as explained in this thread. You may also need to do a similar thing in products_all_listing.php (not sure of the filename) to allow HTML on the all products page.

It is also necessary to set the product listing description to allow a larger number of characters than you are ever likely to use (Configuration > Product Listing), so HTML tags don't get truncated. That would be bad. I set mine to 2000.

Enter all the different parts you want to display, with <span class=productDescList>text text text</span><span id=productDesc1>text text text</span><span id=productDesc2>text text text</span> tags around each section.
Put the short description for listing pages in productDescList, and blocks for the info page in 1, 2, etc.
You can use this as a template to paste into the description textarea and fill in:

<span class=productDescList>your text here
</span>
<span id=productDesc1>your text here
</span>
<span id=productDesc2>your text here
</span>

Copy the product description block in tpl_product_info_display to all the locations where you want to display a section of text, and give each block (including the original) a separate id.

 <!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription1" class="biggerText productGeneral"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->
<br class="clearBoth" />

Give any desired styling to each description block.
In your stylesheet, find #productDescription and change it to #productDescription1. Below that declaration, add

#productDescription2 {your desired styling} etc.

Next, turn off all display of #productDesc1 and #productDesc2 etc., and .productDescList in the product info page, and turn them on again selectively.

#productGeneral .productDescList, #productDesc1, #productDesc2 { display: none; }

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

#productDescription2 #productDesc2 { display: block; }

The desired parts of the description will display in their respective locations.

Awesome - thanks so much for posting. Once again I'll have to work on this in the evening but I'm pumped about trying it.

Thanks for the help - pardon my ignorance as I'm still waiting on my CSS lesson from a friend. For this block of text below, what file to do enter this in? I may be requesting some hand holding here, but perhaps by the time we're done I can summarize it into a very basic step by step for others...

Enter all the different parts you want to display, with <span class=productDescList>text text text</span><span id=productDesc1>text text text</span><span id=productDesc2>text text text</span> tags around each section.
Put the short description for listing pages in productDescList, and blocks for the info page in 1, 2, etc.
You can use this as a template to paste into the description textarea and fill in:
*

Sorry for not being explicit there - you would save that "template" block of text as a text file somewhere handy on your computer, and copy & paste it into the description field when you are creating a new product. Then you just add your text in place of the "your text here".

For a quick start on CSS, check out https://www.w3schools.com - they have tutorials and interactive examples where you can actually practice live.

Great thanks I'll look at this again.

great contribution and directions. Have a small problem, all my description boxes are different sizes and misaligned, any ideas on how to fix this.
Also one of my products doesnt have a description2 boxes

any help would be great,

You can use the classes and ids in your stylesheet to fine-tune the size, shape, position, font and other characteristics of the individual description areas. If a particular product doesn't have any text to go in #productDesc2, leave it empty (or eliminate the <span id=productDesc2>your text here</span>) and if it has no borders or background color it will at most add a small blank space where it would usually display.

The problem is in the description boxes in the admin area. they are now aligned like
xxx
xx
x
x
x
xx
xxx
The lines at the bottom of the page where you can add a pic and everything are misaligned too. I looked at the style sheet but I think its for the webpage not the admin area. Is there a style sheet for the admin area?

There should be a separate stylesheet for admin, and any editing you have done to your template stylesheet can have no effect on admin. Zen Cart will never see the template stylesheet when rendering admin pages. So I don't know what could have happened to your display.

Can you post a screenshot of the display? (Obviously you can't post your admin for us to look at live.)

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

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.

fixed the problem, in collect_info.php there was this line

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

and it was missing the

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.

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>

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.

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.

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/

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.

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.

gjh42:

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.

gjh42:

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?

gjh42:

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.

> **gjh42:**
>
> 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?

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

Well there it is! :clap:
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.