Панель управления аккаунтом клиента — Рабочий процесс, учитывающий B2B

Vertex поставляется с полным набором аккаунтов клиентов, который автоматически адаптируется к тому, кто авторизован. B2B-покупатель из отдела закупок с условиями NET-30 и назначенным торговым представителем видит одну панель управления. Конечный B2C-клиент видит другую. Покупатель с несколькими локациями из отдела расчётов видит третий вариант с переключателем компаний. Всё из одних и тех же файлов темы — никаких приложений, никакого второго семейства шаблонов, никакого пользовательского кода.

Это руководство охватывает каждый экран аккаунта клиента в Vertex, поведение, учитывающее B2B, процесс быстрого повторного заказа, опыт покупателя с несколькими локациями и то, как настроить каждый экран через редактор разделов.

Нативный + учитывающий B2B

Аккаунт клиента Vertex построен на новых аккаунтах клиентов Shopify (размещаемый Shopify, беспарольный опыт, который требуется для B2B) — со стилизацией темы Vertex и разделами, учитывающими B2B, поверх него. Вы получаете отполированность пользовательской темы и гибкость редактирования каждого раздела, как любой другой страницы.

---

Что входит в набор аккаунтов клиентов

Шаблон	Что делает
customers/account.json	Панель управления. Учитывает B2B: показывает информацию о компании + условия оплаты + карточку торгового представителя + быстрый повторный заказ для B2B-покупателей. Показывает список заказов + ссылку на адреса для B2C / клиентов, конвертированных из гостей.
customers/order.json	Просмотр одного заказа. Заголовок заказа (номер, дата, статус, итого), позиции с кнопками «Reorder this item» для каждой строки, кнопка «Reorder all» для всего заказа внизу, адреса доставки + биллинга, статус выполнения.
customers/addresses.json	CRUD адресов. Добавление / редактирование / удаление / установка адреса по умолчанию. Поля, учитывающие страну, с валидацией штата/региона.
customers/login.json	Вход. Email + пароль + «Forgot password?» + CTA «Create account».
customers/register.json	Создание аккаунта. Имя / фамилия, email, пароль. Переключаемый B2B CTA «Apply for trade account», который направляет на страницу RFQ.
customers/activate_account.json	Активация приглашения. Активирует аккаунт клиента, созданный продавцом через админку Shopify.
customers/reset_password.json	Сброс пароля. Двухшаговый (запрос письма для сброса, затем ввод нового пароля).

Каждый шаблон переработан в дизайн-системе Vertex — внутреннее название Vertex для дизайн-токенов, на которых построена остальная витрина: шкала отступов, шкала типографики, шкала радиусов, шкала теней, система кнопок, система полей ввода. Так что аккаунт клиента не ощущается как отдельное приложение — он выглядит и работает точно так же, как и хром витрины.

Аккаунты клиентов, размещаемые Shopify

Это новый опыт аккаунта клиента, размещаемый Shopify, который видят B2B-покупатели — брендированный названием вашего магазина и адресом доставки, со вкладками истории заказов и профиля вверху. Внешний вид идёт напрямую от Shopify, а не от темы Vertex. Карточка торгового представителя и ярлыки быстрого повторного заказа добавляются Vertex поверх.

---

Панель управления, учитывающая B2B

customers/account.json — это центральный элемент. Её раздел определяет статус B2B авторизованного клиента и отображает один из двух макетов.

Логика определения

Раздел панели управления использует Liquid примерно так (упрощённо):

{% if customer.b2b? and customer.current_company %}
  {% render 'account-b2b-dashboard', customer: customer %}
{% else %}
  {% render 'account-b2c-dashboard', customer: customer %}
{% endif %}

Проверяются два сигнала Liquid:

• customer.b2b? — true, когда покупатель авторизован через B2B-аккаунт
• customer.current_company — компания, которую он в данный момент представляет (управляет каталогом, ценообразованием, условиями оплаты, адресом доставки)

Если оба присутствуют, отображается B2B-панель управления. В противном случае отображается B2C-панель управления. Никаких приложений, никакой настройки метаполей, никакого JavaScript-флага — всё определение происходит на стороне сервера и нативно для Shopify.

Макет B2B-панели управления

Для авторизованного B2B-покупателя панель управления показывает:

1. Заголовок приветствия

