четверг, 5 ноября 2015 г.

Seample Search - простой поиск на modx revo

Спонсор блога Магазин детской одежды Dress

Официальная документация

1. Создаем новый ресурс в корне дерева. Заголовок: Результаты поиска, ставим галочку "Не показывать в меню". Нажимаем на вкладку "Настройки" и убираем галочки с "Доступен для поиска", "Использовать HTML-редактор". Не забываем сохранить ресурс.

2. Далее заходим в новосозданный ресурс и в поле "Содержимое ресурса" вписываем
[[!SimpleSearch]]

3. Запоминаем id этого ресурса, это страница вывода результатов поиска. В шаблон где находится сама форма поиска вставляем следующий код:

[[!SimpleSearchForm? &landing=`1` &tpl=`search`]]
где вместо 1 вставляем ID страницы вывода результатов поиска

4. Затем копируем следующий код (это содержимое файла core/components/simplesearch/elements/chunks/searchform.chunk.tpl):
в новый чанк с названием search и создаем тот шаблон отображения окна поиска, который нам необходим.

<form action="[[~[[+landing]]]]" method="[[+method]]">
              <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" placeholder="Поиск по сайту">
 <input type="hidden" name="id" value="[[+landing]]" />
              <button type="submit"></button>
            </form>

FormIt - отправка форм в modx revo

Спонсор блога Магазин детской одежды Dress

очень мощный плагин для работы с формами
Официальная документация 

Пример вызова:

[[!FormIt@custom?
&hooks=`email,redirect`
&submitVar=`FeedbackMes`
&emailTpl=`FeedbackMes`
&emailSubject=`Обратная связь`
&redirectTo=`48`
]]


<form id="callBackMes" action="[[~[[*id]]]]" method="post">
  <input type="hidden" name="FeedbackMes" value="1">
            <div class="bInputWrap">
              <input type="text" name="feedbackFio" placeholder="ФИО" required value="[[!+fi.feedbackFio]]" class="bTextInputFeedback height50">
 <input type="text" name="feedbackPhone" placeholder="Телефон" required value="[[!+fi.feedbackPhone]]" class="bTextInputFeedback height50">
 <input type="text" name="feedbackEmail" placeholder="E-mail" required value="[[!+fi.feedbackEmail]]" class="bTextInputFeedback height50">
 <textarea class="bTextInputFeedback height150" name="feedbackMessage" placeholder="Сообщение"></textarea>
            </div>
            <button type="submit" class="bBtn">Отправить</button>
          </form>

Код чанка FeedbackMes (отвечает за формат письма) E-mail внес в настройки
 
 <h3>Сообщение с сайта ***. Форма обратной связи</h3>
<p>ФИО: [[+feedbackFio]]</p>
<p>Телефон: [[+feedbackPhone]]</p>
<p>E-mail: [[+feedbackEmail]]</p>
<p>Сообщение: [[+feedbackMessage]]</p>


Quip - простая система комментирования в modx revo

Спонсор блога Магазин детской одежды Dress

Официальная документация 
Пример вызова:

<div id="comment">
          <h3>Отзывы</h3>
  [[!QuipReply?
&thread=`item_comment[[*id]]`
&requireAuth=`1`
&tplAddComment=`new-comment`
&moderate=`1`]]
<ul class="commentlist">
[[!Quip? &thread=`item_comment[[*id]]` &threading=`0` &tplComment=`comment`]]
        </ul>

,где QuipReply - выводит форму добавления комментария
Quip - вывод комментарий

Пример чанка new-comment:

<div id="commentform">
     <span class="quip-success" id="quip-success-[[+idprefix]]">[[+successMsg]]</span>
    <form id="quip-add-comment-[[+idprefix]]" action="[[+url]]#quip-comment-preview-box-      [[+idprefix]]" method="post">
<div class="input fl">
        <input type="text" name="name" id="quip-comment-name-[[+idprefix]]" value="[[+name]]" placeholder="Ваше имя"/>
