Частный вебмастер г. Псков.
Создание сайтов - Магия & Креатив!

Admin
Дата: 28-06-2016
Просмотров: 933
Комментарии: 0

Страница вопрос-ответ

Страница вопрос-ответ

Статья посвящена созданию страницы "Вопрос-ответ" на Вашем сайте, с использованием сниппета и jQuery.


MODX Revolution

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

1. Для создания, нам необходимо создать новый шаблон, назовем его "QuestionsTemplate", за основу которого можно взять страницу "blog-single" Вашего сайта. Как и в предыдущей статье, "Создание отзывов" убираем лишние элементы, оставляем только форму. Создаем новый документ называем его "Вопрос-ответ" и назначаем ему наш созданный шаблон.

2.Форму оставляем без изменения (добавить необходимые поля для заполнения), все оставить "default", лишь присвоив значения атрибуту "name":

<form action="[[~[[*id]]]]" method="post" id="reply-form"><       
    <p>
    <label for="name">Имя:</label>
    <input type="text" name="name" id="name" value="[[!+fi.name]]" class="field required"> <!-- Атрибуту "name" присвоить значение "name" и определяем и сохраняем значение элемента формы value используя параметр сниппета !+fi-->
    </p>
    <p>
    <label for="email">E-mail:</label>
    <input type="text" name="email" id="email" value="[[!+fi.email]]" class="field"> <!-- Атрибуту "name" присвоить значение "email" и определяем и сохраняем значение элемента формы value используя параметр сниппета !+fi-->
    </p>
    <p class="messager">
    <label for="comment">Текст:</label>
    <input name="message" id="message" value="[[!+fi.message]]" class="textarea required" rows="10" cols="10"> <!-- Атрибуту "name" присвоить значение "message" и также определяем и сохраняем значение элемента формы value используя параметр сниппета +!fi -->
    </p>
    <p>
    <i class="mode">Сообщения проходят премодерацию.</i>
    <input type="submit" id="submit" class="btn btn-primary-right submit"  value="Отправить">
    </p>        
</form>

3. Далее необходим написать сниппет, который будет отвечать за обработку нашей формы, сохранение и модерацию сообщений, назовем его, например "hookquestion":

<?php
if ( null === $_name = $hook->getValue('name') ) { /*Присваиваем значение переменной name*/
    $hook->addError('preHook', 'false');
    return false;
}

if ( null === $_email = $hook->getValue('email') ) { /* Присваиваем значение переменной email*/
    $hook->addError('preHook', 'false');
    return false;
}

if ( null === $_message = $hook->getValue('message') ) { /* Присваиваем значение переменной message*/
    $hook->addError('preHook', 'false');
    return false;
}

$_name = trim(htmlspecialchars(strip_tags($_name))); /* Прверка и преобразование символов в html (вообщем удаление и чистка)*/
$_message = trim(htmlspecialchars(strip_tags($_message)));

if ( empty($_name) || empty($_message) ) { /* Проверка и возврат сообщений со значением "Пусто"*/
    $hook->addError('preHook', 'false');
    return false;
}

$_feedback = $modx->newObject('modResource'); /* Параметры обработки (строки, дата, шаблон, публикация, ресурс и т.д.)*/
    $_feedback->set('template', 13); /* Шаблон "QuestionsTemplate" */
    $_feedback->set('pagetitle', $_name);
    $_feedback->set('introtext', $_message);
    $_feedback->set('description', $_email);
    $_feedback->set('published', 0); /* Публикация авто или модерация */
    $_feedback->set('parent', 48); /* Наш id ресурса куда будут сохранятся сообщения */
    $_feedback->set('alias', 'question-and-answer'.time()); /* Псевдоним */
    $_feedback->set('publishedon', time());
    $_feedback->set('createdon', time());
    $_feedback->set('createdby', 1);
    $_feedback->save();
return true;

4. Создадим "menu-accordion" для вывода вопросов и ответов, его можно добавить в фаил "style.css". Вы можете сделать свое или изменить дизайн под Ваш сайт:

.custom-content ul{
    margin-bottom: 5px;
}
.custom-content ol{
    margin-bottom: 5px; 
    list-style: decimal; 
    padding-left: 25px;
}
.custom-content p{
    color: #333;
}
.faq_wrapper .faq_question{
    font-weight: bold; 
    font-size: 16px; 
    background-color: #000;
    margin-bottom: 15px;
    border-radius: 2px;
    height: 27px;
    font: italic 14px/24px Georgia, "Times New Roman", Times, serif;
    border: 1px solid #444;
}
.faq_wrapper .faq_question:hover{
    border-color: #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.faq_wrapper .faq_question .faq_more{
    font-size: 18px; color: #fff; 
    display: inline-block; 
    padding: 3.5px;
}
.faq_wrapper .faq_question .faq_more:hover{
    cursor: pointer; 
    background-color: #000;
}
.faq_wrapper .faq_question .faq_more:focus{
  background:#000;  
  border-color:#66afe9;
  outline: 0;
}
.faq_wrapper .faq_question .faq_header{
    color: #fff; 
    font-size: 16px; 
    margin-left: 10px;
}
.faq_wrapper .faq_answer{
    display: none;
}
.faq_wrapper .faq_answer table td{
    text-align: center; 
    padding: 10px 5px;
}

5. Напишем несложный скрипт для работы нашего "menu-accordion":

<script type="text/javascript">
    var faqShowAnswer = function(el) { 
	var a = el.parentNode.nextElementSibling;
	if ( (a.style.display === 'none') || (a.style.display === '') ) { 
		a.style.display = 'block';
		el.className = 'faq_more icon-arrow-up';
	}
	else {
		a.style.display = 'none';
		el.className = 'faq_more icon-arrow-down'; 
	}
}
</script>

6. Теперь можно создать чанк "oneFaqItemTpl", для вывода вопросов и ответов:

<div class="faq_wrapper">
     <div class="faq_question">
     <a class="faq_more icon-arrow-down" href="#" onclick="faqShowAnswer(this); return false;" title="Показать ответ"></a>
        <span class="faq_header">[[+introtext]]</span>
    </div>
    <div class="faq_answer">
        <div class="comments_post">[[+content]]</div>
    </div>
</div>

7. И конечно же чанк, форма отправки на почту, "questionTpl":

<h3>Вопрос на сайте...</h3>
<p>Имя: [[+name]]</p>
<p>E-mail: [[+email]]</p>
<p>Сообщение: [[+message]]</p>

8. И последнее, выводим чанки в шаблоне (вместо текста) при помощи "getResources" или "pdoResources" и добавить "FormIt":

[[getResources? 
    &amp;tpl=`oneFaqItemTpl` 
    &amp;includeTVs=`1` 
    &amp;processTVs=`1` 
    &amp;includeContent=`1` 
    &amp;limit=`0` 
    &amp;depth=`0`
    &amp;sortby=`{"publishedon":"DESC"}`
 ]]
 [[!FormIt? 
    &amp;hooks=`hookquestion,email` 
    &amp;emailTpl=`questionTpl` 
    &amp;emailTo=`...@mail.ru` 
    &amp;emailSubject=`Новый вопрос на сайте ...` 
]]

Новый вопрос будет добавлен в каталог "Вопрос-ответ", осталось ответить и опубликовать.

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

Комментарии (0)