File: /var/www/html/wp-content/themes/custom-theme/blocks/donate/render.php
<?php
/**
* Donate Block — render template
*
* Sections:
* - CTA banner: heading + button over background image
* - Thank You: heading + 3 info cards grid
* - Sowing Opportunity: heading + description + donation form
* (form is layout-only — no payment processor integration yet)
*
* Built forward-from-Figma 2026-04-16 by Lark.
* Figma source: CAE-FLOW-SupportCAE-Donate-General-DonateOnce-V7 (19268:584395)
*/
$cta_heading = get_field('donate_cta_heading');
$cta_button = get_field('donate_cta_button');
$cta_image = get_field('donate_cta_image');
$ty_heading = get_field('donate_thankyou_heading');
$ty_cards = get_field('donate_thankyou_cards');
$form_heading = get_field('donate_form_heading');
$form_desc = get_field('donate_form_description');
$form_amounts = get_field('donate_form_amounts');
$form_btn_text = get_field('donate_form_button_text') ?: 'Donate Now';
$tax_notice = get_field('donate_tax_notice');
if (!$cta_heading && !$form_heading) {
return;
}
// Parse amounts
$amounts = $form_amounts ? array_map('trim', explode(',', $form_amounts)) : ['50', '100', '250', '500', '1000'];
$block_attrs = get_block_wrapper_attributes([
'class' => 'donate-block',
'data-figma-id' => '19268:584395',
]);
?>
<div <?php echo $block_attrs; ?>>
<?php /* ── Section Tabs (Donate / Ways to Give) ────────────────────────── */ ?>
<nav class="donate-block__tabs" aria-label="Support CAE navigation">
<span class="donate-block__tab donate-block__tab--active" aria-current="page">
Donate
</span>
<a href="/support-cae/" class="donate-block__tab">
The Different Ways to Give
</a>
</nav>
<?php /* ── Subtabs (General / Vermont Farm Fund) ───────────────────────── */ ?>
<nav class="donate-block__subtabs" aria-label="Donate sub-navigation">
<div class="donate-block__subtabs-inner">
<span class="donate-block__subtab donate-block__subtab--active" aria-current="page">
General
</span>
<a href="/support-cae/donate/vermont-farm-fund/" class="donate-block__subtab">
Vermont Farm Fund
</a>
</div>
</nav>
<?php /* ── CTA Banner ──────────────────────────────────────────────────── */ ?>
<?php if ($cta_heading): ?>
<section class="donate-block__cta" data-figma-id="19275:508496">
<?php if ($cta_image): ?>
<img src="<?php echo esc_url($cta_image['url']); ?>"
alt=""
class="donate-block__cta-bg"
loading="lazy">
<?php endif; ?>
<div class="donate-block__cta-content" data-figma-id="19275:508497">
<h2 class="donate-block__cta-heading">
<?php echo esc_html($cta_heading); ?>
</h2>
<?php if ($cta_button): ?>
<a href="<?php echo esc_url($cta_button['url']); ?>"
class="donate-block__cta-button"
<?php echo !empty($cta_button['target']) ? 'target="' . esc_attr($cta_button['target']) . '" rel="noopener"' : ''; ?>>
<span><?php echo esc_html($cta_button['title']); ?></span>
<span class="donate-block__cta-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M7.5 3.5L14 10L7.5 16.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</a>
<?php endif; ?>
</div>
</section>
<?php endif; ?>
<?php /* ── Tax Notice ──────────────────────────────────────────────────── */ ?>
<?php if ($tax_notice): ?>
<div class="donate-block__tax-notice">
<p><?php echo esc_html($tax_notice); ?></p>
</div>
<?php endif; ?>
<?php /* ── Thank You Section ───────────────────────────────────────────── */ ?>
<?php if ($ty_heading || $ty_cards): ?>
<section class="donate-block__thankyou" data-figma-id="19275:508503">
<?php if ($ty_heading): ?>
<h2 class="donate-block__thankyou-heading" data-figma-id="19275:508506">
<?php echo esc_html($ty_heading); ?>
</h2>
<?php endif; ?>
<?php if ($ty_cards): ?>
<div class="donate-block__cards">
<?php foreach ($ty_cards as $card): ?>
<div class="donate-block__card">
<?php if (!empty($card['card_icon'])): ?>
<div class="donate-block__card-icon">
<img src="<?php echo esc_url($card['card_icon']['url']); ?>"
alt=""
loading="lazy">
</div>
<?php endif; ?>
<?php if (!empty($card['card_title'])): ?>
<h3 class="donate-block__card-title">
<?php echo esc_html($card['card_title']); ?>
</h3>
<?php endif; ?>
<?php if (!empty($card['card_description'])): ?>
<p class="donate-block__card-desc">
<?php echo esc_html($card['card_description']); ?>
</p>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</section>
<?php endif; ?>
<?php /* ── Sowing Opportunity / Donation Form ──────────────────────────── */ ?>
<?php if ($form_heading): ?>
<section class="donate-block__form-section" data-figma-id="19268:584420">
<div class="donate-block__form-intro" data-figma-id="19275:509071">
<h2 class="donate-block__form-heading">
<?php echo esc_html($form_heading); ?>
</h2>
<?php if ($form_desc): ?>
<p class="donate-block__form-desc">
<?php echo esc_html($form_desc); ?>
</p>
<?php endif; ?>
</div>
<div class="donate-block__form" data-figma-id="19268:584426">
<div class="donate-block__form-label">AMOUNT</div>
<?php /* ── Once / Monthly toggle ──── */ ?>
<div class="donate-block__frequency" data-figma-id="19268:584430">
<button type="button" class="donate-block__freq-tab donate-block__freq-tab--active" data-freq="once">
Donate Once
</button>
<button type="button" class="donate-block__freq-tab" data-freq="monthly">
Donate Monthly
</button>
</div>
<?php /* ── Amount selector ──── */ ?>
<div class="donate-block__amounts" data-figma-id="19268:584433">
<div class="donate-block__amounts-label">Choose Amount</div>
<div class="donate-block__amounts-grid">
<?php foreach ($amounts as $i => $amount): ?>
<button type="button"
class="donate-block__amount<?php echo $i === 0 ? ' donate-block__amount--selected' : ''; ?>"
data-amount="<?php echo esc_attr($amount); ?>">
$<?php echo esc_html(number_format((float)$amount, 2)); ?>
</button>
<?php endforeach; ?>
<div class="donate-block__amount-other">
<span class="donate-block__amount-currency">$</span>
<input type="text"
class="donate-block__amount-input"
placeholder="Other Amount"
aria-label="Other donation amount">
</div>
</div>
</div>
<?php /* ── Dedication checkbox ──── */ ?>
<label class="donate-block__dedication" data-figma-id="19268:584454">
<input type="checkbox" class="donate-block__dedication-checkbox">
<span class="donate-block__dedication-text">
Dedicate my donation in honor or in memory of someone
</span>
</label>
<?php /* ── Submit button ──── */ ?>
<button type="button" class="donate-block__submit" data-figma-id="19268:584457">
<span><?php echo esc_html($form_btn_text); ?></span>
<span class="donate-block__submit-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M7.5 3.5L14 10L7.5 16.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</div>
</section>
<?php endif; ?>
</div>
<?php /* ── Form interaction (layout-only, no payment processing) ────────── */ ?>
<script>
(function() {
var block = document.querySelector('.donate-block');
if (!block) return;
// Frequency toggle
block.addEventListener('click', function(e) {
var tab = e.target.closest('.donate-block__freq-tab');
if (tab) {
block.querySelectorAll('.donate-block__freq-tab').forEach(function(t) {
t.classList.remove('donate-block__freq-tab--active');
});
tab.classList.add('donate-block__freq-tab--active');
}
// Amount selection
var amt = e.target.closest('.donate-block__amount');
if (amt) {
block.querySelectorAll('.donate-block__amount').forEach(function(a) {
a.classList.remove('donate-block__amount--selected');
});
amt.classList.add('donate-block__amount--selected');
var input = block.querySelector('.donate-block__amount-input');
if (input) input.value = '';
}
});
// Other amount input — deselect preset buttons when typing
var otherInput = block.querySelector('.donate-block__amount-input');
if (otherInput) {
otherInput.addEventListener('focus', function() {
block.querySelectorAll('.donate-block__amount').forEach(function(a) {
a.classList.remove('donate-block__amount--selected');
});
});
}
})();
</script>