Create a gist now

Instantly share code, notes, and snippets.

@pavelmics /dock.md Secret
Last active Nov 2, 2017

What would you like to do?

#Документация Skyeng для внешних лендингов

##Функциональность скрипта Скрипт Skyeng решает несколько задач:

  1. Сохранение маркетинговых данных пользователя;
  2. Предоставляет удобную функцию skyengCreateOrder для создания заказов на обучение в системе Skyeng;
  3. Является единым скриптом на всех внешних сайтах Skyeng, что позволяет редактированием кода в нем вносить изменения в логику всех внешних сайтов;

##Установка скрипта Код скрипта должен быть подключен после подключения библиотеки jQuery.

<script src="//skyeng.ru/files/scripts/lp-order-creator.js"></script>

##Создание заявки Для создания заявки необходимо использовать метод skyengCreateOrder();. Метод принимает javascript-объект с параметрами:

Параметр Значение по умолчанию Описание
name - Имя пользователя. Обязательный параметр
phone - Телефон пользователя. Обязательный параметр
email - Email адрес пользователя. Обязательный параметр
extraData {} Javascript-объект с дополнительными параметрами заявки. Это параметры будут переданы в строку запроса при создании заявки (это, например, могут быть utm метки или метка формы)

###Пример создания заявки Предположим, что у нас есть вот такая форма:

<form id="order-form">
  <div>
    Name <input type="text" name="name"><br>
  </div>
  <div>
    Email <input type="text" name="email"><br>
  </div>
  <div>
    Phone <input type="text" name="phone"><br>
  </div>
  <button type="submit">Start learning!</button>
</form>

Тогда для создания заявки нам необходимо получить значения полей Name, Email и Phone, а затем передать их в метод skyengCreateOrder. ###Ошибка дублирования пользователей Иногда возникают случаи, когда пользователь уже имеет учетную запись в системе Skyeng, однако пытается еще раз зарегистрироваться с тем же Email. Функция skyengCreateOrder обрабатывет данный случай двумя способами:

  1. Если пользователь, который подает заявку, авторизован в системе Skyeng под тем же email, то вернется ошибка user-already-authorized "Пользователь уже авторизован";
  2. Если пользователь с таким email существует, но текущий пользователь не авторизован, то вернется ошибка user-already-exists "Авторизуйтесь, чтобы продолжить"

###Кастомизация поведения при подаче заявки ВАЖНО: Необходимо предотвратить стандартную браузерную отправку формы! Для обработки результатов нужно использовать jQuery-promise. Javascript код обработки формы может выглядеть вот так:

skyengCreateOrder({
  name: $form.find('input[name=name]').val(),
  email: $form.find('input[name=email]').val(),
  phone: $form.find('input[name=phone]').val(),
  extraData: {
    source_type: 'puzzle-english',
    utm_source: 'metka1',
    utm_medium: 'metka2',
  }
}).then(function(result) {
  /** обработка успешного результата */
  // console.log(result);
}, function(errors) {
  /** обработка ошибок, объект errors содержит сообщения об ошибках в полях name, email, phone */
  // console.log(errors);
});

###Полный функциональный пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="https://skyeng.local/files/scripts/lp-order-creator.js"></script>
  <title>Пример landing</title>
</head>
<body>
<form id="order-form">
  <div>
    Name <input type="text" name="name"><br>
  </div>
  <div>
    Email <input type="text" name="email"><br>
  </div>
  <div>
    Phone <input type="text" name="phone"><br>
  </div>
  <button type="submit">Start learning!</button>
</form>
<script>
  $(function() {
    $('#order-form').on('submit', function(event) {
      event.preventDefault();  // отменяем стандартную отправку формы
      var $form = $(this);
      skyengCreateOrder({
        name: $form.find('input[name=name]').val(),
        email: $form.find('input[name=email]').val(),
        phone: $form.find('input[name=phone]').val(),
        extraData: {
          source_type: 'puzzle-english',
          utm_source: 'metka1',
          utm_medium: 'metka2',
        }
      }).then(function(result) {
        /** обработка успешного результата */
         console.log(result);
      }, function(errors) {
        /** обработка ошибок, объект errors содержит сообщения об ошибках в полях name, email, phone */
         console.log(errors);
      });
    });
  });
</script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment