Разработка интернет‑магазина морепродуктов
Omore — интернет-магазин морепродуктов в премиальном сегменте. Сайт сочетает каталог WooCommerce, заявочную корзину и контент, который заказчик может собирать в редакторе WordPress без правок кода.
Заказчик передал брендбук с фирменными цветами, паттернами, типографикой и гайдлайнами. На его основе я собрал UI в Figma: тёмная высококонтрастная палитра, золотые акценты, атмосферная food-фотография, чередование плотных сеток и «воздушных» секций. Для заголовков — Tenor Sans, для основного текста и UI — Montserrat. Ключевые цвета: фон #191919, карточки #2A2A2A, акцент #C9A962, вторичный акцент #7EB8AF, текст на тёмном фоне #E7E7E7.
Визуальные элементы бренда перенесены в интерфейс: волновой разделитель под шапкой, повторяющийся паттерн в футере, золотые декоративные линии между секциями, настраиваемые тайловые паттерны в CTA-баннерах.
Подход к разработке строился на связке «дизайн → токены → код». Цвета и шрифты зафиксированы в theme.json и продублированы CSS-алиасами. Главная страница — оболочка из header и footer, а все секции собираются кастомными блоками в Site Editor. Стили — utility-first на Tailwind CSS v4 через WindPress; отдельный CSS только там, где это требуют сторонние библиотеки (Swiper, Yandex Maps, GSAP).
Технически проект — дочерняя block-тема WordPress 6.x (FSE) на базе Twenty Twenty-Five с WooCommerce, ACF Pro и набором из 15 кастомных блоков в категории «Seafood Market». Шаблоны покрывают главную, каталог, карточку товара, архивы категорий и тегов, корзину. Header и footer — переиспользуемые template parts.
Среди ключевых блоков: hero-слайдер со Swiper и сайдбаром, горизонтальная лента товаров на базе WooCommerce Product Collection, сетка категорий с ритмом 3→2, нумерованные преимущества, блоки о бренде и поставщиках, доставка и оплата, CTA-баннеры с паттернами, форма обратной связи, карта контактов на Yandex Maps со стилизацией под тёмную палитру сайта. Переиспользуемые компоненты — заголовки секций, декоративные линии, info-карточки — вынесены в PHP-хелперы, чтобы не дублировать разметку.
Вместо стандартного онлайн-чекаута реализована заявочная модель: пользователь наполняет корзину, заполняет форму, REST API omore/v1/cart-checkout собирает состав корзины на сервере и отправляет заявку в Email и/или Telegram. Формы Contact Form 7 дублируются в тот же Telegram-канал. Кнопка оформления заказа скрыта, прямой доступ к /checkout перенаправляется на корзину.
Стек: WordPress FSE, WooCommerce block templates, ACF Pro, Tailwind CSS v4 (WindPress), GSAP + ScrollTrigger для scroll-анимаций, Swiper для слайдеров, Yandex Maps JS API, Contact Form 7. Анимации подключаются декларативно через CSS-классы без правок PHP на каждую секцию.
Итог — сайт, который визуально соответствует брендбуку, удобен для редактора контента и заточен под обработку заказов менеджером, а не через платёжный шлюз. Архитектура и workflow задокументированы в репозитории для сопровождения без регрессий.
Спасибо за просмотр!