kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(widgets): reviews swiper-tilt, feature countup, tilt/pricing motion

Browse Source 
Reviews use swiper-scroll + 3D tilt cards; feature intro stats count-up
and tab video pause; tilt showcase hooks effects.js; pricing cards animate.
This commit is contained in:
kate522
2026-07-21 09:46:17 +08:00
parent 8b18459dda
commit 93ab4650dd
4 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AKSRT/Widgets/WidgetFeatureIntro.php
+5 -3
View File
@@ -50,7 +50,8 @@ class WidgetFeatureIntro extends \WP_Widget {
$ss = sanitize_text_field((string) ($instance['stat_suffix'] ?? '+')); $ss = sanitize_text_field((string) ($instance['stat_suffix'] ?? '+'));
$sl = sanitize_text_field((string) ($instance['stat_label'] ?? '')); $sl = sanitize_text_field((string) ($instance['stat_label'] ?? ''));
if ($sn !== '') { if ($sn !== '') {
echo '<div class="aksrt-fi__stat"><span class="aksrt-fi__stat-num">' . esc_html($sn) . '</span>'; $num_attr = is_numeric($sn) ? ' data-aksrt-countup data-target="' . esc_attr((string) (float) $sn) . '" data-duration="1600"' : '';
echo '<div class="aksrt-fi__stat"><span class="aksrt-fi__stat-num"' . $num_attr . '>' . esc_html(is_numeric($sn) ? '0' : $sn) . '</span>';
if ($ss !== '') { if ($ss !== '') {
echo '<span class="aksrt-fi__stat-plus">' . esc_html($ss) . '</span>'; echo '<span class="aksrt-fi__stat-plus">' . esc_html($ss) . '</span>';
} }
@@ -83,7 +84,8 @@ class WidgetFeatureIntro extends \WP_Widget {
echo '<div class="aksrt-fi__browser-body" style="padding-bottom:' . esc_attr((string) $ratio) . '%">'; echo '<div class="aksrt-fi__browser-body" style="padding-bottom:' . esc_attr((string) $ratio) . '%">';
if ($s['media_type'] === 'video' && $s['video_url'] !== '') { if ($s['media_type'] === 'video' && $s['video_url'] !== '') {
$poster = $s['video_poster'] !== '' ? ' poster="' . esc_url($s['video_poster']) . '"' : ''; $poster = $s['video_poster'] !== '' ? ' poster="' . esc_url($s['video_poster']) . '"' : '';
echo '<video class="aksrt-fi__video" src="' . esc_url($s['video_url']) . '"' . $poster . ' autoplay muted loop playsinline></video>'; $auto = $i === 0 ? ' autoplay' : '';
echo '<video class="aksrt-fi__video" src="' . esc_url($s['video_url']) . '"' . $poster . $auto . ' muted loop playsinline></video>';
} elseif ($s['image'] !== '') { } elseif ($s['image'] !== '') {
echo '<img class="aksrt-fi__img" src="' . esc_url($s['image']) . '" alt="' . esc_attr($s['tab_label']) . '" loading="lazy" />'; echo '<img class="aksrt-fi__img" src="' . esc_url($s['image']) . '" alt="' . esc_attr($s['tab_label']) . '" loading="lazy" />';
} }
@@ -101,7 +103,7 @@ class WidgetFeatureIntro extends \WP_Widget {
var panels=[].slice.call(root.querySelectorAll('.aksrt-fi__panel')); var panels=[].slice.call(root.querySelectorAll('.aksrt-fi__panel'));
function go(i){ function go(i){
tabs.forEach(function(t,idx){t.classList.toggle('is-active',idx===i);}); tabs.forEach(function(t,idx){t.classList.toggle('is-active',idx===i);});
panels.forEach(function(p,idx){p.classList.toggle('is-active',idx===i);}); panels.forEach(function(p,idx){p.classList.toggle('is-active',idx===i);var v=p.querySelector('video');if(v){if(idx===i){v.play&&v.play().catch(function(){})}else{v.pause&&v.pause()}}});
} }
tabs.forEach(function(t){ t.addEventListener('click', function(){ go(parseInt(t.getAttribute('data-index')||'0',10)); }); }); tabs.forEach(function(t){ t.addEventListener('click', function(){ go(parseInt(t.getAttribute('data-index')||'0',10)); }); });
})(); })();
src/AKSRT/Widgets/WidgetPricingPlans.php
+5 -2
View File
@@ -41,14 +41,17 @@ class WidgetPricingPlans extends \WP_Widget {
echo '<div class="aksrt-pricing">'; echo '<div class="aksrt-pricing">';
echo '<div class="aksrt-pricing__cards">'; echo '<div class="aksrt-pricing__cards">';
$pi = 0;
foreach ($plans as $plan) { foreach ($plans as $plan) {
$accent = sanitize_key((string) ($plan['color'] ?? 'blue')); $accent = sanitize_key((string) ($plan['color'] ?? 'blue'));
if (!in_array($accent, ['pink', 'purple', 'blue', 'green', 'yellow', 'cyan'], true)) { if (!in_array($accent, ['pink', 'purple', 'blue', 'green', 'yellow', 'cyan'], true)) {
$accent = 'blue'; $accent = 'blue';
} }
$featured = !empty($plan['is_featured']); $featured = !empty($plan['is_featured']);
$class = 'aksrt-pricing__card accent-' . $accent . ($featured ? ' is-featured' : ''); $pack = function_exists('aksrt_obs_animate_attrs') ? aksrt_obs_animate_attrs('slideup', false, $pi * 0.12) : ['class' => '', 'attr' => ''];
echo '<div class="' . esc_attr($class) . '">'; $class = 'aksrt-pricing__card accent-' . $accent . ($featured ? ' is-featured' : '') . $pack['class'];
echo '<div class="' . esc_attr(trim($class)) . '"' . $pack['attr'] . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$pi++;
if ($featured || !empty($plan['tag'])) { if ($featured || !empty($plan['tag'])) {
$badge = (string) ($plan['tag'] !== '' ? $plan['tag'] : __('推荐', 'aksrt')); $badge = (string) ($plan['tag'] !== '' ? $plan['tag'] : __('推荐', 'aksrt'));
echo '<span class="aksrt-pricing__badge">' . esc_html($badge) . '</span>'; echo '<span class="aksrt-pricing__badge">' . esc_html($badge) . '</span>';
src/AKSRT/Widgets/WidgetReviews.php
+6 -2
View File
@@ -38,9 +38,10 @@ class WidgetReviews extends \WP_Widget {
$style = sprintf('--aksrt-rev-pc:%s;--aksrt-rev-m:%s;', rtrim(rtrim(number_format($pc, 2, '.', ''), '0'), '.'), rtrim(rtrim(number_format($m, 2, '.', ''), '0'), '.')); $style = sprintf('--aksrt-rev-pc:%s;--aksrt-rev-m:%s;', rtrim(rtrim(number_format($pc, 2, '.', ''), '0'), '.'), rtrim(rtrim(number_format($m, 2, '.', ''), '0'), '.'));
echo '<div class="aksrt-reviews" style="' . esc_attr($style) . '">'; echo '<div class="aksrt-reviews" style="' . esc_attr($style) . '">';
echo '<div class="aksrt-reviews__track">'; echo '<div class="swiper-container swiper-scroll aksrt-reviews-swiper">';
echo '<div class="swiper-wrapper aksrt-reviews__track">';
foreach ($reviews as $r) { foreach ($reviews as $r) {
echo '<div class="aksrt-reviews__slide"><div class="aksrt-reviews__card">'; echo '<div class="swiper-slide aksrt-reviews__slide"><div class="aksrt-reviews__card" data-aksrt-tilt data-tilt-max="8">';
echo '<div class="aksrt-reviews__head">'; echo '<div class="aksrt-reviews__head">';
if ($r['avatar'] !== '') { if ($r['avatar'] !== '') {
echo '<img class="aksrt-reviews__avatar" src="' . esc_url($r['avatar']) . '" alt="" loading="lazy" width="44" height="44" />'; echo '<img class="aksrt-reviews__avatar" src="' . esc_url($r['avatar']) . '" alt="" loading="lazy" width="44" height="44" />';
@@ -70,6 +71,9 @@ class WidgetReviews extends \WP_Widget {
echo '<i class="fa fa-quote-right aksrt-reviews__quote" aria-hidden="true"></i>'; echo '<i class="fa fa-quote-right aksrt-reviews__quote" aria-hidden="true"></i>';
echo '</div></div>'; echo '</div></div>';
} }
echo '</div>';
echo '<div class="swiper-button-prev" aria-label="' . esc_attr__('上一页', 'aksrt') . '"></div>';
echo '<div class="swiper-button-next" aria-label="' . esc_attr__('下一页', 'aksrt') . '"></div>';
echo '</div></div>'; echo '</div></div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
src/AKSRT/Widgets/WidgetTiltCases.php
+5 -3
View File
@@ -37,7 +37,8 @@ class WidgetTiltCases extends \WP_Widget {
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '<div class="aksrt-tilt">'; echo '<div class="aksrt-tilt">';
echo '<div class="aksrt-tilt__text">'; $pack = function_exists('aksrt_obs_animate_attrs') ? aksrt_obs_animate_attrs('slideup', false, 0) : ['class' => '', 'attr' => ''];
echo '<div class="aksrt-tilt__text' . esc_attr($pack['class']) . '"' . $pack['attr'] . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
if ($badge !== '') { if ($badge !== '') {
$icon = sanitize_text_field((string) ($instance['intro_badge_icon'] ?? '')); $icon = sanitize_text_field((string) ($instance['intro_badge_icon'] ?? ''));
echo '<div class="aksrt-tilt__badge">'; echo '<div class="aksrt-tilt__badge">';
@@ -82,11 +83,12 @@ class WidgetTiltCases extends \WP_Widget {
} }
echo '</div>'; echo '</div>';
echo '<div class="aksrt-tilt__showcase">'; echo '<div class="aksrt-tilt__showcase" data-aksrt-tilt data-tilt-max="12" data-tilt-glare="1">';
if ($images) { if ($images) {
foreach ($images as $i => $img) { foreach ($images as $i => $img) {
$cls = $i === 0 ? ' is-main' : ''; $cls = $i === 0 ? ' is-main' : '';
echo '<div class="aksrt-tilt__img' . esc_attr($cls) . '"><img src="' . esc_url($img) . '" alt="" loading="lazy" /></div>'; $placeholder = get_template_directory_uri() . '/assets/img/placeholder.svg';
echo '<div class="aksrt-tilt__img' . esc_attr($cls) . '"><img class="aksrt-lazy lazyload" data-src="' . esc_url($img) . '" src="' . esc_url($placeholder) . '" alt="" loading="lazy" /></div>';
} }
} else { } else {
echo '<div class="aksrt-tilt__img is-main is-empty"></div>'; echo '<div class="aksrt-tilt__img is-main is-empty"></div>';