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

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

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

08.09.2023
Перезапуск B2B-платформы Levenhuk вместе со студией Артемия Лебедева: контролируемое творчество и чек-лист из 60 пунктовСтатья о том, как бывает сложно идти вразрез со стереотипами и делать необычный B2B-дизайн. Все рецепты внутри. Основной ингредиент – чек-лист контроля дизайнер...
06.09.2023
Интеграция аптечной сети с «ВкусВилл»: доставляем комбинированный заказ менее, чем за 2 часаВ статье расскажем подробности о размещении ассортимента сети аптек в товарной матрице ВкусВилл для увеличения продаж и решения задачи доставки онлайн-заказов ...
05.09.2023
Как создать бизнес по доставке продуктов, имея под рукой 1С, Битрикс и логистическую системуРассказываем как можно организовать доставку продуктов из магазинов не занимаясь разработкой системы с нуля, а интегрируя различные типовые приложения, например...
26.07.2023
Автоматизация продаж дистрибьютора спецтехники из Китая: как обеспечить рост продаж в 7 раз? Рынок спецтехники РФ переживает сегодня сложный период из-за ухода многих зарубежных компаний. Остро встает вопрос импортозамещения и обеспечения уже купле...
09.06.2023
Новая функция B2B-платформы — вывод второй колонки цен в каталоге На связи Екатерина Богаченкова — аналитик, специалист по продвижению компании ИНТЕРВОЛГА и сегодня я расскажу о новой доработке нашей B2B-платформы, котора...
27.05.2023
Как увеличить продажи в интернет-аптеке: что мы сделали, чтобы клиент выкупал в 5 раз больше заказов Семантическое ядро разработано, страницы оптимизированы, сегменты собраны и на них запущена реклама с ретаргетингом и учетом ограничений закона о рекламе, ...
Мы работаем по одному из двух форматов:
  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).
ИНТЕРВОЛГА предоставляет:
  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.
Для доработок и развития мы предлагаем формат 100 часов в месяц. Что можно сделать за это время:
  • новые нетиповые страницы или раздел;
  • 2 отчета с индивидуальными настройками;
  • 3-5 веб-сервисов интеграции;
  • замудренный калькулятор и т.п.

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

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