Розробники InternetDevels, які працюють над проектом всесвітньої мережі магазинів JYSK, продовжують дарувати Drupal-спільноті нові модулі. У минулому блозі ви мали змогу ознайомитись із модулем Gridstack field. Цього разу на черзі — модуль Field image tooltips, що також готовий для Drupal 7 та Drupal 8. Про нього, уже за гарною традицією, розповість сам автор.
Деякий час тому команда розробників нашої компанії, яка є частиною великої команди проекту JYSK, отримала оригінальне і дуже цікаве завдання. Проект, над яким працює команда розробників, — це великий інтернет-магазин для багатьох країн, що включає також розділи новин, статей і тому подібні сторінки. Тому замовники забажали, щоб ми створити можливість додавати на сторінку велику картинку з декількома товарами, які продаються на сайті, і позначати на цій картинці точки, при натисненні на які покупці мали б змогу переглянути усю інформацію про певний товар або додати цей товар собі в кошик.
У пошуках рішення для цієї задачі розробники переглянули список готових модулів Drupal та jQuery-плагінів. Не знайшовши нічого, що могло б знадобитися в побудові функціоналу для даної фічі, розробники розпочали побудову власного рішення. Так народився Drupal-модуль Field image tooltips.
Field image tooltips — це готова збірка полів на основі Drupal-модуля Paragraphs, яка містить у собі поле для завантаження картинки, що буде показуватись користувачам з розміщеними tooltip іконками; поле для завантаження самої іконки; а також Entity reference автокомпліт поле, через яке можна прив’язати певний контент до точки на головній картинці.
Отож, якщо Вам потрібно буде зробити щось схоже, виконайте наступні дії:
- Завантажте і встановіть модуль Field image tooltips і усі необхідні модулі, як це Ви зазвичай робите.
- Відкрийте сторінку налаштування полів потрібного Вам типу контенту і додайте до нього поле з типом Paragraphs.
- На сторінці налаштування цього поля у частині “Дозволені Paragraphs бандли” оберіть “Image with tooltips”.
- Збережіть налаштування поля та перейдіть на сторінку створення нової ноди.
- Задайте назву для нового матеріалу.
- Натисніть на кнопку “Додати Image with tooltips”.
- Завантажте зображення іконки, яке буде використовуватись в якості tooltip на основній картинці.
- Завантажте основну картинку.
- У полі “Tooltips content” оберіть ноду, яку Ви хочете показати, коли користувач натисне на tooltip.
- За допомогою мишки змініть положення tooltip на основній картинці.
- При бажанні додайте інші tooltip.
- Збережіть контент.
Результатом Ваших маніпуляцій буде сторінка на зразок цієї:
Сподіваємось, Drupal-модуль Field image tooltips буде корисним для вас!