Урок создан на основе уже существующего компонента Qaptcha с внесением некоторых исправлений. Рассмотрим создание простого компонента каптчи для проверки перед отправкой сообщения, регистрации на сайте и т.д.
Создание необходимых каталогов компонента
Создадим каталоги в нашей MODX установке:
- assets/components/qaptcha/
- core/components/qaptcha/
Создавать капчу будем на основе jQuery плагина Qaptcha. Скачаем его файлы c папками и поместим в соответствующие MODX каталоги: в core/components/qaptcha/ я создал каталог php и поместил туда файл Qaptcha.jquery.php, в каталог assets/components/qaptcha/ я скопировал папки images и jquery со всеми файлами и получил следующую структуру каталогов:
*
Создание сниппета Qaptcha
Создадим вначале пространство имён для Qaptcha, потом мы к нему вернёмся, когда будем использовать Управление Словарями (Lexicons).
Создадим сниппет 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-файлов заменяет содержимое контейнера
на слайдер. Давайте создадим плейсхолдер, который будет выводить этот контейнер:Сейчас наш сниппет имеет следующий вид:
Далее необходимо вызвать на странице плагин Qaptcha, который произведёт заменту контейнера с классом .QapTcha на слайдер. Скрипт вызова плагина мы произведём через метод regClientHTMLBlock, при этом необходимые параметры передадим через переменную $paramqaptcha. Окончательный код сниппета Qaptcha будет иметь следующий вид:
**Замечание** Данный код был написан "снизу-вверх", поэтому читать его стоит точно так же.
В добавленной части мы вставляем вызов плагина и передаём 3 параметра через переменную $paramqaptcha:
- disabledSubmit - кнопка отправки недоступна
- PHPfile - путь к php-файлу Qaptcha.jquery.php
- txtLock - текст при заблокированном слайдере
- txtUnlock - текст при разблокированном слайдере
Как видите всё просто. По своему усмотрению можно также отредактировать файл QapTcha.jquery.js и определить его значения по-умолчанию (строки 14-21):
Тут всё понятно. Мне осталось объяснить переменные $txtLock и $txtUnlock. Так как я использую два контекста ru и en, то мне нужно создать по два сообщения через Управление Словарями (Lexicons) с необходимыми значениями сообщений для этих языков:
Обратите внимание на экранирование одинарной кавычки обратным слешем!
Итак со сниппетом закончили, теперь осталось понять как это всё использовать. Установим Quip, подключим библиотеку jQuery и вставим на странице вызов комментариев:
Стандартное оформление Quip комментариев на странице. Все чанки можете найти в официальной документации, я покажу лишь код чанка quipReply.tpl c вызовом сниппета Qaptcha и плейсхолдером qaptcha.Slider:
Итак мы разобрались с данным сниппетом. Некоторые моменты здесь освещены не полностью. Есть другие мои статьи, которые помогут разобраться в этом уроке по созданию компонента:
- [Разработка дополнения в MODX Revolution]([[~133]])
- [Вставка кода в MODX]([[~128]])
- [Инструменты разработчика Chrome]([[~159]]) - мне очень пригодились при отладке сниппета