Доставка Tilda

Модуль доставки для Tilda

Содержание:


Для установки модуля потребуются служебные ключи, зона доставки, блок корзина и хостинг(в нашем примере GIST) для хранения зон доставок.

Настройка сайта

1) Переходим на страницу «Настройки сайта» и выбираем пункт «Платёжные системы»
2) Опускаемся ниже и нажимаем кнопку «Настроить»
3) Для опции «Уровень проверки цены доставки» выбираем «Только помечать в заявке, что цена доставки отличается от сохранённых данных»
4) Подключаем jQuery к сайту, для этого возвращаемся в «Настройки сайта» в раздел «Ещё»
5) Здесь включаем опцию «Подключить jQuery на страницах сайта»

Настройка корзины

1) Переходим на страницу с корзиной и добавляем в неё следующие поля:

  • Тип "Варианты доставки" для этого поля указываем в секции Варианты ответа способ доставки, при котором должен производиться расчёт итоговой суммы доставки, в моем случае, я указал Курьером. Для поля так же нужно указать Имя переменной, чтоб его можно было выбрать в модификации.
  • Тип "Поле для ввода в одну строку", это поле будет отвечать за ввод адреса доставки и в нем будет выпадать список доступных адресов. Так же указываем в поле Имя переменной имя по которому сможем найти поле в модификации
2) Теперь настроим видимость полей. Мы хотим отображать поле для ввода адреса доставки, только тогда, когда выбран вариант доставки Курьером. Поэтому для поля с вводом адреса выбираем следующие условие видимости.
Про условия видимости можете почитать здесь

Подключение модификации

1) Добавляете модификацию на ту страницу где размещён блок корзина. Чтобы добавить «DR13 Модуль доставки» выбeрите его в библиотеке блоков — он находится внутри раздела «Drik Dev»

Настройка служебных ключей

1. Ключ API от DaData

DaData отвечает за корректность адресов. Благодаря нему пользователи не смогут допустить ошибки при оформлении доставки и ввести несуществующие адреса.
1) Как получить ключ:
  1. Перейдите на сайт dadata.ru и нажмите «Подключиться».
  2. Зарегистрируйте аккаунт (если его нет) или войдите в существующий.
  3. В личном кабинете перейдите в раздел «Почта, ключи, деньги».
  4. Скопируйте ваш «API-ключ». Он находится в самом верху страницы.
2) Полученный ключ вставляем в поле DADATA API KEY

2. JavaScript API ключ от Яндекс Карт

1) Как получить ключ:
Тильда написала подробную инструкцию о том, как можно получить данный API ключ, ознакомиться можно здесь.
В случае смены домена, не забудьте указать новый домен в секции Ограничение по HTTP Referer
2) Полученный ключ вставляем в поле YANDEX MAPS API KEY

Добавление карты

1. Карта с зонами доставки

Далее необходимо создать карту с зонами доставки в конструкторе Яндекс Карт
Создание карты:
1) Для создания новой карты нажимаем на "Создать карту"
2) Выбираем опцию "Многоугольники" и устанавливаем точки, определяющие границы области.
3) Разметив все зоны, у вас получиться карта с необходимыми зонами доставки
4) Скачиваем полученную карту в формате GEO JSON

2. Хранение карты с зонами доставки

1) Мы используем сервис GIST, (о том как на нем зарегистрироваться и хранить созданную карту вы можете почитать здесь), но вы можете использовать любой другой хостинг, на котором можно будет хранить скаченную карту в формате JSON.
В данном руководстве мы используем Gist для хранения карты с зонами доставки. При регистрации желательно использовать почту gmail, так как при использовании других почтовых ящиков наблюдались проблемы.
2) У вас должна быть ссылка с вашим зонами доставки такого формата
https://gist.githubusercontent.com/MenLand/ff3312603295ddb005a0e7eef5b37c1c/raw/8a4dad169b0261dd2d8e1a5d02b26a9b2564e903/%25D0%259C%25D0%25BE%25D1%2581%25D0%25BA%25D0%25B2%25D0%25B0
3) Полученную ссылку вставляем в поле ССЫЛКА НА ФАЙЛ С ЗОНАМИ ДОСТАВКИ

Ограничения сервисов

  • Сервис DaData предоставляет 10 000 запросов в день бесплатно (почитать можно здесь)
  • Яндекс HTTP Geocoder предоставляет 1000 запросов в день бесплатно (почитать можно здесь)
По нашему опыту, клиенты пока не сталкивались с лимитами на бесплатных тарифах.

