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

Но… много терминов. Может, кто-то не знает что такое “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
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

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

07.03.2023
Дорожная карта внедрения платформы автоматизации оптовых продаж Про построение эффективных отделов продаж написано много крутых статей. Одни эксперты готовы сделать это за 10 шагов, другие предлагают многоэтапную эволюц...
16.02.2023
Как начать B2B-продажи онлайн - особенности и методы оптовой торговли После пандемии рынок e-commerce начал стремительно расти. Мы говорим не только о B2C, но и о B2B-сегменте. Многие крупные компании уже разглядели потенциал...
10.01.2023
Как битриксоиды в React уходили Приятно познакомиться, мы битриксоиды. Да-да, те самые которые: вообще не модные, пишут НЕ на Laravel и Symfony, ...
10.01.2023
Товарная дистрибуция 30 лет спустя. Как программисты изменили продажи крупного бизнеса «Я думал, что буду строить банк, а на самом деле построил ИТ-компанию» Олег Тиньков, безработный Есть такая штука — товарная дистри...
10.01.2023
Как мы решили выпускать собственный продукт через CustDev и у нас получилось Собственный продукт как фиксация компетенции&nbsp; В развитии крупных компаний-аутсорсеров наступает момент, когда они уже обросли опытом и компетенциями ...
19.12.2022
Учимся настраивать свою почту, не наступая на чужие грабли: Postfix + msmtp + сайт Привет, меня зовут Никита, я backend-разработчик в компании ИНТЕРВОЛГА. Работаю в компании уже 3 года, и за этот срок достаточно часто мне приходилось вози...

Мы работаем по одному из двух форматов:

  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).

ИНТЕРВОЛГА предоставляет:

  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.

Для доработок и развития мы предлагаем формат 100 часов в месяц. Что можно сделать за это время:

  • новые нетиповые страницы или раздел;
  • 2 отчета с индивидуальными настройками;
  • 3-5 веб-сервисов интеграции;
  • замудренный калькулятор и т.п.

Поддержка «чтобы все работало как часы» стоит 45 тысяч рублей в месяц и описана тут.

Хочешь получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишись на рассылку — спамить не будем