PS 1.7 | Text length for products in product list (truncate on PS1.6)

[Rekal007]

Hey,

 

On Prestashop 1.6 i can change the TRUNCATE value like so: https://www.onasus.com/prestashop-tip-extending-product-name-length-on-category-page/

But i do not see this in PS 1.7,  how do i do this with PS 1.7 ?

 

 

Edited May 13, 2017 by Rekal007 (see edit history)

[eThAnsp]

Got same problem, after review half template this is the route on my buyed theme:
 
\themes\your_theme\templates\catalog\_partials\miniatures\product.tpl

	    <div class="product-info">
		  	{block name='product_name'}
				<h5 class="product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h5>
		  	{/block}

hope this help you too.

 

[Rekal007]

Thanks !

 

for me it was the file:

 /themes/Theme name/templates/catalog/_partials/miniatures/product-listgrid.tpl

 

i changed it to:

 

  <div class="product-description">

 

      {block name='product_name'}

 

        <h3 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:75:'...'}</a></h3>

 

      {/block}

 

 

 

 

working perfect !

[Josecm]

Hello, I change several "truncate" values from several "tpl" files I found but nothing works.

 

I am using Prestashop 1.7, and Leo GStore theme.

 

Some body got it for this theme or knows how to do it?.

 

Thanks in advance.

[Josecm]

nobody knows?

[bTk]

You have to force Smarty to recompile after making changes in tpl files

 

[Josecm]

On 18/11/2017 at 11:36 AM, bTk said:

You have to force Smarty to recompile after making changes in tpl files

 

It was set to "Recompile the templates when the files are modified". It should work?.

Anyway I did set to "force compile" and don´t works. I need to found where is the .tpl file that works. I looked at:

\themes\your_theme\templates\catalog\_partials\miniatures\product.tpl

/themes/Theme name/templates/catalog/_partials/miniatures/product-listgrid.tpl

and others .tpl files that have the "truncate" word and don´t works.

 

Any help will be apreciated.

 

Thanks in advance.

 

 

[Vazerd]

this is ok

 

/yourtheme/templates/catalog/_partials/miniatures/product.tpl

 

{block name='product_name'}
          <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h1>
        {/block} 

 

 

but the problem is the price... 
what to change to get this? 

 

[Vazerd]

Can anybody help me?

[Josecm]

4 hours ago, Vazerd said:

Can anybody help me?

you can try with "right-click" -> "inspect element", and see the CSS code and try changing values to see if you can expand the white box to the bottom part.

[Vazerd]

On ‎28‎/‎11‎/‎2017 at 2:56 PM, Josecm dice:

you can try with "right-click" -> "inspect element", and see the CSS code and try changing values to see if you can expand the white box to the bottom part.

 

I have solved. thank you very much!!!

Edited December 1, 2017 by Vazerd (see edit history)

[Josecm]

1 hour ago, Vazerd said:

 

I have solved. thank you very much!!!

You are welcome

[Daniele0884]

On 1/12/2017 at 12:19 PM, Vazerd said:

 

I have solved. thank you very much!!!

Please, can you explain how solved? I have same problem, but I don't know where found the file to edit. Thanks

[Vazerd]

Prestashop 1.7?

/yourtheme/templates/catalog/_partials/miniatures/product.tpl

[Rolandas Ziogelis]

The question is still open. Can anybody tell how to enlarge the box to fit 2 rows of product title and the price inside the white box?

[hstrom]

On 2018-10-10 at 7:08 PM, Rolandas Ziogelis said:

The question is still open. Can anybody tell how to enlarge the box to fit 2 rows of product title and the price inside the white box?

 

You need to change css. For Classic theme I put this in custom.css:

#products .thumbnail-container,.featured-products .thumbnail-container,.product-accessories .thumbnail-container,.product-miniature .thumbnail-container{position:relative;margin-bottom:1.563rem;height:350px;width:257px;background:#fff;box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}
#products .product-description,.featured-products .product-description,.product-accessories .product-description,.product-miniature .product-description{position:absolute;z-index:1;background:#fff;width:257px;bottom:0;height:120px}

