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

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

150 lines 6.5 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'); ?>
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">Expand All</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
97	function toggleFAQ(button) {
98	var item = button.closest('.faq-item');
99	if (!item) return;
100	document.querySelectorAll('#faq .faq-item').forEach(function (other) {
101	if (other !== item) {
102	other.classList.remove('active');
103	var oq = other.querySelector('.faq-question');
104	if (oq) oq.setAttribute('aria-expanded', 'false');
105	}
106	});
107	item.classList.toggle('active');
108	var open = item.classList.contains('active');
109	button.setAttribute('aria-expanded', open ? 'true' : 'false');
110	}
111
112	function toggleAll() {
113	var toggleBtn = document.getElementById('faq-toggle-all');
114	if (!toggleBtn) return;
115	var items = document.querySelectorAll('#faq .faq-item');
116	var toggleText = toggleBtn.querySelector('.toggle-text');
117	if (faqIsAllExpanded) {
118	items.forEach(function (item) {
119	item.classList.remove('active');
120	var q = item.querySelector('.faq-question');
121	if (q) q.setAttribute('aria-expanded', 'false');
122	});
123	toggleBtn.classList.remove('is-all-expanded');
124	if (toggleText) toggleText.textContent = 'Expand All';
125	} else {
126	items.forEach(function (item) {
127	item.classList.add('active');
128	var q = item.querySelector('.faq-question');
129	if (q) q.setAttribute('aria-expanded', 'true');
130	});
131	toggleBtn.classList.add('is-all-expanded');
132	if (toggleText) toggleText.textContent = 'Collapse All';
133	}
134	faqIsAllExpanded = !faqIsAllExpanded;
135	}
136
137	document.addEventListener('DOMContentLoaded', function () {
138	document.querySelectorAll('#faq .faq-question').forEach(function (btn) {
139	btn.addEventListener('click', function () {
140	toggleFAQ(btn);
141	});
142	});
143	var toggleBtn = document.getElementById('faq-toggle-all');
144	if (toggleBtn) {
145	toggleBtn.addEventListener('click', toggleAll);
146	}
147	});
148	})();
149	</script>
150