Issue
I create function to get the date and turn it to countdown. This my function code:
function countdown() {
global $product;
$start = get_post_meta( get_the_ID() , 'yung_product_date_start', true );
$end = get_post_meta( get_the_ID() , 'yung_product_date_end', true );
if ( $start && $end ) {
$current = strtotime(date("Y/m/d"));
$date = strtotime($start);
$end_date = strtotime($end);
if (( $date == $current || $current > $date ) && $current != $end_date && $end_date > $current) {
wp_enqueue_script( "countdown", get_template_directory_uri() . '/assets/js/countdown.js', "1.0", true );
wp_localize_script(
"countdown",
'countdown_js',
array(
'to' => $end,
'from' => $start
)
);
echo '<div id="product-countdown">
<span id="countdown-counter"></span>
</div>';
}
}
}
add_action( 'woocommerce_before_add_to_cart_form', 'countdown' );
And this my javascript code which is in "countdown.js" file:
jQuery(function($){
"use strict";
var from = countdown_js.from;
var to = countdown_js.to;
// Update the count down every 1 second
var countDownDate = new Date(to).getTime();
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if ( days<10 ) {
var days = '0' + days;
}
if ( hours<10 ) {
var hours = '0' + hours;
}
if ( minutes<10 ) {
var minutes = '0' + minutes;
}
if ( seconds<10 ) {
var seconds = '0' + seconds;
}
if ( days == 0 ) {
var days = '';
} else {
days += ' : '
}
$('#countdown-counter').each( function() {
var html = days + hours + " : " + minutes + " : " + seconds;
$(this).html(html);
});
if (distance < 0) {
clearInterval(x);
$('#product-countdown').css("display", "none");
}
}, 1000);
});
This code works on single product page, but when I try this in the product archive, it only works on the first product and does not work on the rest products. I want each product to have own countdown. What should I do please help me!
Solution
Thanks to pianka for helping me to figure out this problem. I finally edited these codes and it finally worked.
function countdown() {
global $product;
$start = get_post_meta( get_the_ID() , 'yung_product_date_start', true );
$end = get_post_meta( get_the_ID() , 'yung_product_date_end', true );
if ( $start && $end ) {
$current = strtotime(date("Y/m/d"));
$date = strtotime($start);
$end_date = strtotime($end);
if (( $date == $current || $current > $date ) && $current != $end_date && $end_date > $current) {
wp_enqueue_script( "countdown", get_template_directory_uri() . '/assets/js/countdown.js', "1.0", true );
echo '<div class="product-countdown">
<span class="countdown-counter" countdown="'. $end .'"></span>
</div>';
} ?>
<?php
}
}
add_action( 'woocommerce_before_add_to_cart_form', 'countdown' );
and javascript code:
jQuery(function($){
"use strict";
$('.countdown-counter').each( function() {
var to = $(this).attr("countdown");
var thisis = $(this);
var parent = $(this).parent();
var countDownDate = new Date(to).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if ( days<10 ) {
var days = '0' + days;
}
if ( hours<10 ) {
var hours = '0' + hours;
}
if ( minutes<10 ) {
var minutes = '0' + minutes;
}
if ( seconds<10 ) {
var seconds = '0' + seconds;
}
if ( days == 0 ) {
var days = '';
} else {
days += ' : '
}
var html = days + hours + " : " + minutes + " : " + seconds;
thisis.html(html);
if (distance < 0) {
clearInterval(x);
parent.css("display", "none");
}
}, 1000);
thisis.removeAttr("countdown");
});
});
Answered By - Daisy Belford
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.