К содержанию

Простые отзывы на сайте 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
[[!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>
validate
name: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 необходимо указать публичный и секретный ключи выданные гуглом.
Ivan
Ivan
06 августа 2022, 22:41
modx.pro
4 860
Реклама

Комментарии: 18

Ivan
Ivan Проверенный
06 августа 2022, 22:44
Администрация, если я что-то нарушаю или делаю не правильно, то сообщите в комментариях и я все поправлю.
    Николай Савин
    Николай Савин Администратор
    07 августа 2022, 11:08
    Нет вы ничего не нарушаете.
    Игорь
    Игорь Проверенный
    07 августа 2022, 12:06
    Супер спасибо! Как раз вот искал самодельный способ без модулей на днях. Надо будет попробовать! Круто))
      Эдуард
      Эдуард Старожил
      07 августа 2022, 22:51
      Я обычно подобные штуки делаю на migxdb с созданием отдельной таблицы в БД. (создаю пакет при помощи CMP Generator)
      Потом выношу ссылку на эти migx таблицы в верхнее меню.
      Плюсы: не нужно создавать отдельный ресурс с ТВ и отдельным шаблоном. Ну и прямая запись в эти таблицы очень удобно, если нужно туда что то писать через сниппеты.

      С migxdb можно даже еще дальше пойти и расширить базовые migxdb процессоры, тогда можно еще кастомизировать вывод и редактирование стандартных migx строк на свою логику. Там есть конечно ограничения, но для большинства задач хватает что бы, что-то накрутить свое )) Например добавить кнопку в строку с каким-то событием при клике по ней, или показывать кнопку Активировать, если строка не активна и наоборот.
        Ivan
        Ivan Проверенный
        07 августа 2022, 23:01
        Нужно будет почитать про migxdb. Не было случая. Спасибо
          Иван Бочкарев
          Иван Бочкарев Администратор
          09 августа 2022, 19:50
          А можно будет пост сделать?
            Михаил
            Михаил Эксперт
            13 августа 2022, 09:42
              Ivan
              Ivan Проверенный
              13 августа 2022, 18:56
              Спасибо
                Ivan
                Ivan Проверенный
                31 августа 2022, 12:09
                Попробовал. Так удобно. Просто кайф)
            Кирилл
            Кирилл Старожил
            17 февраля 2023, 18:54
            Как раз появилась такая задачка на MODX3 — попробовал и протестил, полет нормальный :)

            Автору большое спасибо! Буду брать на заметку и пользоваться!
              Ivan
              Ivan Проверенный
              18 февраля 2023, 17:48
              Спасибо)
                Поляков Сергей Владимирович
                25 марта 2023, 10:50
                Не понял. А что MIGX работает в Modx3? Насколько я помню по sitedash.app/extras. Он не совместим.
                  Иван
                  Иван Старожил
                  25 марта 2023, 10:52
                  Уже должен
                    Поляков Сергей Владимирович
                    25 марта 2023, 10:54
                    Ок. Надо протестить. А то я помню потом заколебался его выковыривать. Куча ошибок была.
                    Кирилл
                    Кирилл Старожил
                    25 марта 2023, 13:29
                    Так уже вроде давно, я на нем слайдеры делаю на modx3
                    Да и вообще кучу всего, он вроде в версии альфа5, но рабочий вполне
                      Поляков Сергей Владимирович
                      25 марта 2023, 14:53
                      Ну. Я исхожу из того, что как-то в самом начале. Поставил 3 и решил прикрутить расширения. После этого пришлось выковыривать некоторые прямо вручную. И PDOtools тогда не пошел. Позже вроде исправили, поставил. Пришлось переписывать шаблоны. Есть ещё некоторые не адаптированные. Сейчас мне нужны отзывы на сайте. Ни один нормальный модуль не работает на 3. Решил поковырять что есть из наработок. Вот и пришёл сюда посмотреть. Я так понимаю нужно протестить MIGX c 3. Потому как до этого он вроде не работал.
                        Кирилл
                        Кирилл Старожил
                        25 марта 2023, 14:57
                        Ну я попробовал — работает, главное по инструкции от автора делать.
                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                18