Урок 24. Создание простого компонента 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');
Обратите внимание как я указал путь для 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:
- 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
- Вставка кода в MODX
- Инструменты разработчика Chrome - мне очень пригодились при отладке сниппета
Илья Строганов
10.12.2012 23:15Отличное объяснение! Всё получилось, но есть одно Но :)
Локально на винде всё работает.
А на хостинге (unix) нет. Точно такой же modx. Файлы и сниппеты один в один. Шаблон минимизировал до минимума:
http://shop.spbike.ru/index.php?id=2
Не реагирует на ползунок как надо :(
В чём может быть дело, куда копать?
Спасибо.
Viktor Minator
11.12.2012 02:00Нужно проверить если по указанному адресу файл и есть ли к нему доступ. Либо переместить его в папку assets/components/qaptcha/web/file.php и поменять пути в js или сниппете...
http://snag.gy/kNkZJ.jpg
Илья Строганов
11.12.2012 10:43Спасибо, разобрался.
Вся проблема была в .htaccess в папке core/ что идёт в комплекте.
IndexIgnore */*
Order Deny,Allow
Deny from all
Зачем вообще папка core/components/ существует если есть /assets/components/ ?
Илья Строганов
11.12.2012 10:45В пред. посте код обрезался:
IndexIgnore */*
Files *.php
Order Deny,Allow
Deny from all
/Files
lordfootball
01.02.2013 14:04Я сегодня уже писал. У меня чего-то не получается. Пытаюсь привязать это к formIt таким образом
[[!Qaptcha]]
[[!FormIt?
&hooks=
..........
[[+qaptcha.Slider]]
что-то неправильно? т.к. не работает
lordfootball
01.02.2013 15:28Вот код на странице
div class="QapTcha">/div>, т.е. див пустой
вот адрес, где тренируюсь http://www.euro-to.ru/test
как быть?
lordfootball
01.02.2013 17:12в общем получилось =)
Igor Churkin
15.06.2013 19:43получилось !!! пока это моя первая удачная замутка с такими кодами.
я счастлив.
Igor Churkin
15.06.2013 19:43получилось !!! пока это моя первая удачная замутка с такими кодами.
я счастлив.
Tora-Toda
05.03.2014 11:15Я думаю что не стоит делать такую ссылку:
'PHPfile: \''. MODX_SITE_URL. 'core/components/qaptcha/php/Qaptcha.jquery.php\''
лучше сделать ресурс с сниппетом - а в него поместить код данного файла