docs.modx.pro
  1. Компоненты
  2. FetchIt

FetchIt ​

Компонент для MODX Revolution 2 и 3: отправка HTML-форм через Fetch API без перезагрузки страницы, с защитой от спама из коробки. По умолчанию формы обрабатывает FormIt, но можно подставить свой сниппет.

Зачем ​

FormIt сам по себе отвечает обычным POST с перезагрузкой. FetchIt оставляет его (или ваш код) на сервере и добавляет клиентский слой: FormData, JSON-ответ, ошибки полей, уведомления и события. А заодно закрывает формы от ботов, для чего обычно ставят отдельный компонент.

Рядом по задаче стоит AjaxForm. Серверная схема похожа. Отличия:

  • нет обязательного jQuery и jquery-form: только нативные Fetch API и FormData, скрипт подключается с defer;
  • защита от спама работает сразу после установки, без настройки;
  • уведомления встроенные или свои — через FetchIt.Message.

Возможности ​

  • FormIt из коробки. Параметры вроде &hooks, &validate, &emailTo передаются в FormIt как есть. Вместо FormIt можно указать свой сниппет.
  • Своя вёрстка. Нужны только чанк формы и атрибуты: data-error у ошибок полей, data-success и data-validation-error у сообщений формы.
  • Работает и без JavaScript. С FormIt форма отправляется обычным способом, сообщения и введённые значения выводятся его плейсхолдерами. Исключение — proof-of-work и капча: им нужен JavaScript.
  • Защита от спама по умолчанию: одноразовый подписанный токен, минимальное время заполнения, скрытое поле-ловушка и лимит отправок. По желанию proof-of-work и капча — Cloudflare Turnstile, Google reCAPTCHA v3 или Яндекс SmartCaptcha. Свои правила добавляются плагином.
  • Никаких зависимостей. Кроме скрипта сервиса капчи, если она включена, других файлов скрипт не грузит.
  • Встроенные уведомления или свои через FetchIt.Message: Bootstrap, SweetAlert2, что угодно.
  • События fetchit:before, fetchit:after, fetchit:success, fetchit:error, fetchit:reset: дополнить данные, отменить отправку, показать модалку.
  • Типы для TypeScript лежат рядом со скриптом.
  • Несколько форм на странице, каждая со своим ключом и обработчиком, если вызовы сниппета различаются параметрами.
  • Fenom и @FILE-чанки через pdoTools на MODX 2 и MODX 3.

Установка ​

Через Менеджер пакетов:

Либо соберите transport из GitHub.

FetchIt 4 — один пакет для MODX 2.8 и MODX 3 вместо линий 1.x и 3.x. Он ставится поверх установленной версии: системные настройки и чанки остаются как есть. Что может задеть ваш код: Переход на FetchIt 4.

FormIt ставится вместе с FetchIt, если его на сайте ещё нет.

Дальше: Быстрый старт.

Требования ​

  • MODX Revolution 2.8+ или 3.x.
  • PHP 7.4 и новее.
  • FormIt, если формы обрабатывает он.
  • pdoTools, если чанки форм на Fenom или в файлах.