Viewer — оформление (параметры URL)

Оформление через параметры URL

Параметры URL позволяют изменять внешний вид и поведение Viewer без правки кода. Их можно задать непосредственно в приложении (например, на вкладке «Поделиться» или внутри Viewer), чтобы управлять режимом фона, эффектами фонового изображения, освещением 3D-окружения, видимостью интерфейса и кнопки «В корзину». Предварительный выбор варианта (атрибуты WooCommerce): Вы также можете заранее выбрать определённый вариант товара через параметры запроса, например attribute_pa_color, pa_size или size. Они обрабатываются с учётом сопоставлений атрибутов и их значений в магазине и позволяют открыть Viewer с уже выбранным цветом, размером, материалом, способом печати или собственным цветом.

Список доступных параметров URL

ПараметрТипОписаниеЗначение по умолчанию
nav0 / 1Скрывает (0) или показывает (1) навигацию. Доступно только в Business.1
add_to_cart0 / 1Скрывает (0) или показывает (1) кнопку «В корзину».0
bcgstringРежим фона сцены: grad_f6f7fb_e8fff6, app_img_123, uploaded, theme или env.Настройка магазина/по умолчанию
envintID HDRI-окружения для освещения сцены. При bcg=env окружение также используется как видимый фон сцены.1
light_intensity0 - 2Интенсивность освещения 3D-сцены.0.6
bcg_blur0 - 100Размытие фоновых изображений, выбранных через bcg=app_img_*, bcg=uploaded или bcg=theme.0
bcg_brightness0 - 3Яркость/свечение фоновых изображений.1
bcg_underlaystringПодложка под фоновыми изображениями. Используйте grad_ffffff_f5f7fb для градиента или none, чтобы убрать подложку.Настройка фона по умолчанию
attribute_pa_*stringПредварительно выбирает значение атрибута товара WooCommerce. Допустимые формы ключа: attribute_pa_color, pa_color и color; поддерживаются псевдонимы размера, цвета, материала, вида печати и узора.
custom_color0 / 1 / trueЗапрашивает вариант с собственным цветом, если товар его поддерживает. Тот же результат даёт color=custom.0
picked_colorsstringПереопределения собственных цветов через запятую в формате detailKey:%23hex, например front:%23ff6b6b,back:%2300ff88. Символ # должен быть закодирован в URL как %23.

Пример

URL: https://alterproduct.com/app/viewer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_underlay=none&add_to_cart=1&nav=0&attribute_pa_color=white&attribute_pa_size=m

<iframe
  loading="lazy"
  title="Product Viewer"
  src="https://alterproduct.com/app/viewer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_underlay=none&add_to_cart=1&nav=0&attribute_pa_color=white&attribute_pa_size=m"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>