Долгое время практически любой интернет-магазин на PrestaShop начинался с одной и той же основы — стандартной темы Classic.
Она пережила несколько поколений платформы, тысячи модулей и огромное количество доработок. На Classic построено множество коммерческих шаблонов, поэтому просто заменить её новой темой было значительно сложнее, чем может показаться.
Но со временем проблема стала очевидной: современный интернет-магазин сильно изменился, а архитектура Classic всё больше ограничивала развитие фронтенда.
Именно поэтому в PrestaShop появилась новая тема — Hummingbird.
Начиная с PrestaShop 9.1 Hummingbird является стандартной темой платформы, а Classic оставлена в основном ради обратной совместимости. Для новых разработок сама документация PrestaShop уже рекомендует ориентироваться именно на Hummingbird.
И дело здесь далеко не только в новом внешнем виде.
Hummingbird фактически задаёт новую архитектуру фронтенда PrestaShop.
Почему нельзя было просто обновить Classic
Classic создавалась в совершенно другой период развития веба.
За годы вокруг неё сформировалась огромная экосистема:
-
темы;
-
модули;
-
JavaScript-скрипты;
-
переопределения шаблонов;
-
CSS;
-
кастомные хуки;
-
сторонние библиотеки.
Любое серьёзное изменение базовой архитектуры могло нарушить совместимость с тысячами существующих решений.
Поэтому постепенно Classic оказалась в своеобразной ловушке обратной совместимости.
Чтобы сделать действительно современный фронтенд, пришлось бы менять Bootstrap, JavaScript, SCSS, структуру шаблонов и принципы взаимодействия элементов страницы.
Изменять всё это внутри Classic означало бы постоянно пытаться сохранить совместимость с архитектурными решениями, которые создавались много лет назад.
PrestaShop выбрала более разумный путь — создать новую основу.
Так появилась Hummingbird.
Hummingbird — это не просто ещё один дизайн PrestaShop
Если установить Hummingbird и посмотреть только на внешний вид магазина, масштаб изменений можно недооценить.
Это намеренно достаточно нейтральная тема.
Её задача — не показать самый эффектный дизайн интернет-магазина.
Её задача — стать правильной технической основой, поверх которой разработчики смогут создавать современные коммерческие темы.
Представители проекта PrestaShop прямо называют Hummingbird эталонной реализацией современного фронтенда платформы.
Другими словами, Hummingbird показывает, как разработчики PrestaShop сегодня видят правильную структуру темы.
И это намного важнее самого стандартного дизайна.
Bootstrap 5 вместо старой основы
Одно из главных изменений — переход на Bootstrap 5.3.
Classic исторически связана со старой архитектурой Bootstrap и большим количеством решений, построенных вокруг неё.
Hummingbird использует современную версию Bootstrap.
Это даёт более актуальную сетку, компоненты, utilities, CSS variables и значительно более удобную основу для адаптивного интерфейса.
При этом PrestaShop не просто обновила версию Bootstrap.
В Hummingbird архитектура построена так, чтобы было понятно, где заканчивается Bootstrap и начинается собственный интерфейс PrestaShop.
Это кажется мелочью, пока не приходится поддерживать большую тему несколько лет.
В старых проектах достаточно часто трудно понять:
этот стиль пришёл из Bootstrap, из PrestaShop, из модуля или из кастомной темы?
В Hummingbird эти уровни стараются разделять.
Совершенно другая организация SCSS
Ещё одно серьёзное изменение находится внутри CSS.
Hummingbird получила новую модульную архитектуру SCSS.
Bootstrap-компоненты, стили PrestaShop и собственные компоненты темы разделены между собой.
Кроме того, используется современный механизм CSS @layer.
Он позволяет управлять приоритетами различных слоёв CSS намного предсказуемее.
Для большого интернет-магазина это действительно важно.
Чем больше проект, тем чаще появляется классическая проблема:
!important
потом ещё один !important, затем ещё более специфичный селектор — и через несколько лет никто уже точно не знает, почему определённый элемент выглядит именно так.
Правильная архитектура CSS снижает количество подобных конфликтов.
Для разработки собственной темы это одно из самых полезных изменений Hummingbird.
BEM вместо хаотичных CSS-классов
Hummingbird использует методологию BEM — Block, Element, Modifier.
Она задаёт понятную структуру названий CSS-классов и компонентов.
Вместо большого количества связанных между собой глобальных селекторов интерфейс разбивается на независимые блоки.
Например, карточка товара становится самостоятельным компонентом со своими элементами и состояниями.
Это особенно важно для больших магазинов, где со временем появляются:
-
несколько видов карточек товара;
-
мобильные варианты;
-
быстрый просмотр;
-
разные виды каталога;
-
маркетплейсные элементы интерфейса;
-
персонализированные блоки;
-
рекомендации;
-
дополнительные способы покупки.
Чем крупнее тема, тем сильнее ощущается разница между просто набором CSS и настоящей компонентной архитектурой.
Hummingbird постепенно избавляется от зависимости от jQuery
Classic появилась во времена, когда jQuery практически считался обязательной частью любого крупного сайта.
Сегодня ситуация совершенно другая.
Современный JavaScript позволяет решать большинство задач без дополнительной библиотеки.
В Hummingbird код самой темы больше не требует jQuery.
Это не означает, что PrestaShop полностью удалила jQuery из платформы.
Он по-прежнему может использоваться модулями, которым необходима обратная совместимость.
Но архитектурное направление стало другим.
Новый код постепенно переводится на нативный JavaScript и TypeScript.
Это снижает количество зависимостей и делает фронтенд легче для дальнейшей модернизации.
JavaScript больше не должен зависеть от дизайна
Здесь находится ещё одно интересное архитектурное изменение.
Hummingbird постепенно разделяет:
-
внешний вид элемента;
-
его JavaScript-поведение.
Для взаимодействия JavaScript с интерфейсом используются специальные атрибуты вида:
data-ps-component
data-ps-action
data-ps-target
data-ps-state
Например, JavaScript больше не обязан искать кнопку по CSS-классу, который одновременно отвечает за её внешний вид.
Это правильное разделение ответственности.
Дизайнер может изменить классы или оформление кнопки, не разрушая JavaScript-логику компонента.
Для разработчика собственной темы это означает гораздо большую свободу.
Производительность стала частью архитектуры
Современный интернет-магазин нельзя проектировать только вокруг внешнего вида.
Скорость напрямую влияет на удобство пользователя, конверсию и SEO.
Поэтому в Hummingbird большое внимание уделено загрузке ресурсов и изображений.
В частности, используется lazy loading изображений и сокращается количество ненужных зависимостей.
Но самое важное здесь даже не отдельные оптимизации.
Производительность рассматривается как одно из базовых требований самой темы.
То есть новая архитектура проектируется с расчётом на дальнейшую оптимизацию, а не пытается добавить её поверх старого кода.
Намного серьёзнее стала работа с доступностью
Ещё несколько лет назад accessibility для многих интернет-магазинов воспринималась как дополнительная возможность.
Сегодня это полноценная часть веб-разработки.
Hummingbird создавалась с учётом требований доступности:
-
корректной семантики;
-
навигации с клавиатуры;
-
ARIA;
-
подписей элементов форм;
-
правильной структуры заголовков;
-
доступности меню;
-
доступности элементов оформления заказа.
В Hummingbird 2.0 команда сообщала о соответствии более чем 93% проверяемых требований европейских стандартов доступности.
Для европейского рынка это особенно важно после появления требований European Accessibility Act.
Но даже если магазин работает только в России, правильная семантика делает интерфейс качественнее и обычно положительно влияет на дальнейшую поддержку проекта.
Улучшилась структура шаблонов
Одной из проблем старых тем PrestaShop всегда было большое количество переопределений.
Разработчик хочет немного изменить определённую часть страницы — и иногда вынужден копировать достаточно крупный .tpl целиком.
После этого выходит обновление PrestaShop, исходный шаблон меняется, а переопределённый файл остаётся старым.
Так постепенно появляется технический долг.
В Hummingbird шаблоны серьёзно переработаны и разбиты на более логичные части.
Добавляются дополнительные блоки Smarty и хуки, чтобы разработчику не приходилось копировать огромные куски шаблонов ради небольшой модификации.
Например, в Hummingbird 2.1 действия товара вынесены в отдельный product_actions block, благодаря чему изменить область добавления товара в корзину можно намного аккуратнее.
Это кажется небольшим изменением, но именно из подобных решений складывается тема, которую можно нормально обновлять несколько лет.
Новый подход к модулям
Hummingbird одновременно создаёт и новую проблему.
Огромное количество существующих модулей PrestaShop разрабатывалось вокруг Classic и Bootstrap 4.
Некоторые из них выводят собственную разметку, используют старые Bootstrap-классы или напрямую привязывают JavaScript к определённой структуре DOM.
Поэтому переход всей экосистемы на Hummingbird не может произойти моментально.
PrestaShop даже подготовила отдельные рекомендации по миграции модулей с Bootstrap 4 на Bootstrap 5.
Именно поэтому Classic пока не исчезает.
PrestaShop необходимо дать разработчикам модулей и тем время адаптироваться.
Но направление уже определено: новые разработки должны постепенно ориентироваться на Hummingbird.
Что изменилось в Hummingbird для PrestaShop 9.2
Здесь важно не перепутать версии.
Hummingbird стала стандартной темой в PrestaShop 9.1, где появилась Hummingbird 2.0.
Для ветки PrestaShop 9.2 предназначена Hummingbird 2.1.
Это уже не такой радикальный архитектурный переход, как Hummingbird 2.0.
В 2.1 команда продолжила дорабатывать заложенную архитектуру.
Особенно интересны несколько направлений.
Улучшено оформление заказа
Навигация между шагами checkout была переработана в повторно используемый компонент.
Сами шаги теперь могут формироваться динамически из структуры $checkout_steps, вместо жёстко прописанной разметки.
Для стандартной темы это важное изменение.
Оформление заказа — одна из областей, которую чаще всего приходится модифицировать разработчикам интернет-магазинов.
Чем более компонентной становится эта часть PrestaShop, тем проще будет создавать:
-
альтернативный checkout;
-
одностраничное оформление;
-
дополнительные шаги;
-
собственную логику доставки;
-
интеграции с внешними сервисами.
И это особенно интересно на фоне появления в PrestaShop 9.2 собственного модуля One Page Checkout.
Продолжилась работа над SEO и JSON-LD
В Hummingbird 2.1 улучшена работа со структурированными данными.
Когда данные доступны на стороне сервера, JSON-LD генерируется непосредственно сервером с более безопасным кодированием.
Также улучшена структурированная информация для списков товаров.
Для интернет-магазина структурированные данные имеют большое значение: они позволяют поисковой системе лучше понимать товары, цены и структуру каталога.
Это хороший пример изменения, которое покупатель визуально вообще не увидит, но качество платформы от него становится выше.
Стало проще создавать дочерние и коммерческие темы
В Hummingbird 2.1 появились дополнительные Smarty-блоки в breadcrumb и других элементах.
Продолжается дробление крупных частей интерфейса на небольшие расширяемые компоненты.
Это правильное направление для PrestaShop.
Хорошая базовая тема не должна заставлять разработчика переписывать её.
Она должна позволять разработчику расширять её.
Именно эту модель Hummingbird постепенно реализует.
Продолжается удаление старого JavaScript
В версии 2.1 ещё несколько компонентов были переведены с jQuery на современные нативные API браузера.
Этот процесс будет продолжаться постепенно, потому что полностью удалить старые зависимости за одну версию невозможно без серьёзного ущерба совместимости.
Но направление хорошо видно:
меньше legacy-зависимостей — больше стандартных возможностей браузера и TypeScript.
Почему Hummingbird особенно интересна для будущих тем PrestaShop
На мой взгляд, главное достоинство Hummingbird заключается не в том, что стандартный магазин стал красивее.
Есть коммерческие темы, которые визуально значительно эффектнее.
Настоящее преимущество заключается в другом.
PrestaShop наконец получила современный фундамент, поверх которого можно строить серьёзный интерфейс интернет-магазина.
Современная тема сегодня должна уметь намного больше, чем тема десять лет назад.
Это уже не просто:
каталог → карточка товара → корзина.
Современный e-commerce постепенно превращается в сложное приложение.
В нём появляются:
-
умные рекомендации;
-
персональные ленты товаров;
-
быстрый поиск;
-
несколько вариантов карточек;
-
динамические фильтры;
-
сложная работа с комбинациями;
-
быстрый checkout;
-
пункты выдачи на карте;
-
мобильные интерфейсы;
-
маркетплейсные механики;
-
персонализация;
-
элементы B2B;
-
динамическая загрузка контента.
Строить всё это поверх архитектуры, которая создавалась для другого поколения интернет-магазинов, становится всё сложнее.
Hummingbird решает именно эту проблему.
А что происходит с самой PrestaShop 9.2
На момент написания статьи PrestaShop 9.2 ещё находится в стадии предварительного релиза, поэтому устанавливать её в рабочий магазин пока рано.
Но направление развития уже хорошо видно.
В 9.2 появляется несколько крупных изменений.
Одно из самых интересных для разработчиков — Extra Properties.
Раньше, если модулю требовалось добавить собственное поле к товару, комбинации, клиенту или заказу, разработчику часто приходилось создавать отдельную таблицу, самостоятельно реализовывать связь и писать сохранение данных.
Extra Properties создаёт для этого стандартный механизм непосредственно внутри PrestaShop.
Это очень важное архитектурное изменение.
Модулям становится проще корректно расширять сущности платформы, не создавая каждый раз собственную инфраструктуру.
Также продолжается модернизация административной части и перенос оставшихся legacy-компонентов на современную архитектуру Symfony.
Отдельно развивается новая система отправлений, позволяющая постепенно уходить от старого ограничения, когда логика заказа была слишком тесно связана с одним перевозчиком.
Появился собственный One Page Checkout.
Добавлен Ask AI для административной панели.
То есть изменения Hummingbird нельзя рассматривать отдельно от самой платформы.
Во Front Office PrestaShop постепенно создаёт современную компонентную архитектуру.
В Core — инструменты для более правильного расширения платформы.
В Back Office — продолжается уход от legacy-кода.
Вместе это постепенно формирует PrestaShop следующего поколения.
Почему это хорошая основа для дальнейшего развития
У PrestaShop есть огромное преимущество и одновременно огромная сложность — многолетняя экосистема.
Нельзя просто выбросить всё старое и начать платформу заново.
Тысячи магазинов используют существующие темы, модули и интеграции.
Поэтому модернизация происходит постепенно.
Сначала появилась новая архитектура Symfony в административной части.
Затем новый API.
Теперь Hummingbird становится новой основой Front Office.
Появляются Extra Properties.
Развивается новая логика доставки.
Старые зависимости постепенно заменяются современными технологиями.
И именно такой подход выглядит наиболее реалистичным для open-source платформы масштаба PrestaShop.
Не переписать всё за один релиз, сломав половину экосистемы, а постепенно заменить устаревшие части современными архитектурными решениями.
Classic выполнила свою задачу. Теперь начинается эпоха Hummingbird
Classic нельзя назвать плохой темой.
Наоборот — она оказалась удивительно живучей и стала основой огромного количества магазинов.
Но технологии меняются.
То, что было хорошей архитектурой несколько лет назад, не обязательно должно оставаться ею навсегда.
Hummingbird — это не просто новый внешний вид стандартного магазина.
Это переход PrestaShop к другой модели разработки фронтенда:
Bootstrap 5, BEM, структурированный SCSS, CSS Layers, TypeScript, отказ от обязательного jQuery, компонентные шаблоны, современная доступность и более строгая архитектура.
Именно поэтому появление Hummingbird намного важнее очередного изменения дизайна стандартного шаблона.
Для разработчиков тем это новая отправная точка.
Для разработчиков модулей — необходимость постепенно адаптироваться к новой архитектуре.
А для владельцев магазинов — возможность строить проекты, которые будет проще развивать и поддерживать в следующие несколько лет.
На Ewonta Маркет новые темы и модули постепенно будут ориентироваться именно на современную архитектуру PrestaShop 9 и Hummingbird. Это позволяет не просто менять внешний вид магазина, а создавать интерфейсы, рассчитанные на дальнейшее развитие e-commerce.
