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>