Виджет 3D визуализации и виртуальной примерки товара в интернет-магазине на платформе inSales
На сайтах и интернет-магазинах, созданных на платформе inSales vможно показывать товар со всех сторон в 3D и давать посетителям возможность разместить (примерить) его в интерьере. Для этого необходимо разместить специальные Zarbo-виджеты в карточке товара. Далее приводится пошаговая инструкция как это сделать.
Инструкция по интеграции виджета 3D визуализации и виртуальной примерки
План действий
И для начала нам потребуется две учетные записи/личных кабинета:
1) https://insales.ru
2) https://app.zarbo.tech/
Без 3D модели вашего товара, к сожалению, ничего не получится. Если вам ее необходимо изготовить, пожалуйста, напишите нам на info@zarbo.tech или оставьте заявку на сайте https://zarbo.tech
Шаг 1. Создание нового типа виджета в inSales
В личном кабинете inSales, нужно создать новый виджет. Делаем последовательно:
1. Перейти в раздел Настройки > Виджеты
- Создание нового типа виджета в inSales.
- Прикрепление Zarbo-виджета к товару в интернет-магазине.
- Размещение виджета в карточке товара.
- Скрытие параметров интеграции из карточки товара..
И для начала нам потребуется две учетные записи/личных кабинета:
1) https://insales.ru
2) https://app.zarbo.tech/
Без 3D модели вашего товара, к сожалению, ничего не получится. Если вам ее необходимо изготовить, пожалуйста, напишите нам на info@zarbo.tech или оставьте заявку на сайте https://zarbo.tech
Шаг 1. Создание нового типа виджета в inSales
В личном кабинете inSales, нужно создать новый виджет. Делаем последовательно:
1. Перейти в раздел Настройки > Виджеты
2. Нажать "Создать"
3. Ввести информацию о будущем виджете
- Название виджета: Для примера, напишем “Zarbo-widget”;
- Категории виджетов: "Карточки товара", т.к. именно там мы будем размещать виджеты Zarbo;
- Тип: Выбираем “Простой виджет”.
- Зависимости: пока не указываем ничего. Это те поддерживаемые inSales библиотеки JS, которые могут понадобиться нам в будущем.
- Типы страниц: "Страница товара" - Указываем те типы, на которых планируем размещать новый виджет.
- Типы списков виджетов: Выбираем к какому типу относится наш виджет для их группировки.
4. Заполнить параметры виджета
Вкладка “HTML”
необходимо разместить интеграционный код Zarbo-виджета
Интеграционный код:
Примечание:
Конструкция if проверяет, что у товара в характеристиках заполнены параметры zarbo_uuid и zarbo_widget_id. Если они заполнены, тогда виджет будет показан, иначе - нет.
Конструкция iframe - шаблон интеграционного кода Zarbo-виджета.
Конструкция if проверяет, что у товара в характеристиках заполнены параметры zarbo_uuid и zarbo_widget_id. Если они заполнены, тогда виджет будет показан, иначе - нет.
Конструкция iframe - шаблон интеграционного кода Zarbo-виджета.
{% if
product.properties.zarbo_uuid.characteristics.first.name
and
product.properties.zarbo_widget_id.characteristics.first.name
%}
<iframe width="100%" height="{{ widget_settings.zarbo_height }}" name="пр" src="https://embed.dev.zarbo.works/{{product.properties.zarbo_uuid.characteristics.first.name}}/{{product.properties.zarbo_widget_id.characteristics.first.name}}/" allowfullscreen allow=" camera; autoplay; xr-spatial-tracking " frameBorder="0"></iframe>
{% endif %}
Вкладка “Форма настроек (JSON)”
Для проверки того, как это будет выглядеть была взята небольшая часть кода из документации. Потому этот код не будет приводить к каким-либо последствиям. Эта настройка описана лишь для того, чтобы продемонстрировать как будут выглядеть кнопки при настройке виджета.
Первый элемент из Группы 2 установит виджету inSales определенный атрибут в "left", который можно отловить в JS, и использовать для центрирования виджета inSales на сайте.
После изменения настроек виджета, не нужно его удалять и устанавливать заново.
Для проверки того, как это будет выглядеть была взята небольшая часть кода из документации. Потому этот код не будет приводить к каким-либо последствиям. Эта настройка описана лишь для того, чтобы продемонстрировать как будут выглядеть кнопки при настройке виджета.
Первый элемент из Группы 2 установит виджету inSales определенный атрибут в "left", который можно отловить в JS, и использовать для центрирования виджета inSales на сайте.
После изменения настроек виджета, не нужно его удалять и устанавливать заново.
{
"Высота":[
{
"group_name": "Цвета",
"items":[
{
"type": "number",
"step": 100,
"min": 50,
"max": 900,
"name": "zarbo_height",
"label":"Высота виджета",
"class": "range",
"value": 800,
"with_btns": true,
"enable_server_reload": true
}
]
}
],
"Отступы": [
{
"group_name": "Отступы",
"items": [
{
"class":"range",
"name":"layout-pt",
"min":0,
"max":10,
"step":0.5,
"label":"Отступ сверху",
"type":"range",
"unit":"vw",
"value": 0
},
{
"class":"range",
"name":"layout-pb",
"min":0,
"max":10,
"step":0.5,
"label":"Отступ снизу",
"type":"range",
"unit":"vw",
"value": 0
}
]
}
]
}
Вкладка “Переводы сообщений для формы (JSON)”
Они доступны через пермалинк messages как в блоке кода выше.
Например "{{ messagess.alignment }}" на русском языке выведет "Расположение".
Они доступны через пермалинк messages как в блоке кода выше.
Например "{{ messagess.alignment }}" на русском языке выведет "Расположение".
{
"ru": {
"align_left": "Слева",
"align_center": "По центру",
"align_right": "Справа",
"alignment": "Расположение"
}
}
Подробные инструкции о том как в конструкторе inSales создавать виджеты есть во внутренней базе знаний. В конце статьи перечислены полезные страницы с ссылками на них.
А мы будем работать с iframe тегом который предоставляет личный кабинет Zarbo.
5. Нажать кнопку “Сохранить”, затем “Копировать в шаблон”
А мы будем работать с iframe тегом который предоставляет личный кабинет Zarbo.
5. Нажать кнопку “Сохранить”, затем “Копировать в шаблон”
В появившемся окне указываем название вашего виджета, его идентификатор, и шаблон вашего сайта.
Шаг 2. Прикрепление Zarbo-виджета к товару в интернет-магазине
Для того, чтобы в карточке товара появился соответствующий ему виджет, нужно определить у товара два параметра:
Рассмотрим как это сделать на примере создания нового продукта.
1. Перейти в раздел “Товары”. Нажимаем"Создать"
Для того, чтобы в карточке товара появился соответствующий ему виджет, нужно определить у товара два параметра:
- Идентификатор продукта/товара (zarbo_uuid).
- Идентификатор виджета (zarbo_widget_id).
Рассмотрим как это сделать на примере создания нового продукта.
1. Перейти в раздел “Товары”. Нажимаем"Создать"
2. Заполняем данные о товаре
inSales предлагает заполнить описание, добавить изображения, и характеристики товара, указать название товара и другие не менее важные данные о товаре.
Название товара является обязательным полем в системе, поэтому его заполняем обязательно, а остальные на ваше усмотрение.
3. Добавить параметры интеграции
3.1. Под полем “Описание”, нажмите кнопку “Добавить параметр”.
inSales предлагает заполнить описание, добавить изображения, и характеристики товара, указать название товара и другие не менее важные данные о товаре.
Название товара является обязательным полем в системе, поэтому его заполняем обязательно, а остальные на ваше усмотрение.
3. Добавить параметры интеграции
3.1. Под полем “Описание”, нажмите кнопку “Добавить параметр”.
3.2. В поле “Выберите параметр”, выберите “Добавить новый параметр”.
3.3 При добавлении нового параметра появятся два текстовых поля: “Название” и “Значение”. В поле “Название” укажите zarbo_uuid и zarbo_widget_id.
Значения параметров zarbo_uuid и zarbo_widget_id необходимо взять из личного кабинета Zarbo, через форму “Интеграция” соответствующего продукта.
Шаг 3. Размещение виджета в карточке товара
Мы уже создали виджет, и у нашего товара есть все необходимые параметры для интеграции с виджетом. Осталось лишь разместить виджет на дизайне сайта, чтобы посетители сайта могли просматривать товар в 3D и размещать его виртуально в интерьере.
Последовательность действий:
1. Перейти в редактор дизайна
Мы уже создали виджет, и у нашего товара есть все необходимые параметры для интеграции с виджетом. Осталось лишь разместить виджет на дизайне сайта, чтобы посетители сайта могли просматривать товар в 3D и размещать его виртуально в интерьере.
Последовательность действий:
1. Перейти в редактор дизайна
2. Перейти в редактор дизайна страницы добавленного товара. В левом боковом меню нажать “Добавить виджет”
3. В открывшемся окне вписать название нашего виджета.
Если будет предупреждение о том, что не рекомендуется ставить несколько виджетов одного типа - игнорируем. Выбираем наш виджет из списка
4. В правом верхнем углу нажимаем "Сохранить"
Если будет предупреждение о том, что не рекомендуется ставить несколько виджетов одного типа - игнорируем. Выбираем наш виджет из списка
4. В правом верхнем углу нажимаем "Сохранить"
Шаг 4. Скрытие параметров интеграции из карточки товара
После того как вы добавили виджет на страницу товара, рекомендуем скрыть параметры zarbo_uuidиzarbo_widget_id. Они могут отвлекать вашего покупателя от действительно важных для него характеристик товара.
1. Перейдите в Настройки > Параметры товаров
После того как вы добавили виджет на страницу товара, рекомендуем скрыть параметры zarbo_uuidиzarbo_widget_id. Они могут отвлекать вашего покупателя от действительно важных для него характеристик товара.
1. Перейдите в Настройки > Параметры товаров
2. В открывшемся списке характеристик найдите те характеристики, которые хотите скрыть, и нажмите на иконку карандаша.
В нашем случае это zarbo_uuid и zarbo_widget_id.
В нашем случае это zarbo_uuid и zarbo_widget_id.
Если вы в своем списке не найдете эти параметры, попробуйте увеличить количество строк отображаемых на странице, нажав на большую цифру в правом нижнем углу страницы.
3. В открывшемся окне уберите флаг активности (галочку) в пункте “Отображать в навигации”, и активируйте флаг активности (галочку) в пункте “Не отображать в карточке товара”. Остальные значения не активны по умолчанию, их не меняем.
4. Нажимаем кнопку “Сохранить” и всё готово!
Что делать, если не получилось по инструкции вставить виджет на сайт
Если следуя инструкции у вас возникли сложности, и достичь положительного результата не получилось, то вы можете обратиться в службу технической поддержки с данной просьбой, вам помогут.
Наши контакты:
Почта: support@zarbo.tech
Канал технической поддержки: https://t.me/zarbotech_support
Дополнительные источники информации
Документации для разработчика по виджетам.
Документация для пользователя: шаблоны, виджеты
HTML
Контент, который будет отображен внутри виджета inSales - Переменные, документация.
CSS
Используются местные стили. Подробно описано на странице - Документация
JS
Скрипты исполняют местный код. Подробнее здесь - Документация
Переводы сообщений для формы
JSON поле переводов на разные языки - Документация
Форма настроек
JSON поле, которое позволяет выводить меню сбоку для настроек виджета - Документация
Настройки по умолчанию
Настройки по умолчанию (JSON) - Документация
Если следуя инструкции у вас возникли сложности, и достичь положительного результата не получилось, то вы можете обратиться в службу технической поддержки с данной просьбой, вам помогут.
Наши контакты:
Почта: support@zarbo.tech
Канал технической поддержки: https://t.me/zarbotech_support
Дополнительные источники информации
Документации для разработчика по виджетам.
Документация для пользователя: шаблоны, виджеты
HTML
Контент, который будет отображен внутри виджета inSales - Переменные, документация.
CSS
Используются местные стили. Подробно описано на странице - Документация
JS
Скрипты исполняют местный код. Подробнее здесь - Документация
Переводы сообщений для формы
JSON поле переводов на разные языки - Документация
Форма настроек
JSON поле, которое позволяет выводить меню сбоку для настроек виджета - Документация
Настройки по умолчанию
Настройки по умолчанию (JSON) - Документация