Как сократить название товара

Luva · 16 листопада 2018

Приветствую всех.
Помогите решить проблему - слишком большое название товара вылазит на соседние карточки.
Версия магазина 2.0.3.1

zlatoff · 16 листопада 2018

Странная задача, но такое можно решить посредством CSS. Доводилось как то сокращать длину текста в «хлебных крошках» для мобильной версии, не могу найти ссылку на мануал...

Luva · 16 листопада 2018

33 минуты назад, zlatoff сказал:

Странная задача, но такое можно решить посредством CSS. Доводилось как то сокращать длину текста в «хлебных крошках» для мобильной версии, не могу найти ссылку на мануал...

Да задача не странная - просто у меня один товар подходит к нескольким моделям (запчасти), соответственно этот товар направляю на 10 категорий, нельзя же один артикул разместить с уникальным (коротким названием) в каждой.

zlatoff · 16 листопада 2018

Нашел. Милая вещь все таки «Quiver». Присвойте блоку с наименованием класс, в котором используйте следующие атрибуты:

display: inline-block; max-width: 8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;

В результате CSS будет срезать лишнее в оверфлоу, а в хвост наименования добавлять многоточие. К примеру «оченьдлинноенаименование» отразится на экране как «оченьдлинноен...» при этом семантика для ПС сохранится.

Длину подберите экспериментально, меняя показатель в max-width (в примере 8em).

Tom · 16 листопада 2018

Слишком длинное название и 100500 букв без пробелов, разные понятия. Впишите реальное название, дайте ссылку , больше будет толку , чем от гаданий на картинке.

Luva · 16 листопада 2018

31 минуту назад, Tom сказал:

Слишком длинное название и 100500 букв без пробелов, разные понятия. Впишите реальное название, дайте ссылку , больше будет толку , чем от гаданий на картинке.

Вот одно из наименованний товара -
"Кольцо стопорное шайбы тарелки для Stihl MS-170/171/180/181/200/210/211/230/250/260/290/310/341/360/361/380/381/390/440/640/650/660"
Числа через дробь это разные модели, разные подкатегории соответственно где вывести этот товар необходимо.
Ссылку я не приложу - так как я не не нашел решения, сделал бэкап. Но отображается оно точно так, как и на приложенном скрине.

zlatoff · 16 листопада 2018

Я же дал вам рабочее решение выше. Вот протестируйте вот этот код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style>
.name {display: inline-block; max-width: 8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
</style>
<body>
	<p class="name">Кольцо стопорное шайбы тарелки для Stihl MS-170/171/180/181/200/210/211/230/250/260/290/310/341/360/361/380/381/390/440/640/650/660</p>
</body>
</html>

auditor · 16 листопада 2018

Зайди в (если это название тебя коробит в категории) настройки шаблона в админке

найди строчку кода (если это версия 2.3.0.2):

Змінено 16 листопада 2018 користувачем auditor

Luva · 16 листопада 2018

8 часов назад, zlatoff сказал:

Я же дал вам рабочее решение выше. Вот протестируйте вот этот код:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style>
.name {display: inline-block; max-width: 8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
</style>
<body>
	<p class="name">Кольцо стопорное шайбы тарелки для Stihl MS-170/171/180/181/200/210/211/230/250/260/290/310/341/360/361/380/381/390/440/640/650/660</p>
</body>
</html>

Да, спасибо большое - ваши ответы решили мою проблему. (Закинул это в нижнюю строчку файла stylesheet) осталось только длину подрегулировать потому что чересчур обрезает.

.name {display: inline-block; max-width: 8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}

Luva · 16 листопада 2018

11 часов назад, Tom сказал:

Слишком длинное название и 100500 букв без пробелов, разные понятия. Впишите реальное название, дайте ссылку , больше будет толку , чем от гаданий на картинке.

В общем спасибо и Вам, я задумался над вашими словами "название и 100500 букв без ПРОБЕЛОВ - просто в названии заменил слеш на запятую с пробелом, стало отображать так как нужно!! Спасибо.

Вхід

Как сократить название товара

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information