Как реализовать скрытие части текста визуально в 1.6
- Автор темы lightman5
- Дата начала
Подобных решений в сети полно)))Доброго времени суток!
Как можно реализовать скрытие части текста (когда он большой) в карточке товаров (Описание) и в категориях (Описание категории)
Вот пример стороннего сайта:
Посмотреть вложение 2677
Скрыть/показать часть текста, используя только Javascript (jQuery) и CSS - CodeRoad
Разверните div через CSS overflow Один из способов сделать это - написать CSS, где вы установите height на вашем div и установите overflow в hidden . После click на div , overflow может быть...
coderoad.ru
Решений действительно много и как я понял записи вносятся в 3-и места: html, css, javascript
Но я честно говоря не профи - и не сильно разбираюсь чтобы понять куда это все нужно вставить и тем более какой из способов выбрать?
Мне нужно в карточке товара таким образом скрыть часть текста (допустим 150 символов выводить - остальное скрывать под кнопку развернуть или показать все)
вот здесь
7020 (VG10-C1E14cold6W-F) Voltega Лампа светодиодная филаментная E14 6W 4000К, Свеча
7020 (VG10-C1E14cold6W-F) Лампа светодиодная филаментная E14 6W 4000К, Свеча, мощностью 6 Ватт с цоколем E14 и цветовой температурой 4000 Кельвинов Voltega с доставкой по Москве и России
www.elitebohemia.ru
скрин:
И в категориях в самом низу:
Хрустальные люстры ★ Чехия. Богемия ★ Купить в Москве - ELITEBOHEMIA.RU
Люстры из Чешского хрусталя ★ недорого по цене от 3810₽ с быстрой ✈доставкой 1-2 дня по Москве. ★ Выбор в каталоге из 6167 шт.! ★ Качественная консультация! Интернет магазин «Элит Богемия». ✔ Низкие и выгодные цены. Доставляем по всей России★
www.elitebohemia.ru
скрин:
И самое главное (забыл упомянуть):
Нужно чтобы весь текст полностью яндекс индексировал - а то смысл отпадает в том чтобы он там был. Просто хочется сделать чтобы визуально меньше была нагрузка - а то перебор от информации
Для категории
В шаблоне вывода описания категории, вставьте после вывода описания <a class="morebtn">Показать текст</a>
Добавьте CSS
Добавьте JS
В шаблоне вывода описания категории, вставьте после вывода описания <a class="morebtn">Показать текст</a>
Добавьте CSS
CSS:
.bo_des {
height: 200px;
overflow: hidden;
}
.expand {
height: auto;
overflow: visible;
}
.morebtn {
cursor: pointer;
}
JavaScript:
$(document).ready(function() {
$(".morebtn").click(function() {
$(".bo_des").toggleClass("expand");
});
});
<a class="morebtn">Показать текст</a> можно обернуть в условия при которых появляется Показать текст
Например если текст описания превышает 250 знаков
Код:
{if Tools::strlen($category->description) > 250}<a class="morebtn">Показать текст</a>{/if}
я пользовался Readmore.js
работает очень плавно и на всех устройствах
Из удобств, можно поменять название кнопочки после нажатия те изначально у тебя написано: "читать далее", при клике разворачивается и надпись меняется на: "свернуть".
Код:
https://github.com/jedfoster/Readmore.jsработает очень плавно и на всех устройствах
Код:
https://codepen.io/mobomo/pen/VpmPEwИз удобств, можно поменять название кнопочки после нажатия те изначально у тебя написано: "читать далее", при клике разворачивается и надпись меняется на: "свернуть".
Суммируя сказаное Anvarius и Danunah, слегка поправив скрипт и прочее
получаем на выходе следующее:
Стили оставляем без изменений, почти
Добавляем в global.css
Добавляем в product.tpl
Находим, в дефолтном шаблоне, примерно строки 489-492
И приводим к такому виду
Тут, как писал Danunah, добавлен класс bo_des и условия появления строки Показать текст
+ добавлена строка Свернуть текст
Скрипт
Предложеный Anvarius скрипт, доработан
После раскрытия всего текста, Показать текст меняется на Свернуть текст и обратно
Для category.tpl
Выводим описание категории после вывода списка товаров
в конце файла, строки 118-120, перед
{elseif $category->id}
добавить
Категории
Карточка товара
получаем на выходе следующее:
Стили оставляем без изменений, почти
Добавляем в global.css
Код:
.bo_des {
height: 100px;
overflow: hidden;
}
.expand {
height: auto;
overflow: visible;
}
.morebtn {
color:#069;
cursor: pointer;
margin-left: 12px;
}Добавляем в product.tpl
Находим, в дефолтном шаблоне, примерно строки 489-492
Код:
<!-- More info -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='More info'}</h3>
<!-- full description -->
<div class="rte">{$product->description}</div>
</section>
<!--end More info -->
Код:
<!-- More info -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='More info'}</h3>
<!-- full description -->
<div class="rte bo_des">{$product->description}</div>
{if Tools::strlen($product->description) > 550}
<a class="morebtn" href="#">
<span class="more-show" style="display: block;">{l s='Show all text'}</span>
<span class="more-hide" style="display: none;">{l s='Hide text'}</span>
</a>
{/if}
</section>
<!--end More info -->+ добавлена строка Свернуть текст
Скрипт
Предложеный Anvarius скрипт, доработан
После раскрытия всего текста, Показать текст меняется на Свернуть текст и обратно
Код:
$('.morebtn').click(function(e){
e.preventDefault();
$('.bo_des').toggleClass('expand');
if ($('.bo_des').hasClass('expand')) {
$('.more-show').css('display','none');
$('.more-hide').css('display','block');
} else {
$('.more-show').css('display','block');
$('.more-hide').css('display','none');
}
return false;
});Для category.tpl
Выводим описание категории после вывода списка товаров
в конце файла, строки 118-120, перед
{elseif $category->id}
добавить
Код:
<div class="bo_des">{$category->description}</div>
{if Tools::strlen($category->description) > 250}
<a class="morebtn" href="#">
<span class="more-show" style="display: block;">{l s='Show all text'}</span>
<span class="more-hide" style="display: none;">{l s='Hide text'}</span>
</a>
{/if}Категории
Карточка товара
Последнее редактирование: