Product extra description in List View - what is this?

[puggybelle 9]

Visiting one of the poster's websites that they so generously linked in a thread. 

A product in Grid View looks like this:

But, when switching to List View, they have extra text appearing under the product name:

Where is that text coming from?  Is that something already available to use in 2.3.4.1 CE or is that a contribution at work?

I can see with my own items, in List View, that I have three periods appearing under the product name - ... -  just as the above text ends with three trailing periods.

I just have no text.  But, I'd like some!

- Andrea

 

[♥frankl 277]

2 hours ago, puggybelle said:

Is that something already available to use in 2.3.4.1 CE

Yes.

[puggybelle 9]

I'm sorry...I forgot the forum was in rude mode today. 

[Hotclutch 86]

30 minutes ago, puggybelle said:

I'm sorry...I forgot the forum was in rude mode today. 

Line 154 of product_listing.php

$prod_list_contents .= '      <p class="text-center" itemprop="description">' . strip_tags($listing['products_description'], '<br>') . '&hellip;</p><div class="clearfix"></div>';

 

[♥JcMagpie 710]

Yes its stock display unless you have made changes to the software to turn it off. Its also nice to see they have made an effort to make the list and grid look a little different to stock.

 

https://tbyb.co.uk/index.php/hardware-graphics-cards-c-1_4

Edited August 15, 2018 by JcMagpie

[♥JcMagpie 710]

16 hours ago, puggybelle said:

just as the above text ends with three trailing periods.

I just have no text.  But, I'd like some!

The text is take from the product description of the product. It will only appear if yo have text in it, if its empty you get this. You will also get this if you have html code displaying images , lists, or tables. You must have text first.

[puggybelle 9]

6 hours ago, JcMagpie said:

You will also get this if you have html code displaying images , lists, or tables. You must have text first. 

That explains everything!

The product descriptions I migrated over are loaded with css and html code. 

Don't know how I could possibly clean that up.  One at a time, but...no thanks!  6,000 items = heck no!

The List View screenshot I provided reminded me very much of a contrib I used in 2.2 for a while. 

Oh, well.  At least I can cross that off the things-I-might-be-interested-in list.  Thanks!

- Andrea

[ArtcoInc 250]

@JcMagpie @puggybelle

Actually, you can have some HTML code in the description. For example, in a stock install of Frozen ...

Grid view:

 

List view:

 

And the HTML code in the description, and seen in Admin:

 

M

[♥JcMagpie 710]

52 minutes ago, puggybelle said:

That explains everything!

The product descriptions I migrated over are loaded with css and html code. 

Don't know how I could possibly clean that up.  One at a time, but...no thanks!  6,000 items = heck no!

The List View screenshot I provided reminded me very much of a contrib I used in 2.2 for a while. 

Oh, well.  At least I can cross that off the things-I-might-be-interested-in list.  Thanks!

- Andrea

The issue is with public_html/includes/modules/product_listing.php as mentioned earlier

$prod_list_contents .= '      <p class="group inner list-group-item-text" itemprop="description">' . strip_tags($listing['products_description'], '<br>') . '&hellip;</p><div class="clearfix"></div>';
    

The use of strip_tags  is removing much of the html tags apart from <br> I'm not a php expert but I'm sure you can make it show the html if needed. I have the same problem with a test product on which I have html to display tabs.

in list all I get is this

However if I remove strip_tags I can display the tabs

😂 as you can see I've just hacked the change, I'm sure if it's done properly you should be able to display your description.

[♥JcMagpie 710]

22 minutes ago, ArtcoInc said:

@JcMagpie @puggybelle

Actually, you can have some HTML code in the description. For example, in a stock install of Frozen ...

Grid view:

 

List view:

 

And the HTML code in the description, and seen in Admin:

 

M

Well if you look carefully at the code 😁 you will see that <br> is the one tag not removed!

$prod_list_contents .= '      <p class="group inner list-group-item-text" itemprop="description">' . strip_tags($listing['products_description'], '<br>') . '&hellip;</p><div class="clearfix"></div>';

Edited August 15, 2018 by JcMagpie

[♥raiwa 690]

If it really prevents the description text to be shown, you can try to remove the html using the function " strip_tags() ". You even can add a list of allowed tags like <br>.

See here:

http://php.net/manual/en/function.strip-tags.php

I believe it will not removes css and if your css prevents the description text to show, you'll need to use a  more complicate preg_replace() function to remove all css.

Just try with some examples and manually remove code to isolate and find out what exact causes the problem.

