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

Enhance pricing card functionality by adding price and pricePer attributes for better clarity and user experience

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 00:53:13 -05:00
parent 01235c2042
commit 0420be8bd6
4 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
theme/blocks/editor.js
View File

@@ -1067,6 +1067,8 @@ reg('oribi/pricing-card', {
faIcon: { type: 'string', default: '' },
name: { type: 'string', default: '' },
tagline: { type: 'string', default: '' },
price: { type: 'string', default: '' },
pricePer: { type: 'string', default: '' },
features: { type: 'array', default: [] },
btnText: { type: 'string', default: 'Get Started' },
btnUrl: { type: 'string', default: '/contact' },
@@ -1122,6 +1124,17 @@ reg('oribi/pricing-card', {
onChange: function(v){s({name:v});}, placeholder: 'Plan name...' }),
el(RT, { tagName: 'p', className: 'pricing-tagline', value: a.tagline,
onChange: function(v){s({tagline:v});}, placeholder: 'Tagline...' }),
a.price || a.pricePer ? el('div', { className: 'pricing-price' },
el(RT, { tagName: 'div', className: 'pricing-amount', value: a.price || '',
onChange: function(v){s({price:v});}, placeholder: '$0' }),
el(RT, { tagName: 'div', className: 'pricing-per', value: a.pricePer || '',
onChange: function(v){s({pricePer:v});}, placeholder: 'per screen / month' })
) : el('div', { className: 'pricing-price' },
el(RT, { tagName: 'div', className: 'pricing-amount', value: '',
onChange: function(v){s({price:v});}, placeholder: '$0' }),
el(RT, { tagName: 'div', className: 'pricing-per', value: '',
onChange: function(v){s({pricePer:v});}, placeholder: 'per screen / month' })
),
el('ul', { className: 'pricing-features' },
features.map(function (f, fi) {
return el('li', { key: fi, style: { display: 'flex', alignItems: 'center', gap: '4px' } },

8
theme/blocks/index.php
View File

@@ -513,6 +513,8 @@ add_action( 'init', function () {
'faIcon' => [ 'type' => 'string', 'default' => '' ],
'name' => [ 'type' => 'string', 'default' => '' ],
'tagline' => [ 'type' => 'string', 'default' => '' ],
'price' => [ 'type' => 'string', 'default' => '' ],
'pricePer' => [ 'type' => 'string', 'default' => '' ],
'features' => [ 'type' => 'array', 'default' => [] ],
'btnText' => [ 'type' => 'string', 'default' => 'Get Started' ],
'btnUrl' => [ 'type' => 'string', 'default' => '/contact' ],
@@ -1296,6 +1298,12 @@ function oribi_render_pricing_card( $a ) {
<?php if ( oribi_has_icon( $a ) ) : ?><div class="feature-icon" style="margin-inline:auto;"><?php echo oribi_render_icon( $a ); ?></div><?php 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'] ) ) : ?>
<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>
<?php endif; ?>
<ul class="pricing-features">
<?php foreach ( ( $a['features'] ?? [] ) as $f ) : ?>
<li><span class="pricing-check">&#10003;</span> <?php echo wp_kses_post( $f ); ?></li>