Как реализовать скрытие части текста визуально в 1.6

lightman5

Продвинутый (IV)
Сообщения
281
Симпатии
17
Баллы
1 299
Доброго времени суток!
Как можно реализовать скрытие части текста (когда он большой) в карточке товаров (Описание) и в категориях (Описание категории)

Вот пример стороннего сайта:


1626721667359.png
 
Доброго времени суток!
Как можно реализовать скрытие части текста (когда он большой) в карточке товаров (Описание) и в категориях (Описание категории)

Вот пример стороннего сайта:


Посмотреть вложение 2677
Подобных решений в сети полно)))
 
Подобных решений в сети полно)))
Решений действительно много и как я понял записи вносятся в 3-и места: html, css, javascript
Но я честно говоря не профи - и не сильно разбираюсь чтобы понять куда это все нужно вставить и тем более какой из способов выбрать?

Мне нужно в карточке товара таким образом скрыть часть текста (допустим 150 символов выводить - остальное скрывать под кнопку развернуть или показать все)
вот здесь

скрин:

И в категориях в самом низу:

скрин:

И самое главное (забыл упомянуть):
Нужно чтобы весь текст полностью яндекс индексировал - а то смысл отпадает в том чтобы он там был. Просто хочется сделать чтобы визуально меньше была нагрузка - а то перебор от информации
 
Для категории
В шаблоне вывода описания категории, вставьте после вывода описания <a class="morebtn">Показать текст</a>
Добавьте CSS
CSS:
.bo_des {
    height: 200px;
    overflow: hidden;
}
.expand {
    height: auto;
    overflow: visible;
}
.morebtn {
    cursor: pointer;
}
Добавьте JS
JavaScript:
$(document).ready(function() {
  $(".morebtn").click(function() {
    $(".bo_des").toggleClass("expand");
  });
});
 
Для категории
В шаблоне вывода описания категории, вставьте после вывода описания <a class="morebtn">Показать текст</a>
<a class="morebtn">Показать текст</a> можно обернуть в условия при которых появляется Показать текст
Например если текст описания превышает 250 знаков
Код:
{if Tools::strlen($category->description) > 250}<a class="morebtn">Показать текст</a>{/if}
 
Для категории
В шаблоне вывода описания категории, вставьте после вывода описания <a class="morebtn">Показать текст</a>
Добавьте CSS
CSS:
.bo_des {
    height: 200px;
    overflow: hidden;
}
.expand {
    height: auto;
    overflow: visible;
}
.morebtn {
    cursor: pointer;
}
Добавьте JS
JavaScript:
$(document).ready(function() {
  $(".morebtn").click(function() {
    $(".bo_des").toggleClass("expand");
  });
});
Все это прекрастно подходит и для карточки товара, только в product.tpl нужно добавить класс bo_des в <div class="rte">{$product->description}</div>
 
я пользовался Readmore.js
Код:
https://github.com/jedfoster/Readmore.js

работает очень плавно и на всех устройствах
Код:
https://codepen.io/mobomo/pen/VpmPEw

Из удобств, можно поменять название кнопочки после нажатия те изначально у тебя написано: "читать далее", при клике разворачивается и надпись меняется на: "свернуть".
 
я пользовался Readmore.js
Код:
https://github.com/jedfoster/Readmore.js

работает очень плавно и на всех устройствах
Код:
https://codepen.io/mobomo/pen/VpmPEw

Из удобств, можно поменять название кнопочки после нажатия те изначально у тебя написано: "читать далее", при клике разворачивается и надпись меняется на: "свернуть".
Неплохая штука, но судя по "детским" вопросам топикстартера, нечто запредельное :this:
 
Суммируя сказаное Anvarius и Danunah, слегка поправив скрипт и прочее
получаем на выходе следующее:
Стили оставляем без изменений, почти
Добавляем в 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 -->
Тут, как писал Danunah, добавлен класс bo_des и условия появления строки Показать текст
+ добавлена строка Свернуть текст

Скрипт

Предложеный 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}

Категории
category.gif

Карточка товара

product.gif
 
Последнее редактирование:
Назад
Верх