Elegrant: Галерея с привязкой товаров

Что умеет решение

Модуль предназначен для создания интерактивных галерей в интерьерных проектах, мебельных шоурумах, fashion-подборках и коммерческих каталогах. Он позволяет отображать изображения с возможностью мгновенной покупки связанных товаров, исключая необходимость ручной верстки или глубокой доработки структуры каталога.

После установки вы получаете готовый инфоблок «Галерея» с предустановленными свойствами и компонент elegrant:gallery, размещаемый в директории /local/components/elegrant/gallery/. Реализована прямая привязка к инфоблоку товаров, а также упрощённая административная форма, объединяющая все необходимые поля на одной вкладке.

Галерея автоматически переключается между сеткой и слайдером в зависимости от количества элементов и настроек. Слайдер построен на библиотеке Swiper и поддерживает четыре режима отображения: классический, с видимым краем следующего слайда, центрированный и крупный. Доступны функции автопрокрутки, пагинации точками, а также настройка количества отображаемых слайдов для десктопных и мобильных устройств.

При клике на карточку открывается модальное окно с увеличенным изображением и списком связанных товаров с ценами и ссылками. Поддерживаются три варианта анимации открытия: отсутствие анимации, плавное появление и эффект масштабирования.

Функция горячих точек (hotspots) позволяет добавлять интерактивные маркеры на изображение через визуальный редактор в админке. Точки создаются кликом по изображению и перемещаются перетаскиванием, после чего привязываются к конкретным товарам из каталога.

Галерея с привязкой товаров отображает изображения с всплывающими подсказками, содержащими название и цену. Навигационные точки доступны в модальном окне и опционально на карточках слайдера. Предусмотрено шесть визуальных шаблонов: классический, тёмный, минимализм, тёплый, акцентный и красный. Цвета стрелок, модального окна и точек можно переопределять. Заголовок блока настраивается по тексту, размеру и начертанию; его можно выводить над блоком или в одну строку со стрелками. Стрелки навигации включаются или отключаются, их положение, размер и скругление регулируются. Реализовано опциональное увеличение изображения при наведении. Поддерживается ленивая загрузка изображений.

Настройки модуля объединены в логичные разделы: основные, оформление, слайдер, карточки и модальное окно. Параметры можно переопределять на уровне компонента для конкретной страницы. В подсказках настроек доступны превью шаблонов и типов слайдера.

Для контент-менеджера процесс работы включает загрузку изображения в элемент галереи и привязку одного или нескольких товаров каталога. При необходимости точки размещаются непосредственно на изображении. После публикации компонента на странице блок готов к использованию.

Технические особенности: решение работает на стандартном модуле iblock и совместимо с типовым каталогом товаров. Фронтенд реализован на нативном JavaScript без зависимости от BX.ajax или BX.ready.

Адаптивная вёрстка корректно отображает контент на десктопах, планшетах и мобильных устройствах. Параметры настройки хранятся в конфигурации модуля и компонента.

Модуль поддерживает сценарий «Купить интерьер»: на фотографиях комнат размещаются интерактивные точки, ведущие к товарам в модальном окне. Реализована возможность создания подборок и лукбуков для fashion-индустрии, а также витрин для мебели, освещения и декоративных элементов. Инструмент позволяет формировать лендинги с интерактивными подборками без привлечения кастомной разработки.

Для работы требуются платформа 1С-Битрикс: Управление сайтом и установленный модуль «Информационные блоки» (iblock).

General iT поможет установить модуль, настроить его и проверить работу на твоём сайте.