Як Renderer рендерить секції

Як Renderer рендерить секції

Клас Renderer перетворює дані з landing.json + файли шаблону у готовий HTML для відвідувача.

Порядок рендерингу секції

renderSection($section):
  1. Зчитати html, css, js з $section
  2. Якщо html="" AND є $section['template']:
       → читати template.html з templates/{type}/{id}/
       → замінити {{VAR}} → data.vars значення (htmlspecialchars)
       → замінити {{HTML_VAR}} → data.vars значення (strip_tags)
       → видалити незаміщені {{ANYTHING}}
       → читати style.css, script.js з папки шаблону
  3. Згенерувати CSS custom properties з data.vars:
       #section-{id} { --KEY: value; --KEY2: value2; }
  4. Зібрати результат:
       <style>{css vars}{css}</style>
       <div id="section-{id}" class="cms-section cms-section-{type}">
         {html}
       </div>
       <script>{js}</script>

Подвійне призначення data.vars

Кожен ключ з data.vars використовується двома способами одночасно:

// data.vars = { "BG_COLOR": "#b12f7a", "TITLE": "Купуйте зараз" }

// У template.html:
<h1>{{TITLE}}</h1>   →   <h1>Купуйте зараз</h1>

// У style.css:
.offer { background: var(--BG_COLOR); }
// Renderer генерує: #section-xxx { --BG_COLOR: #b12f7a; }

HTML_ prefix — raw HTML вставка

Якщо ключ починається з HTML_ — Renderer застосовує strip_tags() замість htmlspecialchars():

// data.vars["TITLE"] = "<b>Текст</b>"
// → htmlspecialchars → "&lt;b&gt;Текст&lt;/b&gt;"  (теги екрановані)

// data.vars["HTML_EXTRA"] = "<input type='email' name='email'>"
// → strip_tags (allowlist) → "<input type='email' name='email'>"  (тег збережений)

Дозволені теги для HTML_ vars: <input> <textarea> <select> <option> <label> <div> <span> <p> <br>

A/B тестування

Секції підтримують A/B тест без змін у шаблоні:

• Адміністратор натискає "A/B" → відкривається редактор Variant B
• Варіант B зберігається в section.ab_html
• Renderer: 50/50 рандом, cookie _ab_xxxxxxxx на 7 днів
• Для variant B: section.html підміняється на section.ab_html
• Аналітика: a_views, b_views, a_orders, b_orders по кожній секції

Шаблон нічого спеціального робити не повинен — A/B працює автоматично.

Обгортка секції у фінальному HTML

<!-- Renderer генерує для кожної секції: -->
<style>
  #section-3f3f2e01 { --BG_COLOR:#b12f7a; --TITLE:Купуйте зараз; }
  .cms-section-hero .offer { background: var(--BG_COLOR); }
</style>
<div id="section-3f3f2e01" class="cms-section cms-section-hero">
  <div class="offer sy2-offer-01">
    <h1>Купуйте зараз</h1>
    ...
  </div>
</div>
<script>(function(){...})();</script>