Интерактивные изображения

Интерактивные изображения

8 000 руб.

Описание

Отображение объектов списка в виде полупрозрачной маски на изображении. Например, свобдные квартиры на плане дома.

Модуль Field mapimg позволяет добавить поле к любой сущности, в котором можно подгрузить карту и разметить её на подсвечиваемые блоки. Также, если добавлять поле к сущности каталога (список материалов), то из этого поля можно создать блок и отобразить так называемый "Селектор товарных категорий".mapimg_example

Инструкция

Настройка модуля:

В-первую очередь для работы данное поле необходимо добавить к сущности. При добавление, все настройки можно оставить по умолчанию. Выберите тип "Размечаемое изображение"

 

Добавление:

mapimg_field_creating 

 

После добавление переходим к наполнению поля: редактируем/добавляем новую сущность, для которой добавили поле. Изначально настройки значения поля выглядят так.

 

Поле field mapimg:

mapimg_field_source_settings

 

Разметка изображения:

 

Добавляем размечаемое изображение (нажимаем на иконку папки). После этого появится "мультиполе".

 

"Мультиполе"

mapimg_field_default_settings

 

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

 

Добавление разметки:

mapimg_marking

 

После того, как мы указали точки для нашего полигона, данное окно можно закрыть, точки будут автоматически сохранены в поле "Coordinates". Теперь можно заполнить дополнительные поля.

 

Заголовок - поле значение которого отображается при наведении на полигон размеченного изображения.

 

Пример работы заголовка:

mapimg_title_example

 

 

Mark - двухбуквенная метка, отображающаясь на полигоне.

Адрес ссылки - ссылка по который пользователь будет переходить при клике по полигону.

Цвет - цвет полигона.

 

Добавление селектора товарных категорий:

 

Если поле было добавлено к сущности каталога (списка метариалов), то мы имеем функционал, с помощью которого мы можем создать блок из поля, а также добавить "Селектор товарных категорий". 

 

Селектор товарных категорий это div-контейнер, в котором будут находится термины словаря из поля, указанного в поле "Поле категорий у ноды". Что это значит? Это значит, что в каталоге в выборке содержимого мы указываем тип содержимого. 

 

Выборка содержимого:

mapimg_content_selection

 

А из этого типа содержимого берутся поля (поля кладутся в поле "Поле категорий у ноды"), среди которых мы выбираем, откуда брать категории.

 

Поле категорий у ноды:

mapimg_categories_field

 

В итоге получается такой функционал: пользователь кликает по категории, "Мега-мебель" например, и под категорией "выезжают" все магазины, относящиеся к ней, а также магазины будут подсвечены на размеченном изображении.

 

Пример работы Селектора товарных категорий:

mapimg_category_selector_example

 

После этого, размеченным изображением можно манипулировать в виде блока (если стоит галочка "Создать блок"). 

 

 

   Mapimg field
   Mapimg field areas editor