OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

new pricing

Browse Source
This commit is contained in:
Matt Batchelder
2026-05-12 13:56:51 -04:00
parent a0049be6fb
commit b013b33839
5 changed files with 100 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
theme/assets/css/main.css
View File

@@ -2501,6 +2501,56 @@ p:last-child { margin-bottom: 0; }
.pricing-features li:last-child { border-bottom: none; }
.pricing-check { color: var(--color-primary); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
/* ── Billing period toggle ─────────────────────────────────── */
.pricing-billing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: .375rem;
margin-bottom: 2.5rem;
background: var(--color-border);
border-radius: 100px;
padding: .3rem;
width: fit-content;
margin-inline: auto;
}
.pbt-option {
background: transparent;
border: none;
border-radius: 100px;
cursor: pointer;
font-size: .9rem;
font-weight: 600;
color: var(--color-text-muted);
padding: .45rem 1.25rem;
transition: background var(--transition), color var(--transition), box-shadow var(--transition);
display: flex;
align-items: center;
gap: .5rem;
white-space: nowrap;
}
.pbt-option.active {
background: var(--card-bg);
color: var(--color-heading);
box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.pbt-save-pill {
background: var(--color-primary);
color: #fff;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
padding: .2rem .55rem;
border-radius: 100px;
text-transform: uppercase;
}
.pricing-savings {
font-size: .82rem;
font-weight: 600;
color: var(--color-primary);
margin-top: .35rem;
}
@media (max-width: 900px) {
.pricing-grid-3 { grid-template-columns: 1fr; max-width: 400px; }
}

21
theme/assets/js/main.js
View File

@@ -744,6 +744,27 @@ document.addEventListener('DOMContentLoaded', () => {
stages.forEach(function (stage) { io.observe(stage); });
}
/* ── Pricing billing toggle ─────────────────────────────── */
document.querySelectorAll('.pricing-billing-toggle').forEach(function(toggle) {
toggle.addEventListener('click', function(e) {
var btn = e.target.closest('.pbt-option');
if (!btn) return;
var billing = btn.dataset.billing;
toggle.querySelectorAll('.pbt-option').forEach(function(b) {
b.classList.toggle('active', b === btn);
b.setAttribute('aria-pressed', b === btn ? 'true' : 'false');
});
var section = toggle.closest('section');
if (!section) return;
section.querySelectorAll('.pbt-show-monthly').forEach(function(el) {
el.hidden = (billing === 'annual');
});
section.querySelectorAll('.pbt-show-annual').forEach(function(el) {
el.hidden = (billing === 'monthly');
});
});
});
function startTsSlides(stage) {
var slides = stage.querySelectorAll('.ts-slide');
if (!slides.length) return;

29
theme/blocks/index.php
View File

@@ -539,6 +539,9 @@ add_action('init', function () {
'tagline' => ['type' => 'string', 'default' => ''],
'price' => ['type' => 'string', 'default' => ''],
'pricePer' => ['type' => 'string', 'default' => ''],
'annualPrice' => ['type' => 'string', 'default' => ''],
'annualPer' => ['type' => 'string', 'default' => ''],
'annualSavings' => ['type' => 'string', 'default' => ''],
'features' => ['type' => 'array', 'default' => []],
'btnText' => ['type' => 'string', 'default' => 'Get Started'],
'btnUrl' => ['type' => 'string', 'default' => '/contact'],
@@ -1793,6 +1796,11 @@ function oribi_render_pricing_section($a, $content, $block)
$cls = $a['variant'] === 'alt' ? 'section section-alt' : 'section';
$count = count($block->inner_blocks);
$has_label = !empty($a['label']);
$toggle = '
<div class="pricing-billing-toggle" role="group" aria-label="Billing period">
<button class="pbt-option pbt-monthly active" data-billing="monthly" aria-pressed="true">Monthly</button>
<button class="pbt-option pbt-annual" data-billing="annual" aria-pressed="false">Annual <span class="pbt-save-pill">Save 17%</span></button>
</div>';
ob_start();
if ($has_label): ?>
<section class="<?php echo esc_attr($cls); ?>">
@@ -1803,6 +1811,7 @@ function oribi_render_pricing_section($a, $content, $block)
<h2><?php echo wp_kses_post($a['heading']); ?></h2>
<?php if ($a['lead']): ?><p class="lead"><?php echo wp_kses_post($a['lead']); ?></p><?php endif; ?>
</div>
<?php echo $toggle; ?>
<div class="pricing-grid pricing-grid-<?php echo intval($count); ?>">
<?php echo $content; ?>
</div>
@@ -1816,6 +1825,7 @@ function oribi_render_pricing_section($a, $content, $block)
<h2><?php echo wp_kses_post($a['heading']); ?></h2>
<?php if ($a['lead']): ?><p class="lead"><?php echo wp_kses_post($a['lead']); ?></p><?php endif; ?>
</div>
<?php echo $toggle; ?>
<div class="pricing-grid pricing-grid-<?php echo intval($count); ?>">
<?php echo $content; ?>
</div>
@@ -1849,6 +1859,13 @@ function oribi_render_pricing_card($a)
}
}
$has_annual = !empty($a['annualPrice']);
$monthly_price = $a['price'] ?? '';
$monthly_per = $a['pricePer'] ?? '';
$annual_price = $a['annualPrice'] ?? '';
$annual_per = $a['annualPer'] ?? '';
$annual_savings = $a['annualSavings'] ?? '';
ob_start(); ?>
<div class="pricing-card<?php echo $featured ? ' featured' : ''; ?>">
<?php if ($featured && !empty($a['badge'])): ?>
@@ -1863,11 +1880,15 @@ function oribi_render_pricing_card($a)
endif; ?>
<div class="pricing-name"><?php echo esc_html($a['name']); ?></div>
<p class="pricing-tagline"><?php echo wp_kses_post($a['tagline']); ?></p>
<?php if (!empty($a['price'])): ?>
<?php if ($monthly_price): ?>
<div class="pricing-price">
<div class="pricing-amount"><?php echo wp_kses_post($a['price']); ?></div>
<?php if (!empty($a['pricePer'])): ?><div class="pricing-per"><?php echo wp_kses_post($a['pricePer']); ?></div><?php
endif; ?>
<div class="pricing-amount pbt-show-monthly"><?php echo wp_kses_post($monthly_price); ?></div>
<?php if ($monthly_per): ?><div class="pricing-per pbt-show-monthly"><?php echo wp_kses_post($monthly_per); ?></div><?php endif; ?>
<?php if ($has_annual): ?>
<div class="pricing-amount pbt-show-annual" hidden><?php echo wp_kses_post($annual_price); ?></div>
<?php if ($annual_per): ?><div class="pricing-per pbt-show-annual" hidden><?php echo wp_kses_post($annual_per); ?></div><?php endif; ?>
<?php if ($annual_savings): ?><div class="pricing-savings pbt-show-annual" hidden><?php echo esc_html($annual_savings); ?></div><?php endif; ?>
<?php endif; ?>
</div>
<?php
endif; ?>