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

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

Параметры URL позволяют открывать Customizer с заданными визуальными настройками и опциями товара без изменения кода встраивания. Customizer считывает параметры при загрузке и применяет их к фону рабочего пространства, 3D-окружению, интенсивности освещения и выбору варианта. Варианты из URL определяются по сопоставлениям атрибутов и их значений в WooCommerce. Собственные цвета: Для товаров с вариантами собственного цвета можно запросить такой вариант и передать выбранные цвета прямо в URL. Кодируйте # как %23 в значениях параметров запроса.

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

ПараметрТипОписаниеЗначение по умолчанию
bcgstringРежим фона Customizer: grad_f6f7fb_e8fff6, app_img_123 или env. Режим env использует предпросмотр выбранного окружения как фон рабочего пространства.Настройка дизайна/темы по умолчанию
envintID окружения среды выполнения. Выбирает HDRI-окружение для 3D-холста, а при bcg=env также задаёт его предпросмотр как фон.Настройка дизайна/по умолчанию
light_intensity0 - 2Интенсивность освещения окружения для 3D-холста. Значения за пределами диапазона ограничиваются допустимыми границами.Настройка дизайна/по умолчанию
bcg_blur0 - 100Размытие фоновых изображений Customizer, включая app_img_* и фоны предпросмотра bcg=env.0
bcg_brightness0 - 3Яркость фоновых изображений Customizer.1
bcg_underlaystringГрадиентная подложка под фоновыми изображениями, например grad_ffffff_f5f7fb.Настройка дизайна/темы по умолчанию
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/customizer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_blur=0&bcg_brightness=1&bcg_underlay=grad_ffffff_f5f7fb&custom_color=1&picked_colors=front:%23ff6b6b

<iframe
  loading="lazy"
  title="Product Customizer"
  src="https://alterproduct.com/app/customizer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_blur=0&bcg_brightness=1&bcg_underlay=grad_ffffff_f5f7fb&custom_color=1&picked_colors=front:%23ff6b6b"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>