Store Clock - Show 30 minute countdown based on Store Hours

Question

I am trying to show a Minute Countdown 30 minutes before my eCommerce store's closing time. Basically, you have "29 minutes & 32 seconds to place an order".

I have the current script that is pulling store hours from several ACF (advanced custom fields) time picker fields. I am also pulling my stores date and time correctly... I just don't know how to pull it all together to show the message 30 minutes before and initialize the countdown.

function sat_clock() {
    $format = get_option('date_format') . ' ' . get_option('time_format');
    $hour = the_field('weekday_open', 'options');
    $times = array(
        'mon' => '9:00 AM - 9:00 PM',
        'tue' => '9:00 AM - 9:00 PM',
        'wed' => '9:00 AM - 9:00 PM',
        'thu' => '9:00 AM - 9:00 PM',
        'fri' => '9:00 AM - 9:00 PM',
        'sat' => '11:00 AM - 6:00 PM',
        'sun' => 'closed'
    );

    print date_i18n($format, current_time('timestamp'));
    print $hour;

}
add_action( 'woocommerce_archive_description', 'sat_clock' );

You will probably want to use JavaScript for this task. Maybe take a look at: [The simplest possible JavaScript countdown timer?](https://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer) — ficuscr, Sep 30 '20 at 18:47

Terminator-Barbapapa · Accepted Answer · 2020-10-04T09:31:13.203

Simply check the difference of the current time and the closing time of the current day. If this is less than 30 minutes (1800 seconds) show a little JavaScript countdown timer that starts at the difference between the current time and the closing time of the current day.

add_action( 'woocommerce_archive_description', 'sat_clock' );
function sat_clock() {

    $store_times = array(
        false, //Sunday 
        array( //Monday
            'open' => '09:00 AM',
            'close' => '09:00 PM',
        ), 
        array( //Tuesday
            'open' => '09:00 AM',
            'close' => '09:00 PM',
        ), 
        array( //Wednesday
            'open' => '09:00 AM',
            'close' => '09:00 PM',
        ), 
        array( //Thursday
            'open' => '09:00 AM',
            'close' => '09:00 PM',
        ), 
        array( //Friday
            'open' => '09:00 AM',
            'close' => '09:00 PM',
        ),
        array( //Saturday
            'open' => '11:00 AM',
            'close' => '06:00 PM',
        ), 
    );

    $current_day = date( 'w', current_time('timestamp') ); //Numeric representation of the day (0 for Sunday, 6 for Saturday)
    $current_date = date( 'd F Y', current_time('timestamp') );

    if ( $store_times[$current_day] !== false ) {

        $opening_time = strtotime( sprintf( '%s %s', $current_date, $store_times[$current_day]['open'] ) );
        $closing_time = strtotime( sprintf( '%s %s', $current_date, $store_times[$current_day]['close'] ) );

        if ( $closing_time > current_time('timestamp') && $closing_time - current_time('timestamp') < 1800 ) {
            echo "<p id='closing-soon-timer'></p>";
            ?>

            <script>
            var timeLeft = <?php echo $closing_time - current_time('timestamp'); ?>;
            
            // Update the count down every 1 second
            var x = setInterval(function() {

                // Time calculations for minutes and seconds
                var minutes = Math.floor(timeLeft / 60);
                var seconds = Math.floor(timeLeft % 60);

                // Display the result in the element with id="demo"
                document.getElementById("closing-soon-timer").innerHTML = minutes + "m " + seconds + "s to place an order.";

                // If the count down is finished, write some text
                if (timeLeft < 0) {
                    clearInterval(x);
                    document.getElementById("closing-soon-timer").innerHTML = "Closed for today";
                }

                timeLeft--;
            }, 1000);
            </script>

            <?php
        } elseif  ( $opening_time > current_time('timestamp') || $closing_time < current_time('timestamp') ) {
            echo "<p>Closed for today</p>";
        } else {
            echo "<p>Open for business</p>";
        }
    } else {
        echo "<p>Closed for today</p>";
    }
}

This is great! Thank you so much! One question though - how does this script know my Open time? — Bruce Banner, Oct 02 '20 at 20:21
It didn't. For the count down timer you really only need the current date and the closing time. But I've updated my answer so you can now check for opened, closed, and almost closed. If this answer works for you please mark it as accepted and possibly vote it up. — Terminator-Barbapapa, Oct 03 '20 at 21:09

Store Clock - Show 30 minute countdown based on Store Hours

1 Answers1