Раскрывающийся текст при клике – JS + HTML

readmore - Раскрывающийся текст при клике opencart

Если вы занимаетесь продвижением интернет магазина SEO, то первое, что делают после запуска сайта, это оптимизация категорий и карточке товара под поисковые запросы, а как это сделать? Конечно же все размещают текста! Одни магазины размещают его:

Текста в категориях:

  • Сверху перед товаром – считается, что чем выше текст к шапке, тем более релевантная будет страница и тем выше шанс попасть по запросу в ТОП
  • Снизу страницы под товаром – что бы не смущать посетителей которые хотят купить пылесос текстом о пылесосах, магазины убирают текст в самый низ своей витрины, что бы посетители не убегали с сайта.

В этой статье не будет идти речь о продвижении сайтов или интернет магазинов, в ней я лишь покажу как можно добавить раскрывающийся текст который будет отображаться при клике на кнопку или ссылку

readmore - Раскрывающийся текст при клике

где это можно использовать?

Допустим если вы из клана СЕОшников которые любят ставить текст сверху товарной витрины, его можно скрыть и визуально мы не будем портить вид страницы с категорией и текст будет сверху – тоесть убиваем двух зайцев сразу!

Либо можно скрывать такой текст в карточке товара если описание товара очень большое или еще  в каких случаях, это уже зависит от вашей фантазии!

раскрывающийся текст

Как свернуть развернуть текст на сайте – ReadMore.js?

В моем примере я буду показывать на примере сайта OpenCart 3, но это также можно использовать и на таких CMS как (wordpress, Joomla, Drupal или самописных движках)

Эффект – сворачиваемый текст на сайте

Мой пример будет посвящен конкретно категориям в которых я хочу разместить текст в самом верху и сворачивать и разворачивать (проведем СЕО эксперимент)

  1. Открываем шаблон в котором у нас находится файл отвечающий за генерацию страницы категории
    ../public_html/catalog/view/theme/МОЙ ШАБЛОН/template/product
  2. Открываем файл category.twig
  3. За вывод описания категории у нас отвечает код
       {% if description %}
            <div class="category_description">{{ description }}</div>
            {% endif %}
  4. Спускаемся в самый них страницы и прописываем скрипт
    <script type="text/javascript"><!--
    $('.category_description').readmore({
    	speed: 75,
    	collapsedHeight: 150,
    	moreLink: '<a href="#"><span style="font-size: 14px; background-color:#ED9A22;font-weight: 700;padding: 5px;color: white;">Подробнее</span></a>',
    	lessLink: '<a href="#"><span style="font-size: 14px; background-color:#ED9A22;font-weight: 700;padding: 5px;color: white;">Закрыть</span></a>'
    });
    //--></script>

    Важно в этом скрипте показать, что ему нужно обрабатывать. В нашем примере это category_description и мы ему указываем ,что высота текста будет 150px (collapsedHeight)

  5. Теперь переходим в директорию где у нас шаблон head
    ../public_html/catalog/view/theme/МОЙ ШАБЛОН/template/common
  6. Открываем файл header.twig и между тегами <head></head> добавляем скрипт readmore
    <script src="catalog/view/javascript/readmore.min.js" ></script>
  7. Ну и самое последние закидываем сайт скрипт readmore в папку catalog/view/javascript/

Все!  Теперь у вас на сайте будет текст любого размера который можно скрыть.

Надеюсь я сделал понятную инструкцию по которой вы реализовать такой эффект как –  раскрывается текст при нажатии кнопки.

admin
Оцените автора
NIBBL
Добавить комментарий