Ajaxform modx: AjaxForm / Утилиты / Дополнения MODX / modstore.pro

Содержание

FormIt формы на MODx. Пишем свой hook для авторизации пользователя

В данном руководстве я покажу, как можно при помощи хуков FormIt реализовать более сложную логику формы, обрабатываемой при помощи сниппета FormIt, чем просто стандартная отправка email. Конкретно в данном примере разберем, как можно сделать форму авторизации, построенную на FormIt и AjaxForm.

}

7 минут на прочтение

Теги по теме:

Frontend
MODX

Для чего все это нужно и почему не компонент Login?

Не знаю, почему, но за всю свою многолетнюю практику работы с MODX Revolution, я использовал компонент Login только один раз. Отличие Login от FormIt состоит в том, что Login решает ряд задач, посвященных конкретно авторизации/регистрации и редактированию профиля пользователя на Frontend, а

FormIt — это более универсальный компонент, с помощью которого можно построить практически любую логику обработки формы, но придется немного покодить.

Если перед вами не стоит задача построить сайт с регистрацией и авторизацией на Frontend за час, то я бы предпочел исползовать FormIt, написав для него несколько хуков, вместо того, чтобы разбираться в Login и кастомизировать его формы, доступные по-умолчанию.

Я буду использовать ниже синтаксис Fenom вместо стандартного синтаксиса MODX.

В предыдущей статье я разбирал принцип работы FormIt. При работе с FormIt в чистом виде необходимо в самой форме добавлять дополнительные плейсхолдеры для вывода значений ошибок, значений полей и так далее. Для того, чтобы упростить себе жизнь, можно использовать данный компонент в связке с AjaxForm, что позволит сделать формы асинхронными и избавит вас от необходимости вставлять упомянутые выше плейсхолдеры.

Создаем html-код формы авторизации

На данном шаге нам необходимо создать болванку (html-код) нашей формы, которую мы в дальнейшем будем наполнять логикой.

Возьмем для примера такой код (взят из вполне конкретного проекта):

Создаем чанк с именем b. signinForm и помещаем в него код формы в том виде, в котором он показан выше. Далее мы будем вызывать данный чанк в параметрах сниппета AjaxForm.

Делаем вызов сниппета AjaxForm в связке с FormIt

Для того, чтобы наша форма хотя бы просто отобразилась на странице, необходимо в том месте, где она должна размещаться, поставить вызов сниппета AjaxForm.

Не важно, запускаете вы сниппет AjaxForm или FormIt, его необходимо вызывать без кэширования (с восклицательным знаком спереди), так как при любой загрузке страницы нам нужен свежий вызов, а не «слепок» из кэша.

Валидация полей

FormIt имеет встроенный механизм валидации полей. Правила валидации мы можем задать в параметре validate. Прежде, чем будет запущен какой-либо хук из параметра hooks, все поля будут прогнаны через указанные правила валидации. В нашем случае, это простое правило required, которое проверит, есть ли хотя бы один символ во введенных полях. Если поля успешно прошли валидацию, будет запущен первый хук из цепочки хуков, указанных в параметре hooks через запятую.

В нашем случае мы создадим один хук под названием loginHook.

Что такое хук?

Для простоты понимания, хук — это сниппет, который запускается изнутри механизмов FormIt. Данный сниппет создается точно так же, как и все остальные сниппеты, а на входе такой сниппет принимает параметр $hook.

Стоит отметить, что если ваша форма подразумевает более сложную логику валидации полей, то вы можете создать собственный валидатор, который также является сниппетом, внутри которого вы можете проверить поле на соответствие значению в базе данных или любым иным способом.

Более подробно об этом написано здесь.

Но! И это еще не все! Вы можете проводить валидацию полей внутри хуков, что бывает также удобно.

Наполняем наш хук кодом

Сперва добавьте в параметр hooks в вызове сниппета AjaxForm или FormIt значение loginHook:

...
'hooks' => 'loginHook',
...

После чего необходимо создать сниппет loginHook, код которого нас сейчас будет интересовать больше всего.

