Редактор шаблонів

{# Display a variable #}
<h1>{{ heading_title }}</h1>
<p>{{ description }}</p>

{# Display with filters #}
<p>{{ text|upper }}</p>
<p>{{ price|number_format(2) }}</p>

Поширені змінні:

• {{ heading_title }} – заголовок сторінки
• {{ description }} – опис сторінки
• {{ products }} – масив товарів
• {{ currency }} – інформація про валюту

Набір доступних змінних залежить від контролера, який відображає шаблон.

{# If statement #}
{% if products %}
  <ul>
  {% for product in products %}
    <li>{{ product.name }}</li>
  {% endfor %}
  </ul>
{% else %}
  <p>No products found.</p>
{% endif %}

{# For loops #}
{% for category in categories %}
  <a href="{{ category.href }}">{{ category.name }}</a>
{% endfor %}

{# Include another template #}
{% include 'common/header.twig' %}

{# Extend a base template #}
{% extends 'common/base.twig' %}

{# Override blocks #}
{% block content %}
  Custom content here
{% endblock %}

Примітка: стандартні шаблони ocStore 3 не використовують наслідування (extends): шапка, футер і колонки передаються контролером як готові змінні ({{ header }}, {{ footer }}, {{ column_left }} тощо).

Порядок роботи

1. Спочатку тестуйте на копії. Завжди перевіряйте зміни на тестовому або staging-магазині, перш ніж застосовувати їх на робочому сайті.

2. Вносьте невеликі зміни поступово. Редагуйте один шаблон за раз і перевіряйте, що кожна зміна працює як слід.

3. Документуйте зміни. Записуйте, які шаблони ви змінили, що саме і навіщо. Це допоможе під час пошуку несправностей та оновлення.

4. Використовуйте контроль версій. Якщо змін багато, зберігайте копії коду перевизначень, наприклад у Git.

5. Робіть резервні копії. Перед і після значних змін робіть резервну копію перевизначень (експортуйте таблицю theme).

Безпечне редагування шаблонів

1. Екрануйте дані користувачів. Завжди екрануйте вміст, створений користувачами, фільтром Twig |escape, щоб запобігти XSS-атакам.

2. Не вставляйте PHP-код. Шаблони Twig не призначені для PHP-коду. Використовуйте вбудовані функції та фільтри Twig.

3. Обмежте доступ. Надавайте доступ до редактора шаблонів (design/theme) лише довіреним адміністраторам через Система → Користувачі → Групи користувачів.

4. Перевіряйте код. Переглядайте зміни шаблонів на предмет вразливостей, особливо коли додаєте власний JavaScript або обробку форм.

Попередження: уникайте {{ variable|raw }}, якщо ви не повністю довіряєте джерелу змінної. Це може зробити магазин вразливим до міжсайтового скриптингу (XSS).

Перевизначення для різних магазинів

Окремі перевизначення для магазинів. У конфігурації з кількома магазинами для кожного магазину можна створити власні перевизначення: просто оберіть потрібний магазин у списку Магазин перед редагуванням.

Мови. Перевизначення шаблонів не залежать від мови: вони змінюють структуру шаблону, а не тексти. Щоб змінити тексти, скористайтеся Редактором перекладу (Дизайн → Редактор перекладу).

Поведінка за відсутності перевизначення. Перевизначення діє лише для того магазину, для якого його збережено. Якщо для магазину перевизначення немає, використовується оригінальний файл шаблону — перевизначення магазину «За замовчуванням» на інші магазини не поширюються.

Проблема: перевизначення збережено, але вітрина показує оригінальний шаблон

Кроки діагностики:

1. Запис в історії: переконайтеся, що перевизначення є в таблиці Історія шаблону для потрібного магазину.
2. Кеш: очистіть кеш у Налаштуваннях розробника — кнопка із шестернею на Панелі стану адмін-панелі.
3. Кеш браузера: примусово оновіть сторінку вітрини (Ctrl+F5). Якщо сайт працює через CDN (наприклад, Cloudflare), очистіть і його кеш.
4. Відповідність шляху: переконайтеся, що Шлях перевизначення точно відповідає шаблону, який відображається, а тема — активній темі магазину.

Швидкі рішення:

• Збережіть перевизначення ще раз.
• Тимчасово вимкніть кешування шаблонів у Налаштуваннях розробника.
• Перевірте консоль браузера на помилки JavaScript.

Проблема: білий екран або повідомлення про помилку після збереження

Кроки діагностики:

1. Виведення помилок: увімкніть Показувати помилки в Система → Налаштування, вкладка Сервер, щоб побачити докладне повідомлення. Також перевірте Система → Обслуговування → Журнал помилок.
2. Перевірка синтаксису: шукайте відсутні {% endfor %}, {% endif %} або незакриті {{ }}.
3. Імена змінних: переконайтеся, що імена змінних збігаються з тими, що передає контролер.

Швидкі рішення:

• Видаліть перевизначення з історії, щоб повернути оригінальний шаблон, і вносьте зміни меншими частинами.
• Перевірте синтаксис за допомогою онлайн-валідатора Twig.

Після діагностики на робочому сайті знову вимкніть Показувати помилки.

Проблема: верстка вітрини спотворена

Можливі причини:

• Відсутні HTML-теги (наприклад, незакритий <div>).
• Неправильні CSS-класи.
• Конфлікти JavaScript.
• Код перевизначення видаляє важливу розмітку.

Рішення:

1. Порівняйте з оригіналом: відкрийте оригінальний файл .twig (кнопка Очистити в редакторі) і порівняйте зі своїм кодом.
2. Інструменти розробника: скористайтеся інспектором браузера, щоб знайти відсутні або зламані елементи.
3. Поступове повернення: прибирайте частини свого коду, доки верстка не відновиться, і так знайдіть проблемний фрагмент.

Проблема: перевизначення працює в одному магазині, але не працює в іншому

Кроки діагностики:

1. Вибір магазину: переконайтеся, що перевизначення збережено для потрібного магазину (колонка Магазин в історії).
2. Тема магазину: перевизначення прив'язане до теми. Якщо магазини використовують різні теми, перевизначення однієї теми не діє для іншої.
3. Наявність шаблону: переконайтеся, що файл шаблону існує в темі цього магазину.

Швидкі рішення:

• Створіть окреме перевизначення для кожного магазину, якому потрібні зміни.