yatra / templates / partials / single-trip / content-faq.php

content-faq.php in Yatra – Travel Booking & Tour Operator Software 3.0.16, at templates/partials/single-trip/content-faq.php

154 lines 6.8 KB

Raw Download Zip

1	<?php
2	if (!defined('ABSPATH')) {
3	exit;
4	}
5	?>
6	<section class="yatra-trip-section" id="faq" itemscope itemtype="https://schema.org/FAQPage">
7	<script type="application/ld+json">
8	{
9	"@context": "https://schema.org",
10	"@type": "FAQPage",
11	"mainEntity": [
12	<?php
13	$faq_items = [];
14	$faqs = $trip->getFaqs();
15	foreach ($faqs as $index => $faq) {
16	$question = is_object($faq) ? ($faq->title ?? '') : ($faq['question'] ?? '');
17	$answer = is_object($faq) ? ($faq->description ?? '') : ($faq['answer'] ?? '');
18
19	if (!empty($question) && !empty($answer)) {
20	$faq_items[] = [
21	'@type' => 'Question',
22	'name' => esc_html($question),
23	'acceptedAnswer' => [
24	'@type' => 'Answer',
25	'text' => wp_kses_post($answer)
26	]
27	];
28	}
29	}
30
31	if (!empty($faq_items)) {
32	echo json_encode($faq_items, JSON_UNESCAPED_UNICODE \| JSON_PRETTY_PRINT);
33	}
34	?>
35	]
36	}
37	</script>
38	<div class="faq-header">
39	<h2 class="yatra-trip-section-title">
40	<?php yatra_render_tab_icon($tab->icon ?? null, 'help-circle', 'yatra-trip-section-title-icon', $tab->label ?? __('FAQ', 'yatra')); ?>
41	<?php echo esc_html(isset($tab->label) ? $tab->label : __('Frequently Asked Questions', 'yatra')); ?>
42	</h2>
43	<div class="faq-controls">
44	<button type="button" class="faq-toggle-btn" id="faq-toggle-all">
45	<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="toggle-icon expand-icon" aria-hidden="true">
46	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
47	</svg>
48	<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="toggle-icon collapse-icon" aria-hidden="true">
49	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"/>
50	</svg>
51	<span class="toggle-text"><?php echo esc_html__('Expand All', 'yatra'); ?></span>
52	</button>
53	</div>
54	</div>
55
56	<div class="faq-container" itemscope itemtype="https://schema.org/FAQ">
57	<meta itemprop="about" content="<?php echo esc_attr($trip->getTitle()); ?>">
58	<?php foreach ($faqs as $index => $faq): ?>
59	<?php
60	$question = is_object($faq) ? ($faq->title ?? '') : '';
61	$answer = is_object($faq) ? ($faq->description ?? '') : '';
62
63	if (empty($question) && is_array($faq)) {
64	$question = $faq['question'] ?? '';
65	$answer = $faq['answer'] ?? '';
66	}
67	?>
68	<?php if (!empty($question) && !empty($answer)): ?>
69	<div class="faq-item" itemscope itemtype="https://schema.org/Question">
70	<button type="button" class="faq-question" itemprop="text" aria-expanded="false">
71	<?php echo esc_html($question); ?>
72	<svg class="faq-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
73	<path d="M19 9l-7 7-7-7"/>
74	</svg>
75	</button>
76	<div class="faq-answer" itemscope itemtype="https://schema.org/Answer" itemprop="acceptedAnswer">
77	<div itemprop="text"><?php echo wp_kses_post($answer); ?></div>
78	<meta itemprop="position" content="<?php echo $index + 1; ?>">
79	</div>
80	</div>
81	<?php endif; ?>
82	<?php endforeach; ?>
83	<?php if (empty($faqs)): ?>
84	<div class="yatra-no-faqs">
85	<p class="text-gray-500 text-center py-8">
86	<?php echo esc_html__('No frequently asked questions available for this trip.', 'yatra'); ?>
87	</p>
88	</div>
89	<?php endif; ?>
90	</div>
91	</section>
92
93	<script>
94	(function () {
95	let faqIsAllExpanded = false;
96	const yatraFaqI18n = {
97	expandAll: <?php echo wp_json_encode(__('Expand All', 'yatra')); ?>,
98	collapseAll: <?php echo wp_json_encode(__('Collapse All', 'yatra')); ?>
99	};
100
101	function toggleFAQ(button) {
102	var item = button.closest('.faq-item');
103	if (!item) return;
104	document.querySelectorAll('#faq .faq-item').forEach(function (other) {
105	if (other !== item) {
106	other.classList.remove('active');
107	var oq = other.querySelector('.faq-question');
108	if (oq) oq.setAttribute('aria-expanded', 'false');
109	}
110	});
111	item.classList.toggle('active');
112	var open = item.classList.contains('active');
113	button.setAttribute('aria-expanded', open ? 'true' : 'false');
114	}
115
116	function toggleAll() {
117	var toggleBtn = document.getElementById('faq-toggle-all');
118	if (!toggleBtn) return;
119	var items = document.querySelectorAll('#faq .faq-item');
120	var toggleText = toggleBtn.querySelector('.toggle-text');
121	if (faqIsAllExpanded) {
122	items.forEach(function (item) {
123	item.classList.remove('active');
124	var q = item.querySelector('.faq-question');
125	if (q) q.setAttribute('aria-expanded', 'false');
126	});
127	toggleBtn.classList.remove('is-all-expanded');
128	if (toggleText) toggleText.textContent = yatraFaqI18n.expandAll;
129	} else {
130	items.forEach(function (item) {
131	item.classList.add('active');
132	var q = item.querySelector('.faq-question');
133	if (q) q.setAttribute('aria-expanded', 'true');
134	});
135	toggleBtn.classList.add('is-all-expanded');
136	if (toggleText) toggleText.textContent = yatraFaqI18n.collapseAll;
137	}
138	faqIsAllExpanded = !faqIsAllExpanded;
139	}
140
141	document.addEventListener('DOMContentLoaded', function () {
142	document.querySelectorAll('#faq .faq-question').forEach(function (btn) {
143	btn.addEventListener('click', function () {
144	toggleFAQ(btn);
145	});
146	});
147	var toggleBtn = document.getElementById('faq-toggle-all');
148	if (toggleBtn) {
149	toggleBtn.addEventListener('click', toggleAll);
150	}
151	});
152	})();
153	</script>
154