• Hello, {first_name} — дружелюбное приветствие
• Название компании — берётся из customer.current_company.name
• Бейджи компании — NET-30 / NET-60 / NET-90 (из current_company.payment_terms_template), Tax-exempt (из current_company.tax_exemptions)
• Текущий адрес доставки — краткое резюме текущего выбранного адреса доставки покупателя

2. Карточка торгового представителя (полный вариант)

Если вы заполнили метаполя торгового представителя на каждую компанию (vertex.rep_name / vertex.rep_email / vertex.rep_phone в Customers ▸ Companies ▸ [компания] ▸ Metafields), панель управления отображает полную карточку торгового представителя — больше, чем меньшая плашка в шапке.

Карточка включает:

• Имя представителя (с аватаром-инициалом)
• Email представителя (клик для письма)
• Телефон представителя (клик для звонка)

См. Руководство по настройке метаполей для заполнения.

Торговый представитель на компанию

Карточка торгового представителя использует данные представителя, которые вы заполняете для каждой компании. Все покупатели, привязанные к одной и той же компании, видят одного и того же представителя.

3. Список быстрого повторного заказа

Самая любимая B2B-функция. Показывает последние 5 заказов покупателя с:

• Номером заказа + датой
• Итого + количеством позиций
• Кнопкой Reorder all (один клик — добавляет каждую позицию обратно в корзину по текущим ценам)
• Бейджем статуса заказа (Fulfilled / Partial / Unfulfilled / Cancelled)
• Ссылкой на полный просмотр одного заказа

Это управляется assets/b2b-quick-reorder.js — ванильный JS, без фреймворка, без приложения. Кнопка делает POST каждой позиции в /cart/add.js последовательно, проверяет соответствие каталогу покупателя (пропускает позиции, которые больше не назначены), затем обновляет дровер корзины или перенаправляет на /cart.

Снятые с производства или удалённые из каталога товары

Если позиция из исходного заказа больше не находится в каталоге покупателя, скрипт повторного заказа пропускает её и показывает небольшое уведомление: «2 позиции из заказа #1234 больше не доступны и были пропущены.» Покупатели всё ещё могут просмотреть корзину перед оформлением заказа.

4. Сетка быстрых ссылок

Сетка канонических B2B-действий с аккаунтом:

• All orders — полная история заказов
• Addresses — управление адресами доставки
• Bulk order — ссылка на /pages/bulk-order (paste-to-cart)
• Request a quote — ссылка на /pages/rfq
• Catalog — ссылка на каталог витрины, отфильтрованный по их каталогу B2B

5. Недавняя активность

Сжатая хронология последних 10 действий покупателя:

• Размещённые заказы
• Добавленные / обновлённые адреса
• Отправленные запросы на цитату (если вы подключаете отправки формы RFQ к записи клиента через Shopify Flow или вебхуки)

Макет B2C-панели управления

Для не-B2B клиента панель управления проще:

• Заголовок приветствия (без информации о компании, без бейджа условий оплаты)
• Список заказов (полная пагинация)
• Карточка адреса по умолчанию со ссылками для редактирования/управления
• Без карточки торгового представителя (B2C-клиентам не назначается представитель)
• Без списка быстрого повторного заказа (одна кнопка CTA «View orders» — покупатели делают повторный заказ из просмотра одного заказа)

B2C-панель управления специально создана быть быстрой и не загромождённой — большинству B2C-клиентов нужно проверить статус заказа, а не взаимодействовать с хромом компании.

---

Процесс быстрого повторного заказа

Быстрый повторный заказ разделён между двумя поверхностями:

Поверхность 1 — Список последних 5 заказов на панели управления

(Описано выше.) Один клик «Reorder all» на заказ, отображаются 5 самых недавних. Покупатели, которые еженедельно повторяют один и тот же набор, обожают это — это два клика от входа до полностью загруженной корзины.

Поверхность 2 — Просмотр одного заказа (customers/order.json)

Для старых заказов или для повторного заказа только подмножества позиций просмотр одного заказа предоставляет:

• Кнопку «Reorder this item» для каждой строки на каждой позиции — добавляет один вариант в исходном количестве
• Поле ввода количества для каждой строки, чтобы покупатель мог изменить количество перед добавлением (по умолчанию — исходное количество заказа)
• Кнопку «Reorder all items» для всего заказа внизу — добавляет каждую позицию в исходном количестве

