Розробка кастомного шаблону 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?
Процес включає кілька етапів:
- Аналіз вимог до сторінки та узгодження структури.
- Проектування XML-схеми з полями та блоками.
- Розробка Twig-шаблону з урахуванням дизайну.
- Написання кастомного контролера (якщо потрібні додаткові дані).
- Інтеграція з існуючою темою та тестування.
- Деплой на сервер і фінальна перевірка.
- Передача документації та навчання.
Терміни залежать від складності. Нижче — орієнтовні терміни для різних типів шаблонів.
| Тип шаблону | Кількість унікальних блоків | Термін розробки |
|---|---|---|
| Простий (текст, медіа) | 2–4 | 1–2 дні |
| Середній (блоковий редактор, кастомні поля) | 5–8 | 2–3 дні |
| Складний (кастомний контролер, інтеграції) | 8+ | 3–5 днів |
Порівняння стандартного та кастомного шаблону
| Критерій | Стандартний шаблон | Кастомний шаблон |
|---|---|---|
| Кількість полів | Обмежена | Будь-яка |
| Типи блоків | Тільки текст | Текст, медіа, CTA, галерея тощо |
| Контролер | Тільки DefaultController | Кастомний з будь-якою логікою |
| Гнучкість | Низька | Висока |
Приклад 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
Типові складнощі та їх вирішення
-
Шаблон не застосовується — найчастіше забувають зареєструвати ключ у webspace або скинути кеш. Завжди перевіряйте наявність запису в конфігу та виконуйте
cache:clear. -
Невірне посилання на контролер — вкажіть повне ім'я класу та метод, інакше Sulu не знайде контролер. Використовуйте
debug:routerдля перевірки. -
Блоки не відображаються — переконайтеся, що в Twig шаблоні для кожного типу блоку прописана відповідна логіка. Часта помилка — відсутність перевірки
typeв циклі.
Що входить в роботу
- XML-схема з полями та блоками
- Twig-шаблон з адаптивною версткою
- Кастомний контролер (при необхідності)
- Інтеграція з CMS та налаштування прав доступу
- Документація по структурі шаблону
- Навчання контент-менеджерів роботі з блоками
- Гарантія якості та підтримка після деплою
Ми надаємо кастомну верстку Sulu та розробку Sulu сайтів під ключ. Наші рішення для кастомного шаблону Sulu повністю відповідають вашим вимогам і економлять бюджет.
Терміни та як замовити
Один шаблон з блоковим редактором, кастомним контролером і Twig займає 2–3 дні. Повний комплект шаблонів (5–8 типів) для корпоративного сайту — 1,5–2 тижні. Вартість одного простого шаблону — від $500, складного — до $2000.
Зв'яжіться з нами для обговорення вашого проєкту — ми підготуємо детальну пропозицію. Отримайте консультацію з розробки кастомного шаблону Sulu вже сьогодні.