Как показать пункты выдачи на сайте интернет-магазина
Как связать карту и список ПВЗ с корзиной, сохранить выбранную точку и проверить её после изменения заказа. Учебный сценарий и действия при сбое виджета.
Покажите покупателю доступные для его заказа пункты выдачи на карте и в текстовом списке. После выбора сохраните идентификатор точки и понятный адрес, а при изменении корзины перепроверьте доступность, цену и срок. Одна отметка на карте без связи с заказом ещё не означает, что посылку можно туда отправить.
Статья поможет описать поведение выбора ПВЗ для платформы или разработчика. Настройки и ограничения конкретного перевозчика нужно брать из его действующей интеграции; универсального кода виджета для всех служб нет.
Сначала подтвердите доступные варианты
Определите город или адрес поиска и состав посылки. Перевозчику могут понадобиться вес, габариты, способ оплаты и другие параметры. Передавать нужно данные упакованного заказа в формате интеграции, а не только название товара или приблизительный город посетителя.
Геолокация может предложить отправную точку, но покупатель должен иметь возможность её изменить: он может заказывать другому человеку или планировать получение в другом месте. Не закрепляйте выбор по IP без подтверждения.
Различайте справочник существующих точек и варианты, подтверждённые для конкретной посылки. Наличие ПВЗ в городе не доказывает, что он принимает нужный габарит или способ оплаты. Какие параметры проверяет служба и где получает окончательную доступность, выясните до публикации интерфейса.
Если вы ещё выбираете сам способ получения, начните со сравнения курьерской доставки и ПВЗ. Дальше рассматриваем ситуацию, когда выдача в точке уже предусмотрена магазином.
Карта и список должны помогать одному выбору
Карта удобна для ориентира, а список — для чтения адресов и выбора с клавиатуры. Оба представления должны показывать одну и ту же доступную выборку и один выбранный пункт. Нажатие строки должно выбирать соответствующую точку, а выбор на карте — отражаться в списке и итогах заказа.
В карточке ПВЗ нужны название, адрес и предусмотренные данные о получении. Покажите часы работы, способ оплаты и подтверждённые цену со сроком, когда эти сведения доступны. Если расчёт предварительный, подпишите это и объясните, когда сумма станет окончательной.
Не заставляйте различать точки только по цвету значка. Нужны название, выбранное состояние и понятная кнопка подтверждения. Длинные адреса должны читаться с телефона, поиск — принимать другой город, а повторное открытие выбора — показывать сохранённую точку.
Общие условия и ограничения можно объяснить на странице доставки и оплаты. Но сведения о выбранном конкретном пункте должны оставаться в оформлении и подтверждении заказа.
Что сохранять в заказе
Идентификатор связывает выбор с объектом перевозчика. Адрес помогает покупателю и поддержке понять место получения. Сохраняйте оба значения, а также нужные интеграции сведения: службу, тип точки, выбранную услугу и подтверждённые параметры расчёта.
Свободная строка «ПВЗ у метро» не заменяет идентификатор. У разных сетей могут быть одинаковые или близкие адреса, а режим работы и доступность меняются. При передаче заказа используйте предусмотренный идентификатор, не пытаясь восстановить его по тексту адреса.
| Данные | Зачем нужны | Что проверить |
|---|---|---|
| Служба и ID точки | Однозначная передача в подключённую систему | Те же значения попали в заказ и запрос перевозчику |
| Название и адрес | Подтверждение человеку | В корзине, письме и кабинете нет другого пункта |
| Услуга и способ оплаты | Совместимость с заказом | Выбор поддерживается в этой точке |
| Цена, срок и условия расчёта | Понятный итог | Подтверждены для текущего состава и адреса |
Данные браузера следует проверять предусмотренным серверным способом перед созданием отправления. Сохранённый вчера ID не является бессрочным подтверждением доступности. Даже без изменения корзины окончательная проверка должна соответствовать правилам интеграции.
Учебный сценарий изменения корзины
Представим вымышленный магазин. Покупатель выбрал пункт П-12 для компактной коробки с одной кружкой. По условиям упражнения подключённая служба подтверждает эту точку для начального заказа. ID и адрес сохранены, в итогах видны условия получения.
Затем покупатель добавил набор крупной посуды. Упакованный заказ стал другим; при повторной проверке служба больше не подтверждает П-12 для этой посылки. Это учебное ограничение, а не описание конкретного перевозчика.
Правильная последовательность:
- Пересчитать параметры посылки после изменения корзины.
- Повторно запросить доступные варианты предусмотренным интеграцией способом.
- Если прежняя точка не подходит, обозначить выбор как недействительный и объяснить причину: «После изменения заказа этот пункт недоступен. Выберите другой».
- Показать подтверждённые альтернативы и получить новый выбор.
- Обновить ID, адрес, цену и срок в заказе; не оставить старую точку в скрытом поле.
Не удаляйте введённые контакты покупателя из-за такой перепроверки. Обновить нужно зависимые условия получения. Если новая точка дороже, покажите изменённую итоговую сумму до подтверждения.
Альтернатива: новая проверка подтверждает прежний ПВЗ, но меняет стоимость или срок. Тогда сохраняйте точку и явно обновляйте условия; принуждать к повторному поиску без причины не требуется. Пересчёт состава и суммы связан с общим поведением корзины магазина.
Если пункты не загрузились
Разделите загрузку, пустую выборку и ошибку связи. «Подождите, загружаем пункты», «Для этих условий доступных точек нет» и «Не удалось получить список» предполагают разные действия. Бесконечный индикатор не объясняет ни результат, ни следующий шаг.
Предложите повтор, изменение города или другой подтверждённый способ доставки. Если магазин действительно умеет согласовывать пункт вручную, можно принять запрос с понятным статусом: доставка и итоговая сумма ещё требуют подтверждения. Не выдавайте такой запрос за готовое отправление.
Не используйте старый сохранённый список как доказательство текущей доступности. Список с адресами может помочь с ориентиром, но создать заказ по нему можно только после необходимой проверки. Если ручного процесса нет, честно предложите доступную альтернативу или обращение в поддержку.
Как проверить выбор точки
Подготовьте обычный заказ и заказ, который меняет существенное ограничение: вес, габариты или оплату. Пройдите оба с телефона и компьютера. Проверьте поиск другого города, переключение карты и списка, подтверждение и повторное открытие выбранного пункта.
Затем измените количество, состав и способ оплаты. Сверьте не только видимый адрес, но и запись заказа: ID, службу, услугу и итоговую сумму. Передача в систему перевозчика должна содержать тот же выбор. Отдельно пройдите исчезнувшую точку, отсутствие вариантов и сбой загрузки.
Для своего задания запишите входные данные, действие, ожидаемую доступность и то, что получит сотрудник. Учебный пример выше проверяет логику зависимостей; он не подтверждает работоспособность вашего виджета, ключа карты или реального API. Эти части проверяются в доступной тестовой среде подключённой службы.