Интеграция Tilda и RetailCrm


Задача

Когда пользователь кладет товары в корзину на сайте Tilda и заполняет свои контактные данные — создать заказ в RetailCRM и прикрепить к нему товары из корзины

Подключение сервисов в MoreKIT

Первым делом — создадим ключ доступа к API в RetailCrm

Для того, чтобы создать API ключ на стороне RetailCRM, для этого нужно перейти в раздел Настройки —> Интеграции

Здесь потребуется создать API ключ, выдать ему необходимые разрешения и выдать доступ либо к конкретному магазину, либо ко всем магазинам

После завершения настроен API ключ покажется единоразово, скопируйте его

Теперь подключим RetailCrm к нашему проекту в MoreKIT

Для добавления RetailCRM необходимо добавить сервис. Нажимаем на кнопку Добавить сервис и ищем в списке RetailCRM

Здесь потребуется ввести домен и API ключ

Домен вводится в формате <домен>.retailcrm.ru

Найти домен можно в ссылке адресной строки браузера, находясь в RetailCRM

После ввода данных — нажимаем Добавить

Настройка Tilda

Следующим шагом — необходимо создать процесс, на который Tilda будет отправлять данные и подключить webhook на стороне Tilda

Для получения принимающей ссылки — нам необходимо создать процесс с типом Tilda, либо с типом «Другое», оба варианта подойдут

В данном примере будет использоваться тип Другое. Создаем процесс и даем ему название

После создания процесса нас перекинет в схему, нужно скопировать ссылку из первого блока

Установка Webhook в Tilda

Теперь необходимо создать webhook. Необходимо перейти в настройки сайта, выбрать Подключение webhooks. Вставляем скопированную ссылку на процесс MoreKit.

В дополнительных настройках ставим галочки как на скриншоте.

После установки хука — применяем его к нужным формам (или ко всем формам), также переопубликовываем страницы, чтобы хук применился к формам

Если все сделано правильно — в событиях к процессу в MoreKit придет тестовый хук от тильды.

Далее остается построить логическую схему передачи в MoreKit

Создание схемы в MoreKIT

Схема будет выглядеть следующим образом:

И часть схемы внутри цикла #5

Данную схему можно найти в готовых шаблонах, если не хотите собирать ее с нуля

Описание блоков схемы

#1 Регулярные выражения — очищают номер телефона от лишних символов, оставляя только цифры. Подробнее о регулярных выражениях можно почитать здесь

#2 Поиск клиента — ищем клиента в RetailCRM по очищенному номеру телефона. Если найден — переходим к блоку #5, если нет — к блоку #3

#3 Поиск клиента — если не нашлось по телефону, ищем клиента по email {{input.Email}}. Если найден — к блоку #5, если нет — к блоку #4

#4 Создание клиента — если клиент не найден ни по телефону, ни по email, создаём нового клиента в RetailCRM с телефоном, email и признаком контакта.

#5 Цикл — запускаем цикл на список товаров products: [] из Tilda

#6 Получить товары с торговыми предложениями — поиск товара в каталоге. Ищем товар в RetailCRM по артикулу (sku) текущего элемента цикла. Если товар найден — идёт к блоку #8, если нет — к блоку #7

#7 Добавить продукт — если товар не найден, создаём новый товар в каталоге RetailCRM, заполняя артикул и название

#9 Поиск товара с торговыми предложениями (повторный) — после создания товара снова выполняем его поиск, чтобы получить актуальный ID торгового предложения

#8 Подготовить товар — технический блок, который нужен для сборки списка товаров и передачи их в заказ. В данном блоке требуется передать ID торгового предложения товара, чтобы в заказе была связь с товаром. Заполняем ID торгового предложения, цену, количество и название

#10 Добавить в список — кладем подготовленный товар в список для дальнейшей передачи в заказ

#11 Создать заказ — создаем заказ с заполнением нужных данных. В данном примере формируем номер заказа, заполняем контактную информацию, прикрепляем клиента, прикрепляем контакт

Проверка работоспособности

Перейдем на сайт и заполним форму, положим в корзину несколько товаров.

Отправляем корзину в MoreKIT

Положили в корзину 5 товаров: 2 банана, 2 яблока и грушу. Отправим форму

После отправки формы проверим события схемы MoreKIT, чтобы там не было ошибок

Как видим — все шаги схемы выполнились, проверим, что создалось в RetailCRM

Как видим — заказ создался. Перейдем в заказ и посмотрим, какие данные заполнились:

Проверяем товары

Как видим — данные заполнились успешно и товары прикрепились. Задача выполнена

Подведем итоги

В данной статье рассмотрели пример передачи данных из Tilda в RetailCRM. Был создан заказ с клиентом, к заказу прикрепили товары