Пересборка PDP компрессионного товара без пересборки движка вариантов Dawn

Компрессионный трикотаж выбирать сложнее, чем обычную одежду. На одной странице товара сходятся сразу два очень разных типа выбора, и только один из них должен менять то, что попадает в корзину. Вот как страница товара Absolute Support сохранила собственный, учитывающий компрессию интерфейс поверх собственного поведения Shopify (вариант, цена, URL, product-form и корзина), не создавая вторую коммерческую систему, которая борется с первой.

Это один из трёх подробных разборов из кейса Absolute Support. Он идёт рядом с разбором про фильтрацию и разбором про редактируемые продавцом секции.

Задача, в одном абзаце

Absolute Support продаёт компрессионные носки, рукава и чулочно-носочные изделия. Покупка одного изделия означает, что нужно решить сразу несколько вопросов: уровень компрессии (измеряется в mmHg), размер, тип изделия, посадку по полу и число пар в упаковке. Именно уровень компрессии несёт клинический вес, и ошибиться в нём проще всего. Если он стоит в том же выпадающем списке, что и цвет, покупатель может выбрать «от 20 до 30 mmHg» так же, как выбирает тёмно-синий вместо чёрного, не осознавая, что означает это число. Страница должна была ясно показать это различие и должна была обучать, не притворяясь, что даёт медицинский совет.

Ограничения

Несколько границ определили все последующие решения.

• Состояние покупки принадлежит Shopify. Выбор варианта, цена, URL товара, форма добавления в корзину и сама корзина относятся к поведению платформы. Их повторная реализация оборачивается тонкими и дорогими багами ровно там, где магазин зарабатывает деньги.
• Тема: Dawn. В Dawn уже есть протестированная система вариантов. Задача была в пиксельно точном собственном интерфейсе, а не в новом коммерческом рантайме.
• Здесь компрессия не является покупаемой опцией. В этом каталоге каждый товар представляет один клинический уровень. Уровень является свойством товара, а не переключателем, который включает покупатель.
• Тексты, близкие к медицинским, требуют осторожности. Пояснения могут описывать и сравнивать. Они не должны ставить диагноз, обещать результат или указывать, какой уровень лечит конкретное состояние.

Решение: два вида данных о товаре

Ключевой ход был в том, чтобы отделить данные, которые описывают товар, от данных, которые меняют то, что вы покупаете.

Compression level        Color · Size · Pack
(product attribute)      (Shopify variants)
      |                        |
      v                        v
  tier display             variant ID
  comparison view          price
  educational context      product URL
      |                        |
      v                        v
 describes the product    changes the cart

Легенда:

1. Уровень компрессии является атрибутом товара. Он управляет отображением ступени, экраном сравнения и обучающим контекстом. Он никогда не меняет корзину.
2. Цвет, размер и упаковка являются вариантами Shopify. Каждая комбинация разрешается в вариант со своим ID, ценой и URL, и именно это получает корзина.

В одну строку: уровень компрессии говорит, чем товар является; цвет, размер и упаковка говорят, какую именно конфигурацию вы покупаете. Короткая заметка для тех, кто впервые сталкивается с Shopify: «вариант» обозначает конкретную покупаемую комбинацию опций, и именно эту единицу Shopify оценивает по цене, ссылается на неё и добавляет в корзину.

Почему Dawn остался источником истины

Собственные элементы управления отвечают только за представление. В тот момент, когда покупатель меняет один из них, работа передаётся Dawn.

Custom selectors          (authored presentation)
  color · size · pack
        |
        v
Dawn variant state        (native)
        |
        v
Selected variant          (native)
  price · product URL · product form
        |
        v
Cart                      (native commerce output)

На телефоне это читается сверху вниз, и именно так это выкладывает браузер. Здесь нет никакого параллельного хранилища состояния. Собственный слой задаёт значения; Dawn решает, что эти значения означают. Единый источник истины и есть весь смысл: когда две системы отслеживают «выбранный вариант», страница в итоге показывает одну цену, а списывает другую.

Разбор реализации

Деталь, благодаря которой это работает: собственные элементы управления не подключены к самодельной логике. Они передают данные в те же inputs, которые Dawn уже читает.

Собственные элементы управления соответствуют нативным опциям один к одному. Каждый образец цвета, кнопка размера и опция упаковки соответствует опции товара, которую понимает Dawn. Выбор одного из них записывает выбор покупателя в нативные option inputs, а не в приватную переменную.

