Вот сделали вы крутой отличный сайт.
Карточка товара красива и информативна, интерфейс приятен и удобен.

Но… много терминов. Может, кто-то не знает что такое “RS 232” или “волатильность”, “плашки ⅜  дюйма” или “ботулотоксин”? Есть же среди ваших клиентов такие?

Что делать? Объяснять каждый раз, когда встречается сложный термин? Это значит убить дизайн и сделать все тексты длиннее в 2 раза. Игнорировать проблему? Значит — потерять несколько процентов (или десятков процентов) посетителей, которые останутся недовольны “заморочками”.

Есть изящное решение — всплывающие подсказки.

Как это делают большие мальчики

Вот пример с сайта Ситилинка:


Такое решение экономит экранное место, дает возможность узнать смысл термина или интерфейсного элемента и не отвлекает опытных пользователей.

Но есть затруднение. Установка, редактирование и замена таких подсказок возможна только разработчиком. Кто это конкретно: верстальщик, фронтендщик, программист — неважно. Важно что это долго, дорого и не очень-то приятно — бегать за такой ерундой.

Как стать большим мальчиком?

Мы нашли решение и реализовали его. Смотрите: есть маркетплейс-модуль “всплывающие подсказки” для сайтов на 1С-Битрикс.

Что он делает? Он позволяет создавать подсказки для любого элемента страницы практически в два клика.

Как работает? Очень просто:


Результат

Пример с другим оформлением:

Техническая сторона вопроса

Идея модуля простая (вывести текст X рядом с фразой Y на странице Z, все хранится в одной таблице БД), но в реализации есть пара важных нюансов. Давайте перечислим их и каждый рассмотрим отдельно

  1. Когда выбирать подсказки из БД?
  2. Как добавлять подсказки на страницу?
  3. Работа с кешем
  4. Кастомизация внешнего вида и поведения подсказок

На самом деле, у всех перечисленных проблем в 1С-Битрикс: Управление сайтом одно решение — компонент. Он и данные из БД достанет, и закеширует что нужно, и внешний вид позволит кастомизировать. А где разместить вызов компонента — пусть решает разработчик/контент-менеджер.

Наш компонент называется “Активатор всплывающих подсказок”. Если подсказки нужны на всех страницах сайта, то логично размещать его в самом конце body (то есть в файле footer.php шаблона). При оголтелой оптимизации “Активатор ...” можно устанавливать только на конкретных страницах, на которых точно есть подсказки. Получается, на вопрос Когда выбирать подсказки из БД? ответ звучит так: при вызове компонента “Активатор всплывающих подсказок”.

Итак, мы сделали сакральный запрос и знаем, что на текущей странице N подсказок. Как их теперь “применить”, как добавлять подсказки на страницу? Решения придерживались такого: при генерации страницы сервер найдет все ключевые фразы, для которых созданы подсказки, “пометит” их некоторым образом (обернет в особый html, который не должен испортить верстку сайта). Далее силами javascript-сценариев добавим к “маркерам” текст подсказок. При этом все данные о подсказках выводились бы в формате JSON на той же самой странице.

И тут кто-то задал неприятный вопрос: а что будет, если кто-то сделает подсказкой к фразе “наш телефон” текст “наш телефон”? Появится всплывающая подсказка внутри всплывающей подсказки?


Как уже было сказано, сервер оборачивает все фразы в html. Если фраза нашлась бы в JSON’е, он был бы испорчен. Значит, нужно со страницы JSON куда-то убрать. Убрали на страницу /bitrix/tools/intervolga.tips/json.php, сделали подключаемым сценарием, а не встроенным.

Ну а для установки “маркеров” использовали обработчик великого и ужасного события onEndBufferContent. В нем доступен весь html страницы, который готов “уйти” в браузер. Именно в этот миг модуль ищет на странице искомый текст и оборачивает его в нужный html — в наших шаблонах это <span>.

Так как у нас компонент, проблем при работе с кешем не возникло. Добавили тегированный кеш для подсказок, поддерживаем стандартные настройки кеширования компонентов Битрикса.

И самое интересное — кастомизация. Шаблон компонента выводит в скрытом html шаблон для подсказок. Почему так, а не в javascript-переменную? Потому что люди привыкли, что шаблон компонента должен выводить html.


В component_epilog.php еще 2 необходимых телодвижения. Первое — запуск javascript-сценария. Второе — регистрируется функция, которую будет использовать onEndBufferContent для обработки страницы.


Например, в наших шаблонах есть два способа отображения текста, для которого имеется всплывающая подсказка:

  1. пунктирное подчеркивание,
  2. иконка с вопросом.

В зависимости от настройки компонента, искомый текст либо оборачивается в <span>, либо после него добавляется <i>.


Шаблон “пунктирное подчеркивание”

Шаблон иконка с вопросом

Шаблон “иконка с вопросом”

Итого, для создания собственного шаблона всплывающей подсказки, нужно:

  1. конечно же, скачать и установить наш модуль;
  2. создать шаблон компонента “Активатор всплывающих подсказок”;
  3. определить свой html для подсказок в template.php;
  4. определить свой “маркер” для фраз на странице в component_epilog.php.

Путь более сложный, чем нам бы хотелось, но действенный — шаблоны, которые мы предоставляем с модулем всплывающих подсказок не “вшиты” в модуль и их можно копировать в свое пространство имен и изменять на свой вкус.

Вывод

Задача добавления “всплывающих подсказок” в произвольный дизайн встречается часто. Мы много раз ее решали для разных клиентов и точно знаем, что работает, а что нет.

Функциональность модуля выглядит совсем простой, однако обратите внимание: поверхностное описание технической стороны заняло почти 2 страницы. Мы сделали универсальный, качественный, практикой проверенный продукт.

Уверены, он решит ваши задачи.

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

Оцените статью
07.12.2015
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

Статьи по теме

18.05.2022
Обмен контрагентами между 1С и сайтом с сохранением структуры Партнеров, Контрагентов, Юридических лиц и Контактов O чем речь? Мы сделали B2B-Платформу для предприятий с партнерами-оптовиками и задачами автоматизации торговли. Некоторые Пользовательские сц...
13.05.2022
Кейс: Личный кабинет партнера крупнейшего поставщика медицинских изделий В 2019 году к нам обратилась крупная компания, занимающаяся поставкой медицинских изделий. Причина обращения была типична для бизнеса, работающего с крупно...
06.05.2022
Топ-7 платформ автоматизации оптовой торговли - Выбор лучшейЭта статья будет полезна владельцам бизнеса, коммерческим директорам, а также руководителям отделов по оптовой торговле оборудованием, материалам и продукцией ...
05.05.2022
Личный кабинет кандидата для автоматизации анкетирования. Ускорение в 3 раза и снижение нагрузки на 40%Статья описывает создание личного кабинета кандидата для HR-департамента компании Евраз. Мы рассказываем как расширяем функционал Хантфлоу с помощью технологий ...
19.04.2022
Как повысить эффективность работы менеджеров - 4 шага по обгону конкурентов Прибыль производителей оборудования и инструментов, а также собственников легкой промышленности напрямую связана с количеством реализованного товара. ...
04.03.2022
Платформа оптовых продаж: ускорение работы менеджеров, повышение чека, удобство b2b-клиентов Основные функции Платформы: Регистрация оптового партнера. Партнер заполняет форму, информация приходит на почту Менеджеру Авторизация и Восстановление...
Консультация по организации продаж
Давайте поговорим о ваших задачах
Оставьте заявку и мы свяжемся с вами как можно скорее.
Хочешь получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишись на рассылку — спамить не будем