如何为woommerce_after_shop_lop_item添加倒计时

Question

我正在尝试为产品目录(wooccommerce商店页面(中的产品添加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>';
}```

Answer 1

如果您有不同的文件，每个产品都有一个文件，那么您应该在不同的文件中添加javascript代码，并将其包含在每个产品文件中。

只需在<php echo>文件并使用include("文件路径"(。如果它们位于不同的文件中，则不需要each。

如果情况是将所有产品的后端都放在一个文件上，那么是的，您需要每个产品。

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

我就是这么做的。