Урок 24. Создание простого компонента Qaptcha

Урок создан на основе уже существующего компонента Qaptcha с внесением некоторых исправлений.

Рассмотрим создание простого компонента каптчи для проверки перед отправкой сообщения, регистрации на сайте и т.д.

Создание необходимых каталогов компонента

Создадим каталоги в нашей MODX установке:

  • assets/components/qaptcha/
  • core/components/qaptcha/

Создавать капчу будем на основе jQuery плагина Qaptcha. Скачаем его файлы c папками и поместим в соответствующие MODX каталоги: в core/components/qaptcha/ я создал каталог php и поместил туда файл Qaptcha.jquery.php, в каталог assets/components/qaptcha/ я скопировал папки images и jquery со всеми файлами и получил следующую структуру каталогов:

Структура каталогов MODX компонента

Создание сниппета Qaptcha

Создадим вначале пространство имён для Qaptcha, потом мы к нему вернёмся, когда будем использовать Управление Словарями (Lexicons).

Пространство имён для Qaptcha

Создадим сниппет Qaptcha. Все последующие действия мы производим внутри кода сниппета. Во-первых обнулим сессию iQaptcha (при каждой перегрузке наш слайдер будет в изначально левом положении):

session_start();
$_SESSION ['iQaptcha'] = false;

Далее подключим необходимые стили и скрипты, которые находятся у нас в assets/components/qaptcha/:

$modx->regClientCSS(MODX_SITE_URL.'assets/components/qaptcha/jquery/QapTcha.jquery.css');
$modx->regClientScript(MODX_SITE_URL.'assets/components/qaptcha/jquery/jquery-ui.js');
$modx->regClientScript(MODX_SITE_URL.'assets/components/qaptcha/jquery/jquery.ui.touch.js');
$modx->regClientScript(MODX_SITE_URL.'assets/components/qaptcha/jquery/QapTcha.jquery.js');
Для работы слайдера нужна библиотека jQuery, поэтому нужно её вначале подключить. Плагин идёт в комплекте с библиотекой, но я её подключил в папке, поэтому здесь я не указывал к ней путь.

Обратите внимание как я указал путь для regClient - это сделано, чтобы наш компонент работал в разных контекстах, если указать просто 'assets/components/qaptcha/jquery/jquery.js, то в другом контекте, с корневой папкой /demo/ сгенерированный путь будет modx.ws/demo/assets/components/qaptcha/jquery/jquery.js и компонент не будет работать.

Плагин Qaptcha при помощи своих js-файлов заменяет содержимое контейнера <div class="QapTcha"></div> на слайдер. Давайте создадим плейсхолдер, который будет выводить этот контейнер:

Сейчас наш сниппет имеет следующий вид:

Далее необходимо вызвать на странице плагин Qaptcha, который произведёт заменту контейнера с классом .QapTcha на слайдер. Скрипт вызова плагина мы произведём через метод regClientHTMLBlock, при этом необходимые параметры передадим через переменную $paramqaptcha. Окончательный код сниппета Qaptcha будет иметь следующий вид:

Замечание Данный код был написан "снизу-вверх", поэтому читать его стоит точно так же.

В добавленной части мы вставляем вызов плагина и передаём 3 параметра через переменную $paramqaptcha:

  1. disabledSubmit - кнопка отправки недоступна
  2. PHPfile - путь к php-файлу Qaptcha.jquery.php
  3. txtLock - текст при заблокированном слайдере
  4. txtUnlock - текст при разблокированном слайдере

Как видите всё просто. По своему усмотрению можно также отредактировать файл QapTcha.jquery.js и определить его значения по-умолчанию (строки 14-21):

Тут всё понятно. Мне осталось объяснить переменные $txtLock и $txtUnlock. Так как я использую два контекста ru и en, то мне нужно создать по два сообщения через Управление Словарями (Lexicons) с необходимыми значениями сообщений для этих языков:

Обратите внимание на экранирование одинарной кавычки обратным слешем!

Итак со сниппетом закончили, теперь осталось понять как это всё использовать. Установим Quip, подключим библиотеку jQuery и вставим на странице вызов комментариев:

Стандартное оформление Quip комментариев на странице. Все чанки можете найти в официальной документации, я покажу лишь код чанка quipReply.tpl c вызовом сниппета Qaptcha и плейсхолдером qaptcha.Slider:

Итак мы разобрались с данным сниппетом. Некоторые моменты здесь освещены не полностью. Есть другие мои статьи, которые помогут разобраться в этом уроке по созданию компонента:

Demo GitHub