Dawn разрешает и перерисовывает. Собственный элемент variant-selects в Dawn читает эти inputs, находит подходящий вариант и перерисовывает информацию о товаре с сервера. Поскольку этот шаг принадлежит Dawn, цена и текст «вы экономите» обновляются сами.

Собственная цена находится внутри перерисовываемой области. Разметка собственной цены и экономии размещена внутри той части страницы, которую Dawn перерисовывает при смене варианта. Поэтому она обновляется вместе с вариантом автоматически, без отдельного скрипта, следящего за ценой, и без второй копии числа, которую надо синхронизировать.

Экономия на упаковках берётся из реальных цен вариантов. Для упаковок с несколькими парами шаблон сравнивает каждую упаковку с ценой за пару у одиночного варианта и показывает фактическую разницу. Скидка выводится из актуальных цен, а не вписана в дизайн.

URL и корзина остаются нативными. URL товара обновляется до выбранного варианта, а форма добавления в корзину отправляет этот вариант. И то и другое остаётся стандартным поведением Dawn. Ссылка, которой поделились, снова открывается на том же варианте.

Один набор элементов управления. Нет продублированного блока выбора «мобильный против десктопа». Те же элементы управления переоформлены адаптивно, поэтому второй, устаревшей копии выбора покупателя никогда не возникает.

Интерфейс сравнения компрессии

Уровень компрессии обрабатывается целиком на описательной стороне.

• Страница читает уровень компрессии товара из его данных и показывает соответствующую ступень.
• Покупатель может открыть экран сравнения, где ступени выложены рядом: Mild (от 8 до 15 mmHg), Moderate (от 15 до 20), Firm (от 20 до 30) и Extra Firm (от 30 до 40), каждая с понятной заметкой о типичном применении.
• Экран включает призыв проконсультироваться с медицинским специалистом.

Этот интерфейс сравнивает и объясняет. Он не ставит диагноз и не говорит, какой уровень покупать при том или ином состоянии. Эта граница проведена намеренно, и это в равной мере правило контента и правило кода.

Что осталось нативным

Я переоформил buy box. Я не форкал его поведение. Вот что осталось за Shopify и Dawn:

• Product form и добавление в корзину
• Выбор варианта и состояние
• Цена и compare-at цена
• URL товара
• Корзина и выдвижная панель корзины
• Checkout

Проверка

Проверить я могу реализацию, а не бизнес-результат.

• Уровень компрессии смоделирован как данные о товаре, отдельно от вариантов.
• Собственные элементы управления обновляют нативное состояние варианта в Dawn.
• Цена, URL товара, product form и корзина остаются согласованными с выбранным вариантом.
• Ценообразование упаковок выводится из реальных цен вариантов.
• Источником истины для состояния покупки остаётся Shopify.

Я не делаю никаких заявлений о конверсии, возвратах или каком-либо влиянии на здоровье, и ничто из этого не следовало бы из одной только этой работы.

Компромиссы

• Обновления Dawn требуют сверки. Собственный buy box опирается на контракт вариантов в Dawn, поэтому будущее изменение Dawn в этой области потребует ручной доработки.
• Часть контента сравнения зафиксирована в коде. Части текста о ступенях находятся в шаблоне, а не в редактируемых настройках, поэтому изменение этих формулировок сейчас требует разработчика.
• Модель зависит от стабильных соглашений. Она опирается на единообразный тег компрессии и предсказуемый паттерн упаковок. Данные вне паттерна тихо откатываются к запасному варианту, а не выдают ошибку: это безопасно, но легко не заметить.
• Тексты, близкие к медицинским, требуют контроля. Описательный язык может дрейфовать в сторону советов, поэтому правки этого контента нуждаются в проверке.

Что я улучшил бы дальше

• Перенести оставшийся зафиксированный текст сравнения в редактируемые настройки, чтобы команда могла править формулировки без разработчика.
• Добавить автоматическое тестирование матрицы вариантов по цвету, размеру и упаковке, чтобы изменение данных, ломающее какую-то комбинацию, ловилось рано.
• Задокументировать соглашения по тегу компрессии и упаковкам, на которые опирается модель.
• Завершить проверку клавиатуры и фокуса для экрана сравнения.

Дальше: Собственный UI фильтрации на Shopify Search & Discovery, где та же идея применяется к странице коллекции. Собственный интерфейс сверху, нативный движок снизу.