Настройка модуля

1) Если вы выполнили все пункты из раздела Настройка служебных ключей и Добавление карты верно, то ниже у вас отобразится карта с вашими зонами доставки
2) Теперь можете добавить необходимые условия доставки. В данном примере я добавлю для одной зоны следующие условия.
  • Стоимость доставки 500р
  • Минимальная доставка от 1000р
  • Бесплатная доставка при сумме заказа в 5000р
Нажимаем на кнопку Добавить еще одно условие и в появившемся окне выбираем зону, для которой хотим добавить условие
3) Для выбранной зоны укажем что доставка по адресу в этой зоне будет стоить 500р, так же добавим что сумма минимального заказа в эту зону должна быть от 1000р и доставка может быть бесплатной если сумма заказа равна или больше 5000р
4) После того как мы выбрали все условия доставки, то можем нажать на кнопку Готово и посмотреть выбранные условия
Если вы захотите изменить условия для зоны, то просто нажмите на кнопку «Редактировать зону»
5) В разделе Настройка корзины нужно связать поля корзины с кодом модификации.

Для этого в поле ВЫБЕРИТЕ ПОЛЕ ДЛЯ ВВОДА АДРЕСА выберите имя поля, которое будет отвечать за ввод адреса. Мы с вами настраивали эти поля в разделе Настройка корзины.
В поле ВЫБЕРИТЕ ПОЛЕ ВЫБОРА СПОСОБА ДОСТАВКИ укажите имя поля, которое отвечает за выбор способа доставки.
Как только вы выберите его, у вас станет доступным поле ВЫБЕРИТЕ ВАРИАНТ ДОСТАВКИ. В данном поле укажите тот вариант доставки, при котором должен работать модуль.
6) В разделе Настройка DaData выберите опцию ИНОСТРАННЫЕ ГОРОДА только в том случае, если настраиваете модуль доставки для СНГ стран

Оплата модуля доставки

1) После выбора всех условий доставки, вы можете увидеть внизу расчет.
на данный момент для оплаты вам нужно написать разработчику в Telegram с указанием вашего email и ID проекта, для которого вы хотите подключить модуль
ID вашего проекта и email будет автоматически указан в сообщение
2) После того как вы это сделаете, нажмите на кнопку Сохранить без оплаты. После оплаты для вашего проекта будет выдан доступ и вы сможете сохранить рабочий модуль к себе в проект.

Проверка модуля

1) Давайте проверим, что у нас получилось и как модуль работает. Мы с вами добавили условия доставки для одной зоны.
  • Укажу адрес, который не попадает не в одну из зон.
Как только я указал данный адрес в поле, модуль сразу говорит о том, что данный адрес не попадает ни в одну зону доставки и запрещает сформировать заказ.
  • Теперь укажу адрес, который попадает в зону доставки, которую мы с вами настраивали.
после ввода адреса, мы видим что подтянулось наше условие Минимальной доставки в 1000р, до тех пор пока пользователь не выберет товаров на суммы свыше 1000р, он не сможет сформировать заказ на данный адрес.
  • Когда пользователь добавил товаров на сумму свыше 1000р , то мы видим, что работают наши остальные условия
теперь клиент может оформить доставку по адресу стоимостью в 500р либо же набрать товаров на 5000р чтоб не платить за доставку.

Важно знать!

Корзина находится в Footer или Header сайта

Если вы добавляете модуль доставки в Footer или Header (там где расположена общая корзина), то нужно обязательно добавить блок Alias для Footer каталога. Это нужно для того, чтоб если пользователь открыл страницу с вашем товаром, модуль доставки так же продолжал работать в корзине.
перейдите в Footer для каталогов и добавьте там Alias блок с ID блока модификации
в результате у вас добавится модуль доставки на страницу Footer для каталогов

Обновление зон доставки через Gist

Если вы решили обновить зоны доставки, то первое что вам нужно сделать, это перейти в конструктор Яндекс Карт и обновить ваши зоны, затем повторить все шаги из раздела Добавление карты. У вас будет JSON файл с обновлёнными зонами доставки, теперь осталось выгрузить данный файл.
  • Если вы используете GIST для хранения информация о доставки, то про обновление зон доставки можете прочитать здесь
  • Если вы использовали хостинг, то просто обновите данные, либо добавьте обновленные зоны доставки в новый файл.
Если у вас есть вопросы или вам нужна дополнительная информация, не стесняйтесь связаться с разработчиком в Telegram.
Модули