landing.json — конфігурація лендингу

landing.json — конфігурація лендингу

landing.json — головний файл шаблону. Описує весь лендинг: глобальні налаштування, секції та їх контент.

Повна структура

{
  "title": "Назва лендингу",
  "published": false,
  "global_styles": {
    "primary_color":   "#d32f2f",
    "secondary_color": "#222222",
    "accent_color":    "#ff5722",
    "text_color":      "#333333",
    "font_family":     "-apple-system, Arial, sans-serif",
    "custom_css":      ".cms-section { max-width:480px; margin:auto; }"
  },
  "seo": {
    "title":       "SEO заголовок сторінки",
    "description": "Meta description до 160 символів",
    "og_image":    "img/og-preview.jpg",
    "favicon":     ""
  },
  "scripts": {
    "ga_id":    "",
    "fb_pixel": "",
    "gtm_id":   "",
    "head":     "",
    "body_end": ""
  },
  "sections": [ ... ]
}

Секція в reference mode

Критично важливо: html, css, js, php — залишати порожніми (""). Renderer читає контент з файлів шаблону.

{
  "id":       "a1b2c3d4-e5f6-7890-abcd-ef1234567801",
  "type":     "hero",
  "template": "sy2-offer-01",
  "visible":  true,
  "html": "",    ← ПОРОЖНЬО — reference mode
  "css":  "",    ← ПОРОЖНЬО
  "js":   "",    ← ПОРОЖНЬО
  "php":  "",    ← ПОРОЖНЬО
  "data": {
    "vars": {
      "BG_COLOR":     "#b12f7a",
      "ACCENT_COLOR": "#d32f2f",
      "PRODUCT_BG":   "url(img/product.jpg)",
      "TITLE":        "Купуйте зараз",
      "NEW_PRICE":    "890",
      "CURRENCY":     "грн.",
      "CTA_TEXT":     "Замовити зі знижкою",
      "CTA_HREF":     "#order"
    }
  }
}

Шляхи зображень

Installer автоматично копіює img/* → data/uploads/ і замінює шляхи:

Завжди писати img/filename.jpg (відносний шлях), ніколи — абсолютний URL.

UUID секцій

Кожна секція потребує унікального UUID v4. Генерувати різні для кожної секції у кожному шаблоні:

// Формат: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
"id": "a1b2c3d4-e5f6-7890-abcd-ef1234567801"
"id": "b2c3d4e5-f6a7-8901-bcde-f01234567802"
"id": "c3d4e5f6-a7b8-9012-cdef-012345678903"

global_styles.custom_css

Для відтворення глобального контейнера оригінального лендингу (наприклад .wrap):

"custom_css": "body{background:#eee;} .cms-section{max-width:480px;margin-left:auto;margin-right:auto;position:relative;overflow-x:hidden;}"