存档/循环页面上的 Woocommerce 产品倒计时

Question

<p>我使用元键 <code>_sale_price_to</code> 进行了倒计时以显示销售日期结束。请参阅下面的代码：</p>

add_shortcode( 'woocommerce_timer_two', 'sales_timer_countdown_product_two', 20 );
函数 sales_timer_countdown_product_two($atts) {
            提取（短代码_atts（数组（
        'id'=>获取_ID(),
    ), $atts, 'woocommerce_timer_two' ) ); 

    全球$产品；
    
         // 如果没有定义产品对象，我们从产品ID中获取它
    if ( !is_a($product, 'WC_Product') && get_post_type($id) === '产品' ) {
        $产品 = wc_get_product($id);
    }
    
    if ( is_a($product, 'WC_Product') ) {

    $sale_date = get_post_meta( $product->get_id(), '_sale_price_dates_to', true );
    
    if ( !empty( $sale_date ) ) {
        
        ？>
        <脚本>
            
        jQuery(函数($){
        “严格使用”；

        $('.countdown-counter').each( function() {
        var to = $(this).attr(“倒计时”);
        var thisis = $(this);
        var 父 = $(this).parent();
        var countDownDate =  * 1000；

            // 每1秒更新一次倒计时
            var x = setInterval(函数() {
                // 获取今天的日期和时间
                var now = new Date().getTime();
                    
                // 求现在与倒计时日期之间的距离
                var distance = countDownDate - 现在；     
                    
                // 天、小时、分钟和秒的时间计算
                var 天 = Math.floor(距离 / (1000 * 60 * 60 * 24));
                var 小时 = Math.floor((距离 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var 分钟 = Math.floor((距离 % (1000 * 60 * 60)) / (1000 * 60));
                var 秒 = Math.floor((距离 % (1000 * 60)) / 1000);
                    
                // 将结果输出到 id="sale-end" 的元素中
                var html = 天 + 小时 + " ：“ + 分钟 + " ：“ + 秒；
                这是.html(html);
                    
                // 如果倒计时结束，则写入一些文本 
                如果（距离<0）{
                清除间隔（x）；
                parent.css(“显示”, “无”);
            }
        }, 1000);
        thisis.removeAttr(“倒计时”);
        });
        });
        </脚本>
        
        

             <span class="倒计时计数器"倒计时=“”。 $html .'>></span>
        
;;
        <?php
    }
    }
}</pre>
<p>该代码适用于产品单页面，但我需要它在存档和循环页面上。在存档页面上，所有产品都具有相同的倒计时值。我想这是因为我无法为每个存档项目提供属性。</p>
<p>可能有帮助的相关帖子：</p>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul></p>            

Answer 1

如果此代码在产品单页面上运行，那么您可以使用 WooCommerce 挂钩在存档/循环页面中添加操作挂钩。

示例：-

add_action( 'woocommerce_after_shop_loop_item_title', 'zillion_countdown_show_in_loop', 20 );
function zillion_countdown_show_in_loop()
{
    do_shortcode('[woocommerce_timer_two]');
 
}

已编辑

您可以使用添加的产品 ID 来替换该类。

$('.countdown-counter<?php echo $product->get_id();?>')

同时替换 html 部分。

<div class="product-countdown">
    <span class="countdown-counter<?php echo $product->get_id(); ?>" countdown="'. $html .'"></span>
</div>