Store Clock - Show 30 minute countdown based on Store Hours

user_13157205 0
Viewed 159

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' );
woocommerce wordpress datetime php
1 Answers

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>";
    }
}
user_138066520
Related