#products .highlighted-informations,.featured-products .highlighted-informations,.product-accessories .highlighted-informations,.product-miniature .highlighted-informations{position:absolute;bottom:1.25rem;padding-top:0.625rem;z-index:0;background:#fff;text-align:center;width:257px;height:6.125rem;box-shadow:0 -5px 10px -5px rgba(0,0,0,.2);transition:bottom .3s}

After this, it looks like this for me, i.e. much more space below image:

If you run another theme, you need to check where this is controlled in the css by checking with the inspect tool in Chrome, for example.

With kind regards,

 - Johan.

[Inform-All]

I think this is the best solution edit in "themes/classic/templates/catalog/_partials/miniatures/product.tpl" 

Arround line 46 change :

      <div class="product-description">
        {block name='product_name'}
            {if $page.page_name == 'index'}
                <h3 class="h3 product-title" itemprop="name">
                  <a href="{$product.url}">{$product.name|truncate:30:'...'}</a>
                </h3>
            {else}
              <h2 class="h3 product-title" itemprop="name">
                <a href="{$product.url}">{$product.name|truncate:30:'...'}</a>
              </h2>
            {/if}
        {/block}

TO

      <div class="product-description">
        {block name='product_name'}
          {if $product.name|count_characters > 35}
          {if $page.page_name == 'index'}
                <h3 class="h3 product-title" style="margin-top: -0.1rem;" itemprop="name">
                  <a href="{$product.url}">{$product.name|truncate:60:'...'}</a>
                </h3>
            {else}
              <h2 class="h3 product-title" style="margin-top: -0.1rem;" itemprop="name">
                <a href="{$product.url}">{$product.name|truncate:60:'...'}</a>
              </h2>
            {/if}
          {else}
            {if $page.page_name == 'index'}
                <h3 class="h3 product-title" itemprop="name">
                  <a href="{$product.url}">{$product.name|truncate:35:'...'}</a>
                </h3>
            {else}
              <h2 class="h3 product-title" itemprop="name">
                <a href="{$product.url}">{$product.name|truncate:35:'...'}</a>
              </h2>
            {/if}
          {/if}
        {/block}

This will makes the design pretty until 60 characters.
And a small reminder, make sure you implement this with a override.

Edited February 5, 2019 by Inform-All (see edit history)

[zod]

 

On 8/8/2017 at 11:34 PM, Josecm said:

Hello, I change several "truncate" values from several "tpl" files I found but nothing works.

I am using Prestashop 1.7, and Leo GStore theme.

Some body got it for this theme or knows how to do it?.

Thanks in advance.

Perhaps it is late but with Leo Themes there is a module called Apollo Page Builder to make layouts for Product List and Product Detail. It is a dynamic template composer.
First, you need to modify the templates in the "appagebuilder" module (override them in your theme).
For example: to remove the "truncate" of the product name you copy this: modules/appagebuilder/views/templates/front/products/product_name.tpl
to this: themes/leo_YOURTHEME/modules/appagebuilder/views/templates/front/products/product_name.tpl
And then edit it according your preferences.

Then, go in your admin, menu Ap PageBuilder -> Ap Products List Builder.
Find the profile you are using and open it (for example the first one, product-list-default). Save. This is required to rebuild the profile template.

[Rey Cafe]

Addition, after modify your "themes/classic/templates/catalog/_partials/miniatures/product.tpl", you have to reset your theme to make it work to see the results.

Now my website is working with the new product name length. Visit the https://www.rey.cafe to see for yourself.

[narancsital]

I use the default-bootstrap theme. I would like to increase the product name text in the product list. 

There is the product-list.tpl file, but I don't know how should I modify it. 

Please help me. Thanks in advanced! 

Edited September 11, 2019 by narancsital (see edit history)

[zod]

2 hours ago, narancsital said:

I use the default-bootstrap theme. I would like to increase the product name text in the product list. 

There is the product.tpl file, but I don't know how should I modify it. 

Please help me. Thanks in advanced! 

When in a template you see a Smarty tag like this {$product.name|truncate:30:'...'} you can change the length modifying the number of characters (ex: from 30 to 70). If you want remove the truncation you can delete the whole part, keeping the variable only, so the Smarty tag becomes like so {$product.name}.

