存档/循环页面上的 Woocommerce 产品倒计时
P粉237647645
P粉237647645 2023-08-31 21:06:59
[PHP讨论组]

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

add_shortcode( 'woocommerce_timer_two', 'sales_timer_countdown_product_two', 20 );
function sales_timer_countdown_product_two($atts) {
            extract( shortcode_atts( array(
        'id' => get_the_ID(),
    ), $atts, 'woocommerce_timer_two' ) ); 

    global $product;
    
         // If the product object is not defined, we get it from the product ID
    if ( ! is_a($product, 'WC_Product') && get_post_type($id) === 'product' ) {
        $product = 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 ) ) {
        
        ?>
        <script>
            
        jQuery(function($){
        "use strict";

        $('.countdown-counter').each( function() {
        var to = $(this).attr("countdown");
        var thisis = $(this);
        var parent = $(this).parent();
        var countDownDate = <?php echo $sale_date; ?> * 1000;

            // 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="sale-end"
                var html = days + hours + " : " + minutes + " : " + seconds;
                thisis.html(html);
                    
                // If the count down is over, write some text 
                if (distance < 0) {
                clearInterval(x);
                parent.css("display", "none");
            }
        }, 1000);
        thisis.removeAttr("countdown");
        });
        });
        </script>
        <!-- this is where the countdown is displayed -->
        <div class="product-countdown">
             <span class="countdown-counter" countdown="'. $html .'"></span>
        </div>;
        <?php
    }
    }
}

该代码适用于产品单页面,但我需要它在存档和循环页面上。在存档页面上,所有产品都具有相同的倒计时值。我想这是因为我无法为每个存档项目提供属性。

可能有帮助的相关帖子:

  • Link 1
  • Link 2

P粉237647645
P粉237647645

全部回复(1)
P粉449281068

如果此代码在产品单页面上运行,那么您可以使用 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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号