Задача
Бренд продаёт графику и посадку, и витрина должна была это показывать: полноэкранные обложки коллекций, нестандартная сетка, крупная типографика, собственная навигация. Стандартная тема 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-версия страниц.
Результат
Бренд получил витрину, свободную от шаблонов платформы: полноэкранные обложки, собственная навигация и журнальная подача. За ней работает полноценный интернет-магазин с учётом, международными заказами и логистикой.
Контент-менеджер продолжает работать в привычной админке Magento: редактирует там контентные страницы и промо-блоки, и они подтягиваются в витрину без правок кода. Для маркетинга есть подписка через Mailchimp и штатный механизм Magento, промо-блоки, блог бренда и связка с социальными сетями. Аналитику дают Google Analytics с событиями электронной торговли и Hotjar с записями поведения и тепловыми картами.
Покупатель на любом из шести локальных рынков видит свою валюту, свои цены и свои способы оплаты, не выбирая страну вручную, а магазин остаётся быстрым на телефоне при неровной связи.
