Создание динамической CRM-формы Битрикс 24 для продажи товаров и услуг

10.04.18 ИТ / 1С-Битрикс 7196

У каждого владельца портала Битрикс 24 есть возможность легко организовать продажу товаров без создания интернет-магазина. Для этого достаточно создать CRM-форму и сделать некоторые настройки.

Процесс добавления формы прост, поэтому не будем на этом останавливаться. Также можно использовать одну из предустановленных форм. Управление формами доступно на странице: https://имя-вашего-портала.bitrix24.ru/crm/webform/. Далее в статье будут использоваться относительные адреса, предполагающие подстановку в начале адреса такой конструкции: https://имя-вашего-портала.bitrix24.ru/.

Добавьте товары на странице: /crm/product/. Далее задайте необходимые свойства для товаров по адресу: /crm/configs/productprops/. Когда всё будет готово, можно переходить к следующим шагам.

Чтобы сделать форму динамической, без каких-либо ограничений, необходимо разместить ее на своем сайте, или если у Вас нет сайта, можно создать бесплатный Битрикс 24 сайт и разместить ранее подготовленную форму там. В этой статье будет рассмотрен последний случай.

Размещение формы возможно различными способами, можно скопировать код для интеграции, предлагаемый на портале, можно добавить на сайт в виде блока Битрикс 24 сайта и т.д. Но чтобы полностью контролировать форму, включая вставку контента в форму, например через AJAX, нужно иметь возможность доступа к элементам формы через Javascript. Поэтому самым лучшим способом будет просто скопировать исходный код формы, внести небольшие изменения, удалив все лишнее (css, javascript файлы и т.д.). А именно будет создан и размещен на Битрикс 24 сайте пользовательский блок через REST API, содержимым которого будет верстка CRM-формы.

После того, как создана CRM-форма, добавлены и настроены свойства продуктов, создан Битрикс 24 сайт, создан блок, содержимым которого является верстка CRM-формы, можно приступить к динамическому управлению содержанием формы.

Для этого в блоке должен быть подключен js-файл, который будет отправлять через ajax post-запрос на Ваш сервер, и откуда будет возвращаться содержимое для элементов Вашей формы, например, option для select. Напишите обработчик события change для нужного поля select, как только изменится категория товара, к примеру, необходимо послать запрос к Вашему серверу с id выбранной категории, и он должен вернуть список товаров из выбранной категорий. Как только сервер вернул данные, запишите их в нужное поле. Аналогично для всех других полей: пишете обработчик события для формы, отправляете информацию на сервер, там на основе этой информации, Вы можете на языке PHP осуществлять удаленные запросы к REST API, используя библиотеку CURL, далее возвращаете ответ и записываете ответ в нужное место на форме, с помощью javascript. Сервером может быть любой Ваш сервер, на котором Вы, используя REST API Битрикса делаете запросы к Вашему порталу. Например, получаете список товаров и их свойства. Таким способом можно также сделать фильтрацию товаров в форме. Дополнительно можно подключить к блоку внешние файлы css-стилей для управления видом формы.

Так как форма создана вручную, нужно не забыть сделать обработчик события отправки формы submit. При нажатии отправить, реализуйте на вашем сервере запросы к API, создающие из полученных данных, например, сделку, лид или контакт, ну или все вместе.

Таким образом, динамическая CRM-форма готова! Теперь можно размещать ее где угодно и продавать Ваши товары и услуги, все заявки будут моментально появляться на Вашем портале Битрикс 24, где Вы сможете оперативно их обрабатывать. Если нужна помощь или возникли вопросы, обращайтесь.