File: /var/www/stg-everycred.com/wp-content/themes/everycred/templates/page-pricing-plans.php
<?php /* Template name: Pricing Plans */
get_header();
$priceHeading = get_field('price_heading');
$priceDescription = get_field('price_description');
$pricingTagline = get_field('pricing_tagline');
?>
<?php
$pricing_plan_card = get_field('pricing_plan_card');
$pricing_feature_heading = get_field('pricing_feature_heading');
$pricing_feature_sub_heading = get_field('pricing_feature_sub_heading');
if ($pricing_plan_card) {
?>
<section class="pricing-section py-120">
<div class="py-60 pb-0">
<div class="container">
<div class="text-center">
<?php if ($pricing_feature_heading) { ?>
<h2 class="font-52 font-black font-medium">
<?php echo $pricing_feature_heading; ?>
</h2>
<?php }
if ($pricing_feature_sub_heading) { ?>
<div class="font-20 font-light-black font-medium mt-3">
<?php echo $pricing_feature_sub_heading; ?>
</div>
<?php } ?>
</div>
<div class="row g-0 my-5">
<?php foreach ($pricing_plan_card as $index_plan => $plan):
$plan_title = $plan['plan_title'];
$button_title = $plan['button_title'];
$button_url = $plan['button_url'];
?>
<div class="col-md-3 pricing-table">
<div class="pricing-plan-card">
<div class="plan-header"><?php echo $plan_title; ?></div>
<div class="price-options">
<?php
if ($plan['pricing_based_plan']):
foreach ($plan['pricing_based_plan'] as $index => $pricing_option):
$price = $pricing_option['price'];
?>
<div class=" <?php echo ($index_plan === 0) ? 'price-box-first' : 'price-box'; ?> <?php echo ($index === 0) ? 'active' : ''; ?>"
onclick="showTab('<?php echo esc_attr($plan['plan_title']); ?>', <?php echo $index; ?>)">
<?php echo esc_html($price); ?>
</div>
<?php endforeach;
endif; ?>
</div>
<div class="feature-list">
<?php
if ($plan['pricing_based_plan']):
foreach ($plan['pricing_based_plan'] as $index => $pricing_option):
$features = $pricing_option['add_features'];
?>
<div class="plan-tab <?php echo esc_attr($plan['plan_title']) . '-tab ' . ($index === 0 ? 'active' : ''); ?>">
<?php foreach ($features as $feature): ?>
<div class="feature-row">
<div class="feature-value"><?php echo esc_html($feature['features']); ?></div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach;
endif; ?>
</div>
<?php if ($button_title || $button_url) { ?>
<div class="text-center my-3">
<a href="<?php echo $button_url; ?>" class="btn btn-buy">
<?php echo $button_title; ?>
</a>
</div>
<?php } ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<script>
function showTab(plan, index) {
// Activate the correct plan tab
document.querySelectorAll(`.${plan}-tab`).forEach((tab, i) => {
tab.classList.toggle('active', i === index);
});
// Activate the corresponding price box
const parentPlan = event.target.closest('.pricing-table');
const boxes = parentPlan.querySelectorAll('.price-box');
boxes.forEach(box => box.classList.remove('active'));
event.target.classList.add('active');
// Now also update the features for the selected price option
const featureTabs = parentPlan.querySelectorAll('.plan-tab');
featureTabs.forEach((tab, i) => {
tab.classList.toggle('active', i === index);
});
}
</script>
<?php } ?>
<?php
$comparison_sec_title = get_field('comparison_section_title');
?>
<section class="comparision-section py-120">
<div class="container">
<?php if ($comparison_sec_title) { ?>
<div class="text-center">
<h2 class="font-52 font-black font-medium">
<?php echo $comparison_sec_title; ?>
</h2>
</div>
<?php } ?>
<div class="table-responsive-wrapper">
<table class="mt-60">
<thead>
<tr>
<th></th>
<?php if (have_rows('plan_groups')): ?>
<?php while (have_rows('plan_groups')): the_row();
$group_name = get_sub_field('group_name');
$plans = get_sub_field('plans');
$colspan = count($plans);
?>
<th colspan="<?php echo esc_attr($colspan); ?>"><?php echo esc_html($group_name); ?></th>
<?php endwhile; ?>
<?php endif; ?>
</tr>
<tr>
<th></th>
<?php if (have_rows('plan_groups')): ?>
<?php while (have_rows('plan_groups')): the_row(); ?>
<?php while (have_rows('plans')): the_row();
$plan_price = get_sub_field('plan_price');
?>
<th><?php echo esc_html($plan_price); ?></th>
<?php endwhile; ?>
<?php endwhile; ?>
<?php endif; ?>
</tr>
</thead>
<tbody>
<?php if (have_rows('comparison_sections')): ?>
<?php while (have_rows('comparison_sections')): the_row();
$section_title = get_sub_field('section_title');
?>
<tr>
<td colspan="100%" class="text-center text-semi"><?php echo esc_html($section_title); ?></td>
</tr>
<?php if (have_rows('features')): ?>
<?php while (have_rows('features')): the_row();
$feature_label = get_sub_field('feature_label');
?>
<tr>
<td class="text-start"><?php echo esc_html($feature_label); ?></td>
<?php if (have_rows('plan_values')): ?>
<?php while (have_rows('plan_values')): the_row();
$value = get_sub_field('value');
?>
<td><?php echo esc_html($value); ?></td>
<?php endwhile; ?>
<?php endif; ?>
</tr>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</section>
<?php
$blog_choose_heading = get_field('blog_choose_heading');
$blog_heading = get_field('blog_heading');
$select_blog = get_field('select_blogs');
if ($select_blog) {
?>
<section class="engineering-service bg-black py-120">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container">
<<?php echo $blog_choose_heading; ?> class="font-42 text-medium"><?php echo $blog_heading; ?></<?php echo $blog_choose_heading; ?>>
<div class="owl-carousel owl-theme case-study">
<?php foreach ($select_blog as $post) {
$feture_img = get_the_post_thumbnail_url($post->ID);
?>
<div class="item">
<a href="<?php the_permalink($post->ID); ?>" class="engineering-card position-relative overflow-hidden d-block">
<div class="engineering-card-img">
<img src="<?php echo $feture_img; ?>" alt="case-study" />
</div>
<div class="engineering-detail">
<div class="font-20 text-medium detail-text">
<?php echo get_the_title(); ?>
</div>
</div>
</a>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
</div>
</div>
</section>
<?php } ?>
<section class="contact-section bg-white py-120">
<div data-aos="fade-up" data-aos-duration="300">
<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">Contact Sales</a>
<?php } ?>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>