Підказки на своєму сайті в 2 кліка
Ось зробили ви крутий чудовий сайт. Картка товару красива та інформативна, інтерфейс приємний та зручний.
Але... багато термінів. Може, хтось не знає що таке “RS 232” або “волатильність”, “плашки ⅜ дюйма” чи “ботулотоксин”? Чи є серед ваших клієнтів такі?
Що робити? Пояснювати щоразу, коли зустрічається складний термін? Це означає вбити дизайн і зробити всі тексти довшими в 2 рази. Ігнорувати проблему? Значить — втратити кілька відсотків (або десятків відсотків) відвідувачів, які залишаться незадоволеними заморочками.
Є витончене рішення — підказки.
Як це роблять великі хлопчики
Ось приклад із сайту Ситилінка:
Таке рішення заощаджує екранне місце, дає можливість дізнатися зміст терміну або інтерфейсного елемента і не відволікає досвідчених користувачів.
Але є труднощі. Встановлення, редагування та заміна таких підказок можливе лише розробником. Хто це конкретно: верстальник, фронтендник, програміст — не має значення. Важливо, що це довго, дорого і не дуже приємно — бігати за такою дурницею.
Як стати великим хлопчиком?
Ми знайшли рішення та реалізували його. Дивіться: є маркетплейс-модуль "підказки" для сайтів на 1С-Бітрікс .
Що він робить? Він дозволяє створювати підказки для будь-якого елемента сторінки практично у два кліки.
Як працює? Дуже просто:
Приклад з іншим оформленням:
Технічний бік питання
Ідея модуля проста (вивести текст X поряд із фразою Y на сторінці Z, все зберігається в одній таблиці БД), але в реалізації є кілька важливих нюансів. Давайте перерахуємо їх і кожен розглянемо окремо
Коли вибирати підказки зБД?
Як додавати підказки на сторінку?
Кастомізація зовнішнього вигляду та поведінки підказок
Насправді, у всіх перерахованих проблем у 1С-Бітрікс: Управління сайтом одне рішення - компонент. Він і дані з БД дістане, і закешує що потрібно, і вигляд дозволить кастомізувати. А де розмістити виклик компонента – нехай вирішує розробник/контент-менеджер.
Наш компонент називається "Активатор спливаючих підказок". Якщо підказки потрібні на всіх сторінках сайту, то логічно розміщувати його наприкінці body (тобто у файлі footer.php шаблону). При шаленій оптимізації “Активатор. ” можна встановлювати лише на конкретних сторінках, на яких точно є підказки. Виходить, на запитання Коли вибирати підказки із БД? відповідь звучить так: під час виклику компонента “Активатор підказок”.
Отже, ми зробили сакральний запит та знаємо, що на поточній сторінці N підказок. Як їх тепер "застосувати", як додавати підказки на сторінку? Рішення дотримувалися такого: при генерації сторінки сервер знайде всі ключові фрази, для яких створені підказки, "помітить" їх якимось чином (поверне в особливий html, який не повинен зіпсувати верстку сайту). Далі силами JavaScript-сценаріїв додамо до "маркерів" текст підказок. При цьому всі дані про підказки виводилися б у форматі JSON на тій самій сторінці.
Як було зазначено, сервер обертає всі фрази в html. Якби фраза знайшлася б у JSON'і, він був би зіпсований. Отже, потрібно зі сторінки JSON кудись усунути. Прибрали на сторінку /bitrix/tools/intervolga.tips/json.php, зробили сценарієм, що підключається, а не вбудованим.
Ну а для встановлення "маркерів" використовували обробник великої та жахливої події onEndBufferContent. У ньому доступний весь htmlсторінки, яка готова “піти” у браузер. Саме цієї миті модуль шукає на сторінці шуканий текст і обертає його в потрібний html — у наших шаблонах це .
Так як у нас компонент проблем при роботі з кешем не виникло. Додали тегований кеш для підказок, підтримуємо стандартні параметри кешування компонентів Бітрікса.
І найцікавіше – кастомізація. Шаблон компонента виводить у прихованому html шаблон для підказок. Чому так, а не в JavaScript-змінну? Тому що люди звикли, що шаблон компонента має виводити HTML.
У component_epilog.php ще 2 необхідні рухи тіла. Перше – запуск javascript-сценарію. Друге - реєструється функція, яку буде використовувати onEndBufferContent для обробки сторінки.
Наприклад, у наших шаблонах є два способи відображення тексту, для якого є підказка:
значок з питання.
Залежно від налаштування компонента, шуканий текст або обертається в або після нього додається.
Шаблон "пунктирне підкреслення"
Шаблон "іконка з питанням"
Для створення власного шаблону спливаючої підказки потрібно:
створити шаблон компонента "Активатор спливаючих підказок";
визначити свій html для підказок у template.php;
визначити свій "маркер" для фраз на сторінці component_epilog.php.
Шлях складніший, ніж нам би хотілося, але дієвий — шаблони, які ми надаємо з модулем підказок, що не спливають, не “вшиті” в модуль і їх можна копіювати у свій простір імен і змінювати на свій смак.
Завдання додавання "підказок" в довільний дизайн зустрічається часто. Ми багато разів її вирішували для різних клієнтів і достеменно знаємо, щопрацює, а що ні.
Функціональність модуля виглядає дуже простою, проте зверніть увагу: поверхневий опис технічної сторони зайняв майже дві сторінки. Ми зробили універсальний, якісний, перевірений практикою продукт.
Впевнені, він вирішить ваші завдання.
Всього за 3 тисячі рублів ви отримаєте вирішення проблеми створення підказок і збереження витонченого, модного і в той же час зрозумілого інтерфейсу вашого сайту.