Особенности и Быстрый старт

20 января 2023, 07:00

AjaxFormItLogin это современный вариант всеми любимого компонента AjaxForm. Обладает всеми возможностями прародителя и имеет ряд дополнительных функций.

Особенности

  1. Нет зависимости от jQuery.
  2. Для показа уведомлений используется библиотека IziToast.
  3. Принимает параметр clearFieldsOnSuccess, тем самым позволяя управлять очисткой полей при успешной оправке формы.
  4. Принимает параметр transmittedParams (значение должно быть валидным JSON), который позволяете передавать в JS кастомные параметры отдельно при успешной, отдельно при неудачной отправке.
  5. Позволяет отображать процесс загрузки файлов на сервер, для этого нужно указать параметр showUploadProgress со значением 1.
  6. Событие af_complete заменено на afl_complete.
    document.addEventListener('afl_complete', e => {
       console.log(e.detail.response); // ответ сервера
       console.log(e.detail.form); // текущая форма
    });
  7. Изменен формат ответа сервера. e.detail.response.data теперь содержит параметр errors - объект с ошибками валидации, если они есть и форма не отправлена, а также пользовательские параметры указанные в вызове конкретной формы в параметре transmittedParams. В этом параметре следует передавать либо JSON, либо массив с обоими или одним из ключей success и/или error. В каждый из ключей нужно передать строку с именами параметров вызова сниппета AjaxFormItLogin разделенными запятыми, которые должны быть проброшены в JS. В случае же успешной отправки формы в ответе будут содержаться параметры e.detail.response.data.redirectTimeout и e.detail.response.data.redirectUrl.
  8. Работают редиректы. Для этого необходимо указать в вызове сниппета параметр redirectTo (абсолютная ссылка или ID ресурса) и, при необходимости изменить стандартное значение в 2с, redirectTimeout (в миллисекундах) для задания задержки перед переходом на другую страницу.
  9. Добавлен метод помогающий валидировать чекбоксы. Для его работы необходимо проверяемому чекбоксу добавить атрибут data-afl-required, где значением будет ключ указанный в параметре validate, а также нужно добавить скрытое поле с этим именем в форму. Самому чекбоксу имя можно не указывать.
  10. Нет поддержки капчи от гугла, но встроена собственная защита от спама по методу Алексея Смирнова. Для активации нужно в вызове указать параметр spamProtection со значением 1. По умолчанию включена.
  11. Есть возможность регистрации, авторизации, сброса пароля и редактирования личных данных, при условии установки компонента FormIt. Подробнее о поддерживаемых параметрах можно прочитать в этой заметке.
  12. При обновлении данных пользователя добавлено системное событие aiOnUserUpdate, которое получает следующие данные $user - объект обновленного пользователя, $profile - его профиль, $data - переданные данные.
  13. Есть автоматическая отправка целей в Яндекс.Метрику. Чтобы это работало нужно установить системную настройку afl_metrics в значение ДА. Указать в системной настройке afl_counter_id идентификатор используемого на сайте счётчика метрики. Вставить код самого счётчика на сайт. Добавить формам атрибут data-ymgoal, в котором нужно указать имя JS цели из Яндекс.Метрики.

Быстрый старт

  1. Установите компонент AjaxFormItLogin из репозитория https://modstore.pro. При этом если у Вас не установлен компонент FormIt, он будет автоматически скачан и установлен.
  2. Скопируйте всё содержимое между html тегами
    , включая и эти теги, в чанк. Запомните название этого чанка (для примера будем использовать) оно нам понадобится.
  3. Замените скопированную форму (только не в созданном чанке, а на исходной странице) на следующий один из следующих вызовов:
    • Для использующих Fenom
      {'!AjaxFormItLogin' | snippet: [
      'form' => 'aflExampleForm', 'hooks' => 'FormItSaveForm,email',
      'emailTo' => 'почта@получателя',
      'emailFrom' => 'почта_от_которой@придет_письмо',
      'emailSubject' => 'Тема письма',
      'emailTpl' => 'aflExampleEmail',
      'validate' => 'email:required:email,name:required:minLength=^3^,phone:required,politics:minValue=^1^'
      ]}
    • Для любителей стабильности
      [[!AjaxFormitLogin?
      &form=`aflExampleForm`
      &emailTo=`name@domain.ru`
      &emailFrom=`noreply@domain.ru`
      &emailSubject=`Тема письма`
      &emailTpl=`aflExampleEmail`
      &validate=`email:required:email,name:required:minLength=^3^,phone:required,politics:minValue=^1^`
      ]]

Более подробно о параметрах отправки писем, хуках, валидации читайте в документации компонента FormIt, так как AjaxFormItLogin поддерживает все параметры этого компонента. Приведу пример того, как должна выглядеть форма


<form id="aflExampleForm" data-ymgoal="{$ym_goal}">
    <div class="mb-3">
        <label class="form-label">Имя</label>
        <input type="text" class="form-control" name="name" placeholder="Иван Иванович">
        <small class="text-danger d-block error_name"></small>
    </div>
    <div class="mb-3">
        <label class="form-label">Телефон</label>
        <input type="tel" name="phone" class="form-control" placeholder="+7(999)123-45-67">
        <small class="text-danger d-block error_phone"></small>
    </div>
    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" name="email" class="form-control" placeholder="name@mail.ru">
        <small class="text-danger d-block error_email"></small>
    </div>
    <div class="mb-3 form-check">
        <input type="hidden" name="politics" value="0">
        <input type="checkbox" class="form-check-input" id="politics" data-afl-required="politics">
        <label class="form-check-label" for="politics">Я принимаю <a href="#" target="_blank">условия использования</a> сайта.</label>
        <small class="text-danger d-block error_politics"></small>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
    <button type="reset" class="btn btn-secondary">Сбросить</button>
</form>

Обратите внимание для вывода ошибок валидации необходимо, чтобы в форме содержались блоки с классами error_имяполя. Так же обратите внимание на вот этот блок

<input type="hidden" name="politics" value="0">
<input type="checkbox" class="form-check-input" id="politics" data-afl-required="politics">

тут нам нужно, чтобы пользователь обязательно прожал чекбокс, для этого мы проверяем в параметре вызова validate, чтобы значение в поле name="politics" было больше 0. Чтобы при изменении значения чекбокс менялось значение в проверяемом поле, мы указали атрибут data-afl-required со значением равным значение в атрибуте name проверяемого поля.

  1. Создайте чанк письма (aflExampleEmail или любое другое имя). Можно использовать этот
    • Fenom
      {$name ? '<p>Имя: '~$name~'</p>' : ''}
      {$phone ? '<p>Телефон: '~$phone~'</p>' : ''}
      {$email ? '<p>Email: '~$email~'</p>' : ''}
    • pHx
      [[+name:isnot=``:then=`<p>Имя: [[+name]]</p>`]]    
      [[+phone:isnot=``:then=`<p>Телефон: [[+phone]]</p>`]]    
      [[+email:isnot=``:then=`<p>Email: [[+email]]</p>`]]    

Обратите внимание в примере я использую чанки, хранящиеся в базе данных, однако компонент позволяет использовать и файловые чанки. Более того я рекомендую использовать именно их и парсер из компонента pdoTools. Теперь ваша форма будет сохранять данные в админке и отправлять данные на вашу почту.



Следующий раздел
Общие сведения