JavaScript модуль передачи заказа

Порядок подключения JS-модуля

Добавить в HTML перед тэгом </head> следующий код:

  1. Если jQuery ещё не был задействован на странице:
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  2. Подключение модуля Helpim:
    <script src="https://static.help-im.ru/module/js/helpim.js"></script>
  3. Обработчик формы (необходимо заменить <order_form_id> на значение атрибута id тэга формы заказа, <customer_service_id> и <token> - на полученные в кабинете Helpim):
    • Если значения атрибутов name полей формы совпадают с API Helpim, будет достаточно:
      <script>
    $(function() {
        var h = new Helpim(<customer_service_id>, <token>);
        $('#<order_form_id>').submit(function(e) {
            h.sendOrderForm($(this));
        });
    });
</script>
    • Если значения атрибутов name полей формы НЕ совпадают с API Helpim, необходимы преобразования:
      <script>
    $(function() {
        var h = new Helpim(<customer_service_id>, <token>);
        $('#<order_form_id>').submit(function(e) {
            $form = $(this);
            var order = {
                firstName: $form.find('input[name=name]').val(),
                phone: $form.find('input[name=phone]').val(),
            };
            h.sendOrder(order);
        });
    });
</script>
  4. Не обязательно Возможно добавить обработчики результата выполнения запроса в API Helpim. Поддерживается 2 обработчика: success в случае успеха и error в случае ошибки. Для регистрации обработчиков используется метод Helpim.on(<result>, <handler>) (продолжение кода, описанного ранее):
    • успех:
      h.on('success', function(response) {
    console.log('success:', response);
    window.alert('Заказ принят. Наши операторы свяжутся с вами');
});
    • ошибка:
      h.on('error', function(jqXHR) {
    console.log('error:', jqXHR);
    window.alert('Ошибка при оформлении заказа. Попробуйте позже');
});

Пример

Объединив примеры кода из данной инструкции, должно получиться нечто подобное:

Spoiler