[BogdanM]

On 6/8/2019 at 12:52 AM, zod said:

 

Perhaps it is late but with Leo Themes there is a module called Apollo Page Builder to make layouts for Product List and Product Detail. It is a dynamic template composer.
First, you need to modify the templates in the "appagebuilder" module (override them in your theme).
For example: to remove the "truncate" of the product name you copy this: modules/appagebuilder/views/templates/front/products/product_name.tpl
to this: themes/leo_YOURTHEME/modules/appagebuilder/views/templates/front/products/product_name.tpl
And then edit it according your preferences.

Then, go in your admin, menu Ap PageBuilder -> Ap Products List Builder.
Find the profile you are using and open it (for example the first one, product-list-default). Save. This is required to rebuild the profile template.

Thanks for your reply. Here is how I resolve the probleme on a LEO Theme. In Back Office I go to Apolo Page Builde/ AP Products List Builder and I edit Product Name. I change truncate field wich it was 30, but the text goes only one row because of CSS.  You need to change -webkit-line-clamp: 1 wich allow you to go only one line ore make another modify how you consider, you have several possibility to do. I prefer to put a large number of caracters on truncate and allow line-clamp for 2 rows but don't know if it works in other browsers.

 

[itcfig]

I just found a way to NEVER truncate by just removing part of the code, changing part of the code of our friend Infor-All.

1. Go to /public_html/themes/YourTheme/templates/catalog/_partials/miniatures/product.tpl

2. Change 

    <div class="product-description">
        {block name='product_name'}
          {if $page.page_name == 'index'}
            <h3 class="h3 product-title" itemprop="name"><a href="{$product.canonical_url}">{$product.name|truncate:30:'...'}</a></h3>
          {else}
            <h2 class="h3 product-title" itemprop="name"><a href="{$product.canonical_url}">{$product.name|truncate:30:'...'}</a></h2>
          {/if}
        {/block}

To:

 <div class="product-description">
        {block name='product_name'}
          {if $product.name|count_characters > 35}
          {if $page.page_name == 'index'}
                <h3 class="h3 product-title" style="margin-top: -0.1rem;" itemprop="name">
                  <a href="{$product.url}">{$product.name}</a>
                </h3>
            {else}
              <h2 class="h3 product-title" style="margin-top: -0.1rem;" itemprop="name">
                <a href="{$product.url}">{$product.name}</a>
              </h2>
            {/if}
          {else}
            {if $page.page_name == 'index'}
                <h3 class="h3 product-title" itemprop="name">
                  <a href="{$product.url}">{$product.name}</a>
                </h3>
            {else}
              <h2 class="h3 product-title" itemprop="name">
                <a href="{$product.url}">{$product.name}</a>
              </h2>
            {/if}
          {/if}
        {/block}

Basically I just removed the truncate, changing "{$product.name|truncate:30:'...'}" to "{$product.name}"

Then Recompile your files (Advanced Parameters - Performance - Smarty 

Change "never recompile" to"recompile files", clear cache, change back to never recompile

I use Prestashop 1.7.0

[pmanuel994]

Hi all,

For those who are using ap page builder.

First check in back office -> Ap PageBuilder -> Ap ProductListBuilder, your product list key (verify which one you are using at the moment).

Second step, in ftp go to: your_theme/modules/appagebuilder/views/templates/front/profiles

Search your profile (same name as product list key name in the back office).

Modify the .tpl file, at row 134:

 <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:50:'...'}</a></h1> for example truncate at 50

 

Hope this helped you out.

[zod]

On 2/15/2020 at 3:24 PM, pmanuel994 said:

Hi all,

For those who are using ap page builder.

First check in back office -> Ap PageBuilder -> Ap ProductListBuilder, your product list key (verify which one you are using at the moment).

Second step, in ftp go to: your_theme/modules/appagebuilder/views/templates/front/profiles

Search your profile (same name as product list key name in the back office).

Modify the .tpl file, at row 134:

 <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:50:'...'}</a></h1> for example truncate at 50

 

Hope this helped you out.

