0

Magento - 2.3.5-p2

I’m in the process of learning Magento.

I’m trying to do the following, limit the characters in product title as the image shows. I want result number 2.

I've seen various ways to do this online and they appear to be for older versions.

Can anyone help?

title example

cz84
  • 69
  • 2
  • 15
  • 1
    in Magento/app/design/frontend/default/your_theme/template/catalog/product/ file check $title variable and replace it with this. if( strlen($title)>= 25){ echo substr( $title ,25).'...'; } else { echo $title; } – Sanaullah Ahmad Aug 10 '20 at 14:45

5 Answers5

5

Try this following code :-

Go to your theme and add this code :-

app/design/frontend/Vendor_Name/Theme_Name/Magento_Catalog/templates/product/list.phtml

<?php
$productName = $_helper->productAttribute($_product, $_product->getName(), 'name');
$len = strlen($productName);
?>
<a class="product-item-link" href="<?php echo /* @escapeNotVerified */ $_product->getProductUrl() ?>">
    <?php echo substr($productName,0,50); ?>
    <?php if($len > 50) echo '...'; ?>
</a>

And you change run below commands :-

php bin/magento c:c
php bin/magento c:f

OutPut:-

enter image description here

And more information check this link :-

Magento 2 -Limit the length of the product name on the front end.

https://community.magento.com/t5/Magento-2-x-Programming/Limit-of-Product-Name-in-Product-Catalog-Magento-2-3/td-p/131997

THANKS.

Mohit Patel
  • 3,778
  • 4
  • 22
  • 52
  • I have tried what you have given me, but I get an error in the catalog once I make the changes along the lines of: Exception #0 (Exception): Notice: Undefined variable: productName in /app/design/frontend/Kidsaw/kidmag2/Magento_Catalog/templates/product/list.phtml on line 71 - I tried putting the default list.phtml in there and the same error appears?? Its as if my theme doesn't like me overriding the file? The default one should produce no errors. – cz84 Aug 11 '20 at 11:18
  • Please share you code in your question. – Mohit Patel Aug 11 '20 at 18:40
  • This is the default magento code, with no changes:: http://pastie.org/p/3KQL6fZCARFB6vm6W4rQnc – cz84 Aug 12 '20 at 08:03
  • 1
    check my full code :- http://pastie.org/p/706WiuN5vDhMGF1sd7dT2W and working fine and i have update my answer please check. – Mohit Patel Aug 13 '20 at 05:51
  • 1
    And i have check my add this code :- https://prnt.sc/tyrw13 – Mohit Patel Aug 13 '20 at 05:53
  • Thanks so much, it is now working! – cz84 Aug 13 '20 at 09:50
  • @cz84 you can follow css solution, i added that as answer. Thanks! – Shuvankar Paul Aug 16 '20 at 15:57
3

You can use this code

 <div class="product description product-item-description">
    <?php  echo mb_strimwidth($_item->getShortDescription(), 0, 60, '...'); ?>
 </div>
Anton Smolin
  • 61
  • 3
2

Firstly, Limiting Character from code level may be not a good practices

  1. SEO may get hamper
  2. You can't show the full length of different device

Better possible to do that on by CSS

.product-item-name {
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
}

By this way you have full control by CSS.

It should be like this

enter image description here

Shuvankar Paul
  • 410
  • 6
  • 17
  • I've limited it by PHP for now. I'm not sure how I would do the CSS method, all product names are different, do they all use the same css class? – cz84 Aug 17 '20 at 17:43
  • for product listing it's comes from app/design/frontend/Vendor_Name/Theme_Name/Magento_Catalog/templates/product/list.phtml file, unless you use custom location. so product listing class should be same. this css just hide the extra character just keep single line – Shuvankar Paul Aug 18 '20 at 12:38
1

With the php approach you add loading time to your pages and a lot of logic is in the template. There is a css only solution

<div style="height: 1.8rem;">
   <a style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">PRODUCT NAME</a> 
</div>

Set the height to one line of your Title, the webkit-line-clamp adds the points automatically at the end.

CloudySi
  • 374
  • 1
  • 3
  • Do you know which file I add this too? is it the same location here: Magento/app/design/frontend/default/your_theme/template/catalog/product/ – cz84 Aug 11 '20 at 10:34
0

Great, I am looking for this solution setup on my magento 2 website, according to suggestion of Shuvankar Paul by using CSS on list.phtml I jsut found this https://prntscr.com/1rh4ufb may I know where to fix it or we have another file plus the code

.product-item-name { overflow: hidden; position: relative; text-overflow: ellipsis; white-space: nowrap; }

What if I want to control the title 2 - 3 rows, possbile by using CSS? sorry I am familiar with CSS, many thanks team.

Jasonwong
  • 1