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

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

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

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

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

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

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

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

подписаться на канал айтишника

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

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

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

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

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

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

  1. Открываем шаблон в котором у нас находится файл отвечающий за генерацию страницы категории
  2. Открываем файл category.twig
  3. За вывод описания категории у нас отвечает код
  4. Спускаемся в самый них страницы и прописываем скрипт
    Важно в этом скрипте показать, что ему нужно обрабатывать. В нашем примере это category_description и мы ему указываем ,что высота текста будет 150px (collapsedHeight)
  5. Теперь переходим в директорию где у нас шаблон head
  6. Открываем файл header.twig и между тегами <head></head> добавляем скрипт readmore
  7. Ну и самое последние закидываем сайт скрипт readmore в папку catalog/view/javascript/

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

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

Рейтинг
( 2 оценки, среднее 4.5 из 5 )
nibbl/ автор статьи
Я отец двух сыновей, ITишник, предприниматель и просто человек который любит делиться полезной информацией с другими людьми на такие темы как: Windows, Unix, Linux, Web, SEO и многое другое!
Понравилась статья? Поделиться с друзьями:
Блог ITишника и просто человека
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: