Wordpress / WooCommerce wp_localize_script 将 php 可变日期添加到 javascript

Question

我正在尝试将 WooCommerce 中的优惠券过期信息添加到倒计时计时器 javascript 文件中。在我的 WooCommerce 子主题 functions.php 文件中，我创建了一个变量来获取优惠券到期日期：

$expiry_date = date('Y-m-d H:i:s', strtotime($coupon->expiry_date));

如果我回应它，它会打印正确的日期 echo $expiry_date;

我正在尝试使用以下 javascript 倒数计时器基于此到期日期创建倒数计时器：

// JavaScript Document
// https://www.w3schools.com/howto/howto_js_countdown.asp
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").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);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

我已将此脚本保存在我的子主题中，注册并加入队列，并尝试通过 Wordpress wp_localize_script 方法传递 $expiry_date php 变量

function coupon_countdown_timer (){
    if ( is_cart()) {

        wp_register_script( 'coupon_countdown_timer', get_stylesheet_directory_uri() .'/js/countdown_timer/coupon_expiry.js', array( 'jquery' ), true );
        
        wp_localize_script( 'coupon_countdown_timer', 'my_script_vars', array( 'expiry' => $expiry_date ));
        
        wp_enqueue_script( 'coupon_countdown_timer' );
        
    }
}
add_action('wp_enqueue_scripts', 'coupon_countdown_timer');

我现在应该可以使用 wp_localize_script 中的 my_script_vars 和 expiry 添加到我的 javascript 文件中。但我不确定什么是正确的格式。我尝试过的每件事都返回空白、“EXPIRED”或 NaN 错误。

我试过用这些方法将 php 信息添加到 javascript 文件中，但没有任何效果？

  var expiring = my_script_vars.expiry;
  var countDownDate = new Date(expiring).getTime();

和

var countDownDate = new Date(my_script_vars.expiry).getTime();

如果我对日期进行硬编码，它就能正常工作。

  var countDownDate = new Date("2021-12-10 00:00:00").getTime();

如果我将所有倒数计时器 javascript 直接添加到 functions.php 中并以这种方式调用它，那么它也可以正常工作。

var expiry = "<?php echo $expiry_date ?>";
var countDownDate = new Date(expiry).getTime();

但是如果我尝试将 javascript 入队，我就是无法让它工作。知道如何正确格式化吗？

Answer 1

好的，我能够让这个工作正常，如果其他人遇到这个问题，这可能是一个解决方案。首先，我创建了一个获取优惠券到期日期的新函数。

// Get the coupon expiry date and format
function woo_coupon_expiry_date () {
    
    $applied_coupons = WC()->cart->get_applied_coupons();
    
    foreach( $applied_coupons as $all_coupons ) {
        
        $coupon = new WC_Coupon( $all_coupons );
        $expiry_date = date('Y/m/d H:i:s', strtotime($coupon->expiry_date)); // change hyphens to slashes in date format for compatibility with Safari and IOS      
    }
    return ($expiry_date);  
}

然后我在另一个挂接到 wp_enqueue_scripts

的函数中调用了这个函数

// Enqueue Scripts and localise for use with Javascript countdown timer
function coupon_countdown_timer (){

    wp_register_script( 'coupon_countdown_timer_js', plugins_url('/js/coupon_expiry.js', __FILE__), array( 'jquery' ), true );
    
    $coupon_expiry = woo_coupon_expiry_date ();
    
    wp_localize_script( 'coupon_countdown_timer_js', 'php_data', array( 'expiry' => $coupon_expiry ));
    
    wp_enqueue_script( 'coupon_countdown_timer_js' );
        
}
add_action('wp_enqueue_scripts', 'coupon_countdown_timer');

然后我可以这样调用 javascript 倒计时脚本中的 php 变量 $expiry_date：

  var expiring_date = php_data.expiry; 

  var countDownDate = new Date(expiring_date).getTime();

Wordpress / WooCommerce wp_localize_script 将 php 可变日期添加到 javascript

Wordpress / WooCommerce wp_localize_script to add php variable date to javascript

javascript

php

wordpress

woocommerce