Виджет 3D визуализации и виртуальной примерки товара в интернет-магазине на платформе inSales.

На сайтах и интернет-магазинах, созданных на платформе inSales можно показывать товар со всех сторон в 3D и давать посетителям возможность разместить (примерить) его в интерьере. Для этого необходимо разместить специальные Zarbo-виджеты в карточке товара. Далее приводится пошаговая инструкция как это сделать.

Инструкция по интеграции виджета 3D визуализации и виртуальной примерки.


План действий:

1. Прикрепление Zarbo-виджета к товару в интернет-магазине.
2. Размещение виджета в карточке товара.
3. Скрытие параметров интеграции из карточки товара.

Начинаем
И для начала нам потребуется две учетные записи/личных кабинета:
1) https://insales.ru
2) https://app.zarbo.tech/
Без 3D модели вашего товара, к сожалению, ничего не получится. Если вам ее необходимо изготовить, пожалуйста, напишите нам на info@zarbo.tech или оставьте заявку на сайте https://zarbo.tech

Шаг 1. Прикрепление Zarbo-виджета к товару в интернет-магазине

Для того, чтобы в карточке товара появился соответствующий ему виджет, нужно определить у товара два параметра:

1. Идентификатор продукта/товара (zarbo_uuid).
2. Идентификатор виджета (zarbo_widget_id).

Рассмотрим как это сделать на примере создания нового продукта.

1. Перейти в раздел “Товары”. Нажимаем"Создать"

2. Заполняем данные о товаре
inSales предлагает заполнить описание, добавить изображения, и характеристики товара, указать название товара и другие не менее важные данные о товаре.
Название товара является обязательным полем в системе, поэтому его заполняем обязательно, а остальные на ваше усмотрение.

3. Добавить параметры интеграции
3.1. Под полем “Описание”, нажмите кнопку “Добавить параметр”.

3.2. В поле “Выберите параметр”, выберите “Добавить новый параметр”.

3.3 При добавлении нового параметра появятся два текстовых поля: “Название” и “Значение”. В поле “Название” укажите zarbo_uuid и zarbo_widget_id.

Значения параметров zarbo_uuid и zarbo_widget_id необходимо взять из личного кабинета Zarbo, через форму “Интеграция” соответствующего продукта.

Шаг 2. Размещение виджета в карточке товара
У нашего товара есть все необходимые параметры для интеграции с виджетом. Осталось лишь разместить виджет на дизайне сайта, чтобы посетители сайта могли просматривать товар в 3D и размещать его виртуально в интерьере.

Последовательность действий:
1. Перейти в редактор дизайна

2. Перейти в редактор дизайна страницы добавленного товара. В левом боковом меню нажать “Добавить виджет”.

3. В открывшемся окне вписать название нашего виджета.
Если будет предупреждение о том, что не рекомендуется ставить несколько виджетов одного типа - игнорируем. Выбираем наш виджет из списка.

4. Мы видим наш виджет на сайте, можем настроить его расположение на сайте - высоту и отступы от верхней и нижней границы. Ширина виджета по умолчанию на весь экран, этого редактировать inSales не позволяет.
Настроить сам виджет вы можете в своем личном кабинете https://app.zarbo.tech/.
По завершению настройки, в правом верхнем углу нажимаем "Сохранить".

На этом всё! Виджет успешно размещен на вашем сайте.
Однако мы рекомендуем пройти еще один шаг, для того, чтобы посетителей вашего сайта не смущали неизвестные характеристики товара.

Шаг 3. Скрытие параметров интеграции из карточки товара
После того как вы добавили виджет на страницу товара, рекомендуем скрыть параметры zarbo_uuidиzarbo_widget_id. Они могут отвлекать вашего покупателя от действительно важных для него характеристик товара.

1. Перейдите в Настройки > Параметры товаров.

2. В открывшемся списке характеристик найдите те характеристики, которые хотите скрыть, и нажмите на иконку карандаша.
В нашем случае это zarbo_uuidиzarbo_widget_id.

Если вы в своем списке не найдете эти параметры, попробуйте увеличить количество строк отображаемых на странице, нажав на большую цифру в правом нижнем углу страницы

3. В открывшемся окне уберите флаг активности (галочку) в пункте “Отображать в навигации”, и активируйте флаг активности (галочку) в пункте “Не отображать в карточке товара”. Остальные значения не активны по умолчанию, их не меняем.

4. Нажимаем кнопку “Сохранить” и всё готово!

Что делать, если не получилось по инструкции вставить виджет на сайт
Если следуя инструкции у вас возникли сложности, и достичь положительного результата не получилось, то вы можете обратиться в службу технической поддержки с данной просьбой, вам помогут.

Наши контакты:
Почта: support@zarbo.tech
Канал технической поддержки: https://t.me/zarbotech_support

Дополнительные источники информации
Документации для разработчика по виджетам.
Документация для пользователя: шаблоны, виджеты
HTML
Контент, который будет отображен внутри виджета inSales - Переменные, документация.
CSS
Используются местные стили. Подробно описано на странице - Документация
JS
Скрипты исполняют местный код. Подробнее здесь - Документация
Переводы сообщений для формы
JSON поле переводов на разные языки - Документация
Форма настроек
JSON поле, которое позволяет выводить меню сбоку для настроек виджета - Документация
Настройки по умолчанию
Настройки по умолчанию (JSON) - Документация