meta.json — змінні та панель редактора

meta.json — змінні та панель редактора

Чому meta.json обов'язковий

Файл meta.json у папці секції — єдиний спосіб задати змінні для панелі "Кольори та розміри" в редакторі CMS. Без нього панель порожня і користувач не може змінювати кольори та тексти секції без ручного редагування JSON.

Структура

{
  "id": "sy2-offer-01",
  "type": "hero",
  "name": "Оффер товарки з таймером",
  "description": "Секція з фото товару, таймером та CTA кнопкою",
  "tags": ["hero", "offer", "timer", "товарка"],
  "vars": [
    { "name": "BG_COLOR",      "label": "Колір фону",         "type": "color",  "default": "#b12f7a" },
    { "name": "ACCENT_COLOR",  "label": "Акцентний колір",    "type": "color",  "default": "#d32f2f" },
    { "name": "FONT_SIZE",     "label": "Розмір тексту (px)", "type": "range",  "default": "16", "min": 12, "max": 32 },
    { "name": "ALIGN",         "label": "Вирівнювання",       "type": "select", "default": "left", "options": ["left","center","right"] },
    { "name": "TITLE",         "label": "Заголовок",          "type": "text",   "default": "Купуйте зараз" },
    { "name": "NEW_PRICE",     "label": "Нова ціна",          "type": "text",   "default": "890" },
    { "name": "CURRENCY",      "label": "Валюта",             "type": "text",   "default": "грн." },
    { "name": "CTA_TEXT",      "label": "Текст кнопки",       "type": "text",   "default": "Замовити" },
    { "name": "CTA_HREF",      "label": "Посилання кнопки",   "type": "text",   "default": "#order" }
  ]
}

Типи полів та їх відображення в редакторі

Що включати у vars

• ✅ Всі {{VAR_NAME}} плейсхолдери з template.html — тексти, ціни, посилання
• ✅ CSS custom properties типу var(--BG_COLOR) у style.css — тип color
• ✅ Числові CSS змінні — тип text або range

Що НЕ включати у vars

• ❌ CSS змінні з url() значеннями (--PRODUCT_BG, --SALE_BADGE_IMG) — вони керуються через панель завантаження зображень, текстовий інпут незручний для url('...')
• ❌ HTML_ prefixed vars — для програмного заповнення через конструктори, не ручного редагування

name повинен збігатись скрізь

Поле name у vars[] — це ключ, що використовується одночасно в трьох місцях:

meta.json vars[].name:  "BG_COLOR"
template.html:          {{BG_COLOR}}          ← підстановка тексту
style.css:              var(--BG_COLOR)        ← CSS custom property
landing.json data.vars: { "BG_COLOR": "#b12f7a" }  ← значення