DARTHARTH

FAQ для Drupal 7 из г@$на и палок

В принципе для создания FAQ для седьмого друпала уже есть нелпохой модуль faq_fields, который добавляет к типу содержимого поля faq, но задача появилась — сделать шаблонные вопросы для всех категорий с подстановкой названия категории в вопрос, что бы при редактировании категории можно было ввести только лишь ответы для шаблонных вопросов.

Идем в термин таксономии и добавляем текстовое поле field_ansver, с типом поля полный текст с текстовой областью в несколько строк. Для удобства даем метку «Ответ на 1 вопрос» и в поле справочного текста можно вставить наш шаблонный вопрос, что бы вбивая ответ было понятно на какой вопрос отвечаем. Выставим 3 строки и количество 1 шт. Таким образом у нас есть заготовка для ответа.

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

Так как у нас этот блок с представлением будет выводиться на странице категории — сразу делаем привязку. В контекстном фильтре добавляем — Термин таксономии: ID термина и выбираем обеспечение значения по умолчанию по айди из урла

Добавляем в поля поле термина таксономии, которое мы создали выше, при этом ставим галочку «Исключить из вывода»

Добавляем в критерии фильтрации наше поле с оператором <Есть>

Таким образом наш блок будет выводиться, если поле ответа заполнено.

Теперь в поля добавляем поле Глобального PHP со следующим кодом в Output code

<?php 
	$current_url = $_SERVER['REQUEST_URI'];
	$url = substr($current_url, 1);
	$current_term_path = db_query("SELECT source FROM `d7_url_alias` WHERE `alias` = '$url'")->fetchAll();
	$tid = str_replace('taxonomy/term/', '', $current_term_path['0']->source);
	$term = taxonomy_term_load($tid);
	$name = $term->name;
	echo '<div id="faq" class="ui-accordion ui-widget ui-helper-reset" role="tablist" itemscope itemtype="https://schema.org/FAQPage">';
	if (!empty($row->field_ansver1)) {
		echo '<div class="faq-block" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"><button class="faq-title" itemprop="name">? Как быстро заказать '. $name .' ❓</button><div class="faq-body panel" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"><div itemprop="text">' . $row->field_ansver1 .'</div></div></div>';
	}
	echo '</div>
		<script>
			var acc = document.getElementsByClassName("faq-title");
			var i;
			for (i = 0; i < acc.length; i++) {
				acc[i].addEventListener("click", function() {
					this.classList.toggle("active");
					var panel = this.nextElementSibling;
					if (panel.style.display === "block") {
						panel.style.display = "none";
					} else {
						panel.style.display = "block";
					}
				});
			}
		</script>';
?>

Небольшое пояснение по коду. Сначала мы получаем по урлу текущей страницы айдишник нашей открытой категории и получаем массив с данными категории, в том числе полями и нашем полем ответа. Затем через echo выводим непосредственно html код с подстановкой имени открытой категории для шаблона вопроса. В данном примере сразу добавлена микроразметка schema для вопросов-ответов. И в конце идет скрипт, который позвляет расхлопывать див с ответов при клике на вопрос.

Украшаем стилями

Для полноценной работы осталось только добавить стили для всего этого дела

#faq-header {
	text-align: center;
	font-size: 20px;
	margin: 10px 0;
}

#faq .faq-block {
	margin: 20px 0;
}

#faq .faq-body-open {
	display: block !important;
}

#faq .faq-title {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
}

#faq .active,
#faq .faq-title:hover {
	background-color: #ccc; 
}

#faq .faq-body {
	padding: 20px;
	display: none;
	background-color: white;
	overflow: hidden;
	transition: 0.4s;
}

Готово! Вы также можете добавить сколько угодно полей вопросов и соответственно столько выводов нужно будет сделать и в PHP.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll Up