File: /var/www/stg-everycred.com/wp-content/themes/everycred/templates/page-insights.php
<?php /* Template name: Insights */
get_header();
?>
<div class="main-content">
<?php if (have_rows('addre_featured_insights')) : ?>
<style>
.insights-loader-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
border-radius: 4px;
}
.insights-loader-overlay .spinner-border {
width: 3.5rem;
height: 3.5rem;
border-width: 0.25em;
color: #4F84FF !important;
}
.search-result .row {
transition: opacity 0.3s ease;
}
</style>
<section class="featured-insights py-120">
<div class="container">
<?php if (get_field('heading_insight')) : ?>
<h2 class="font-42 font-black m-0">
<?php echo esc_html(get_field('heading_insight')); ?>
</h2>
<?php endif; ?>
<div class="row">
<?php while (have_rows('addre_featured_insights')) : the_row();
$image = get_sub_field('featured_image');
$name = get_sub_field('name');
$excerpt = get_sub_field('excerpt');
$link = get_sub_field('link');
$image_url = '';
$image_alt = '';
if (!empty($image)) {
$image_url = is_array($image) ? $image['url'] : $image;
$image_alt = is_array($image) && !empty($image['alt']) ? $image['alt'] : $name;
}
?>
<a href="<?php echo esc_url($link); ?>" class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="image-box">
<?php if ($image_url) : ?>
<img class="w-100"
src="<?php echo esc_url($image_url); ?>"
alt="<?php echo esc_attr($image_alt); ?>" />
<?php endif; ?>
</div>
<div class="desc-box bg-white p-3">
<?php if ($name) : ?>
<div class="title-txt font-18">
<?php echo esc_html($name); ?>
</div>
<?php endif; ?>
<?php if ($excerpt) : ?>
<div class="desc-txt font-20 font-light-black mt-1 mt-md-2">
<?php echo esc_html($excerpt); ?>
</div>
<?php endif; ?>
</div>
</a>
<?php endwhile; ?>
</div>
</div>
</section>
<?php endif; ?>
<section class="achieving-insights pt-5">
<div class="container">
<!-- Search & Content Type Filter -->
<div class="filter-box mt-4 pt-2">
<div class="d-flex flex-wrap gap-3 align-items-center">
<div class="search-input-wrap flex-grow-1">
<input type="text" id="blog-search" class="form-control font-16" placeholder="Search..." />
</div>
<div class="content-type-wrap">
<select id="content-type-filter" class="form-select font-16">
<option value="">Content type</option>
<option value="post">Blogs</option>
<option value="case_studies">Case Studies</option>
<option value="white_papers">White Papers</option>
</select>
</div>
<div class="action-btn d-flex align-items-center gap-2">
<button id="filtered-blog" class="px-4 font-16 black-btn d-flex align-items-center justify-content-center mx-0">Show Results</button>
<button class="bg-transparent border-0 clear-btn font-16 text-light-black" style="display:none;"> Clear All </button>
</div>
</div>
</div>
<?php
$args = array(
'post_type' => array('post', 'case_studies', 'white_papers'),
'post_status' => 'publish',
'posts_per_page' => 12,
'orderby' => 'date',
'order' => 'DESC'
);
$blogQuery = new WP_Query($args);
$initial_total = intval($blogQuery->found_posts);
?>
<div class="search-result position-relative" style="min-height: 200px;">
<!-- Insights Filter Loader -->
<div id="insights-loader" class="insights-loader-overlay" style="display:none;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="row">
<?php
while ($blogQuery->have_posts()) {
$blogQuery->the_post();
$post_type = get_post_type();
if ($post_type === 'case_studies') {
$type_label = 'Case Study';
} elseif ($post_type === 'white_papers') {
$type_label = 'White Paper';
} else {
$subCats = get_the_category(get_the_ID());
$contentTypeCat = [];
foreach ($subCats as $key => $subCat) {
$parentCategory = get_category($subCat->category_parent);
if ($parentCategory->slug == 'content-type') {
$contentTypeCat[$key] = $subCat->name;
}
}
if (!empty($contentTypeCat)) {
$lowestKey = min(array_keys($contentTypeCat));
$type_label = $contentTypeCat[$lowestKey];
} else {
$type_label = 'Blog';
}
}
?>
<div class="col-12 col-md-6 col-lg-4">
<?php if ($post_type === 'white_papers') :
$pdf_field = get_field('attach_whitepaper_pdf');
$pdf_id = is_array($pdf_field) ? $pdf_field['ID'] : $pdf_field;
?>
<!-- White Paper: modal trigger instead of permalink -->
<div class="list-box h-100"
data-pdf-id="<?php echo esc_attr($pdf_id); ?>"
data-post-id="<?php echo esc_attr(get_the_ID()); ?>"
data-title="<?php echo esc_attr(get_the_title()); ?>">
<div class="image-box">
<img class="w-100"
src="<?php echo get_the_post_thumbnail_url(); ?>"
alt="<?php echo esc_attr(get_the_title()); ?>" />
</div>
<div class="desc-box bg-white">
<div class="title-txt font-18">
White Paper | <?php echo get_the_date('d M Y'); ?>
<?php if ($pdf_id) : ?>
<span class="download-pdf-btn float-end"
data-pdf-id="<?php echo esc_attr($pdf_id); ?>"
data-post-id="<?php echo esc_attr(get_the_ID()); ?>"
data-title="<?php echo esc_attr(get_the_title()); ?>">
Download PDF
</span>
<?php endif; ?>
</div>
<div class="desc-txt font-20 text-semi font-light-black mt-2 mt-md-3">
<?php echo get_the_title(); ?>
</div>
</div>
</div>
<?php else : ?>
<!-- Normal post / case study: regular permalink -->
<a href="<?php echo get_permalink(); ?>">
<div class="list-box h-100">
<div class="image-box">
<img class="w-100"
src="<?php echo get_the_post_thumbnail_url(); ?>"
alt="<?php echo esc_attr(get_the_title()); ?>" />
</div>
<div class="desc-box bg-white">
<div class="title-txt font-18">
<?php echo esc_html($type_label); ?> | <?php echo get_the_date('d M Y'); ?>
</div>
<div class="desc-txt font-20 text-semi font-light-black mt-2 mt-md-3">
<?php echo get_the_title(); ?>
</div>
</div>
</div>
</a>
<?php endif; ?>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
</div>
<!-- Hidden by default, PHP controls initial visibility -->
<button id="load-more"
class="mt-4 px-4 font-16 text-medium talk-btn black-btn d-flex align-items-center justify-content-center mx-0"
style="<?php echo ($initial_total <= 12) ? 'display:none;' : ''; ?>">
Load More
</button>
</div>
</section>
<section class="contact-section bg-white py-120">
<div data-aos="fade-up" data-aos-duration="800">
<div class="container">
<div class="d-flex justify-content-between align-items-start align-items-lg-center flex-column flex-lg-row">
<div class="content">
<?php if (get_field('title_contact', 28)) { ?>
<div class="text-black font-42 text-medium">
<?php echo get_field('title_contact', 28); ?>
</div>
<?php }
if (get_field('description', 28)) { ?>
<div class="font-16 text-black text-medium mt-3">
<?php echo get_field('description', 28); ?>
</div>
</div>
<?php }
if (get_field('button_url', 28)) { ?>
<a href="<?php echo get_field('button_url', 28); ?>"
class="mt-4 px-4 font-16 text-bold talk-btn black-btn d-flex align-items-center justify-content-center mx-0"><?php echo get_field('title_contact', 28); ?>
</a>
<?php } ?>
</div>
</div>
</div>
</section>
</div>
<?php include get_template_directory() . '/inc/wp-whitepaper-modal.php'; ?>
<?php get_footer(); ?>
<script>
jQuery(document).ready(function($) {
let page = 1;
let postsPerPage = 12;
let totalPosts = <?php echo (int) $initial_total; ?>;
let ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
const loadMoreBtn = $('#load-more');
const clearBtn = $('.clear-btn');
function hideLoadMore() {
loadMoreBtn.attr('style', 'display:none !important;');
}
function showLoadMore() {
loadMoreBtn.attr('style', 'display:flex !important;');
}
function updateLoadMoreVisibility() {
if ((page * postsPerPage) >= totalPosts || totalPosts === 0) {
hideLoadMore();
} else {
showLoadMore();
}
}
updateLoadMoreVisibility();
function toggleClearButton() {
let searchValue = $('#blog-search').val().trim();
let contentValue = $('#content-type-filter').val();
if (searchValue !== '' || contentValue !== '') {
clearBtn.show();
} else {
clearBtn.hide();
}
}
toggleClearButton();
$('#blog-search').on('input', toggleClearButton);
$('#content-type-filter').on('change', function() {
toggleClearButton();
page = 1;
loadBlogs(true);
});
$('#filtered-blog').on('click', function() {
page = 1;
loadBlogs(true);
});
$('#blog-search').on('keypress', function(e) {
if (e.which === 13) {
page = 1;
loadBlogs(true);
}
});
loadMoreBtn.on('click', function() {
page++;
loadBlogs(false);
});
clearBtn.on('click', function() {
$('#blog-search').val('');
$('#content-type-filter').val('');
page = 1;
loadBlogs(true);
toggleClearButton();
});
function loadBlogs(reset) {
let searchKeyword = $('#blog-search').val();
let contentType = $('#content-type-filter').val();
// Show loader and dim results
$('#insights-loader').fadeIn(200);
$('.search-result .row').css('opacity', '0.4');
$.ajax({
url: ajaxurl,
type: 'POST',
dataType: 'json',
data: {
action: 'get_filtered_blogs',
searchKeyword: searchKeyword,
contentType: contentType,
page: page
},
success: function(data) {
if (reset) {
$('.search-result .row').html(data.html);
page = 1;
} else {
$('.search-result .row').append(data.html);
}
totalPosts = parseInt(data.totalPosts) || 0;
let postsReturned = parseInt(data.postsReturned) || 0;
// No results at all
if (totalPosts === 0 || postsReturned === 0) {
hideLoadMore();
return;
}
// All posts already loaded
if ((page * postsPerPage) >= totalPosts) {
hideLoadMore();
} else {
showLoadMore();
}
},
error: function() {
console.log('AJAX Error');
},
complete: function() {
// Hide loader and restore opacity
$('#insights-loader').fadeOut(200);
$('.search-result .row').css('opacity', '1');
}
});
}
});
</script>