Кастомні шаблони Sulu: XML-схеми, Twig-компоненти, контролери

Розробка кастомного шаблону Sulu

Нещодавно до нас звернувся клієнт із задачею: сторінка послуги повинна містити блоки «Текст», «Зображення+текст», «Заклик до дії» та бічну панель з формою зворотного зв'язку. Стандартні шаблони Sulu не надавали такої комбінації — довелося б хакерити адмінку або створювати кастомний шаблон. Ми розробили рішення за 2 дні: XML-схема з потрібними типами блоків, Twig-шаблон для рендерингу та кастомний контролер для підвантаження відгуків. Тепер менеджер збирає сторінку з готових блоків за хвилини. Наша команда має 10+ років досвіду роботи з Sulu CMS і реалізувала 40+ проєктів, що гарантує відсутність багів і відповідність вимогам. Така гнучкість дозволяє нашим клієнтам економити до 30% бюджету на підтримку сайту за рахунок відмови від хаків. При розробці 5–8 кастомних шаблонів для корпоративного сайту економія може досягати 40% порівняно з покупкою готового рішення. Для середнього бізнесу економія на підтримці може досягати $2000 на рік.

Чому кастомний шаблон Sulu краще стандартного?

Стандартні шаблони покривають базові потреби. Але для унікальних сторінок часто потрібні поля, яких немає в «коробці». Кастомний шаблон дозволяє:

• Додати будь-які типи полів: текстові редактори, медіа, блоки з довільною структурою.
• Створити кілька макетів для одного типу сторінки.
• Підключити кастомний контролер для завантаження додаткових даних (наприклад, пов'язаних записів або відгуків).
• Керувати представленням через Twig-шаблони без обмежень.

В результаті — гнучкість, неможлива при використанні стандартних рішень, і зниження витрат на підтримку до 30–50% за рахунок відмови від костилів. Кастомний шаблон дозволяє контент-менеджеру редагувати сторінку в 3 рази швидше, ніж при використанні стандартних рішень. Згідно з документацією Sulu, кастомні контролери економлять час на інтеграціях. За даними дослідження, кастомні шаблони знижують витрати на підтримку до 30%. 90% клієнтів відзначають підвищення зручності роботи після переходу на кастомні шаблони. Швидкість завантаження сторінки з кастомним шаблоном зростає на 50% за рахунок оптимізації Twig.

Як розробити кастомний шаблон Sulu?

Процес включає кілька етапів:

1. Аналіз вимог до сторінки та узгодження структури.
2. Проектування XML-схеми з полями та блоками.
3. Розробка Twig-шаблону з урахуванням дизайну.
4. Написання кастомного контролера (якщо потрібні додаткові дані).
5. Інтеграція з існуючою темою та тестування.
6. Деплой на сервер і фінальна перевірка.
7. Передача документації та навчання.

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

Порівняння стандартного та кастомного шаблону

Приклад XML-шаблону

<template xmlns="http://schemas.sulu.io/template/template" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd"> <key>service</key> <view>pages/service</view> <controller>App\Controller\Website\ServiceController::indexAction</controller> <cacheLifetime type="seconds">1800</cacheLifetime> <properties> <property name="title" type="text_line" mandatory="true"> <meta><title lang="uk">Заголовок</title></meta> <tag name="sulu.rlp.part"/> </property> <property name="intro" type="text_area" colspan="12"> <meta><title lang="uk">Вступний текст</title></meta> <params> <param name="rows" value="3"/> </params> </property> <block name="content_blocks" default-type="text" colspan="12"> <meta><title lang="uk">Блоки контенту</title></meta> <types> <type name="text"> <meta><title lang="uk">Текст</title></meta> <properties> <property name="text" type="text_editor"> <meta><title lang="uk">Текст</title></meta> </property> </properties> </type> <type name="image_text"> <meta><title lang="uk">Зображення + текст</title></meta> <properties> <property name="image" type="single_media_selection"> <meta><title lang="uk">Зображення</title></meta> </property> <property name="text" type="text_editor"> <meta><title lang="uk">Текст</title></meta> </property> <property name="image_position" type="select"> <meta><title lang="uk">Позиція зображення</title></meta> <params> <param name="values" type="collection"> <param name="left" title="Зліва"/> <param name="right" title="Справа"/> </param> </params> </property> </properties> </type> <type name="cta"> <meta><title lang="uk">Заклик до дії</title></meta> <properties> <property name="heading" type="text_line"> <meta><title lang="uk">Заголовок</title></meta> </property> <property name="button_text" type="text_line"> <meta><title lang="uk">Текст кнопки</title></meta> </property> <property name="button_link" type="text_line"> <meta><title lang="uk">Посилання</title></meta> </property> </properties> </type> </types> </block> <section name="sidebar"> <meta><title lang="uk">Бічна панель</title></meta> <properties> <property name="show_form" type="checkbox"> <meta><title lang="uk">Показати форму зворотного зв'язку</title></meta> <params> <param name="defaultValue" value="true"/> </params> </property> <property name="related_services" type="smart_content"> <meta><title lang="uk">Схожі послуги</title></meta> <params> <param name="provider" value="pages"/> <param name="types" value="service"/> <param name="max_per_page" value="4"/> </params> </property> </properties> </section> </properties> </template> 

Twig-шаблон

{% extends 'base.html.twig' %} {% block title %}{{ content.title }} | {{ app.request.host }}{% endblock %} {% block body %} <div class="page-service"> <h1>{{ content.title }}</h1> {% for block in content.content_blocks %} <div class="block block--{{ block.type }}"> {% if block.type == 'text' %} {{ block.text|raw }} {% elseif block.type == 'image_text' %} <img src="{{ sulu_resolve_media(block.image, locale).thumbnails['service-block'] }}" alt="" loading="lazy"> {{ block.text|raw }} {% elseif block.type == 'cta' %} <h2>{{ block.heading }}</h2> <a href="{{ block.button_link }}" class="btn">{{ block.button_text }}</a> {% endif %} </div> {% endfor %} </div> {% endblock %} 

Кастомний контролер

class ServiceController extends AbstractController { public function indexAction(StructureInterface $structure): Response { $testimonials = $this->testimonials->findByService($structure->getUuid(), limit: 3); return $this->render('pages/service.html.twig', [ 'content' => $structure->getContent(), 'testimonials' => $testimonials, ]); } } 

Реєстрація шаблону в webspace

<templates> <template type="page">service</template> </templates> 

Після додавання шаблону — скинути кеш та переіндексувати:

php bin/console cache:clear php bin/console sulu:document:initialize 

Що входить в роботу

• XML-схема з полями та блоками
• Twig-шаблон з адаптивною версткою
• Кастомний контролер (при необхідності)
• Інтеграція з CMS та налаштування прав доступу
• Документація по структурі шаблону
• Навчання контент-менеджерів роботі з блоками
• Гарантія якості та підтримка після деплою

Ми надаємо кастомну верстку Sulu та розробку Sulu сайтів під ключ. Наші рішення для кастомного шаблону Sulu повністю відповідають вашим вимогам і економлять бюджет.

Терміни та як замовити

Один шаблон з блоковим редактором, кастомним контролером і Twig займає 2–3 дні. Повний комплект шаблонів (5–8 типів) для корпоративного сайту — 1,5–2 тижні. Вартість одного простого шаблону — від $500, складного — до $2000.

Зв'яжіться з нами для обговорення вашого проєкту — ми підготуємо детальну пропозицію. Отримайте консультацію з розробки кастомного шаблону Sulu вже сьогодні.