| Server IP : 65.108.144.40 / Your IP : 216.73.217.165 Web Server : Apache/2.4.52 (Ubuntu) System : Linux ubuntu-8gb-hel1-1 5.15.0-173-generic #183-Ubuntu SMP Fri Mar 6 13:29:34 UTC 2026 x86_64 User : dev ( 1000) PHP Version : 8.2.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/capital-catering/web/app/themes/capital-catering/ |
Upload File : |
<?php
/**
* Template Name: FAQs
* */
global $wp_query;
get_header();
?>
<style type="text/css">
a {
color: #9759CB;
}
a:hover {
color: #793EAB;
}
h3.title_text.mb-50 {
display: none;
}
ul.faqcatgroup::-webkit-scrollbar-track {
background-color: transparent;
padding: 0;
width: 0;
height: 0;
}
.faq_section .accordion-body p a {
color: #b48324;
text-decoration: none;
}
ul.faqcatgroup:empty {
margin-bottom: 0px;
}
ul.faqcatgroup::-webkit-scrollbar {
background-color: transparent;
width: 0;
padding: 0;
height: 0;
}
ul.faqcatgroup::-webkit-scrollbar-thumb {
background-color: transparent;
}
h3.title_text.mb-50.no-result {
display: block;
}
.faq_section .accordion-item {
background: #fff;
border-radius: 20px;
padding: 30px;
border: none;
margin-bottom: 16px;
}
.faq_section button.accordion-button {
color: #1C2327;
font-weight: 600;
padding: 0;
background: #fff;
box-shadow: none;
}
.faq_section .accordion-body {
padding: 0;
}
.faq_section .accordion-body p{
margin-bottom: 0;
color: #000;
}
.faq_section .accordion-button:not(.collapsed) {
margin-bottom: 12px;
}
div#tab_loader {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #ffffff45;
z-index: 9;
display: none;
}
#tab_loader svg {
margin: 0 auto;
display: block;
width: 80px;
}
.faq_section .tab-content .highlight {
color: #b48324;
font-weight: bold;
background: transparent;
display: contents;
}
.faq_section .tab-content .highlight.current {
/* background-color: #ffe9aa; */
}
span#search_term {
color: #9759CB;
}
.search_result_msg {
display: none !important;
margin: 25px 0;
align-items: center;
justify-content: space-between;
}
a.btn.btn-custom.btn-dark {
font-size: 16px;
background: #000;
padding: 15px 25px;
box-shadow: none !important;
}
.search_result_nav {
display: none;
align-items: center;
justify-content: space-between;
margin-top: 5px;
}
p.search_form_count {
font-size: 13px;
margin: 0;
color: #525252;
}
.result_nav_arr button {
color: #878787;
font-weight: 300;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 2px;
color: #000;
}
.result_nav_arr button i {
font-weight: 300;
font-size: 18px;
}
.result_nav_arr {
margin-right: -10px;
}
ul.faqcatgroup {
display: flex;
flex-wrap: nowrap;
overflow: auto;
width: 100%;
padding: 0;
margin-bottom: 30px;
position: relative;
/* border-bottom: 1px solid #D9D8D6; */
-webkit-overflow-scrolling: touch;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
ul.faqcatgroup::-webkit-scrollbar {
display: none;
}
ul.faqcatgroup li {
display: inline-block;
flex: 0 0 auto;
}
ul.faqcatgroup li a.tab-link.active {
font-weight: 700;
position: relative;
/* border-bottom: 3px solid #B48324; */
}
ul.faqcatgroup li a.tab-link.active:after {
content: '';
width: 100%;
height: 3px;
background: #b48324;
position: absolute;
bottom: 0;
z-index: 2;
left: 0;
right: 0;
}
ul.faqcatgroup:after {
content: '';
width: 145%;
height: 1px;
background: #d9d8d6;
position: absolute;
bottom: 0;
z-index: 1;
left: 0;
right: 0;
}
ul.faqcatgroup li a.tab-link {
text-decoration: none;
font-size: 14px;
color: #1c2327;
padding: 21px 16px;
display: block;
}
.accordion-button::after {
width: 24px!important;
height: 24px!important;
}
section#faq_section {
background-image: url(<?php echo get_stylesheet_directory_uri() . '/assets/images/white-marble-bg.webp'; ?>);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
margin-top:20px;
}
input.wp-block-search__input {
padding-left: 16px;
border: none;
height: 50px;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
button.wp-block-search__button.wp-element-button {
height: 50px;
padding: 16px 0 16px 16px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0;
border: none;
background-color: #fff;
border-top-left-radius:12px;
border-bottom-left-radius:12px;
line-height: normal;
}
/* button.wp-block-search__button.wp-element-button svg{
margin-right: 8px;
} */
#faq_search{
margin: 30px 0 20px;
}
.wp-block-search__inside-wrapper {
display: flex;
flex: auto;
flex-wrap: nowrap;
max-width: 100%;
}
.wp-block-search__button svg {
height: 1.25em;
min-height: 24px;
min-width: 24px;
width: 1.25em;
fill: currentColor;
vertical-align: text-bottom;
}
#faq_search input:-webkit-autofill {
-webkit-text-fill-color: #1c2327 !important;
background: transparent !important;
}
rect {
fill:#1c2327!important;
}
@media screen and (max-width:767px){
ul.faqcatgroup {
border-bottom: 1px solid #d9d8d6;
}
ul.faqcatgroup:after {
display: none;
}
#faq_section h1.page_title {
font-size: 32px;
}
.accordion-button::after {
background-position: center;
}
.faq_section .accordion-item {
padding: 24px;
}
.faq_section .accordion-item h2 button {
font-size: 18px;
}
.tab-pane>h3.title_text {
display: none;
}
.faq-banner-desc {
font-size: 14px;
font-weight: 500;
color: #666c6c;
line-height: 1.3;
}
section#faq_section {
padding: 30px 10px;
}
}
</style>
<div class="main-container">
<section id="faq_section" class="faq_section sec_ptb_120 clearfix">
<div class="container">
<h1 class=" page_title">Frequently asked questions</h1>
<!--<p class="d-block d-lg-none faq-banner-desc">Your order history lets you view past orders, track their status, reorder with ease, and download receipts for your records.</p>-->
<div class="search_result_msg">
<div class="msg_wrap">
<h3 class="mb-2"><?php _e("Search Result for", "makro") ?>: "<span id="search_term"></span>"</h3>
<p><span class="search_count"></span> <?php _e("results found", "makro") ?></p>
</div>
<a href="" class="btn btn-custom btn-dark"><?php _e("Clear Search", "makro") ?></a>
</div>
<div class="row justify-content-lg-between justify-content-md-center justify-content-sm-center">
<div class="col-sm-12 mb-lg-3 mb-md-0 mb-3">
<div class="tabs_nav ul_li_block">
<div class="faq-search-wrap">
<form id="faq_search">
<div class="wp-block-search__inside-wrapper">
<input type="hidden" hidden name="action" value="seaso_faqs">
<button type="submit" class="wp-block-search__button wp-element-button"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M19.5308 18.4706L14.8368 13.7774C16.1973 12.144 16.8757 10.049 16.7309 7.92813C16.5861 5.80726 15.6293 3.82387 14.0593 2.39054C12.4894 0.95721 10.4274 0.184304 8.30213 0.232603C6.17687 0.280903 4.15205 1.14669 2.64888 2.64986C1.14571 4.15303 0.279927 6.17785 0.231627 8.3031C0.183327 10.4284 0.956234 12.4904 2.38956 14.0603C3.82289 15.6302 5.80629 16.5871 7.92715 16.7319C10.048 16.8767 12.1431 16.1983 13.7765 14.8378L18.4696 19.5318C18.5393 19.6015 18.622 19.6568 18.713 19.6945C18.8041 19.7322 18.9017 19.7516 19.0002 19.7516C19.0988 19.7516 19.1963 19.7322 19.2874 19.6945C19.3784 19.6568 19.4612 19.6015 19.5308 19.5318C19.6005 19.4621 19.6558 19.3794 19.6935 19.2884C19.7312 19.1973 19.7506 19.0997 19.7506 19.0012C19.7506 18.9026 19.7312 18.8051 19.6935 18.714C19.6558 18.623 19.6005 18.5403 19.5308 18.4706ZM1.75021 8.50119C1.75021 7.16617 2.14609 5.86112 2.88779 4.75109C3.62949 3.64106 4.6837 2.7759 5.9171 2.265C7.1505 1.75411 8.5077 1.62044 9.81707 1.88089C11.1264 2.14134 12.3292 2.78422 13.2732 3.72822C14.2172 4.67222 14.8601 5.87496 15.1205 7.18433C15.381 8.4937 15.2473 9.8509 14.7364 11.0843C14.2255 12.3177 13.3603 13.3719 12.2503 14.1136C11.1403 14.8553 9.83524 15.2512 8.50021 15.2512C6.71061 15.2492 4.99488 14.5374 3.72944 13.272C2.464 12.0065 1.7522 10.2908 1.75021 8.50119Z" fill="#1C2327"/>
</svg></button>
<input type="text" name="search" placeholder="Search by keyword" class="wp-block-search__input w-100" required>
</div>
</form>
<div class="search_result_nav" style="display: none !important;">
<p class="search_form_count"><span class="search_count"></span> <?php _e("results found", "makro") ?></p>
<div class="result_nav_arr">
<button data-search="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
<button data-search="next"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="nav">
<ul class="faqcatgroup">
<?php
$terms = getTaxonomies('faq_category');
if (!empty($terms)) {
foreach ($terms as $termKey => $term) {
$class = 'tab-link';
if ($termKey == 0) {
$class .= ' active';
}
?>
<li <?php echo $term->parent ? 'class="childterm"' : ''; ?>>
<a class="<?php echo $class; ?>" data-toggle="tab" href="#<?php echo $term->slug; ?>">
<?php echo $term->name; ?>
</a>
</li>
<?php
}
}
?>
</ul>
</div>
</div>
</div>
<div class="col-sm-12 position-relative">
<div id="tab_loader"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block;"><g><g transform="rotate(0 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.9166666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(30 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.8333333333333334s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(60 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.75s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(90 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.6666666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(120 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.5833333333333334s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(150 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.5s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(180 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.4166666666666667s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(210 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.3333333333333333s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(240 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.25s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(270 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.16666666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(300 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="-0.08333333333333333s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g transform="rotate(330 50 50)">
<rect fill="#ff6db1" height="12" width="6" ry="6" rx="3" y="24" x="47">
<animate repeatCount="indefinite" begin="0s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"/>
</rect>
</g><g/></g></svg></div>
<div class="tab-content d-block">
<?php
if (!empty($terms)) {
foreach ($terms as $termKey => $term) {
$faq_posts = get_posts([
'post_type' => 'faq',
'posts_per_page' => -1,
'order' => 'DESC',
's' => $search_term,
'tax_query' => [
[
'taxonomy' => 'faq_category',
'field' => 'slug',
'terms' => $term->slug
]
]
]);
if (!empty($faq_posts)) {
$activeClass = ($termKey === 0) ? ' show active' : '';
echo '<div class="tab-pane fade' . $activeClass . '" id="' . esc_attr($term->slug) . '" role="tabpanel" aria-labelledby="tab-' . esc_attr($term->slug) . '-tab">';
//echo '<h3 class="title_text mb-50 d-none">' . esc_html($term->name) . '</h3>';
echo '<div class="accordion" id="accordion-' . esc_attr($termKey) . '">';
foreach ($faq_posts as $key => $post) {
$collapse_id = 'collapse-' . $term->slug . '-' . $key;
$heading_id = 'heading-' . $term->slug . '-' . $key;
echo '<div class="accordion-item" data-post-id="' . esc_attr($post->ID) . '">';
echo '<h2 class="accordion-header" id="' . esc_attr($heading_id) . '">';
echo '<button class="accordion-button ' . ($key !== 0 ? 'collapsed' : '') . '" type="button" data-bs-toggle="collapse" data-bs-target="#' . esc_attr($collapse_id) . '" aria-expanded="' . ($key === 0 ? 'true' : 'false') . '" aria-controls="' . esc_attr($collapse_id) . '">';
echo esc_html($post->post_title);
echo '</button>';
echo '</h2>';
echo '<div id="' . esc_attr($collapse_id) . '" class="accordion-collapse collapse' . ($key === 0 ? ' show' : '') . '" aria-labelledby="' . esc_attr($heading_id) . '" data-bs-parent="#accordion-' . esc_attr($termKey) . '">';
echo '<div class="accordion-body">' . wpautop($post->post_content) . '</div>';
echo '</div>';
echo '</div>';
}
echo '</div>';
echo '</div>';
}
}
}
?>
</div>
</div>
</div>
</div>
</section>
</div>
<?php
if (have_posts()) {
while (have_posts()) {
the_post();
the_content();
}
}
?>
<script type="text/javascript">
var $prevBtn = jQuery("button[data-search='prev']"),
$nextBtn = jQuery("button[data-search='next']"),
$content = jQuery(".tab-content"),
currentClass = "current",
$results = '',
offsetTop = 140,
currentIndex = 0;
jQuery(document).ready(function ($) {
let searchPerformed = false;
let lastSearchWasEmpty = false;
const $form = $('#faq_search');
const $input = $form.find('input[name="search"]');
jQuery(".tab-link").get(0).click();
$form.on('submit', (e) => {
e.preventDefault();
const inputVal = $input.val().trim();
if (inputVal === '') {
if (searchPerformed && !lastSearchWasEmpty) {
// 3rd attempt (reset)
lastSearchWasEmpty = true;
} else {
// 1st or 4th attempt — back to block mode
searchPerformed = false;
lastSearchWasEmpty = false;
}
} else {
// Real search
searchPerformed = true;
lastSearchWasEmpty = false;
}
jQuery("#tab_loader").show();
jQuery.ajax({
type: "POST",
url: "/wp/wp-admin/admin-ajax.php",
data: jQuery('#faq_search').serialize(), // serializes the form's elements.
success: function (data)
{
//console.log(data);
var json_obj = data;
jQuery(".tabs_nav .nav").html(json_obj.terms_html);
if (json_obj !== undefined && json_obj.items_count > 0) {
currentIndex = 0;
$results = '';
jQuery(".tab-content").html(json_obj.posts_html);
$content = jQuery(".tab-content");
initFaqClicks(); //Reinit tab clicks
/**
* Hightlight the search term
* */
jQuery('.tab-content').mark(json_obj.search, {
className: 'highlight',
done: function () {
$results = $content.find("mark");
currentIndex = 0;
jumpTo();
}
});
} else {
jQuery(".tab-content").html('<h3 class="title_text mb-50 no-result">No result found for your search.</h3>');
}
//Show search messages
if (json_obj.search !== "") {
if (json_obj.items_count > 0) {
var result_count = $content.find("mark").length;
jQuery("span.search_count").text(result_count);
} else {
jQuery("span.search_count").text(0);
}
jQuery(".search_result_msg").css('display', 'flex');
jQuery(".search_result_nav").css('display', 'none');
jQuery("#search_term").text(json_obj.search);
}
jQuery("#tab_loader").hide();
//scroll to results on mobile
/* if (window.innerWidth < 768) {
position = $content.offset().top - offsetTop;
window.scrollTo({
top: position,
behavior: 'smooth'
});
} */
}
});
return false;
});
jQuery('input.wp-block-search__input').on('keydown', function (e) {
var val = e.target.value;
if (e.key === 'Enter') {
const inputVal = $input.val().trim();
if (inputVal === '' && !searchPerformed) {
// Initial empty: keep required (block by browser)
$input.attr('required', 'required');
} else if (inputVal === '' && searchPerformed && !lastSearchWasEmpty) {
// First empty after search — allow reset
$input.removeAttr('required');
} else if (inputVal === '' && lastSearchWasEmpty) {
// Second empty — back to blocked
$input.attr('required', 'required');
} else {
// Non-empty input
$input.attr('required', 'required');
}
}
var cursorPosition = e.target.selectionStart;
if (e.which === 32 && cursorPosition === 0) {
return false;
}
if (e.which === 32 && val[cursorPosition - 1] === ' ') {
return false;
}
});
});
/**
* Initiaize faq accordian events after DOM changes
* */
function initFaqClicks() {
jQuery(".tab-link").click(function (e) {
e.preventDefault();
// Remove active class from all tab links
jQuery('.tab-link').removeClass('active');
// Add active class to clicked tab
jQuery(this).addClass('active');
// Get the target tab ID
var tabID = jQuery(this).attr('href');
// Hide all tab panes
jQuery('.tab-pane').removeClass('active show');
// Show the selected tab pane
jQuery(tabID).addClass('active show');
// Handle search highlights if they exist
if (typeof $results !== 'undefined' && $results.length) {
currentIndex = $results.index(jQuery(tabID).find('mark').first());
jumpTo();
}
// Optional: Scroll to top of the tab content
/* jQuery('html, body').animate({
scrollTop: jQuery(tabID).offset().top - 100
}, 300); */
});
}
// Initialize the tab clicks
initFaqClicks();
/**
* Jumps to the element matching the currentIndex
*/
function jumpTo() {
if ($results.length) {
var position,
$current = $results.eq(currentIndex);
$results.removeClass(currentClass);
if ($current.length) {
$current.addClass(currentClass);
//Traverse through tabs
var $currentTab = $current.parents('.card');
//Only switch when index jumpsto collapsed tab
if ($currentTab.find('.card-header a').attr('aria-expanded') == 'false') {
jQuery('.card .card-header a').addClass('collapsed').attr('aria-expanded', 'false');
$currentTab.find('.card-header a').removeClass('collapsed').attr('aria-expanded', 'true');
jQuery('.card .collapse').removeClass('show').attr('aria-expanded', 'false');
$currentTab.find('.collapse').addClass('show');
}
//Traverse through category nav
var $currentCat = $current.parents('.tab-pane'),
currentCatId = $currentCat.attr('id'),
currentShowedId = jQuery(".tab-pane.show").attr('id');
if (currentCatId !== currentShowedId) {
jQuery('.faq_section .tabs_nav > ul li a').removeClass('active');
jQuery('.tab-link[href="#' + currentCatId + '"]').addClass('active');
jQuery('.tab-content .tab-pane').removeClass('active show');
jQuery('.tab-content .tab-pane#' + currentCatId).addClass('active show');
//Scroll to tab content top when category is changed
/* if (window.innerWidth < 768) {
position = $content.offset().top - offsetTop;
window.scrollTo({
top: position,
behavior: 'smooth'
});
} */
}
}
}
}
/**
* Highlight Navigation Buttons Events
* */
$nextBtn.add($prevBtn).on("click", function () {
if ($results.length) {
currentIndex += jQuery(this).is($prevBtn) ? -1 : 1;
//Stop loop
if (currentIndex < 0) {
currentIndex = 0;
}
if (currentIndex > $results.length - 1) {
currentIndex = $results.length - 1;
}
jumpTo();
}
});
</script>
<?php
get_footer();