Настройка зон доставки
Карта с зонами доставки позволяет находить точный адрес с помощью АПИ Яндекс.Карт и передавать адрес в iiko, а также менять метод оплаты в соответствии с выбранной зоной на карте.
Last updated
Карта с зонами доставки позволяет находить точный адрес с помощью АПИ Яндекс.Карт и передавать адрес в iiko, а также менять метод оплаты в соответствии с выбранной зоной на карте.
Last updated
Для настройки отображения карты с зонами доставки на странице оформления заказа WooCommerce и возможности смены метода оплаты в зависимости от выбранной зоны, нужно сделать следующее:
Проверить активно ли управление доставками WooCommerce.
Для этого перейдите в основные настройки WooCommerce -> Настройки -> Основные -> Локации доставки.
Убедитесь, что выбран один из методов отмеченный зелёной рамкой:
Добавьте методы доставки WooCommerce.
Перейдите в WooCommerce -> Настройки -> Доставка
Нажмите на кнопку Добавить зону доставки или выберите существующую зону доставки.
Откроется настройка зоны доставки WooCommerce, в которой вы можете управлять методами доставки.
Создайте нужны методы доставки WooCommerce соответствующие зонам доставки на вашей Яндекс.Карте.
Нажмите кнопку Добавить метод доставки и выберите метод Бесплатная доставка:
После добавления метода доставки WooCommerce, откройте его и измените название.
Значение опции Требование минимальной доставки установите в Сумма минимального заказа.
Введите сумму минимального заказа в поле ниже:
Добавьте столько методов доставки на сайте, сколько будет зон доставки на вашей карте.
При необходимости добавьте метод доставки с типом Самовывоз, чтобы клиенты имели возможность забрать заказ самостоятельно независимо от выбора зон доставки.
Создайте карту с зонами доставки. Перейдите на страницу конструктора Яндекс.Карт. Создайте необходимые зоны доставки.
Название (описание) зоны на Яндекс Карте должно совпадать названием метода оплаты WooCommerce выводимым на странице оформления заказа.
Если вы хотите сделать более информативное название зоны, например добавив в него стоимость доставки, то добавьте необходимую информацию после точки:
Название-зоны-как-на-сайте. Дополнительная-информация
Пример:
Экспортируйте Яндекс.Карту с зонами доставки.
Нажмите кнопку Сохранить и продолжить в конструкторе Яндекс.Карт.
Далее нажмите ссылку Экспорт, выберите формат GEOJSON и нажмите кнопку Скачать:
Переименуйте экспортированный файл в data.geojson и загрузите в корень сайта или другую директорию.
Настройте плагин интеграции iikoCloud.
Для этого перейдите в основные настройки WooCommerce -> Настройки -> iikoCloud -> Зоны доставки.
1. Укажите путь к файлу .geojson, созданному в предыдущем пункте.
2. Проверьте корректность импорта зон доставки вашей Яндекс.Карты.
3. Отметьте опцию Показать блок "Зоны доставки" на странице оформления заказа.
4 и 5. Укажите API ключи для Яндекс Карт, получить которые можно по ссылке.
Для корректной работы карты понадобится два ключа - JavaScript API и HTTP Геокодер и API Геосаджеста:
Введите каждый ключ в соответствующее поле настроек зон доставки плагина. 6. Укажите центр координат Яндекс.Карты, получить их можно по ссылке. 7. При необходимости измените настройки места вывода карты на странице оформления заказа. 8. Сохраните настройки.
На странице оформления заказа отобразится Яндекс.Карта с зонами и полем ввода адреса под ней.
1. При вводе адреса будет появляться подсказка.
2. Выберите нужный адрес и нажмите кнопку Проверить адрес.
3. Выбранный адрес отобразится на карте в одной из зон Яндекс.Карты.
4. В методах оплаты WooCommerce будет выбран соответствующий выбранной зоне карты метод оплаты:
Если соответствующий зоне карты метод доставки WooCommerce найден не будет, то появится соответствующее уведомление и будет выбран метод доставки Самовывоз:
Если минимальная сумма заказа не будет соответствовать минимальной сумме для выбранной зоны карты, то появится соответствующее уведомление и будет выбран метод доставки Самовывоз:
Для более удобного поиска по карте нужно вывести поле Город на странице оформления заказа.
Поля Улица, Дом и Город можно скрыть стилями, добавив следующее правило в style.css вашей темы или в блок Внешний вид -> Настройка -> Дополнительные стили:
#billing_address_1_field,
#billing_address_2_field,
#billing_city_field { display:none; }
