Magento2: Limit Large Product Names in Grid View

Magento customization experts bring this tutorial to help you out in getting more customers for your e-commerce products. In this post, you will learn how to limit large product names in grid view. As in e-commerce, limited clicks are required by customers, and via this post, you will learn to list items on different pages

As a rule in eCommerce, you want to limit the amount of clicks that it takes for your customers to buy your products. A nice way to do this is to list items on your homepage, your product pages, and even a 404 page.

This list is a grid view of products. By default, these templates pull in the product image, the product name, the add to cart button, the wishlist button, and the compare items button. By manipulating the template you can add more product attributes. Sometimes developers add things like promotional notifications, MSRP, and In-Stock options. With all of these things in place, you are bound to run out of space. Everything you’ve placed on there is important. Since everything on there has meaning take a look at what you can change. The last thing that you want to do is shrink down your content to an unreadable size with CSS. Instead, let’s use a PHP solution. Take a look at your carefully crafted product names. I’m sure that a lot of thought went into those for SEO purposes. Let’s limit the characters that display in the name field. It won’t hurt SEO because the SEO is being maximised by the product and category pages and this is duplicate content.

For this exercise we are going to make use of a list item for “Recently Viewed Products.” Navigate to Magento_Reports > templates > widget > viewed > content > viewed_grid.phtml

Look for this code snippet: <?php $block->escapeHtml($_item->getName()); ?>

The above snippet outputs the exact product name.

Ultimately the goal is to limit the number of characters per line and to limit the lines to four. First, we need to assign our base code to a variable. Our base code is the above snippet. I will break it up like so:

<?php

$recViewProd = $block->escapeHtml($_item->getName());

?>

I’ve taken out the echo and assigned the code to the $recViewProd variable. This makes that block of code reusable.

Next I will create another variable and that variable will perform an action on our code base.

$nameWordwrapped = wordwrap($recViewProd, 20,”<br>n”);

This snippet limits our product name to 20 characters per line. Finally I’m going to add one more variable.

$finalOutput = substr( $nameWordwrapped, 0, strrpos( substr( $nameWordwrapped, 0, 80), ‘ ‘ ) );

This block of code limits the total amount of characters to be displayed to 80 while breaking at the nearest whole word.

The last thing we need to do is to echo out the last variable which is echo $finalOutput;

This will display it to the page.

This code can be reused for any grid view listing (ie, Catalog Page, Search Results, Featured Item, etc…).

Again there is no SEO value loss. This is purely a way to get your products in from of your customers and to minimise the amount of clicks it takes for them to get something in their cart.

Below is the full code snippet if you would just like to copy and paste it.

<?php

$recViewProd = $block->escapeHtml($_item->getName());

$nameWordwrapped = wordwrap($recViewProd, 20,”<br>n”);

$finalOutput = substr( $nameWordwrapped, 0, strrpos( substr( $nameWordwrapped, 0, 80), ‘ ‘ ) );

echo $finalOutput;

?>

Experts have shared this Magento customization tutorial to make you learn how to limit large product names in Grid view. If you have anything to ask or any doubt about the method discussed in this post, comment and get response from the experts.

About Author : James Warner – Highly skilled, experienced and Sr Magento Certified Developer at NexSoftSys. He has expert in Magento customization and bright technology knowledge to develop IT business system which includes user friendly access and advanced features.