Секции страницы товара (PDP)

Шаблон товара Vertex построен для технических каталогов — покупателей, которым важны номера деталей, спецификации, datasheet-ы, MOQ, case-pack-и и объёмное ценообразование. Каждый B2B-элемент (объёмные уровни, цены только после входа, правила количества, карточка торгового представителя, ships-from, бейдж условий NET) отрисовывается прямо на PDP без единого приложения-компаньона.

Один шаблон, два состояния клиента

Тот же шаблон product.json отрисовывается для гостей и вошедших B2B-покупателей. Цены, бейджи, правила количества и карточка торгового представителя автоматически отражают каталог компании клиента и условия оплаты — вам не нужно «B2B-шаблон товара» и «B2C-шаблон товара» как параллельные файлы.

---

main-product

Файл секции: sections/main-product.liquid

Сама PDP — галерея, заголовок, цена, выбор варианта, ввод количества, ATC и каждая B2B-aware поверхность, сложенные в одну секцию. Каждый блок ниже — это блок секции main-product, который вы можете переставлять в кастомайзере.

Галерея

• Основное изображение с наведением для смены изображения на карточках листинга (требуется 2+ изображения)
• Миниатюры под основным изображением
• Клик для зума (лайтбокс)
• Мобильный: свайпаемая карусель с точками

Заголовок + мета

• Название товара
• Вендор (если показывается)
• Метка Ships-from — на каждый товар метаполе vertex.ships_from или дефолт уровня темы
• Линия MPN — когда vertex.mpn установлен, выводит «MPN: 1N4148» под заголовком

Блок цены

Поверхность ценообразования по умолчанию B2B-aware:

• Уровни объёмного ценообразования — сервер-рендеринг из quantity_price_breaks Shopify. Покупатели видят «1–9: $4.50 · 10–49: $4.10 · 50+: $3.80» встроенно. Автоматически отрисовывается, когда у варианта quantity_price_breaks_count > 0.
• Цены только после входа — когда настройка темы Hide prices until customer logs in включена, цены заменяются на «Войдите, чтобы увидеть цены» + ссылку входа для гостей.
• B2B compare-at цена — зачёркнутый вывод, когда цена каталога B2B ниже цены витрины.

Выбор варианта

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

Ввод количества

Правила количества применяются как на стороне клиента, так и на стороне сервера:

Правило	Поведение
MOQ (минимум)	Нельзя уменьшить ниже MOQ. Встроенное сообщение: «Минимальный заказ: 12».
Максимум	Нельзя увеличить выше максимума. Встроенное сообщение: «Максимум: 144».
Инкремент case-pack	Шагает по размеру case-pack-а. Ручной ввод округляется вверх до следующего валидного значения с маленьким toast-уведомлением.

Покупатели, прикреплённые к каталогу B2B, получают корпоративно-специфичные правила количества; гости — правила витрины. Оба исходят из нативного API Shopify — Vertex только их отрисовывает.

Add to cart + Buy it now

• Add to cart — стандартный ATC, неактивен при отсутствии в наличии, если не включён pre-order
• Buy it now — кнопки ускоренного оформления Shopify (Shop Pay, Apple Pay, Google Pay, PayPal). Опционально через Shopify Settings.
• Pre-order — когда вариант доступен под заказ, заменяет «Sold out» на «Pre-order» (использует нативное отслеживание запасов Shopify)

Карточка торгового представителя

Для вошедших B2B-покупателей карточка торгового представителя выводится на PDP, показывая назначенного представителя компании:

• Имя (из vertex.rep_name)
• Email (из vertex.rep_email, как mailto:-ссылка)
• Телефон (из vertex.rep_phone, как tel:-ссылка)

Отрисовывается, только когда заполнено хотя бы одно поле rep и клиент — customer.b2b?.

Хлебные крошки

Автоматически генерируются из основной коллекции товара. Испускают BreadcrumbList JSON-LD.

Блок таблицы тех. характеристик

Блок tech-specs — отрисовывает чистую 2-колоночную таблицу характеристик из списочного метаполя vertex.tech_specs. Используйте для размеров, веса, материала, напряжения, ёмкости, сертификатов.

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

Блок документов и загрузок

Блок documents — отрисовывает список загрузок PDF из метаполей товара:

• Datasheet (vertex.datasheet)
• MSDS (vertex.msds)
• Брошюра (vertex.brochure)
• Технический лист (vertex.tech_sheet)
• Руководство по установке (vertex.install_guide)
• Гарантийный талон (vertex.warranty)

Автоматически скрывается на товаре, если документы не прикреплены.

Раскрытие истории цен

Блок price-history — складная секция «История цен», которая читает из метаполя vertex.price_history (список записей дата+цена). Полезно для промышленных покупателей, отслеживающих рыночные тренды.

Счётчик остатков (индикатор низкого запаса)

Блок stock-counter — на каждый вариант urgency-сигнал. Он появляется только для вариантов, по которым вы отслеживаете запасы, и переключается на предупреждение «Осталось только N», как только запас опускается до порога низкого остатка (10 единиц). Порог жёстко задан на 10 — это не настройка темы. Поощряет действие, не раскрывая точный инвентарь конкурентам.

Отрисовывает одно из состояний:

