Для сайтов автозапчастей, производителей техники, мебели, приборов — для многих клиентов может быть востребован механизм отображения схемы с привязкой к товарам каталога. Именно эту задачу решает наш новый модуль.
Выпустили в продажу новый модуль - Каталог схем. Весьма интересное решение для сайтов на платформе 1С Битрикс. Далее в статье расскажем о основных принципах работы модуля, настройках.
Основными характеристиками модуля является возможность построения графической схемы с возможностью привязки к товарам каталога интернет-магазина.
Модуль будет хорошим инструментом для построения схем на вашем сайте, например, для объяснения применения товара или своего рода товарной витрины.
Основные настройки для модуля (после его утсановки) можно выполнить в разделе Администрирование->Настройки продукта->Настройки модулей->Каталог схем (Рис.1, Таб.1):
Рис.1. Настройки модуля “Каталог схем”
Таблица 1. Значение настроек модуля
Название настройки
Значение настройки
Цвет фона иконок
любое значение в формате #000000 (шестнадцатеричная)
Цвет границы иконок
любое значение в формате #000000 (шестнадцатеричная)
Тип иконки
прямоугольник
овал
После установки модуля “Каталог схем” на сайт в разделе Администрирование->Контент создается 2 инфоблока “Схемы” и “Маркеры”. В инфоблоке “Схемы” хранится список созданных схем, в инфоблоке “Маркеры” хранятся маркеры, созданные на схеме:
Рис. 2. Инфоблоки “Схемы” и “Маркеры”
Маркеры в этот блок добавляются автоматически при создании схемы, а из списка можно отредактировать нужный маркер:
Рис. 3. Переход к редактированию элемента в инфоблоке “Маркеры”
При переходе к редактированию маркера открывается такая форма:
Рис. 4. Форма редактирования элемента “Маркер”
В разделе Администрирование->Контент->Каталог схем->Схемы хранится список созданных схем:
Рис. 5. Переход к добавлению элемента в инфоблок “Схемы”
Рассмотрим подробнее создание схемы для сайта.
По клику на кнопку “Добавить элемент” открывается форма для добавления схемы (Рис. 6):
Рис. 6. Форма добавления элемента “Схема”
Для добавления маркеров на схему необходимо после заполнения формы создания схемы её сохранить и только после этого вновь перейти к редактированию схемы и кликнуть в форме ссылку “Редактировать маркеры” (Рис. 7):
Рис. 7. Переход к расстановке маркеров
По клику на ссылку “Редактировать маркеры” открывается в дополнительном окне изображение-фон для построения схемы, в этом окне можно, удерживая курсор мыши, определять область расположения маркера, после того, как отпустим курсор автоматически появляется окно для ввода/выбора данных для маркера, после заполнения окошка сохраняем данные, выбранный товар появляется в таблице под схемой. Внимание! При добавлении маркера в схему работает система автоматической подстановки ID товара в создаваемый маркер, если маркер с таким номером уже существует. ID товара подставляется непосредственно при вводе номера, т.е. если, например, есть маркер с номером 2, а необходимо создать маркер с номером 23, то после ввода символа “2”, система найдет маркер с таким номером на этой схеме и подставит соответствующий товар, когда мы добавим символ ‘3’ (т.е. получится 23), то такой маркер не будет найден и поле товара обнулится. В таком случае желательно всегда первым заполнять номер маркера.
Аналогично добавляем еще маркеры и сохраняем схему в этом дополнительном окне, в разделе админской части (Рис.8, 8а):
….
Рис. 8. Расстановка маркеров на схеме После доработок модуля появилась возможность сохранять маркеры без номера. Маркер без номера может быть в случае, если например, для сбора техники на схеме нужны какие-то детали, но отображать их просто негде (например винты и прочая мелочь). Добавилась возможность проставлять количество товара при создании/редактировании маркера.
Рис.8а Список маркеров на схеме
После создания схемы необходимо разместить компоненты модуля на нужной странице, для этого переходим к редактированию той страницы, на которой планируем размещение схемы и добавляем компоненты.
Компонент “Каталог схем” - станет отображать списком все добавленные схемы на сайте (Рис. ).
Компонент “Товар на схемах” можно размещать на странице с товаром отдельно для каждой страницы (отдельно для каждой страницы сайта добавить компоненты может администратор сайта, а разработчик сайта может добавить централизованно на все страницы товаров через редактирование компонента каталога), будут выводиться схемы, на которых указан этот товар и только с маркером этого товара (Рис. 9):
Рис. 9. Добавление компонентов на страницу
Для работы компонентов необходимо обязательным подключение JQuery, можно проверить установленную галку в настройках компонента:
Рис. 10. Настройки компонента “товар на схемах”
Страница схемы выглядит примерно так (Рис. 11):
Рис. 11. Отображение схемы на странице сайта
По клику на соответствующий маркер происходит подсвечивание товара в таблице под схемой и автофукусировка на строку с этим товаром (она сразу появится в поле экрана, если была за пределами).
Компонент “Товар на схемах” выводит список схем, к которым привязан товар, с отображением маркеров только для этого товара, остальные маркеры скрываются.
Примеров создания схем можно сделать очень много и для совершенно разных областей:
Рис. 12. Товар на схемах
Можно создавать маркеры не с числами, а с текстовыми подписями (только необходимо области для маркеров правильно настраивать, иначе текст может не войти в указанную область):
Рис. 13. Пример реализации схемы с текстовыми подписями для интернет-магазина обуви
Преимущества и перспективы использования модуля
Универсальное оформление графических схем с привязкой к товарам каталога.
Дополнительная рекламное представление товара вашего магазина.
Модуль очень прост в настройках и использовании.
Инструмент позволяет просматривать списком созданные схемы и отдельно по каждому товару, размещение/местоположение товара в разных схемам.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».