template.html — правила розмітки

template.html — правила розмітки

Кореневий елемент: <div>, не <section>

Renderer автоматично обгортає секцію у <div class="cms-section cms-section-{type}">. Якщо шаблон також починається з <section>, глобальні CSS правила типу section { padding: 40px 0; } застосовуються двічі і ламають відступи.

<!-- ✅ Правильно -->
<div class="offer sy2-offer-01">
    <div class="box">...</div>
</div>

<!-- ❌ Неправильно — подвійний CSS на <section> -->
<section class="offer sy2-offer-01">...</section>

Змінні {{VAR_NAME}}

Текстові плейсхолдери замінюються значеннями з section.data.vars при рендерингу. Імена — ВЕЛИКІ ЛІТЕРИ З ПІДКРЕСЛЕННЯМ.

<div class="offer sy2-offer-01">
    <h1>{{TITLE}}</h1>
    <p class="price">{{NEW_PRICE}} {{CURRENCY}}</p>
    <a href="{{CTA_HREF}}" class="btn">{{CTA_TEXT}}</a>
    <img src="{{PRODUCT_IMAGE}}" alt="{{PRODUCT_ALT}}">
</div>

⚠️ Renderer застосовує htmlspecialchars() до всіх значень. Теги у значенні (<br>, <b>) будуть екрановані. Для HTML-контенту — дивись префікс HTML_ нижче.

Кілька абзаців — окремі змінні

<!-- ✅ Правильно -->
<p>{{BENEFIT_1}}</p>
<p>{{BENEFIT_2}}</p>
<p>{{BENEFIT_3}}</p>

<!-- ❌ Неправильно — <br> в значенні буде екрановано -->
<p>{{BENEFITS_TEXT}}</p>

HTML_ prefix — вставка сирого HTML

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

<!-- template.html — placeholder для додаткових полів форми -->
<input type="text" name="name" placeholder="{{NAME_PLACEHOLDER}}" required>
<input type="tel"  name="phone" placeholder="{{PHONE_PLACEHOLDER}}" required>
{{HTML_EXTRA_FIELDS}}   <!-- сирий HTML — input/textarea/select -->
<button type="submit">{{SUBMIT_TEXT}}</button>

// landing.json — data.vars
"HTML_EXTRA_FIELDS": "<input class=\"field\" type=\"email\" name=\"email\" placeholder=\"Email\" required>"

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

Заборонено в template.html

• ❌ Inline <style> теги — тільки у style.css
• ❌ Inline <script> теги — тільки у script.js
• ❌ <script src="https://cdn..."> — зовнішні CDN бібліотеки
• ❌ Абсолютні шляхи до зображень — тільки через CSS var або {{IMAGE_VAR}}

Залишкові {{VAR}} — видаляються автоматично

Якщо якийсь {{VAR_NAME}} не знайдено у data.vars — Renderer автоматично видаляє його регулярним виразом. Порожнє поле краще ніж видимий {{VAR}} на сторінці.