Это тот же шаблон, что и «Reorder all» на панели управления — тот же assets/b2b-quick-reorder.js, та же валидация каталога, то же уведомление о пропущенных позициях. Просто с большей детализацией.

Как работает JS

assets/b2b-quick-reorder.js — это один самодостаточный модуль, который:

1. Читает ID заказа из data-order-id кнопки
2. Получает позиции заказа через эндпоинт Shopify /cart/add.js (POST пакетно)
3. Отслеживает пропущенные варианты (удалённые из каталога / отсутствующие на складе / снятые с производства)
4. Показывает toast-уведомление: «Добавлено 12 позиций в корзину. 2 позиции пропущены.»
5. Перенаправляет на /cart или открывает дровер корзины (в зависимости от настройки темы)

Здесь нет стороннего приложения, нет прокси-приложения и нет зависимости от app-блоков. Весь процесс — нативный Shopify плюс ванильный JS.

Повторный заказ использует текущее ценообразование

Повторные заказы используют ту цену каталога, которую покупатель имеет в данный момент, — а не историческую цену заказа. Это важно для B2B: контрактные цены меняются, и повторный заказ по старой цене вступал бы в конфликт с новым каталогом. Если покупателю нужно сохранить старую цену, ему следует связаться со своим торговым представителем и подать запрос на цитату (RFQ).

---

Покупатели с несколькими локациями

Некоторые B2B-покупатели привязаны к нескольким компаниям (например, корпоративный менеджер по расчётам, который размещает заказы для 5 дочерних компаний). Для таких покупателей Vertex отображает переключатель компаний в футере мобильного дровера.

Определение

{% if customer.company_available_locations.size > 1 %}
  {% render 'company-switcher' %}
{% endif %}

Переключатель отображается только если у покупателя есть доступ к более чем одной локации компании. Покупатели с одной компанией его не видят — чистый UI.

Как работает переключение

Когда покупатель выбирает другую локацию компании:

1. Vertex делает POST на url_to_set_as_current, возвращённый Shopify для этой локации
2. Shopify перезагружает страницу с новой компанией в сессии
3. Каталог, ценообразование, условия оплаты, адрес доставки, статус освобождения от налогов — всё переключается на новую компанию
4. Корзина сохраняется, если совместима; очищается с предупреждением, если нет

Это полностью нативно — никаких приложений, никакого управления состоянием JS, никакой ручной синхронизации. Shopify обрабатывает серверное переключение компании.

Где отображается переключатель

• Десктоп (≥1170px) — в янтарной полосе приветствия B2B (вверху шапки), когда доступна более чем одна компания
• Мобильный + планшет (<1170px) — внизу футера дровера-гамбургера, над пилюлями языка / валюты

Переключатель использует тот же паттерн <details> + пользовательская панель, что и любой другой выпадающий список в Vertex — никаких нативных элементов <select>, полная навигация с клавиатуры, дружественность к AT.

---

Шаблоны входа / регистрации / активации / сброса

Все экраны аутентификации были переработаны в дизайн-системе Vertex. Они разделяют общий визуальный язык:

• Центрированный макет карточки с шрифтом заголовков + шрифтом основного текста витрины
• Логотип + небольшой заголовок вверху карточки
• Форма в одну колонку с полями ввода во всю ширину (зоны нажатия 52 px, кольцо focus-visible, метка сверху)
• Основная кнопка CTA в акцентном цвете витрины
• Вторичные ссылки ниже — «Forgot password?», «Create account», «Already have an account?»
• Футер витрины под карточкой (лёгкий — только юридические ссылки + копирайт)

customers/login.json

• Email + пароль
• Ссылка «Forgot password?» → /account/login#recover
• CTA «Create account» → /account/register
• (Опционально) Вход через социальные провайдеры, если вы включили их в админке Shopify
• (Добавление B2B) — небольшое примечание: «Нужен торговый аккаунт? Запросить доступ →»

customers/register.json

• Имя, фамилия, email, пароль
• CTA «Create account»
• (Добавление B2B) — небольшое примечание: «Существующий торговый клиент? Войти →»

Стандартное поведение Shopify: новые аккаунты проходят через проверку email, прежде чем смогут войти. Новые B2B-аккаунты создаются продавцом через Settings ▸ Customers ▸ Companies — они не регистрируются сами.

