25% off ProSNIPC25OFF

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