如何向woocommerce_after_shop_loop_item添加倒计时

问题描述

我正在尝试向产品目录（woocommerce商店页面）中的产品添加javascript倒计时。

我已将此代码添加到我的子主题中的wordpress functions.php中，但它似乎只想用于一种产品。

倒计时有效，但它没有添加到其他产品中。我需要在foreach中添加Javascript吗？但是不在函数中，而是在单独的JS文件中？

谢谢你们

add_action('woocommerce_after_shop_loop_item','lottery_data');

function lottery_data() {
  global $product;

  $min_tickets                = $product->get_min_tickets();
  $max_tickets                = $product->get_max_tickets();
  $lottery_participants_count = !empty($product->get_lottery_participants_count()) ? $product->get_lottery_participants_count() : '0';
  $lottery_dates_to           = $product->get_lottery_dates_to();
  $lottery_dates_from         = $product->get_lottery_dates_from();
  $lottery_num_winners        = $product->get_lottery_num_winners();

  $diff = strtotime($lottery_dates_to) - strtotime($lottery_dates_from);
  $now = time();
  $your_date = strtotime($lottery_dates_from);
  $datediff = $now - $your_date;
  $ticketsLeft = $max_tickets - $lottery_participants_count;

  echo '
    <script>
      const second = 1000,minute = second * 60,hour = minute * 60,day = hour * 24;

      let countDown = new Date("'.$lottery_dates_to.'").getTime(),x = setInterval(function() {

        let now = new Date().getTime(),distance = countDown - now;

        document.querySelector(".days").innerText = Math.floor(distance / (day)),document.querySelector(".hours").innerText = Math.floor((distance % (day)) / (hour)),document.querySelector(".minutes").innerText = Math.floor((distance % (hour)) / (minute)),document.querySelector(".seconds").innerText = Math.floor((distance % (minute)) / second);

      },second);
    </script>


  <hr class="blueLine">
  <div class="customify-grid">
  <div id="countdown" class="customify-col-4_md-4_sm-6_xs-12 center">
    <div class="countdown-container" style="font-size:13px;">
      <span class="days"></span> : <span class="hours"></span> : <span class="minutes"></span> : <span class="seconds"></span>
    </div>
  </div>
  <div class="customify-col-4_md-4_sm-6_xs-12 center">
  '. $ticketsLeft .'
  </div>
  <div class="customify-col-4_md-4_sm-6_xs-12 center">
  '.$lottery_dates_to.'
  </div>
  </div>';
}```

解决方法

如果每个产品都有不同的文件，则应将javascript代码添加到不同的文件中，然后仅将其包含在每个产品文件中。

只需将javascript包装在文件上，然后使用include（“ file path”）。 如果它们位于不同的文件中，则不需要它们。

如果要把所有产品后端都放在一个文件中，则可以，每个文件都需要。

您可以通过检查具有该类名称的HTML对象的长度，然后按ID放置循环来完成此操作。

那是我会怎么做的。