customers/activate_account.json

Для клиентов, приглашённых продавцом. Они попадают на эту страницу из письма-приглашения и устанавливают свой пароль.

customers/reset_password.json

Два экрана в одном:

1. Запрос сброса — поле ввода только email + CTA «Send reset link»
2. Установка нового пароля — новый пароль + подтверждение пароля + CTA «Update password» (после клика по ссылке в письме)

---

Настройка через редактор темы

Экраны аккаунта клиента редактируются в редакторе темы, где Vertex предоставляет небольшой набор настроек раздела. Настройка здесь намеренно сфокусирована — структура панели управления фиксирована, и приведённые ниже элементы управления — это те, которые предоставляет Vertex.

Откройте панель управления в редакторе темы

1. Online Store ▸ Themes ▸ Customize
2. В выпадающем списке шаблонов сверху выберите Customers ▸ Account
3. Редактор темы теперь отображает панель управления аккаунтом с разделом Account на боковой панели слева

Раздел Account держит настройку намеренно небольшой — есть ровно две настройки, обе под заголовком Layout раздела:

Настроить	Как
Recent orders to show	Настройки раздела → «Recent orders to show» → управляет тем, сколько недавних заказов отображает список быстрого повторного заказа. Диапазон 3–10, по умолчанию 5.
Show Quick actions card	Настройки раздела → «Show Quick actions card» → включает или отключает карточку быстрых действий (по умолчанию включена).
Видимость карточки торгового представителя	Авто — карточка появляется, когда заполнено метаполе компании vertex.rep_name и покупатель авторизован; она скрывается для B2C-клиентов и в режиме B2C-only. Переключателя на уровне раздела нет.

Содержимое страницы аккаунта контролируется Shopify, а не темой

Панель управления Vertex отображается внутри новых аккаунтов клиентов Shopify. Приветствие, вкладки заказов и профиля, а также общий хром страницы идут напрямую от Shopify — вы редактируете брендинг (название магазина, логотип, цвета) в Settings ▸ Customer accounts в админке Shopify, а не в этом разделе. Две настройки выше — единственные элементы управления на уровне темы, которые Vertex накладывает поверх.

Для просмотра одного заказа (раздел Order) есть одна настройка:

Настроить	Как
Show print invoice link	Настройки раздела → «Show print invoice link» → включает или отключает ссылку печати счёта на странице деталей заказа (по умолчанию включена).

---

Связанное чтение

• Обзор — Почему аккаунт клиента Vertex учитывает B2B
• Установка — Шаблоны аккаунта клиента поставляются включёнными
• Руководство по настройке B2B — Создание компаний, адресов доставки, условий оплаты
• Руководство по настройке метаполей — vertex.rep_name, vertex.rep_email, vertex.rep_phone для карточки торгового представителя
• Руководство по режимам витрины — Как Hybrid / B2B-only / B2C-only взаимодействуют с панелью управления
• Markets & мультивалютность — Как валюта отображается в аккаунте клиента
• Руководство по странице RFQ — CTA «Apply for trade account» на экране регистрации
• Справочник настроек темы — Настройки, связанные с аккаунтом (плашка валюты в панели управления и т.д.)
• FAQ + устранение неполадок — Распространённые вопросы по аккаунту

---

Резюме

• Набор аккаунтов клиентов Vertex учитывает B2B — те же шаблоны, два макета, автоматически определяются на стороне сервера.
• B2B-панель управления показывает информацию о компании, бейдж условий оплаты, полную карточку торгового представителя, последние 5 заказов с быстрым повторным заказом и сетку быстрых ссылок.
• B2C-панель управления специально создана быть быстрой — только заказы + адрес по умолчанию.
• Быстрый повторный заказ работает с панели управления И из просмотра одного заказа, управляется assets/b2b-quick-reorder.js (ванильный, без приложения).
• Покупатели с несколькими компаниями получают переключатель компаний в футере мобильного дровера + полосе приветствия десктопа.
• Шаблоны входа / регистрации / активации / сброса переработаны в дизайн-системе Vertex — визуально согласованы с витриной.
• Раздел Account предоставляет две настройки темы (количество недавних заказов и карточка быстрых действий); раздел Order добавляет переключатель печати счёта.