• В достатке (больше 10): «В наличии»
• При остатке 10 или ниже: «Осталось только 4»
• Доступно под заказ (ноль, но настроено на продолжение продаж): «Back-ordered — ships in 7–10 days»
• Распродано (ноль, не под заказ): «Sold out»

B2B цены только после входа

Когда Hide prices until customer logs in включено, весь блок цены (включая объёмные уровни и compare-at) заменяется на подсказку «Войдите, чтобы увидеть цены» для гостей. Правила количества, счётчик остатков и карточка торгового представителя по-прежнему отображаются, чтобы покупатели могли решить, стоит ли товар входа в систему.

---

product-tabs

Файл секции: sections/product-tabs.liquid

Блок секции, разделяющий контент PDP по табам. Поместите эту секцию под main-product в вашем шаблоне product.json, чтобы уменьшить визуальный беспорядок на товарах с длинными спецификациями.

Настройки блока на таб: заголовок, контент (richtext / файл / видео).

Распространённые паттерны табов:

• Description — основной маркетинговый текст
• Specs — расширенные технические спецификации сверх таблицы тех. характеристик
• Datasheet — встроенный PDF-вьюер
• Shipping & Returns — логистическая информация
• Video — встроенные YouTube / Vimeo

Табы используют нативные <details> + <summary> для полной клавиатурной доступности. Первый таб открыт по умолчанию; открытие другого автоматически закрывает остальные (режим аккордеона) или остаётся открытым (режим переключателя) в зависимости от настройки секции Allow multiple open.

---

related-products

Файл секции: sections/related-products.liquid

Полоса рекомендаций под PDP. Подтягивает товары из той же коллекции или с тем же тегом.

Настройки:

Настройка	Заметки
Heading	Например, «Клиенты также смотрели» или «Вам также может понравиться».
Source	same_collection (по умолчанию) · same_tag · manual.
Max products	4 (по умолчанию) / 6 / 8 / 12.
Show price	Переключатель. Учитывает правила цен только после входа.
Show vendor	Переключатель.

Для покупателей каталога B2B выводятся только товары в каталоге покупателя (нативная фильтрация Shopify — Vertex уважает это сквозным образом).

---

recently-viewed

Файл секции: sections/recently-viewed.liquid

Товары, отслеживаемые через localStorage (до 12 на покупателя). Выводится на PDP внизу и может быть размещена на главной странице как полоса.

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

• Каждый просмотр товара добавляется в ключ localStorage vertex_recently_viewed (FIFO, ограничено 12)
• Секция читает этот ключ на стороне клиента и подтягивает разметку карточки для каждого товара
• Очищается, когда покупатель очищает данные сайта в браузере — это не вишлист, не сохраняется в Shopify

Настройки

• Heading — «Недавно просмотренные»
• Max products — 4 / 6 / 8 / 12
• Hide if empty — переключатель, по умолчанию включён (вся секция исчезает, когда у покупателя нет истории просмотров)

Почему localStorage, а не вишлист

Персистентный вишлист требует приложения Shopify — Vertex остаётся соответствующим политике Theme Store, удерживая recently-viewed строго в рамках сессии/браузера. Сравнение — тот же паттерн (см. Секции только для B2B).

---

sticky-cart

Файл секции: sections/sticky-cart.liquid

Только для мобильных липкая полоса ATC, появляющаяся после того, как покупатель прокрутил мимо основного ATC. Держит «добавить в корзину» в одно касание, даже когда они глубоко в таблице характеристик.

Что отрисовывается

• Миниатюра изображения товара (слева)
• Заголовок выбранного варианта + цена
• Ввод количества
• Кнопка ATC (справа)

Настройки

• Show on mobile only — по умолчанию включено (у десктопа есть липкий хедер для навигации; мобильные получают больше прироста конверсии от sticky ATC)
• Show variant title — переключатель
• Color scheme

Секция использует IntersectionObserver на основном ATC — она отрисовывается только когда основной ATC прокручивается за пределы viewport-а, и исчезает, когда прокручивается обратно во viewport.

---

Шпаргалка по B2B-взаимодействиям

Поверхность	Гость	Вошедший B2C	Вошедший B2B
Блок цены	Скрыт, если включено «Hide prices until customer logs in»	Цена витрины	Цена каталога B2B + объёмные уровни
Уровни объёмного ценообразования	Скрыты	Скрыты	Видны (сервер-рендеринг)
Правила количества	MOQ/max витрины	MOQ/max витрины	MOQ/max каталога компании
Карточка торгового представителя	Скрыта	Скрыта	Видна (когда поля rep заполнены)
Бейдж условий NET	Скрыт	Скрыт	Виден в панели приветствия (не на PDP)
Pre-order ATC	Виден при включении	Виден при включении	Виден при включении
Счётчик остатков	Виден	Виден	Виден
Recently viewed	Виден (localStorage)	Виден (localStorage)	Виден (localStorage)

---

Что дальше

• Секции только для B2B → — Массовый заказ, RFQ, сравнение, B2B-промо фич
• Секции sales boost → — Счётчик остатков, быстрый просмотр
• Хедер, футер и оформление → — Хедер, футер, B2B-панель приветствия
• Руководство по настройке B2B → — Включите B2B + заполните метаполя торгового представителя
• Руководство по настройке метаполей → — Datasheet-ы, MPN, ships-from, тех. характеристики