Zortin — Vol. 2. Развитие B2B-каталога до полноценного интернет-магазина

ZORTIN.RU

Первый этап Zortin был посвящён сложному B2B-каталогу сварочных материалов: подбору продукции, вариациям и техническим характеристикам. Во втором этапе этот фундамент превратился в полноценный интернет-магазин с корзиной, оформлением заказов и доставкой.

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

Перейти на сайт Смотреть Vol. 1 — разработка каталога

Zortin — развитие B2B-каталога до интернет-магазина, Vol. 2

ПроектZortin · Vol. 2

ФорматB2B-каталог → интернет-магазин

ПлатформаWordPress + WooCommerce

РазработкаКорзина, checkout, доставка

Продолжение проекта

От подбора продукции — к оформлению заказа на сайте

На первом этапе мы решили самую сложную задачу каталога: как представить сварочные материалы с разными характеристиками, фасовками и ценами. Все товары и вариации уже хранились в WooCommerce — поэтому для запуска продаж не пришлось переносить ассортимент или заново строить карточки.

Во втором этапе основной задачей стал путь покупателя после выбора товара. Я разработала интерфейсы корзины и оформления заказа, связала их с логикой WooCommerce, добавила сценарии для физических и юридических лиц и проработала способы доставки.

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

Корзина

AJAX + WooCommerce

Корзина для работы с оптовым ассортиментом

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

Добавление конкретной вариации

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

Изменение количества по AJAX

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

Боковая и отдельная корзины

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

Вес, фасовка и стоимость

Для вариативной продукции учитываются вес упаковки, общий вес позиции и цена за килограмм. Количество приводится к правилам продажи упаковками.

Подробная сводка заказа

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

Запрос счёта

Помимо перехода к стандартному оформлению предусмотрен отдельный B2B-сценарий запроса счёта из корзины.

Оформление заказа

Custom checkout

Оформление для физических и юридических лиц

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

Два типа покупателя

Покупатель выбирает физическое или юридическое лицо. Для компании показываются название, ИНН и КПП; для частного покупателя форма остаётся компактной.

Проверка реквизитов и контактов

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

Автоподсказки города

Интеграция DaData помогает выбирать населённый пункт, а связанные данные используются при расчёте доставки и обновлении заказа.

Интерактивный пересчёт

Изменение параметров заказа запускает штатное обновление WooCommerce checkout. В блоке итогов синхронизируются выбранные доставка, оплата и общая сумма.

Управляемая структура экрана

Сводка состава заказа, блок покупателя, доставка и способы оплаты расположены в собственной структуре, адаптированной под дизайн сайта.

Данные попадают в заказ

Информация о типе покупателя и дополнительных полях обрабатывается сервером и используется в заказе WooCommerce.

Оформление заказа Zortin для физических и юридических лиц

Доставка и самовывоз

Логистика внутри checkout

Способы получения зависят от заказа

Для тяжёлых и габаритных товаров недостаточно просто вывести список доставок. Интерфейс учитывает вес заказа, выбранный пункт получения и ограничения службы доставки.

Самовывоз с выбором точки

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

Яндекс Доставка с ПВЗ

Встроен выбор пункта выдачи с учётом данных плагина доставки. Выбранная точка сохраняется между пересчётами checkout.

Ограничение по весу

Для Яндекс Доставки добавлена проверка максимального веса заказа — 40 кг. Если способ не подходит, покупатель видит причину ограничения.

Проверка ограничений ПВЗ

Если сервис возвращает ограничение по габаритам или весу конкретного пункта, интерфейс предлагает выбрать другой ПВЗ вместо некорректного подтверждения доставки.

Транспортная компания

В сценарии доставки предусмотрена отправка через транспортную компанию: выбранный способ отображается в оформлении и сводке заказа.

Информация о получении в заказе

Выбранный пункт сохраняется в метаданных заказа и выводится в письмах, на странице заказа и в административной части WooCommerce.

Особенности B2B

Магазин учитывает, как реально закупают сварочные материалы

Второй этап не сводится к установке стандартной корзины. Работа с фасовкой, весом и документами компании влияет на расчёты, интерфейс и создание заказа.

Продажа упаковками

Количество товара приводится к допустимым значениям с учётом упаковки. Покупатель управляет нужным объёмом заказа в понятных единицах.

Цена за упаковку и за килограмм

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

Итоговый вес всего заказа

Общий вес собирается из вариаций и количества товара и используется не только в сводке покупателя, но и в логике доступности доставки.

Два коммерческих сценария

Можно перейти к полноценному оформлению с выбором способа получения или отправить запрос на выставление счёта — это важно для корпоративных закупок.

Реализация

Развитие без пересборки каталога

WordPress WooCommerce PHP JavaScript AJAX Cart Custom Checkout DaData Яндекс Доставка ACF Custom Theme

Разработанная на первом этапе товарная архитектура осталась основой магазина. Новый функционал интегрирован через шаблоны и хуки WooCommerce, серверные проверки, AJAX-обработчики и обновление фрагментов интерфейса. Отдельные CSS/JS-модули обслуживают корзину, оформление, доставку и выбор точки получения.

Vol. 1 → Vol. 2

Два этапа одного проекта

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

Посмотреть Zortin — Vol. 1: B2B-каталог

Нужен интернет-магазин под ваши процессы?

MAX Telegram WhatsApp

Разработаю магазин на WordPress и WooCommerce под особенности товаров, покупателей и логистики — от каталога и корзины до оформления заказов, доставки и дальнейшего развития проекта.