Розробка інтерактивної картки доставки для сайту

Про завдання: створення картки доставки продукції для сайту

Наш клієнт – оптова компанія “Оптика Нева”, – звернулася до фахівців Webnauts із завданням з розробки інтерактивної картки доставки товарів по СПб та передмістях. Технічне завдання з цього завдання ми наводимо у незмінному вигляді нижче (натисніть кнопку, щоб розгорнути ТЗ).

Технічне завдання на розробку картки доставки

Мета

Дати можливість користувачеві наочно уявляти, скільки коштуватиме доставка товару до його адреси.

Опис завдання

На сайті на сторінці “Умови роботи” підключити Яндекс.Карту, на якій буде позначено кордон міста Санкт-Петербурга, всередині якого діятиме Перша зона доставки (певна вартість). Кордон проходить по КАД із півночі, сходу та півдня та обмежена ЗСД та Фінською затокою із заходу.

Функціонал картки

Користувач може натиснути на карті в будь-яку точку – вибрати бажану адресу доставки. При виборі точки скрипт автоматично розраховує вартість доставки до цієї точки і виводить її на сторінці сайту.

Параметри розрахунку вартості

1) Зелена зона 1
Якщо точка обрана всередині кордону міста (червоного кордону) – виводиться повідомлення: «При сумі замовлення до 3000 рублів – вартість доставки складе 300 рублів (включається в рахунок). За сумою замовлення від 3000 рублів – доставка безкоштовно!»

2) Фіолетова зона 2
Якщо обрано точку за межами міста – то скрипт розраховує найближчий шлях до точки доставки – від найближчої точки з’їзду з КАД. Тобто скрипт розраховує саме найближчий шлях дорогами, а не прямо – лісами, полями і болотами =) Розраховується кількість кілометрів, і на основі цього – вартість доставки. 1 км = 35 рублів (ціна шляху в обидва кінці).

Наприклад, користувач вибрав точку доставки в районі міста Петергоф. Відстань від найближчої точки з’їзду з КАД на західному кордоні міста до точки в районі Петергофа – 11 км. І тут вартість розраховується за такою формулою: 300 крб. + (11 км * 35 руб.) – Якщо сума замовлення до 3000 руб, – або просто 11 км * 35 руб. – Якщо сума від 3000 руб. І виводиться повідомлення: “Відстань від КАД складає: 11 кілометрів: При сумі замовлення до 3000 рублів – вартість доставки складе 685 рублів (включається в рахунок). При сумі замовлення від 3000 рублів – доставка 385 рублів“.

3) Поправка до пункту 2 (зона 3):
Якщо відстань від КАД до точки доставки становить більше 20 кілометрів, то скрипт виводить повідомлення: «Відстань від КАД становить N кілометрів: Можливість доставки необхідно узгодити з нашим менеджером».

Референси

Загалом, як приклад можна взяти таку карту на сайті https://www.afonya-spb.ru/p/dostavka/. Тільки у них доставка розраховується на необмежену кількість кілометрів – хоч в Улан-Батор, а у нас – є обмеження в 20 км від кордону міста.

Що вийшло: інтерактивна картка доставки

Нижче Ви зможете переглянути результат розробки картки доставки товарів для сайту онлайн – так, як він представлений на сторінці замовника. Спробуйте прокласти маршрут доставки та прорахувати її вартість для різних населених пунктів передмістя СПб:

Прокладываем маршрут %

Результати

Доопрацювання, про яке ми розповіли у сьогоднішньому кейсі, важливе для компаній, які розвозять замовлення по місту та за його межі, а вартість таких послуг безпосередньо залежить від протяжності маршруту (віддаленості пункту призначення від складу/магазину). Подібні рішення можуть бути дуже корисними і в інших сферах бізнесу. Так, наприклад, неоціненною для конверсії сайту може бути:

розробка картки доставки піци, суші, бургерів та іншої їжі на винос із кафе, ресторану, кафе, піцерії, суші-бару тощо;
створення онлайн-калькулятора вартості доставки для транспортної компанії, вантажоперевізника;
розробка калькулятора для підрахунку вартості поїздки для таксі, таксопарку;
…та інші варіанти застосування.

О задаче: создание карты доставки продукции для сайта

Наш клиент – оптовая компания “Оптика Нева”, – обратилась к специалистам Webnauts с задачей по разработке интерактивной карты доставки товаров по СПб и пригородам. Техническое задание по этой задаче мы приводим в неизменном виде ниже (нажмите на кнопку, чтобы развернуть ТЗ).

Техническое задание на разработку карты доставки

Цель

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

Описание задачи

На сайте на странице “Условия работы” подключить Яндекс.Карту, на которой будет обозначена граница города Санкт-Петербурга, внутри которой будет действовать Первая зона доставки (определенная стоимость). Граница проходит по КАД с севера, востока и юга и ограничена ЗСД и Финским заливом с запада.

Функционал карты

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

Параметры расчёта стоимости

1) Зелёная зона 1
Если точка выбрана внутри границы города (красной границы) – то выводится сообщение: «При сумме заказа до 3000 рублей – стоимость доставки составит 300 рублей (включается в счет). При сумме заказа от 3000 рублей – доставка бесплатно!»

2) Фиолетовая зона 2
Если выбрана точка за пределами границы города – то скрипт рассчитывает ближайший путь до точки доставки – от ближайшей точки съезда с КАД. То есть скрипт рассчитывает именно ближайший путь по дорогам, а не напрямик – по лесам, полям и болотам =) Рассчитывается кол-во километров, и на основе этого – стоимость доставки. 1 км = 35 рублей (стоимость пути в оба конца).

Например, пользователь выбрал точку доставки в районе города Петергоф. Расстояние от ближайшей точки съезда с КАДа на западной границе города до точки в районе Петергофа – 11 км. В этом случае стоимость рассчитывается по формуле: 300 руб. + (11 км * 35 руб.) – если сумма заказа до 3000 руб, – или просто 11 км * 35 руб. – если сумма от 3000 руб. И выводится сообщение: “Расстояние от КАД составляет: 11 километров: При сумме заказа до 3000 рублей – стоимость доставки составит 685 рублей (включается в счет). При сумме заказа от 3000 рублей – доставка 385 рублей“.

3) Поправка к пункту 2 (зона 3):
Если расстояние от КАД до точки доставки составляет более 20 километров, то скрипт выводит сообщение: «Расстояние от КАД составляет N километров: возможность доставки необходимо согласовать с нашим менеджером».

Референсы

В общем и целом, как пример можно взять такую карту на сайте https://www.afonya-spb.ru/p/dostavka/. Только у них доставка рассчитывается на неограниченное кол-во километров – хоть в Улан-Батор, а у нас – есть ограничение в 20 км от границы города.

Что получилось: интерактивная карта доставки

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