File: /storage/v6964/iskcon/public_html/wp-content/themes/tow-temple/single-donation.php
<?php
/**
* The template for displaying donation single page
*
* @package tow
*/
get_header();
wp_enqueue_style( 'tow-style-event', get_template_directory_uri() . '/assets/css/donation.css' );
$donation_short_description = get_post_meta( get_the_ID(), 'donation_short_description', true );
$donation_money_goal = get_post_meta( get_the_ID(), 'donation_money_goal', true );
$donation_money_goal = floatval( preg_replace( '/[^\d.]/', '', $donation_money_goal ) );
$donation_money_raised = get_post_meta( get_the_ID(), 'donation_money_raised', true );
$donation_money_raised = floatval( preg_replace( '/[^\d.]/', '', $donation_money_raised ) );
$money_percent = 0;
if($donation_money_goal>0 && $donation_money_raised>0)
{
$money_percent = intval(($donation_money_raised *100) / $donation_money_goal);
//print $donation_money_raised."----".$donation_money_goal."----".$money_percent;
$money_percent = $money_percent . '%';
}
// Get the custom taxonomy terms (categories) for the current post
$terms = get_the_terms( get_the_ID(), 'donation_category' ); // Replace with your custom taxonomy name
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
foreach ( $terms as $term ) {
// Display the term name and link
$donation_category = esc_html( $term->name );
}
}
?>
<section id="donate_dt" class="p_4 pb-0 w-75 mx-auto">
<div class="container-xl">
<div class="donate_dt1 row">
<div class="col-md-8">
<div class="donate_dt1l rounded_20 p-4 border_1">
<div class="donate_dt1l1 bg_oran p-2 px-3 rounded_20">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary bg-transparent border-0 rounded-0 p-3" type="button">
<i class="fa fa-dollar fs-3"></i> </button>
</span>
<input type="text" id="donation-money" class="form-control fs-3 bg-transparent border-0 text-white">
</div>
</div>
<div class="donate_dt1l2 mt-3">
<ul class="mb-0">
<li class="d-inline-block" id="money-25" onclick="changeDonationValue('25')">$25</li>
<li class="d-inline-block" id="money-45" onclick="changeDonationValue('45')">$45</li>
<li class="d-inline-block" id="money-75" onclick="changeDonationValue('75')">$75</li>
<li class="d-inline-block" id="money-90" onclick="changeDonationValue('90')">$90</li>
<li class="d-inline-block" id="money-custom" onclick="changeDonationValue('custom')">Custom Amount</li>
</ul>
<h5 class="mt-4">Select Payment Method</h5>
<div class="donate_dt1l2i row mt-3">
<div class="col-md-4">
<div class="donate_dt1l2il">
<div class="form-check font_14">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
PAYPAL
</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="donate_dt1l2il">
<div class="form-check font_14">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
UPI
</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="donate_dt1l2il">
<div class="form-check font_14">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3">
<label class="form-check-label" for="flexRadioDefault2">
CREDIT CARD
</label>
</div>
</div>
</div>
</div>
<h5 class="mt-4">Personal Info</h5>
<div class="donate_dt1l2i1 row mt-3">
<div class="col-md-6">
<div class="donate_dt1l2i1l">
<input class="form-control rounded_20 border-0 bg_light font_14" placeholder="Name" type="text">
</div>
</div>
<div class="col-md-6">
<div class="donate_dt1l2i1l">
<input class="form-control rounded_20 border-0 bg_light font_14" placeholder="Email Address" type="text">
</div>
</div>
</div>
<div class="donate_dt1l2i1 row mt-3">
<div class="col-md-6">
<div class="donate_dt1l2i1l">
<input class="form-control rounded_20 border-0 bg_light font_14" placeholder="Phone" type="text">
</div>
</div>
<div class="col-md-6">
<div class="donate_dt1l2i1l">
<input class="form-control rounded_20 border-0 bg_light font_14" placeholder="Subject" type="text">
</div>
</div>
</div>
<div class="donate_dt1l2i1 row mt-3">
<div class="col-md-12">
<div class="donate_dt1l2i1l">
<textarea placeholder="Write a Messsage" class="form-control rounded_20 border-0 bg_light font_14 form_text"></textarea>
<h6 class="mb-0 mt-4 center_sm"><a class="button" href="#"><i class="fa fa-heart me-1"></i> Donate Now</a></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="donate_dt1r">
<div class="donate_dt1r1 p-3 border_1">
<div class="donate_dt1r1i donate_dt1r1i2 position-relative mt-3">
<div class="donate_dt1r1i1">
<div class="grid clearfix">
<figure class="effect-jazz mb-0">
<a href="<?php the_permalink(); ?>">
<?php
$thumbnail_id = get_post_thumbnail_id( get_the_ID() );
if ( $thumbnail_id ) {
$image_url = wp_get_attachment_image_src( $thumbnail_id, 'tow-360x240' ); // 'full' can be replaced with 'thumbnail', 'medium', etc.
if ( $image_url ) {
echo '<img src="' . esc_url( $image_url[0] ) . '" alt="'.get_the_title().'" class="w-100">';
} else {
echo 'No image available.';
}
}
?>
</a>
</figure>
</div>
</div>
<div class="donate_dt1r1i2 position-absolute">
<span class="d-inline-block text-white bg_oran font_12 p-2 px-3"><?php print $donation_category;?></span>
</div>
</div>
<div class="donate_dt1r1io px-2 pt-3">
<h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<p class="mb-0 mt-3"><?php print $donation_short_description; ?></p>
</div>
</div>
<div class="donate_dt1r2 p-3 bg_light border_1">
<h6 class="text-center"><?php print $money_percent;?></h6>
<div class="progress-bar mt-3">
<div class="progress" style="width:<?php print $money_percent;?>;">
</div>
</div>
<h6 class="mb-0 mt-3">Raised: <span class="fw-bold">$<?php print $donation_money_raised;?></span> <span class="float-end">Goal: <span class="fw-bold">$<?php print $donation_money_goal;?></span></span></h6>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
var prevElementVal = 'custom';
function changeDonationValue(value) {
//console.log(prevElementVal+'---------'+value);
if(prevElementVal != value){
document.getElementById('money-'+prevElementVal).style.backgroundColor = '#f5e5e1';
document.getElementById('money-'+prevElementVal).style.color = '#000000';
prevElementVal = value;
}
document.getElementById('money-'+value).style.backgroundColor = '#f74f22';
document.getElementById('money-'+value).style.color = '#ffffff';
if(value=='custom')
value='';
document.getElementById('donation-money').value = value;
}
changeDonationValue('45');
</script>
<?php
get_footer();