This way you are modifying the generated tpl file, but it is not the best solution. It is working until you update the profile in AP Pagebuilder, if you do it, the file is generated again (from the sources you never touched), and your code would be overridden.
To avoid this you should modify the original files of the module, better using a override version in your theme folder, as I explained before. 

[costaxi]

  

Hello thanks i juste manage to modifiy the length of my prestashop themes after 2 days of searching, your path helped me to locate the exacte file

On 5/14/2017 at 12:13 AM, eThAnsp said:

Got same problem, after review half template this is the route on my buyed theme:
 
\themes\your_theme\templates\catalog\_partials\miniatures\product.tpl

	    <div class="product-info">
		  	{block name='product_name'}
				<h5 class="product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h5>
		  	{/block}

hope this help you too.

 

[ericksonvornes]

On 2/5/2019 at 7:39 AM, Inform-All said:

I think this is the best solution edit in "themes/classic/templates/catalog/_partials/miniatures/product.tpl" 

Arround line 46 change :

      <div class="product-description">
        {block name='product_name'}
            {if $page.page_name == 'index'}
                <h3 class="h3 product-title" itemprop="name">
                  <a href="{$product.url}">{$product.name|truncate:30:'...'}</a>
                </h3>
            {else}
              <h2 class="h3 product-title" itemprop="name">
                <a href="{$product.url}">{$product.name|truncate:30:'...'}</a>
              </h2>
            {/if}
        {/block}

TO

      <div class="product-description">
        {block name='product_name'}
          {if $product.name|count_characters > 35}
          {if $page.page_name == 'index'}
                <h3 class="h3 product-title" style="margin-top: -0.1rem;" itemprop="name">
                  <a href="{$product.url}">{$product.name|truncate:60:'...'}</a>
                </h3>
            {else}
              <h2 class="h3 product-title" style="margin-top: -0.1rem;" itemprop="name">
                <a href="{$product.url}">{$product.name|truncate:60:'...'}</a>
              </h2>
            {/if}
          {else}
            {if $page.page_name == 'index'}
                <h3 class="h3 product-title" itemprop="name">
                  <a href="{$product.url}">{$product.name|truncate:35:'...'}</a>
                </h3>
            {else}
              <h2 class="h3 product-title" itemprop="name">
                <a href="{$product.url}">{$product.name|truncate:35:'...'}</a>
              </h2>
            {/if}
          {/if}
        {/block}

This will makes the design pretty until 60 characters.
And a small reminder, make sure you implement this with a override.

i do that and work, but now i got a problem with the friendly url in categories

i have multi store, the problem is in the second store

[jolans]

Thank you very much for idea to see module app build

---

 

First check in back office -> Ap PageBuilder -> Ap ProductListBuilder, your product list key (verify which one you are using at the moment).

Second step, in ftp go to: your_theme/modules/appagebuilder/views/templates/front/profiles

Search your profile (same name as product list key name in the back office).

Modify the .tpl file, at row 134:

 <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:50:'...'}</a></h1> 

or delete Truncate : 

 

h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name}</a></h1>

but if you have problem after with your template ..

 

for information for leotemplate 

we see  in theme.css

  .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

 

 

its ok now for me 1.7.6x

 

[Inform-All]

On 6/16/2020 at 6:16 PM, ericksonvornes said:

i do that and work, but now i got a problem with the friendly url in categories

i have multi store, the problem is in the second store

What problems? Can you put your store in debug mode, and share your error?
Or explain us, what is going wrong, because it should not interfere with the urls.

[ericksonvornes]

4 hours ago, Inform-All said:

What problems? Can you put your store in debug mode, and share your error?
Or explain us, what is going wrong, because it should not interfere with the urls.

in categories page it shows this when i enable the friendly url, but when its disabled works fine, this start happened when i make the change in the theme, but you say this should not interfere with the urls and i agree with that, so i don't know what happened, to enter in context, i have multistore enabled and mi first store its ok with the friendly url, its just the second one that have the problem

[minimeca]

hello

i modify my product.tpl as ISABELABOER suggest

but behaviour is strange , some products it's ok, some products no ...

for example : https://www.mini-meca-rc.com/275-piste-110