Задача
Бренд продаёт не футболку, а графику и посадку, и витрина должна была это показывать: полноэкранные обложки коллекций, нестандартная сетка, крупная типографика, собственная навигация. Стандартная тема Magento такого не даёт, а переделка её шаблонов быстро превращается в борьбу с платформой.
Второе требование конфликтовало с первым. Модная витрина — это тяжёлая студийная и модельная съёмка, а покупатель приходит с телефона по мобильному интернету, в том числе в Пакистане, где связь неровная. Красивая страница, которая грузится десять секунд, для этой аудитории не работает.
Третье требование — международная торговля. Один бренд продаёт в Персидский залив, Европу, Британию, Канаду и Австралию: у каждого рынка своя валюта, свои цены, свои привычные способы оплаты и доставки, свои юридические условия. При этом покупатель не должен выбирать страну из длинного списка — он должен попадать на свою витрину сам.
Решение
Разделение бэкенда и витрины. Magento 2.3 отвечает за каталог, атрибуты, цены, склад, заказы, клиентов, налоги, правила доставки и админку для контент-менеджеров. Каталог выгружается в Elasticsearch, и витрина читает товары, категории, атрибуты и налоговые правила из индекса, а не из базы Magento — именно это даёт скорость выдачи. Между витриной и платформой стоит Node.js API-слой: он отдаёт каталог из индекса, проксирует корзину, заказы, аккаунты и оплату в Magento и обрабатывает изображения, отдавая их в размере под конкретный экран.
Собственное расширение API. В API добавлены операции, которых не было в базовой платформе: определение рынка покупателя по геолокации и расчёт доступных способов доставки по почтовому индексу.
Тема. Витрина написана с нуля и покрывает весь сценарий покупки: главная с полноэкранными обложками коллекций, каталог, страница коллекции, карточка изделия, лукбук, подборка статемент-футболок, корзина, оформление, личный кабинет, сравнение, контентные страницы, которые редактируются в Magento. Визуальный язык выдержан жёстко: чёрное и белое, без полутонов в интерфейсе, всё цветовое пятно отдано фотографии и графике на изделиях. Полноэкранное меню открывается поверх контента крупной типографикой; в карточке описание вынесено влево, фотография занимает центр, коммерческий блок с выбором и ценой прижат вправо. Контроль соответствия вёрстки макетам вплоть до пикселя был главным акцентом проекта.
Три оси выбора. Изделие описывается цветом, размером и кроем. Крой — не стандартный атрибут для магазина футболок, и он здесь потому, что бренд продаёт посадку как отдельную ценность. Каждое сочетание осей — отдельный артикул со своим наличием и своими фотографиями: витрина показывает родительскую модель, а в корзину уходит конкретный артикул.
Составной селектор каталога. Каталог раскладывается в двух измерениях одновременно — по назначению (унисекс, для него, для неё, футболки, худи, свитшоты, аксессуары) и по коллекциям («Street Art», «Statement», «Original», «Limited», сезонные линейки). Селектор в духе «You're looking for … in …» позволяет пересечь оба измерения одним действием вместо проваливания по дереву категорий.
Семь витрин. Международная и шесть локальных: ОАЭ, Пакистан, Австралия, Канада, ЕС и Великобритания. Для каждой настраиваются язык и контент, валюта и цены, налоговые правила, доступные способы оплаты и доставки, юридические страницы. Рынок определяется по геолокации, и при первом заходе покупатель видит экран, где система сообщает, куда его определила, и предлагает либо остаться на международной версии, либо переключиться на свою страну.
Платёжный контур. PayPal, CyberSource Secure Acceptance, 2Checkout и оплата при получении для рынков, где это привычный сценарий. Для карточной оплаты используется схема с вынесенной формой: реквизиты карты не проходят через сервера магазина. Под каждого провайдера сделаны отдельные модули и на стороне API, и на стороне витрины.
Доставка. Кроме курьерской работают пункты выдачи — покупатель выбирает точку на карте прямо при оформлении заказа.
Скорость. Серверный рендеринг первой страницы даёт мгновенный контент и индексацию поисковиками, дальнейшая навигация идёт без перезагрузки, service worker кеширует оболочку приложения и просмотренные товары, изображения отдаются под конкретный экран, ответы витрины кешируются на сервере, а для мобильной выдачи поддерживается AMP-версия страниц.
Результат
Бренд получил витрину, свободную от шаблонов платформы: полноэкранные обложки, собственная навигация и журнальная подача — при полноценном e-commerce с учётом, международными заказами и логистикой за спиной.
Контент-менеджер продолжает работать в привычной админке Magento — контентные страницы и промо-блоки редактируются там и подтягиваются в витрину, код трогать не нужно. Маркетинговый контур собран из подписки через Mailchimp и штатный механизм Magento, промо-блоков, блога бренда и связки с социальными сетями, а аналитика — из Google Analytics с событиями электронной торговли и Hotjar с записями поведения и тепловыми картами.
Покупатель на любом из шести локальных рынков видит свою валюту, свои цены и свои способы оплаты, не выбирая страну вручную, а магазин остаётся быстрым на телефоне при неровной связи.
