Простые отзывы на сайте AjaxForm (Formit) + MIGX
Создание отзывов на сайте без использования платных дополнений или громоздких, таких как Tickets.
Нам понадобятся следующие дополнения: Formit, AjaxForm и если хочется защитить форму — recaptchav3.
Данная статья будет полезна новичкам в modx и ни на что не претендует.
1) Создание ресурса «Отзывы», Конфигурация MIGX и создание TV поля.
1.1) Создайте ресурс «Отзывы» желательно с отдельным шаблоном «Отзывы».
1.2) Теперь создайте конфигурацию MIGX. Для этого Нужно зайти в «Пакеты» — «MIGX» и добавить конфигурацию. Например, назовите ее reviews. (!!! запомните название, оно понадобится на шаге 1.3)
На вкладке Formtabs нажмите «Добавить элемент» и далее добавьте 4 поля:
name — Имя, text — Текст отзыва, phone — Телефон, published — Публиковать отзыв.
При добавлении поля published в поле Input TV Type нужно вписать checkbox, а на вкладке Input Options в поле Input Option Values написать Да==1. Тем самым поле получится в виде галочки.
На вкладке Columns так же добавьте эти поля, но у поля published на вкладке Render, в поле Render выберете this.renderCrossTick, что бы это поле отображалось в виде галочки.
1.3 Теперь создайте ТВ поле с названием «reviews» и подписью «Список отзывов». На вкладке «Параметры ввода» выберите «migx», а в поле «Конфигурация» введите название конфигурации, созданной в пункте 1.2), в нашем случае reviews. На вкладке «Доступно для шаблонов» выберите наш шаблон «Отзывы».
Теперь если у вас оставят отзыв они будут храниться в данном ТВ-поле у этого ресурса.
2) Форма для добавления отзывов.
В шаблоне «Отзывы» в нужном вам месте добавьте вызов AjaxForm:
Обычный синтаксис modx
Разберем некоторые параметры:
rcv3Action — Уникальное значение на всем сайте. Необходим при использовании Рекапчи.
hooks
rcv3 — проверка на робота
addReview — наш сниппет, который добавляет отзыв в ТВ-поле «Список отзывов». О нем ниже
email — отправляет Администратору письмо о новом отзыве.
form — чанк, который содержит код формы. Пример:
name:required — Поле является обязательным
:russian — Поле обязательно на русском языке (дополнительная защита от ботов. об этом ниже)
text:required — поле текст отзыва — обязательное
customValidators — мы указываем что подключаем кастомный валидатор russian. Если вы хотите так же, что бы была проверка на русский текст имени, то можете создать сниппет russian со следующим содержимым:
Ну и теперь можно вывести только опубликованные отзывы.
Обычный синтаксис modx
Fenom
Нам понадобятся следующие дополнения: Formit, AjaxForm и если хочется защитить форму — recaptchav3.
Данная статья будет полезна новичкам в modx и ни на что не претендует.
1.1) Создайте ресурс «Отзывы» желательно с отдельным шаблоном «Отзывы».
1.2) Теперь создайте конфигурацию MIGX. Для этого Нужно зайти в «Пакеты» — «MIGX» и добавить конфигурацию. Например, назовите ее reviews. (!!! запомните название, оно понадобится на шаге 1.3)
На вкладке Formtabs нажмите «Добавить элемент» и далее добавьте 4 поля:
name — Имя, text — Текст отзыва, phone — Телефон, published — Публиковать отзыв.
При добавлении поля published в поле Input TV Type нужно вписать checkbox, а на вкладке Input Options в поле Input Option Values написать Да==1. Тем самым поле получится в виде галочки.
На вкладке Columns так же добавьте эти поля, но у поля published на вкладке Render, в поле Render выберете this.renderCrossTick, что бы это поле отображалось в виде галочки.
1.3 Теперь создайте ТВ поле с названием «reviews» и подписью «Список отзывов». На вкладке «Параметры ввода» выберите «migx», а в поле «Конфигурация» введите название конфигурации, созданной в пункте 1.2), в нашем случае reviews. На вкладке «Доступно для шаблонов» выберите наш шаблон «Отзывы».
Теперь если у вас оставят отзыв они будут храниться в данном ТВ-поле у этого ресурса.
2) Форма для добавления отзывов.
В шаблоне «Отзывы» в нужном вам месте добавьте вызов AjaxForm:
Обычный синтаксис modx
[[!AjaxForm?
&rcv3Action=`reviews-action`
&snippet=`FormIt`
&hooks=`rcv3,addReview,email`
&form=`form.review`
&emailFrom=`[[++emailsender]]`
&emailSubject=`Новый отзыв на сайте [[++site_name]]`
&emailTo=`ВАШ ЕМЕЙЛ`
&emailTpl=`tpl.review`
&successMessage=`<h5>Ваш отзыв добавлен</h5><p>После проверки администратором он будет опубликован.</p>`
&validate=`name:required:russian,text:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&customValidators=`russian`
]]
Fenom{'!AjaxForm' | snippet : [
'rcv3Action' => 'reviews-action',
'snippet' => 'FormIt',
'hooks' => 'rcv3,addReview,email',
'form' => 'form.review',
'emailFrom' => $_modx->config.emailsender,
'emailSubject' => 'Новый отзыв на сайте ' ~ $_modx->config.site_name,
'emailTo' => 'ВАШ ЕМЕЙЛ',
'emailTpl' => 'tpl.review',
'successMessage' => '<h5>Ваш отзыв добавлен</h5><p>После проверки администратором он будет опубликован.</p>',
'validate' => 'name:required:russian,text:required',
'validationErrorMessage' => 'В форме содержатся ошибки!',
'customValidators' => 'russian',
]}
Разберем некоторые параметры:
rcv3Action — Уникальное значение на всем сайте. Необходим при использовании Рекапчи.
hooks
rcv3 — проверка на робота
addReview — наш сниппет, который добавляет отзыв в ТВ-поле «Список отзывов». О нем ниже
email — отправляет Администратору письмо о новом отзыве.
form — чанк, который содержит код формы. Пример:
<form action="{$_modx->resource.id | url}" method="post" novalidate>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Ваше имя">
<span class="error_name"></span>
</div>
<div class="form-group">
<input type="tel" name="phone" class="form-control" placeholder="Ваш телефон (не публикуется)" pattern="\d*" novalidate>
<span class="error_phone"></span>
</div>
<div class="form-group">
<textarea name="text" placeholder="Текст отзыва" class="form-control"></textarea>
<span class="error_text"></span>
</div>
<button type="submit" class="btn btn-primary btn-red">Отправить</button>
{'!rcv3_html' | snippet : [
'action' => $rcv3Action,
'error' => $_modx->getPlaceholder('fi.error.g-recaptcha-response'),
]}
</form>
emailTpl — чанк, который содержит текст письма. Пример:<p>Добавлен новый отзыв на сайте {$_modx->config.site_url}</p>
<p><strong>Контакты</strong></p>
<p>Имя: {$name}</p>
<p>Телефон: {$phone}</p>
<p><strong>Отзыв</strong></p>
<p>{$text | nl2br}</p>
validatename:required — Поле является обязательным
:russian — Поле обязательно на русском языке (дополнительная защита от ботов. об этом ниже)
text:required — поле текст отзыва — обязательное
customValidators — мы указываем что подключаем кастомный валидатор russian. Если вы хотите так же, что бы была проверка на русский текст имени, то можете создать сниппет russian со следующим содержимым:
<?php
if (preg_match("/[a-zA-Z0-9]+/ui", $value)) {
$validator->addError($key, 'Имя должно быть на русском языке!');
return false;
}
return false;
Так же самое главное — это создать сниппет addReview и в переменную $review_resource_id прописать ID ресурса «Отзывы»<?php
$review_resource_id = 17;
$name = $hook->getValue('name');
$text = $hook->getValue('text');
$phone = $hook->getValue('phone');
if (empty($name) || empty($review)) {
return false;
}
$doc = $modx->getObject('modResource', ['id' => $review_resource_id]);
$reviews = $doc->getTVValue('reviews');
$reviews_array = $modx->fromJSON($reviews);
$next_id = 1;
//get the next MIGX_id
if (is_array($reviews_array)) {
foreach ($reviews_array as $item){
$id = $modx->getOption('MIGX_id', $item, 0) + 1;
if ($id > $next_id) {
$next_id = $id;
}
}
} else {
$reviews_array = array();
}
$item = array(
'MIGX_id' => $next_id,
'name' => $name,
'text' => $text,
'phone' => $phone,
);
$reviews_array[] = $item;
if (!$doc->setTVValue('reviews', $modx->toJson($reviews_array))) {
$modx->log(modX::LOG_LEVEL_ERROR,'Проблемы при добавлении отзыва в сниппете addReview');
// return false;
}
return true;
Ну и теперь можно вывести только опубликованные отзывы.
Обычный синтаксис modx
[[getImageList?
&tvname=`reviews`
&where=`{ "published:=":"1" }`
&tpl=`one.review.tpl`
]]
Fenom
{var $reviews = json_decode($_modx->resource.reviews, true)}
{if $reviews}
<div class="row">
{foreach $reviews as $one}
{if !$one.published} {continue} {/if}
<div class="col-lg-4">
<div class="card mb-2">
<div class="card-body">
<h5 class="card-title">{$one.name}</h5>
<p class="card-text">
{$one.text}
</p>
</div>
</div>
</div>
{/foreach}
</div>
{/if}
P.S. Для работы recaptchav3 в системных настройках, на вкладке Formit необходимо указать публичный и секретный ключи выданные гуглом.Комментарии: 18
Администрация, если я что-то нарушаю или делаю не правильно, то сообщите в комментариях и я все поправлю.
Нет вы ничего не нарушаете.
Супер спасибо! Как раз вот искал самодельный способ без модулей на днях. Надо будет попробовать! Круто))
Я обычно подобные штуки делаю на migxdb с созданием отдельной таблицы в БД. (создаю пакет при помощи CMP Generator)
Потом выношу ссылку на эти migx таблицы в верхнее меню.
Плюсы: не нужно создавать отдельный ресурс с ТВ и отдельным шаблоном. Ну и прямая запись в эти таблицы очень удобно, если нужно туда что то писать через сниппеты.
С migxdb можно даже еще дальше пойти и расширить базовые migxdb процессоры, тогда можно еще кастомизировать вывод и редактирование стандартных migx строк на свою логику. Там есть конечно ограничения, но для большинства задач хватает что бы, что-то накрутить свое )) Например добавить кнопку в строку с каким-то событием при клике по ней, или показывать кнопку Активировать, если строка не активна и наоборот.
Потом выношу ссылку на эти migx таблицы в верхнее меню.
Плюсы: не нужно создавать отдельный ресурс с ТВ и отдельным шаблоном. Ну и прямая запись в эти таблицы очень удобно, если нужно туда что то писать через сниппеты.
С migxdb можно даже еще дальше пойти и расширить базовые migxdb процессоры, тогда можно еще кастомизировать вывод и редактирование стандартных migx строк на свою логику. Там есть конечно ограничения, но для большинства задач хватает что бы, что-то накрутить свое )) Например добавить кнопку в строку с каким-то событием при клике по ней, или показывать кнопку Активировать, если строка не активна и наоборот.
Нужно будет почитать про migxdb. Не было случая. Спасибо
А можно будет пост сделать?
Спасибо
Попробовал. Так удобно. Просто кайф)
Как раз появилась такая задачка на MODX3 — попробовал и протестил, полет нормальный :)
Автору большое спасибо! Буду брать на заметку и пользоваться!
Автору большое спасибо! Буду брать на заметку и пользоваться!
Спасибо)
Не понял. А что MIGX работает в Modx3? Насколько я помню по sitedash.app/extras. Он не совместим.
Уже должен
Ок. Надо протестить. А то я помню потом заколебался его выковыривать. Куча ошибок была.
Так уже вроде давно, я на нем слайдеры делаю на modx3
Да и вообще кучу всего, он вроде в версии альфа5, но рабочий вполне
Да и вообще кучу всего, он вроде в версии альфа5, но рабочий вполне
Ну. Я исхожу из того, что как-то в самом начале. Поставил 3 и решил прикрутить расширения. После этого пришлось выковыривать некоторые прямо вручную. И PDOtools тогда не пошел. Позже вроде исправили, поставил. Пришлось переписывать шаблоны. Есть ещё некоторые не адаптированные. Сейчас мне нужны отзывы на сайте. Ни один нормальный модуль не работает на 3. Решил поковырять что есть из наработок. Вот и пришёл сюда посмотреть. Я так понимаю нужно протестить MIGX c 3. Потому как до этого он вроде не работал.
Ну я попробовал — работает, главное по инструкции от автора делать.
Ок. Значит буду колбасить пробовать. :)
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.