File: /var/www/html/dooblo.cccinfotech.com/wp-content/themes/dooblo/new-priceing-page.php
<?php
/**
* Template Name: Pricing
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Dooblo
*/
get_header();
function createURL()
{
$orgID = $_GET['orgid'];
if (!empty($orgID)) {
echo the_sub_field('url') . "&custom1=" . $orgID . "&companyname=" . $_GET['orgname'];
}
else
{
echo the_sub_field('url');
}
}
?>
<div id="pricing-page" class="content-area" <?php post_class(); ?>>
<div id="top-page"></div>
<section class="pricing-top">
<div class="bg-image" style="<?php the_field('top_header_background_image'); ?>"></div>
<div class="bg-dark"></div>
<div class="info">
<h1><?php the_field('top_header_big_text'); ?></h1>
<h2><?php the_field('top_header_paragraph_text'); ?></h2>
</div>
</section>
<section id="tabing">
<div class="container-fluid-full">
<div class="tab">
<button class="tablinks" onclick="tabin(event, 'priceone')" id="defaultOpen">Interviews</button>
<button class="tablinks" onclick="tabin(event, 'pricetwo')">Interviews – High Volume</button>
<button class="tablinks" onclick="tabin(event, 'pricethree')">Storage</button>
<button class="tablinks" onclick="tabin(event, 'pricefour')">Data Connectors</button>
<button class="tablinks" onclick="tabin(event, 'pricefive')">STG Insights Subscription</button>
</div>
<div class="tab-content">
<div id="priceone" class="tabcontent">
<?php if( have_rows('sections') ): ?>
<?php while(have_rows('sections')): the_row(); ?>
<?php if(get_row_layout() == 'section1'): ?>
<section id="section1">
<div class="content">
<div class="sub-subtitle"><?php the_sub_field('sub_subtitle'); ?></div>
</div>
</section>
<?php elseif(get_row_layout() == 'section2'): ?>
<?php
// check if the flexible content field has rows of data
if( have_rows('pricings') ): ?>
<section id="section2">
<div class="workarea1 cf">
<?php while(have_rows('pricings')): the_row(); ?>
<div class="section <?php if(get_sub_field('featured') == true): ?>featured<?php endif; ?>">
<div class="inner">
<h3 class="section-1"><?php the_sub_field('title'); ?></h3>
<div class="section-2">
<div class="price"><?php the_sub_field('price'); ?></div>
<div class="catchphrase"><?php the_sub_field('catchphrase'); ?></div>
<ul class="features">
<?php while(have_rows('features')): the_row(); ?>
<li>
<strong><?php the_sub_field('number'); ?></strong> <?php the_sub_field('feature_name'); ?></li>
<?php endwhile; ?>
</ul>
<?php while(have_rows('purchase')): the_row(); ?>
<a href="<?php createURL(); ?>" class="btn hover"><?php the_sub_field('text'); ?></a>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="notice">
<?php the_field('sections_notice'); ?>
</div>
</div>
</section>
<?php endif; ?>
<?php elseif(get_row_layout() == 'section3'): ?>
<section id="section3">
<div class="background-image" style="background-image:url(<?php the_sub_field('banner') ?>);"></div>
<div class="workarea1">
<h2><?php the_sub_field('title'); ?></h2>
<ul class="items cf">
<?php while(have_rows('items')): the_row(); ?>
<li class="item alignleft span33">
<div class="icon"><img src="<?php the_sub_field('icons'); ?>"/></div>
<div class="text"><strong><?php the_sub_field('text_bold'); ?></strong> <?php the_sub_field('text_light'); ?></div>
</li>
<?php endwhile; ?>
</ul>
</div>
</section>
<?php elseif(get_row_layout() == 'section4'): ?>
<section id="section4">
<div class="workarea1">
<div class="title-wraper">
<h2><?php the_sub_field('title'); ?></h2>
<div class="subtitle"><?php the_sub_field('sub_title'); ?></div>
</div>
<ul class="items">
<?php while(have_rows('accordion')): the_row(); ?>
<li class="item">
<div class="item-inner">
<div class="ac-title"><?php the_sub_field('q-title'); ?><span class="title-icon"></span></div>
<div class="ac-content"><?php the_sub_field('q-answer'); ?></div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
</section>
<?php elseif(get_row_layout() == 'section5'): ?>
<section id="section5" class="cf">
<div class="section5-1 alignleft">
<img src="<?php the_sub_field('background'); ?>" />
</div>
<div class="section5-2 alignleft">
<div class="align-middle-center">
<div class="form">
<div class="section5-2-1"><?php the_sub_field('title'); ?></div>
<div class="section5-2-2"><?php the_sub_field('subtitle'); ?></div>
<div class="theForm"><?php the_sub_field('form'); ?></div>
<section class="message-sent">
<div class="row">
<div class="col-md-12">
<div class="icon">
<img src="<?= get_template_directory_uri(); ?>/images/contact/mailafter.png" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Your message has been <br>sent successfully!</h1>
</div>
</div>
</section>
<form id="pricing-form" class="cf" method="post" enctype="multipart/form-data">
<input type="hidden" name="subject" value="Dooblo - Ready for a demo" />
<input type="hidden" name="action" value="hpform_action">
<?php while(have_rows('form')): the_row(); ?>
<?php $type = get_sub_field('type'); ?>
<?php
if($type != 'submit'):
?>
<div class="input alignleft <?php the_sub_field('size'); ?>">
<input type="<?php echo $type; ?>" name="<?php the_sub_field('name'); ?>" placeholder="<?php the_sub_field('placeholder'); ?>" data-error="<?php the_sub_field('error'); ?>" data-placeholder="<?php the_sub_field('placeholder'); ?>" />
</div>
<?php
else:
?>
<div class="submit">
<input type="submit" name="<?php the_sub_field('name'); ?>" value="<?php the_sub_field('placeholder'); ?>" class="btn" />
</div>
<?php
endif;
?>
<?php endwhile; ?>
</form>
</div>
</div>
</div>
</section>
<?php endif; ?>
<?php endwhile; ?>
</div>
<div id="pricetwo" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="pricethree" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="pricefour" class="tabcontent">
<h3>four tab</h3>
<p>dfsfsfsf.</p>
</div>
<div id="pricefive" class="tabcontent">
<h3>five tab</h3>
<p>Tdfsfsfs.</p>
</div>
</div></div>
</section>
<?php endif; ?>
</div>
<script>
function tabin(evt, pricename) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(pricename).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
function sendOK(){
console.log('sendOK')
jQuery('.theForm').addClass('hide');
jQuery('.message-sent').addClass('show');
}
</script>
<style>
.container-fluid-full .tab {
text-align: center;
display: flex;
justify-content: center;
margin-top: -45px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.tab { overflow: hidden;}
.tablinks.active { color: #9ac20f;}
.tab button {
background-color: #555;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 11px 15px;
transition: 0.3s;
font-size: 19px;
margin: 0px 3px;
color: #fff;
flex: 1;
}
.tabcontent {display: none;}
</style>
<?php get_footer(); ?>