В данном примере авторизация пользователя осуществляется через встроенный в modx процессор login. Если ваша логика авторизации отличается от встроенной логики авторизации modx, вы можете создать собственный процессор, наследующий класс процессора login, или написать код авторизации непосредственно в хуке.

Таким образом, вызов AjaxForm ниже в связке с хуом loginHook и формой b.signinForm позволит вам реализовать форму авторизации пользователя на сайте:

Поделитесь с друзьями в социальных сетях

Другие статьи

Как заработать фрилансеру
#e-Маркетинг
Жизненный цикл приложения на MODx
#Backend
#Frontend
#MODX
Аутентификация входящих API запросов Laravel
#Backend
#Laravel
4 правила хорошего кода
#Backend
#Frontend

Узнавайте первым о новых курсах и лекциях

Темы

Backend

Frontend

Веб-дизайн

e-Маркетинг

MODX

Laravel

Работа в IT

Vue

Мы используем куки на нашем сайте.

Продолжая просмотр, вы соглашаетесь с условиями пользовательского соглашения

Ajax форма обратной связи – быстро и просто

Данная статья написана для версии MODX 2.7.1, но также проверена для версий ниже. Вплоть до 2.5.8. Думаю, данная статья будет актуальна долгое время для всей линейки версий от 2.0.0 до 3.0.0. Если это статья не актуальна, наврятли Вы вообще бы на нее попали.

Важно: если Вы не разбираетесь в MODX на базовом уровне: не знаете что такое чанки, сниппеты. Если Вы не знаете как написать на HTML форму обратной связи – закройте статью, почитайте где-нибудь об этом, тут такие базовые вещи даже не объясняются.

P.S: Если Вы вдруг не знаете что такое AJAX, рекомендуем прочитать другую нашу статью.

Практика: AJAX форма обратной связи на MODX

Давайте к делу. Все очень и очень просто. Просто будьте внимательны! Весь код рабочий, проверяли на себе не один раз.

Допустим, вот так выглядит наша форма.

Теперь для полноценной работы нам нужно установить два дополнительных расширения. Первое – FormIt. Второе – AjaxForm.

FormIt – Будет выполнять две функции. Отправлять само сообщение и хранить в себе шаблон (тело, внешний вид) самого сообщения.

AjaxForm – Это непосредственно модуль, который будет выполнить AJAX запрос. Это самая легкая часть в этом уроке.

Где скачать

Идем в workshop MODX. Вверху в панели управления (можно сразу скриншот смотреть, там все понятно) ищем “Пакеты” (На версиях постарее “Приложения”), выбираем “Установщик” и уже ниже жмем зеленую кнопку “Загрузить пакеты”.

Теперь (опять скриншот ниже, он всегда будет ниже пояснять вышеописанное) просто в строке поиска набираем нужный нам “плагин” и жмем загрузить. У нас кнопки “загрузить” нет, т.к модуль уже установлен.

После загрузки возвращаемся в “Установщик” (первый скриншот, до нажатия на кнопку “Загрузить пакеты”). Теперь у нас есть целый список наших “расширений”. Просто их устанавливаем.

У нас на скриншоте они уже установлены, у Вас будет написать “Установить” вместо “Деинсталировать”.

С установкой и загрузкой – все.

Установка формы обратной связи и подключение AJAX

Теперь Вы (без нашей помощи) должны проследовать туда (шаблон, чанка) где лежит Ваша форма (html-код) и вырезать ее из того места. Все, что находится в тегах <form></form>, если что. Сохраните ее пока где-нибудь.

На место формы вставляем следующий код:

