Promo Strip Rotator
Cycles through a list of short promotional messages in a top-of-page strip, rotating on a configurable interval.
Module2 parts · by SnipCraft
PHPLogic
php
<?php
if ( ! function_exists( 'scseed_promo_strip_output' ) ) :
add_action( 'wp_body_open', 'scseed_promo_strip_output' );
function scseed_promo_strip_output() {
$messages = apply_filters( 'scseed_promo_strip_messages', array(
'Free shipping on orders over $50!',
'Use code SAVE10 for 10% off your first order.',
'New arrivals every week â shop now.',
'Questions? Chat with us anytime.',
) );
$interval = intval( apply_filters( 'scseed_promo_strip_interval_ms', 4000 ) );
if ( empty( $messages ) ) { return; }
?>
<div id="scseed-promo-strip" class="scseed-promo-strip" role="marquee" aria-live="polite">
<?php foreach ( $messages as $i => $msg ) : ?>
<span class="scseed-promo-strip__msg<?php echo $i === 0 ? ' is-active' : ''; ?>" aria-hidden="<?php echo $i === 0 ? 'false' : 'true'; ?>">
<?php echo esc_html( $msg ); ?>
</span>
<?php endforeach; ?>
</div>
<script>
(function(){
var strip = document.getElementById('scseed-promo-strip');
if (!strip) return;
var msgs = strip.querySelectorAll('.scseed-promo-strip__msg');
if (msgs.length < 2) return;
var current = 0;
var interval = <?php echo $interval; ?>;
setInterval(function(){
msgs[current].classList.remove('is-active');
msgs[current].setAttribute('aria-hidden', 'true');
current = (current + 1) % msgs.length;
msgs[current].classList.add('is-active');
msgs[current].setAttribute('aria-hidden', 'false');
}, interval);
})();
</script>
<?php
}
endif;CSSStyles
css
.scseed-promo-strip {
background: #222;
color: #fff;
text-align: center;
padding: 0.55rem 1rem;
font-size: 0.88rem;
font-weight: 500;
min-height: 38px;
position: relative;
overflow: hidden;
}
.scseed-promo-strip__msg {
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.scseed-promo-strip__msg.is-active {
opacity: 1;
pointer-events: auto;
position: relative;
top: auto;
transform: none;
}#frontend#banner#announcement#promo#strip