Quick question re keeping < br > in product-list.tpl

[techimab]

Hi guys,

the product-list.tpl has this line to show the short description

<p class="product-desc" itemprop="description">
   {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
</p>

This strips away any html tags I suppose. The problem is, my client wants to show some product information such as weight and dimensions, and has entered these with < br >'s in the description_short.

 

If I remove the strip_tags part, no description_shoprt content is shown. What is the correct way to keep the html formatting in the product-list view?

 

Many thanks for a suggestion!

Jonas

[GT ITECH]

Which version of Prestashop do you use ? Which theme ?

[GT ITECH]

Simply use this :

    <p class="product-desc" itemprop="description">
       {$product.description_short|truncate:360:'...'}
    </p>

[techimab]

Thank you very much for trying to help me with this seemingly simple problem - I had tried that suggestion too, and while I can get the short description to show on the home page where the "popular" or "best selling" products show, I do not see the product.description_short contents on my list of products when I have selected a category (i.e., where you can switch between a grid and a list view - to clarify, I do not need the product.description_short in the grid view, I want it in the list view though, except with my br tags in place :-)

 

I  have now added a few more lines and css rules to make things clearer(?), perhaps the attached screenshots help shed some light on what is happening:

 

My code in product_list.tpl (around line 122)

  
					        <p class="product-desc-green" itemprop="description">
                        {$product.description_short|truncate:50:'...(green-no-strip)'}
                    </p>
    
                    <p class="product-desc-red" itemprop="description">
                          {$product.description_short|truncate:50:'...(red-no-strip)'}
                     </p>
                    
                    <p class="product-desc-blue" itemprop="description">
                        {$product.description_short|strip_tags:'UTF-8'|truncate:50:'...(blue-strip)'}
                    </p>

My new css rules:

.product-desc-green {display: inline;color: green}

.product-desc-red {display: inline;color: red}

.product-desc-blue {display: inline;color: blue}

my results:

 

The homepage now shows the grid display of popular products etc. with the product.description_short information, and your suggestion works to let the tags do their thing (I see this if I truncate at 200 or so etc.):

 

 

BUT - where I actually wanted the short description, on the product list of a selected category (see next screenshot), nothing shows, and or "undefined". So I am assuming there is some more code that is interfering here?

 

Any ideas?

 

Edited September 26, 2015 by techimab (see edit history)

[GT ITECH]

1. Create file in tools/smarty/plugins/ folder

2. Name the file modifier.strip_tags_exclude.php

3.Put this code in :

function smarty_modifier_strip_tags_exclude()
{

    $params=func_get_args();

    if (!isset($params[1])) {
        $params[1] = true;
    }
    if ($params[1] === true) {
        return preg_replace('!<[^>]*?>!', ' ', $params[0]);
    } else {
        if (is_string($params[1]))
        {
            $allowable_tags = strtr($params[1],'[]','<>');
        }


        return strip_tags($params[0],$allowable_tags);
    }
}

4. in your product-list.tpl use this code :

<p class="product-desc" itemprop="description">
       {$product.description_short|strip_tags_exclude:'[br][/br]'|truncate:360:'...'}
    </p>

[techimab]

Hi again, sorry, I forgot to mention I am using the Cloud version (1.6.1.1). I do have FTP access, but my main folder shows

 

• config
• modules
• override
• themes

only, i.e. no tools folder. I am using the default-bootstrap theme.

Can I plug this into something else? Or perhaps integrate the function in the template itself?

 

Best regards & thanks again for your help!

[GT ITECH]

Cloud version ? Ouch...

 

I continue searching solution.

[GT ITECH]

Try this in your product list.tpl :

    <p class="product-desc" itemprop="description">
           {literal}
<script type="text/javascript" id="jsdesc">
var html = {/literal}{$product.description_short}{literal};
html.replace("<br>","||br||");  
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
html = tmp.textContent||tmp.innerText;
html.replace("||br||","<br>");
 html = html.substring(0,360);
$( html ).insertBefore( "#jsdesc" );
document.getElementById('jsdesc').id = 'jsdescpassed';
</script>
{/literal}
        </p>

Edited September 27, 2015 by GT ITECH (see edit history)

[musicmaster]

When the text is invisible: did you look at the source code to find the reason?

[techimab]

Hi GI ITECH - many thanks, I will try this this evening.

 

re musicmaster's question - yes, I did, but the rendered page source code showed no content between the tags, see the attached screenshot:

 

[GT ITECH]

What have you got in your web console ? any javascript error ?

[techimab]

Hi GT ITECH!

 

I set up a completely new Cloud Shop to test this to avoid any other issues from my CSS code etc. and  tried your last code, and I again get a "blank / empty" description. Although now I at least see the right result in the source code:

 

 

Did I miss something or do it the wrong way?

The "only" thing that now changed from a brand new Cloud PS with the default-bootstrap template is the file

 

product-list.tpl where the following lines where removed:

<p class="product-desc" itemprop="description">
	{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
</p>

and replace those lines with your code:

<p class="product-desc" itemprop="description">
{literal}
<script type="text/javascript" id="jsdesc">
var html = {/literal}{$product.description_short}{literal};
html.replace("<br>","||br||");  
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
html = tmp.textContent||tmp.innerText;
html.replace("||br||","<br>");
 html = html.substring(0,360);
$( html ).insertBefore( "#jsdesc" );
document.getElementById('jsdesc').id = 'jsdescpassed';
</script>
{/literal}
</p>

[GT ITECH]

Ok, what do you got in your web Console ?