Подключение корзинного виджета SafeRoute к магазину на Tilda

Шаг 1: Подключение к сайту скрипта корзинного виджета.

Перейдите в настройки вашего сайта.

На странице настроек откройте вкладку “Ещё” (в самом низу), после чего в разделе “HTML-код для вставки внутрь HEAD“ нажмите “Редактировать код”.

Вставьте в поле следующий код:

1 2 3 4 5 6 <script src="https://api.saferoute.ru/front/tilda/main.js"></script> <script> $(function() { srCartWidgetInit(''); }); </script>

В первом аргументе функции srCartWidgetInit() вместо пустой строки передайте ID вашего магазина из личного кабинета SafeRoute (Настройки > Магазины > Ваш магазин). Сохраните изменения.

Вы также можете передать функции второй аргумент - объект с опциями инициализации. Доступны следующие параметры:

Имя параметра

Возможные значения

Значение по умолчанию

Описание

Имя параметра

Возможные значения

Значение по умолчанию

Описание

lang

'ru', 'en'

-

Язык виджета.

Если не задан, виджет попытается определить язык магазина автоматически.

currency

'rub', 'usd', 'euro'

-

Валюта виджета.

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

nameInputName

-

Name

Имя переменной поля ФИО покупателя.

Связывает значение в поле со значением ФИО в виджете.

phoneInputName

-

Phone

Имя переменной поля номера телефона покупателя.

Связывает значение в поле со значением телефона в виджете.

emailInputName

-

Email

Имя переменной поля E-mail покупателя.

Связывает значение в поле со значением E-mail в виджете.

srDeliveryName

-

-

Название, которое будет дано варианту доставки SafeRoute в Корзине.

Необходимо задавать в случае, если в названии отсутствует ключевое слово “SafeRoute”, чтобы скрипт мог определять, когда требуется запускать виджет.

ignoreVendorCodes

-

-

Массив артикулов товаров, которые не должны передаваться в виджет для доставки.

Шаг 2: Настройка вебхука.

Снова перейдите в настройки сайта, затем во вкладку “Формы”, а в ней в разделе “Другое” выберите “Webhook”.

Введите Webhook URL:
https://api.saferoute.ru/tilda/order-update?api_key={api-ключ}
с реальным API-ключом со страницы магазина из личного кабинета SafeRoute (Настройки > Магазины > Ваш магазин).

На вопрос “Подключить сервис ко всем формам на сайте?” отвечайте “Пропустить”.

Далее перейдите в настройки только что созданного сервиса приема данных и установите чекбоксы так, как показано на картинке.

Шаг 3: Настройка корзины.

Добавьте в контент Корзины (модуль ST100) в поле с типом “Варианты доставки“ новый вариант: SafeRoute = 0.

После этого добавьте скрытое поле с именем переменной saferoute-order-data, чтобы данные о выбранной в виджете доставке отображались в заказах в админке Tilda.

Поставьте галочку возле созданного в предыдущем шаге вебхука:

После сохранения изменений не забудьте опубликовать все страницы (кнопка “Опубликовать все страницы” на странице проекта).

Если в вашей корзине поле E-mail обязательно для заполнения, вы можете сделать ввод E-mail обязательным и внутри виджета через его настройки в личном кабинете SafeRoute.

Для корректной передачи номера телефона из корзины в виджет рекомендуется задать полю телефона тип маски “Автоматическая маска с кодом страны“.

Артикул в виджет может передаваться не только из поля артикула, но и прямо из названия товара. Для этого необходимо задать название вида “Книга [[2003051]]“, где 2003051 - артикул.

Шаг 4: Настройка платёжных систем.

В настройках подключенных платежных систем поставьте галочку “Отправлять данные в сервисы приема данных только после оплаты”.

Если к вашему магазину не подключены платежные системы, заказы в личный кабинет SafeRoute будут передаваться с признаком наложенного платежа.
Если платежные системы подключены, то для оформления заказов с наложенным платежом используйте платежную систему “Наличными при получении”.

Шаг 5: Настройка виджета.

Зайдите в Личный кабинет SafeRoute, перейдите в “Настройки” > “Магазины”, откройте нужный магазин и нажмите “Настройки виджетов”.

На открывшейся странице в селекте “Платформа CMS” выберите “Tilda”.