• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы удаляются без предупреждения!

Ограничение количества символов названия товара в категории(truncate)

Image CMS

techlamp

Новичок
#1
Добрый день, Уважаемые форумчане!

Прошу посоветовать плагин или код для вставки в function.php или через стили для того, чтобы ограничить название товара по количеству символов. Необходимо для приведения http://lampa52.ru в приятный вид, где товары не пляшут.
 

techlamp

Новичок
#2
Нашел решение через редактор стилей
.product_item .product_details h5{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Правда он режет до 1 строки. Как обрезать, чтобы отображалась 2 строки?
 

rikitiki

Специалист
Местный
#3
Вопрос интересный. Проверил - действительно режет в одну строку. Да и с кроссбраузерностью у этого кода не ахти как.
Тоже хотел бы обрезать заголовки в витринах до двух или трёх строк. И именно с тремя точками на конце.
Заголовки из двух строк используются в магазине OBI.
Гляньте к примеру на страницу Проточные водонагреватели. этого магазина.
У всех товаров фиксированная высота при переменной ширине. За счёт этого, скорее всего медиазапросами, меняется количество колонок при различных разрешениях и сохраняется ровность строк.
Если при просмотре этой страницы уменьшать ширину браузера то изменится ширина и количество колонок, и соответственно меняется длина подрезанных заголовков. Но две строки остаются неизменными, причём с тремя точками на конце.
Вариантов подрезки много:
http://blog.n1dev.ru/html-i-css/obrezka-teksta/
Но если использовать обрезку по количеству знаков то могут возникнуть сложности в кодировке UTF8:
http://php.ru/forum/viewtopic.php?t=27083
Длина всё равно будет немного гулять. Может получиться, когда как - то две, то три строки.
Мне тоже не нравится неровный вывод товаров в Woocommerce.
И это здесь обсуждалось: http://wpcommerce.ru/threads/nastrojka-setki-tovarov.1081/
Была ещё одна тема с советами по этому вопросу, но её я отыскать не смог.
Интересен вариант с использованием jQuery dotdotdot:
Вот здесь интересное поясняюшее видео.
И сам первоисточник - http://dotdotdot.frebsite.nl/
Надо бы поробовать на досуге. Возможно с ним получится что-либо путное.
 
Последнее редактирование:

sam325

Форумчанин
#5
Сначала в файл functions.php вашего шаблона вставьте следующую функцию:

function trim_title_chars($count, $after) {
$title = get_the_title();
if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count);
else $after = '';
echo $title . $after;
}

Затем в /wp-content/plugins/woocommerce/templates/content-product.php поменяйте код, который выводит название поста — <?php the_title(); ?> — на такой:

<?php trim_title_chars(30, '...'); ?>
Здесь цифра 30 — это количество символов, до которых нужно обрезать заголовок, а ... — то, что будет стоять после обрезанного текста.
 

gluka

Новичок
#6
Подскажите, если отсутствует название поста — <?php the_title(); ?> , но есть <?php post_class(); ? >
С этим не работает! Облазил по данной теме все возможные места!
тема Megashop!
 
#7
Здравствуйте.
Получается но не совсем.
<?php the_title(); ?> - находиться в карточке товара, а не в content-product.
Если добавить <?php trim_title_chars(30, '...'); ?> в content-product, то вылезает еще одно название товара т.е. их получается два ..

За вывод названия отвечает в content-product вроде это

/**
* woocommerce_shop_loop_item_title hook.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );


Не подскажете, что заменить нужно?
 
#8
text-overflow: ellipsis;
Нашел решение через редактор стилей
.product_item .product_details h5{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Правда он режет до 1 строки. Как обрезать, чтобы отображалась 2 строки?
У Вас было почти правильно, замените nowrap на normal:
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;

А кол-во строк можно регулировать высотой карточки, например так:
.site-main ul.products li.product {
width: 22%;
float: left;
margin-right: 2.9%;
border: #f1f1f1 solid 0.5px;
border-radius: 3px;
height: 300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
}
 
Сверху Снизу