[[!AjaxForm? &snippet=`FormIt` &form=`tpl.AjaxForm.example` &emailTpl=`email_tpl` &hooks=`email` &emailSubject=`Тестовое сообщение` &emailTo=`[email protected]` &emailFrom=`[email protected]` &validate=`name:required, email:required,message:required` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено` ]]

Важно: После name:required, стоит пробел, чтобы строка переносилась в адаптивной версии сайта, уберите его. И если вдруг, по каким-то волшебным причинам он не заработает, тут два варианта. 1) Вы накосячили. 2) Что-то изменилось в модуле, смотрите официальную документацию, код мы брали оттуда.

Что это все значит, и что за что отвечает. Давайте по порядку:

[[!AjaxForm? – это сам модуль который мы используем.

Важно: &snippet=`FormIt` – это какой сниппет мы используем. Вы же скачали FormIt? Он просто будет отправлять запрос туда, т.е все сделает за нас.

Важно: &form=`ajaxForm` – здесь мы вписывание название чанка в котором будет храниться наша форма (<form></form>). Т.е через 2-3 минуты мы приступим к созданию нового чанка. Название может быть любым, смотрите скриншот выше. Мы назвали наш чанк – ajaxForm.

Важно: &emailTpl=`email_tpl` – это шаблон письма. Также через 4-5 минут приступим к созданию нового чанка.

&hooks=`email` – Это хук, т.

е мы объясняем модулю что идет отправка письма.

&emailSubject=`Тестовое сообщение` – Тут указывается тема письма. Если кто-то еще не понял – редактируем текст между кавычек ` `.

&emailTo=`[email protected]` – Куда посылаем письмо.

&emailFrom=`[email protected]` – От кого пришло. Можно указать любую почту.

&validate=`name:required,email:required,message:required` – Какие поля в нашей форме должны быть обязательно заполненными. Подробней рассмотрим позже, не переживайте!

&validationErrorMessage=`В форме содержатся ошибки!` – Ошибка, которая будет вылезать в правом верхнем углу страницы, если данные не отправлены по каким-то причинам.

&successMessage=`Сообщение успешно отправлено` – Тоже в правом верхнем углу, только сообщение об успешной отправке.

Создаем чанк с формой

Еще раз, просто создаем новый чанк, НО даем ему такое название, которое указано в &form=` `. В нашем случае это ajaxForm. Если не поняли, смотрите скриншот ниже.

Но прежде чем перенести форму в чанк, давайте внесем в нее кое-какие изменения. Смотрите:

1. Напишите перед каждым <input> и <textarea> данный код – <span class=”error_message”></span>. С помощью него модуль будет добавлять сообщение об ошибке.

2. Каждому <input> и <textarea> задайте атрибут name. Это делается для двух вещей.

А) Для того, чтобы мы потом могли получать “переменные” с текстом, который поместили (заполнили пользователи) в определенное поле. Заполнили телефон (поле с атрибутом name=”phone”), получили переменную [[+phone]]. Подробней через минуту разберемся.

Б) Это для нашего &validate=`name:required,email:required,subject:required`.
Допустим мы хотим сделать какое-то поле обязательным или нет. Например, Вы не хотите делать обязательным поле с атрибутом subject. Просто уберите subject:required из кода вызова Ajax запроса. Или Вы хотите сделать обязательным поле с атрибутом name= “phone” – просто добавляем phone:required в код вызова Ajax запроса. Будет так: &validate=`name:required,email:required,phone:required`

3) Присвойте всей форме класс AJAX FORM. Самый верх скриншота.

Теперь можно все сохранить и добавить в наш новый чанк ajaxForm (или как Вы там его назвали).

Созданием чанк с шаблоном письма

Снова, просто создаем новый чанк и называем его так, как указано в &emailTpl=“. В нашем случае это email_tpl.

Пишите в шаблоне что хотите, главное используйте необходимые “переменные” (так их назовем) для вывода информации в Ваше сообщение. И не забудьте сохранить чанк.

“Переменные” имеют такой вид [[+НАЗВАНИЕ]]. Где название это обозначение атрибута name в <input> которые мы добавляли.

Наглядные примеры: инпут с name=”name” имеет переменную [[+name]], инпут с name=”phone” имеет переменную [[+phone]].

Важно: Вы можете создать любой атрибут name, даже name=”pupa” и получить переменную [[+pupa]].

Конец

Вот и все, наша форма уже готова. Можете проверять.

Спасибо за чтение. Надеюсь данная статья Вам поможет. Пожалуйста, оставляйте комментарии, будем поддерживать эту статью максимально долго и помогать друг другу. Наши технические специалисты (авторы блога) могут ответить на Ваши вопросы.

Как установить CleanTalk Anti-Spam на MODX

Загрузите файл плагина antispambycleantalk-1.4-stable.transport.zip.
Предыдущая версия antispambycleantalk-1.3-stable.transport.zip.

Перейти к панели управления защитой от спама

1. Перейдите в панель управления веб-сайтом. Найдите в верхнем меню раздел «Дополнительно» , выберите «Установщик» .

2. Нажмите « Выберите поставщика » в раскрывающемся списке.

Выбрать официальный modx. com провайдер

3. Нажмите «Загрузить дополнительные материалы»

Найдите « cleantalk » (1), затем нажмите « Download » (2).

4. Нажмите «Вернуться к управлению пакетами» .

5. Нажмите «Установить» antispambycleantalk.

«Продолжить»

«ОК» после установки

6. Перейдите в раздел Конфигурация –> «Системные настройки» .

Заполнить «cleantalk» в поле фильтра и нажмите Enter. Скопируйте и вставьте ключ доступа с панели инструментов CleanTalk в файл antispambycleantalk. api_key и проверьте статус плагина (должен быть «Да» ).

Вы можете добавить исключения для URL-адресов, если вам это нужно (параметр antispambycleantalk.exclusions_url ). Например, чтобы исключить URL www.example.com/category/ajax.php , введите category/ajax.php .

7. Проведите тестовую регистрацию, используя адрес электронной почты из черного списка [email protected]. Сообщение CleanTalk должно отображаться.

Ручная установка

Открыть инструкцию по ручной установке

1. Скачать архив.

2. Скопируйте загруженный файл в папку «/core/packages» .

3. Перейдите в панель управления веб-сайтом. Найдите раздел «Дополнительно» в верхнем меню, выберите «Установщик» .

4. Выберите «Локальный поиск пакетов» из раскрывающегося списка

9 0002 и нажмите «Да» .

5. Нажмите «Установить» antispambycleantalk.

«Продолжить» «ОК» после установки

6. Перейдите в раздел Конфигурация –> «Системные настройки» .

Введите «cleantalk» в поле фильтра и нажмите Enter. Скопируйте и вставьте ключ доступа с панели инструментов CleanTalk в файл antispambycleantalk.api_key и проверьте статус плагина (должен быть «Да» ).

При необходимости вы можете добавить исключения для URL-адресов ( antispambycleantalk.exclusions_url вариант). Например, чтобы исключить URL www.example.com/category/ajax.php , введите category/ajax.php .

7. Проведите тестовую регистрацию, используя адрес электронной почты из черного списка stop_email@example. com. Сообщение CleanTalk должно отображаться.

Используйте это руководство, чтобы добавить веб-сайт на панель защиты от спама CleanTalk: https://cleantalk.org/help/add-website

Пожалуйста, перейдите в Личный кабинет, чтобы увидеть статус защиты от спама, добавить новые сайты или управлять существующими!

Создать учетную запись

Ваша панель управления

Возможно, это также будет интересно

Все руководства по установке CleanTalk Anti-Spam Service
CleanTalk Anti-Spam Руководства по установке Здесь вы можете найти руководства по установке плагинов…
Установка антиспам-расширения CleanTalk в OpenCart2 и OpenCart3
Как установить расширение CleanTalk Anti-Spam на OpenCart2 и OpenCart3 Чтобы установить Anti-Spam на OpenCart4…
Установка расширения CleanTalk Anti-Spam на OpenCart 4
Как установить CleanTalk Anti-Spam Расширение в OpenCart 4 Перейти на панель управления защитой от спама Сделать резервную копию. ..

Представляем mxManager: iOS-приложение для MODX

Привет, модксеры! Меня зовут Василий Наумкин и я хочу познакомить вас с моим приложением для iOS mxManager , который можно использовать для управления веб-сайтом, созданным с помощью MODX Revolution.

Может быть, вы слышали о нем, может быть, даже пробовали, но я уверен, что вы не знаете обо всех его возможностях.

Расскажу кратко:

Управление ресурсами: создание, обновление, удаление, публикация и т.д.
Управление элементами: шаблоны, чанки, плагины, сниппеты, телевизоры и категории.
Управление файлами через медиа-источники: создание, обновление, удаление.
Просмотр журнала системных событий.
Просмотрите и очистите журнал ошибок.
Очистка кеша сайта.
Русский и английский интерфейс
Авто-макет: вертикальный и горизонтальный режим практически на всех экранах.
Приложение не собирает никаких ваших данных и никуда не отправляет (кроме вашего сайта, конечно).

Если вам не терпится попробовать, вот ссылка на App Store.

Принцип работы

В первую очередь необходимо установить серверный компонент, который будет принимать запросы от приложения и отдавать ему ответы в формате JSON.

Все запросы будут отправлены в каталог менеджера, где они будут перехвачены плагином при событии On Manager Page Init.

Конечно, вы можете использовать протокол https и обычную аутентификацию на веб-сервере. Более того, я искренне рекомендую вам использовать их оба!

Все запросы отправляются с параметрами mx_action и версии через POST, чтобы не фиксировать их в логах веб-сервера. Плагин mxManager работает только если видит mx_action в $_REQUEST .

Исходный код серверной части открыт, поэтому вы можете проверить его на наличие потенциальных уязвимостей. Компонент всегда использует методы безопасности MODX и проверку прав доступа. От них также зависит отображение доступных пунктов меню приложения.

Работа с ресурсами

Как видите, поддерживаются все основные свойства ресурсов MODX. Вы можете изменить его тип, определить шаблон и редактировать различные поля. Там и телевизоры. Также он поддерживает все основные типы телевизоров, включая выбор ресурсов.

Возможности, запланированные на будущее:

Редактор форматированного текста для поля содержимого
Поддержка некоторых компонентов CRC, таких как Tickets и miniShop2.

Работа с элементом

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

По техническим причинам я не могу обеспечить работу с кастомными телевизорами, т.к. их появление в админке MODX жестко прописано с помощью PHP + HTML + Javascript, но вы все равно можете просмотреть их «сырое» значение, как оно хранится в базе данных.

Также нет поддержки статических элементов, и я не думаю, что ее следует добавлять в приложение iOS, потому что она редко используется на рабочих сайтах. Поправьте меня если я ошибаюсь.

Работа с файлами

Вы можете создавать, переименовывать и удалять каталоги и файлы. Если файл текстовый, его можно легко редактировать. Изображения отображаются как изображения. Поля содержимого файлов неизвестных типов будут пустыми.

Содержимое файлов более 1 мегабайта не будет загружено — но вы все равно можете их переименовать или удалить.

Не существует, но планируется:

Защита системных файлов и каталогов от удаления и переименования. Теперь так же, как и через родную админку MODX, можно сломать сайт одним неловким движением в директории ядра.
Загружайте файлы с вашего устройства iOS.

Прочее

Также есть экраны журнала событий, журнала ошибок и очистки системного кеша. Как и все остальные разделы, они отображаются только в том случае, если у вас есть к ним доступ в оригинальном менеджере MODX.

Вот планирую добавить поиск в журнале событий.

Общие возможности

Во всех сетках, где это возможно, использовалась ленивая загрузка при прокрутке и отображение меню жестом «свайп влево».

Свайпом можно редактировать настройки подключения к сайтам, активностям, ресурсам, элементам и файлам.

Пробовал минимизировать трафик на сайт и обратно. По отзывам пользователей, mxManager работает намного быстрее, чем оригинальный менеджер на мобильных устройствах.

Обмен данными осуществляется в формате JSON. Когда дело доходит до двоичных файлов, они кодируются в base64.

Резюме

Я работал около полутора лет, чтобы выпустить это приложение. 4 месяца чистой работы, а остальное время на изучение Objective-C, Swift, потом правила App Store и тонкости модерации.

Само приложение бесплатно но содержит одно ограничение — вы можете сохранять настройки только для одного сайта за раз. Если вы хотите разблокировать неограниченное количество сайтов, вам нужно будет заплатить 4,9 доллара США.