[♥JcMagpie 710]

I'm not 100% sure as its not something I have worked on, but the  strip_tags()  is already in the code for $prod_list_contents I don't fully understand why some html is being ignored.

Its not a problem for me was just trying to help @puggybelle to see if she could avoid having to edit 6000 descriptions  😊

I have attempted to add additional exceptions but that did not work. All I got to work was to remove  strip_tags() and then the html began to show!

[♥raiwa 690]

@JcMagpieYou are right, sorry didn't read your previous post neither had a look on the existing code. My fault 🙄

Then it can be the css or a sloppy html code producing the problem.

[♥JcMagpie 710]

Yes I think so too just need to look a bit harder, thanks. Perhaps late at night is not the best time 😊

[ArtcoInc 250]

I use HTML code in the product descriptions on my sites. Strip_tags() does indeed strip the HTML (except for <br>) when the items are displayed in either grid or list view. But, as @puggybelle stated, she has CSS and other stuff in there too. It might be a worthwhile experiment to take one item, and carefully edit the description, taking out bits of the description (one at a time) to see exactly what is causing her issue. Once the root cause is determined, then perhaps product_listing.php could be modified to address it, without having to edit all 6000 descriptions.

M

[burt 2,640]

Be aware that if you remove the strip_tags function, and you have any (even tiny) mistake in your product_description HTML, your whole site when looking at that product...may (at best) look bad and at worst (page won't display).  

[♥JcMagpie 710]

Yep! that's exactly what happened on my test site  and why I stopped going down that road  😂 all I did was ad the <ul> to the exception and totally messed up the layout!

Still must be a another way of cracking this problem will just need to keep looking. 

[♥JcMagpie 710]

10 hours ago, ArtcoInc said:

It might be a worthwhile experiment to take one item, and carefully edit the description,

You can use my test site as an example as I was able to make the same result by adding code to description

https://www.justfastfood.com/index.php/cPath/1_9

Test product Microsoft IntelliMouse Explorer

This test product has a simple bit of code in the description section to show the description in tabs format, Ignore the poor layout it was just a quick cut and paste to see what happens, Nothing basically wrong with the code but everything apart from the <h2> is being ignored! and the <h2> is not in the code exception  list.

<html>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div>
<ul class="nav nav-tabs">
  <button class="primary_tabs btn btn-primary" onclick="openCity('Product Information')">Product Information</button>
  <button class="primary_tabs btn btn-primary" onclick="openCity('Tech Info')">Tech Info</button>
  <button class="primary_tabs btn btn-primary" onclick="openCity('Product Warranty')">Product Warranty</button>
</div>

<div id="Product Information" class="w3-container w3-display-container city">
  <span
  class="button large display-topright"></span>
  <h2>Product Information</h2>
  <p>Microsoft introduces its most advanced mouse, the IntelliMouse Explorer! IntelliMouse Explorer features a sleek design, an industrial-silver finish, a glowing red underside and taillight, creating a style and look unlike any other mouse. IntelliMouse Explorer combines the accuracy and reliability of Microsoft IntelliEye optical tracking technology, the convenience of two new customizable function buttons, the efficiency of the scrolling wheel and the comfort of expert ergonomic design. All these great features make this the best mouse for the PC!</p>
</div>

<div id="Tech Info" class="w3-container w3-display-container city" style="display:none">
  <span
  class="button large display-topright"></span>
  <h2>Tech Info</h2>
  <p>Place your product tech info here.</p>
</div>

<div id="Product Warranty" class="w3-container w3-display-container city" style="display:none">
  <span
  class="button large display-topright"></span>
  <h2>Product Warranty</h2>
  <p>12 months parts only.</p>

</ul>
</div>
</body>

[♥JcMagpie 710]

12 hours ago, puggybelle said:

The product descriptions I migrated over are loaded with css and html code.

Ok had a quick look and the issue with your site is a little different , the reason you are seeing ... on your list view is that most of your product descriptions start with a image.

I think if you were to add a brief 2 line description or heading before the image that would show in the listing. Now to do that for 6000 products will need to be done by a script or CSV file, It could be as simple as just moving the first 2 lines of text before the image.

[♥JcMagpie 710]

Ok I'm going to admit defeat on this one 😊, after further investigation it looks as if the only solution is to get rid of  strip_tags() an replace it with a purification function!

strip_tags()  is know to be problematic in that its not a reliable way of striping tags.

"It can eat legitimate text. It turns "This shows that x<y." into "This shows that x", and unless it gets a closing '>' it will continue to eat the rest of the lines in the comment." as someone else has discovered!

I suspect that this is the issue with my test description, in that it finds html its not able to cope with and just ignores everything after that.

In my case it would out put the name of the first primary tab "Product Information" but then ignore everything after it. If I remove all the code up to the first <h2> tag it then works fine and display the rest.

<html>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div>
<ul class="nav nav-tabs">
  <button class="primary_tabs btn btn-primary" onclick="openCity('Product Information')">Product Information</button>
  <button class="primary_tabs btn btn-primary" onclick="openCity('Tech Info')">Tech Info</button>
  <button class="primary_tabs btn btn-primary" onclick="openCity('Product Warranty')">Product Warranty</button>
</div>

<div id="Product Information" class="w3-container w3-display-container city">
  <span
  class="button large display-topright"></span>
  <h2>Product Information</h2>
<p> Microsoft introduces its most advanced mouse, the IntelliMouse Explorer! IntelliMouse Explorer features a sleek design, an industrial-silver finish, a glowing red underside and taillight, creating a style and look unlike any other mouse. IntelliMouse Explorer combines the accuracy and reliability of Microsoft IntelliEye optical tracking technology, the convenience of two new customizable function buttons, the efficiency of the scrolling wheel and the comfort of expert ergonomic design. All these great features make this the best mouse for the PC!</p>
</div>

<div id="Tech Info" class="w3-container w3-display-container city" style="display:none">
  <span
  class="button large display-topright"></span>
  <h2>Tech Info</h2>
  <p>Place your product tech info here.</p>
</div>

<div id="Product Warranty" class="w3-container w3-display-container city" style="display:none">
  <span
  class="button large display-topright"></span>
  <h2>Product Warranty</h2>
  <p>12 months parts only.</p>

</ul>
</div>
</body>

There is a solution to replace strip_tags() but its one for a developer 😊 who know what they are doing.

https://github.com/egil/php-markdown-extra-extended 

Edited August 16, 2018 by JcMagpie

[♥JcMagpie 710]

what's really silly is if I just invert my code it works fine. Literally just moved tabs <div> to bottom of code. 😂

And every thing works fine in list view,

The amount of text shown looks to be totally random! not sure why?

Anyway I think that show that strip_tags()  is best avoided.

Edited August 16, 2018 by JcMagpie

[puggybelle 9]

I've been playing with one of my listings and the culprit is definitely the code at the top of each item description:

<table width="100%" cellspacing="0" cellpadding="6">
  <tr>
<td style="background-color: #ffe6e6; vertical-align: top;">
<div style="font-family: arial, helvetica, sans-serif; padding-left: 8px; padding-right: 8px; font-size: 16px;">
<div align="center" style="font-size: 24px; font-weight: bold;">

That code is followed by a hard-coded link to the product image centered onscreen...the title of the product centered underneath it at 24px...then a closing div tag and the item description appears, filling the screen from left to right, at 16px.

Removing the code above does fix the problem.  Text appears in List View under the product name and looks great.

However, I lose all infoboxes in the left column when viewing the item...not to mention the centering of the image, the background color, font-size, etc.

The layout gets totally whacked.

On 8/15/2018 at 2:17 PM, puggybelle said:

You will also get this if you have html code displaying images , lists, or tables. You must have text first. 

Actually, removing the above code and having the image coded first did not interfere with the text being picked up in List View.

It's all the other code above the image that is creating the problem.

But, I will keep playing with it and see what I can do.  Any and all advice is more than welcome!

- Andrea

 

 

[puggybelle 9]

12 hours ago, JcMagpie said:

I think if you were to add a brief 2 line description or heading before the image that would show in the listing.

That works.

Problem is...that text appears when viewing the item description, too.  Outside the table.  Like...what is that doing there?

Still trying!

- Andrea

[♥JcMagpie 710]

😊 The layout goes silly because you have removed 2 <div> from the code, you need to balance that by removing 2 </div> from the bottom of the code. When you remove <div> you need to do them in pairs to keep layout same. Its the same for most tags if you remove a <td> then removes is </td> also.

Try you may get lucky and have it work out.

[puggybelle 9]

I see what you mean.  It now gives me text in List View AND my left column is fine again.

But I had to delete all of that code which is providing me with a background color, a table width, font sizes, centering of the image...everything. 

So, my items in List View will look good but when clicked on...the item description itself looks pretty bad.

Sounds like I can only have one or the other. 

I've been Googling 'strip css' for two hours and getting nowhere. 

- Andrea