拍賣產品計時器在檔案頁面的應用
P粉412533525
P粉412533525 2023-09-08 20:00:35
0
1
593

拍賣產品計時器在單一商店頁面上正常工作,我想將其新增至商店存檔頁面,但它只顯示在商店存檔的第一個產品上,而不顯示其餘的產品。

根據WooCommerce單一產品頁面上的產品銷售結束倒數計時器答案代碼,這是我的程式碼嘗試:

function sales_timer_countdown_product() {
    global $product;
    $sale_date = get_post_meta( $product->get_id(), '_sale_price_dates_to', true );
    if ( ! empty( $sale_date ) ) {
        ?>
        <script>
            // 设置倒计时的日期
            var countDownDate = <?php echo $sale_date; ?> * 1000;
            // 每1秒更新倒计时
            var x = setInterval(function() {
                // 获取今天的日期和时间
                var now = new Date().getTime();
                // 计算现在和倒计时日期之间的距离
                var distance = countDownDate - now;
                // 计算天、小时、分钟和秒
                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);
                // 在id为“saleend”的元素中输出结果
                document.getElementById("saleend").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                // 如果倒计时结束,显示一些文本
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("saleend").innerHTML = "此产品的销售已过期";
                }
            }, 1000);
        </script>
        <!-- 这是倒计时显示的位置 -->
        <p id="saleend" style="color:red"></p>
        <?php
    }
} add_shortcode( 'sales_timer_countdown_product', 'sales_timer_countdown_product' );

問題是什麼?

P粉412533525
P粉412533525

全部回覆(1)
P粉413704245

要在商店存檔頁面中顯示每個產品的倒數計時器,您需要修改負責渲染商店存檔頁面的範本檔案。以下是您可以實現此目標的範例:

  • 開啟您的主題的商店存檔頁面的範本檔案(通常命名為archive-product.php或taxonomy-product_cat.php)。

  • 找到執行產品循環的部分。這是顯示單一產品項目的地方。

  • 在循環內部,找到要為每個產品顯示倒數計時器的部分(例如產品標題、價格或自訂位置)。新增以下程式碼片段:

    <script>
          // 设置我们要倒计时的日期
          var countDownDate<?php echo get_the_ID(); ?> = <?php echo $sale_date; ?> * 1000;
          // 每1秒更新倒计时
          var x<?php echo get_the_ID(); ?> = setInterval(function() {
              // 获取今天的日期和时间
              var now = new Date().getTime();
              // 计算现在和倒计时日期之间的距离
              var distance = countDownDate<?php echo get_the_ID(); ?> - now;
              // 计算天、小时、分钟和秒的时间
              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);
              // 在id为“saleend”的元素中输出结果
              document.getElementById("saleend-<?php echo get_the_ID(); ?>").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
              // 如果倒计时结束,写入一些文本
              if (distance < 0) {
                  clearInterval(x<?php echo get_the_ID(); ?>);
                  document.getElementById("saleend-<?php echo get_the_ID(); ?>").innerHTML = "该产品的销售已过期";
              }
          }, 1000);
      </script>
      <!-- 这是倒计时显示的位置 -->
      <p id="saleend-<?php echo get_the_ID(); ?>" style="color:red"></p>

此程式碼透過使用產品的ID(get_the_ID())作為變數和元素ID的後綴,為每個產品產生一個唯一的倒數計時器。

儲存對範本檔案的更改,然後商店存檔頁面上應該會顯示倒數計時器。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板