</div>
<div class="input fl">
<input type="email" placeholder="Эл. почта" name="email" id="quip-comment-email-[[+idprefix]]" value="[[+email]]">
</div>

<textarea name="comment" id="commenttext" placeholder="Комментарий"></textarea>
        <button type="submit" name="[[+post_action]]" value="1">Написать</button>
<input type="hidden" name="nospam" value="" />
    <input type="hidden" name="thread" value="[[+thread]]" />
    <input type="hidden" name="parent" value="[[+parent]]" />
    <input type="hidden" name="auth_nonce" value="[[+auth_nonce]]" />
    <input type="hidden" name="preview_mode" value="[[+preview_mode]]" />
</form>

</div>

Важно! submit формы должен иметь имя  и значение name="[[+post_action]]" value="1"

Пример чанка comment:

<li class="comment">
        <div class="author">
           <div class="authorname">[[+name]]</div>

</div>
<div class="commenttext">
[[+body]]
</div>

</li>

AjaxForm - Отправка форм через ajax


Спонсор блога Магазин детской одежды Dress


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

1. Создаем чанк "callBack" (ну или любой другой, по смыслу)
2. Добавляем форму в чанк
3. вызываем сниппет [[!AjaxForm?form=`myForm`&snippet=`FormIt`]]

Параметры сниппета:

&form - чанк с формой ( по умолчанию - tpl.AjaxForm.example)
&snippet - сниппет для обработки формы (FormIt)
&frontend_css - Стили оформления формы и полей с ошибками ([[+assetsUrl]]css/default.css)
&frontend_js - Javascript для отправки формы через ajax ([[+assetsUrl]]js/default.js)
&actionUrl - Адрес коннектора, на который отправляется форма ([[+assetsUrl]]action.php)

Пример вызова сниппета:

[[!AjaxForm?form=`callBack`
&snippet=`FormIt` 
&hooks=`email` 
&emailTo=`myemail@gmail.com`
&submitVar=`callBackMes`
&emailTpl=`callBackMes`
&emailSubject=`Обратный звонок с сайта xiaomi-mi.ru`
&validate=`name:required,phone:required`
&validationErrorMessage=`Пожалуйста, заполните поля корректно`
&successMessage=`Ваше сообщение отправлено, в ближайшее время мы свяжемся с Вами`
]]

Пример чанка callBack:

<div class="popup" id="call">
<div class="close_order popup_close"></div>
<form id="callback_form" action="" method="post" class="ajax_form">
<input type="hidden" name="callBackMes" value="1">
<div class="input">
<input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="Ваше Имя" required>
<span class="error_name">[[+fi.error.name]]</span>
</div>
<div class="input">
<input type="tel" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="Ваш Телефон">
<span class="error_phone">[[+fi.error.phone]]</span>
</div>
<input type="submit" value="Отправить">
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
`]]
</form>
</div>

Пример чанка callBackMes (отвечает за формат письма) E-mail

<h3>Сообщение с сайта xiaomi-mi.ru Форма обратного звонка</h3>
<p>Имя: [[+name]]</p>

<p>Телефон: [[+phone]]</p>

Если необходимо после отправки формы скрыть всплывающее окно:

$(document).on('af_complete', function(event, response) {
var form = response.form;
// Если у формы определённый id
if (form.attr('id') == 'callback_form') {
$('#call .close_order').click(); // кнопка закрытия всплывающего окна
}

});

PS при работе с этим сниппетом ajaxForm столкнулся с проблемой,что письмо не приходит на email, хотя выскакивает оповещение, что сообщение отправлено. А причина была вот в чем: в файле документации 
\core\components\ajaxform\docs\readme.txt
Ошибка в вызове сниппета:

You can specify any parameters for end snippet:
[[!AjaxForm?
&form=`myForm`
&snippet=`FormIt`
&hooks=`email`
&emailto=`info@mysite.com`
&etc=`...`

]]

строка &emailto=`info@mysite.com` регистрозависима. Нужно 
&emailTo=`info@mysite.com` тогда все работает как нужно.







Документация на сайте разработчика