Тема

Настройка зон доставки ​

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

1. Проверьте локации доставки WooCommerce ​

Перейдите в WooCommerce -> Настройки -> Основные -> Локации доставки. Убедитесь, что выбран один из подходящих методов (см. зелёную рамку):

Локации доставки WooCommerce

2. Добавьте методы доставки WooCommerce ​

Перейдите в WooCommerce -> Настройки -> Доставка. Нажмите Добавить зону доставки или выберите существующую. Создайте методы доставки, которые будут соответствовать зонам на вашей Яндекс.Карте.

Нажмите Добавить метод доставки и выберите метод Бесплатная доставка:

Добавление бесплатной доставки WooCommerce

После добавления откройте метод и измените его название. Значение опции Требование минимальной доставки установите в Сумма минимального заказа. Введите сумму минимального заказа:

Настройка бесплатной доставки WooCommerce

Добавьте столько методов доставки, сколько будет зон на вашей карте.

ПОДСКАЗКА

Кроме Бесплатной доставки, можно использовать и другие методы. Например, Доставка курьером из терминала iiko позволяет указать:

  • сумму минимального заказа;
  • стоимость доставки;
  • организацию и терминал для экспорта заказов из этой зоны.

Также доступен метод Единая ставка с фиксированной стоимостью доставки.

ПОДСКАЗКА

Рекомендуется добавить метод Самовывоз, чтобы клиенты могли забрать заказ самостоятельно независимо от зон на карте.

ВАЖНО

Название метода доставки WooCommerce должно точно совпадать с названием зоны доставки на Яндекс.Карте (см. следующий шаг).

3. Создайте карту с зонами доставки ​

Перейдите в конструктор Яндекс.Карт и создайте нужные зоны.

ВАЖНО

Название (описание) зоны на Яндекс.Карте должно совпадать с названием метода доставки WooCommerce.

Если вы хотите сделать название зоны более информативным (например, добавить стоимость доставки), укажите эту информацию после точки: Название-зоны-как-на-сайте. Дополнительная-информация

Пример:

Методы доставки WooCommerce и зоны доставки Яндекс.Карты

4. Экспортируйте Яндекс.Карту ​

В конструкторе Яндекс.Карт нажмите Сохранить и продолжить. Затем нажмите Экспорт, выберите формат GEOJSON и нажмите Скачать:

Экспорт Яндекс.Карты с зонами в формате geojson

Переименуйте скачанный файл в data.geojson и загрузите его в корень сайта (или другую папку).

5. Настройте плагин iikoCloud ​

Загрузите файл .geojson, полученный на предыдущем шаге, в любую папку на сайте с помощью панели хостинга или FTP-клиента.

Перейдите в WooCommerce -> Настройки -> iikoCloud -> Зоны доставки.

  1. Укажите путь к файлу .geojson в поле Файл Geo JSON.
  2. Проверьте корректность импорта зон.
  3. Включите опцию Показать блок "Зоны доставки" на странице оформления заказа.
  4. Введите API-ключи для Яндекс.Карт в соответствующие поля настроек (получить можно здесь). Понадобятся два ключа: JavaScript API и HTTP Геокодер и API Геосаджеста:

АПИ-ключи сервисов Яндекса

  1. Укажите координаты центра карты (можно взять на Яндекс.Картах).
  2. При необходимости измените место вывода карты на странице оформления заказа.
  3. Сохраните настройки.

Настройка зон доставки в плагине интеграции iikoCloud

Как это работает для клиента ​

На странице оформления заказа появится Яндекс.Карта с зонами и полем ввода адреса:

  1. При вводе адреса появляются подсказки.
  2. Клиент выбирает адрес и нажимает Проверить адрес.
  3. Адрес отображается на карте в одной из зон.
  4. Автоматически выбирается метод доставки WooCommerce, соответствующий этой зоне:

Зона соответствует сумме заказа

Если адрес не входит ни в одну зону, появится уведомление и будет выбран Самовывоз:

Ошибка - доставка по адресу недоступна

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

Ошибка - минимальная сумма заказа не соответствует зоне

ПОДСКАЗКА

Для удобного поиска по карте выведите поле Город на странице оформления заказа.

ПОДСКАЗКА

Стандартные поля адреса (Улица, Дом, Город) можно скрыть, добавив следующий CSS-код в style.css вашей темы или в Внешний вид -> Настройка -> Дополнительные стили:

#billing_address_1_field,
#billing_address_2_field,
#billing_city_field { display:none; }

См. также ​