Пункты выдачи на карте: как сделать удобный выбор

Что означает выбор пункта на карте

На телефоне открыт заказ, поверх него — карта с пунктами выдачи заказов (ПВЗ). Человек касается ближайшей отметки, читает адрес и закрывает окно: теперь в оформлении должно быть понятно, выбрал ли он этот пункт или только посмотрел его карточку. Разберём выбор пункта выдачи на сайте магазина, использующего официальный виджет СДЭК 4.0: покупатель ищет место получения, подтверждает доставку и возвращается к своему заказу.

Нажатие на отметку ещё не завершает выбор. Оно открывает сведения о пункте; оформление получает подтверждённый адрес после отдельного действия покупателя.

В документации СДЭК 4.0 описан режим с кнопкой «Выбрать». Кнопку можно скрыть для информационной карты в разделе доставки. Для оформления заказа нужен режим выбора. Посетитель увидит адреса на информационной карте, однако магазин ещё не получит указание, куда отправить покупку.

Разделить просмотр и подтверждение

Такое разделение лучше сохранить и в интерфейсе магазина: покупатель свободно открывает соседние точки, а выбранной становится только та, которую он подтвердил, иначе случайное касание карты изменит доставку без ясного действия человека. У выбранного пункта появляется заметное подтверждение. После закрытия карты адрес остаётся в заказе. Посетитель видит, что действие завершилось, и может перейти к оплате либо изменить выбор. Показывать отметку «выбрано» только внутри карты недостаточно: после её закрытия человек снова оказывается перед формой и не видит результата. Краткий блок с названием, адресом и способом изменить пункт связывает карту с оформлением заказа.

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

Разницу между ПВЗ перевозчика и собственной точкой магазина тоже лучше назвать явно: сроки, оплата и порядок выдачи могут различаться, хотя оба варианта предлагают человеку самостоятельно забрать покупку. Карта СДЭК показывает сеть выбранной службы, а собственный самовывоз магазина требует отдельного предложения. Смешанное название «получение рядом» скрывает условия, которые покупателю нужны до подтверждения заказа.

Как найти пункт с нужными условиями

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

Близость — не единственный критерий. Нужный пункт может оказаться по дороге с работы, рядом с домом родственника или в месте, где покупателю удобнее получать заказы.

Фильтры по условиям получения

Фильтр «Оплата картой» в СДЭК 4.0 помогает найти пункты с нужным способом оплаты. Для расчёта наличными предусмотрен фильтр «Оплата наличными». Это сведения о возможностях пункта. Порядок оплаты конкретной покупки устанавливает магазин: при обязательной предоплате условие заказа показывают в оформлении.

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

Пункт с сотрудником и постамат лучше различать до подтверждения. Доступность примерки или нужного способа оплаты способна изменить решение, поэтому одинаковая отметка на карте не должна скрывать вид места получения.

Что узнать о пункте перед визитом

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

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

Пустой результат тоже требует ответа. Если фильтры не оставили подходящих точек, форма объясняет, что ограничило выбор, и позволяет снять выбранные условия. При отсутствии доставки магазин предлагает другой доступный способ. Не стоит оставлять пустую карту с работающей кнопкой продолжения: покупатель ещё не определил место получения.

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

Помещается ли выбор в экран телефона

Карта ПВЗ интернет-магазина на телефоне должна позволять прочитать карточку и подтвердить пункт без увеличения страницы. Если ради кнопки приходится двигать всё окно по горизонтали, выбор становится отдельной борьбой с интерфейсом. Изменение масштаба показывает другие улицы на карте, а размер элементов оформления остаётся прежним.

В официальном описании виджета СДЭК рекомендован контейнер шириной от 800 и высотой от 600 пикселей. Эти размеры нельзя просто перенести на узкий экран: мобильное представление требует отдельного показа, на котором видны адрес, сведения о пункте и кнопка подтверждения.

Одна область прокрутки для карточки

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

Принудительно открывать полноэкранную карту при входе в оформление не стоит: сначала человек видит стоимость заказа и способ получения, а карту вызывает тогда, когда готов выбрать пункт. После закрытия форма возвращается к прежнему месту. Введённые контактные данные остаются заполненными. Открытие карты не должно сбрасывать уже сделанные шаги оформления.

Клавиатура и касания

Отдельный показ нужен для поиска с открытой экранной клавиатурой: она занимает часть экрана, поэтому под ней легко спрятать результаты и закрытие окна, хотя покупателю ещё предстоит выбрать пункт. При открытой клавиатуре результаты поиска остаются видны, а переход к карточке пункта позволяет прочитать адрес и подтвердить его, не закрывая окно выбора и не теряя найденное место. Успешный поиск без возможности подтвердить адрес ещё не завершает этот путь.

Метка на карте может быть небольшой, но карточка и кнопка выбора должны нажиматься обычным касанием. Если соседние отметки сливаются, список даёт другой способ открыть точку и помогает тем, кому сложно точно попасть в карту, не заставляя увеличивать её при каждом переходе к соседнему пункту. Результат действия остаётся одинаковым: просмотр сведений, затем явное подтверждение пункта.

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

Что сохраняется после закрытия карты

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

В документации виджета событие onChoose вызывается после выбора клиентом тарифа и точки доставки. Это сообщение виджета для сайта о завершённом выборе, с которым работает интеграция; простая загрузка карты такого результата не даёт.

Связать пункт с текущей покупкой

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

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

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

Смена города и способа получения

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

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

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

Как подрядчик покажет весь путь до заказа

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

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

Основной путь и возврат

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

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

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

Что происходит, если продолжить нельзя

Отдельно показывают отсутствие подходящих пунктов и невозможность получить расчёт. Для каждого случая на экране есть объяснение и доступное действие: изменить фильтр, выбрать другую точку, повторить расчёт или перейти к другому способу получения, который магазин действительно предлагает. Ошибка карты не должна стирать контактные данные. Человек сохраняет возможность вернуться к покупке. Незавершённая доставка остаётся обозначенной до выбора доступного варианта.

Это требования к результату работы сайта. Возможности виджета и правила магазина соединяет исполнитель, поэтому в задании отдельно называется ответственность за сохранение пункта, актуальность цены и сообщения о незавершённом выборе. Вопрос подрядчику: «Как покупатель на телефоне находит подходящий пункт СДЭК и видит тот же адрес в оформленном заказе, что сайт покажет при смене города или состава корзины и как человек подтвердит новые условия доставки?» Ответ включает и нормальное завершение, и восстановление после изменения выбора. Доработку оформления заказа принимают, когда покупатель завершает выбор, а выбранное место сохраняется в покупке и остаётся понятным при возвращении в форму.