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

Posted 2023-03-25

【中文标题】Wordpress / WooCommerce wp_localize_script 将 php 变量日期添加到 javascript

【英文标题】：Wordpress / WooCommerce wp_localize_script to add php variable date to javascript

【发布时间】：2022-01-14 10:35:15

【问题描述】：

我正在尝试将 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 排入队列，我就无法让它工作。任何想法如何正确格式化？

【问题讨论】：

请添加完整代码，说明您如何通过优惠券到期日期来本地化脚本。

@Bhautik 我正在打印 html 以在购物车页面上输出到期时间<p id="demo"></p> 脚本应该选择它以显示倒数计时器。 document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; 但我无法让它工作。我想我没有正确添加来自wp_localize_script 的变量。

我的意思是$expiry_date 来自哪里？请在您的问题中添加完整的代码。

@Bhautik 哦，好的，我知道了，我会发布我正在使用的功能：

【参考方案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();