アーカイブ/サイクルページのWoocommerce製品カウントダウン
P粉237647645
P粉237647645 2023-08-31 21:06:59
0
1
424
<p>メタ キー <code>_sale_price_to</code> を使用して、セール終了日を示すカウントダウンを作成しました。请参阅次の代価:</p> <pre class="brush:php;toolbar:false;">add_shortcode( 'woocommerce_timer_two', 'sales_timer_countdown_product_two', 20 ); function sales_timer_countdown_product_two($atts) { extract( shortcode_atts( array( 'id' => ID の取得()、 ), $atts, 'woocommerce_timer_two' ) ); グローバル $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 ) ) { ?> <スクリプト> jQuery(関数($){ "厳密を使用"; $('.countdown-counter').each( function() { var to = $(this).attr("カウントダウン"); var thisis = $(this); var 親 = $(this).parent(); var countDownDate = <?php echo $sale_date; ?> * 1000; // カウントダウンを 1 秒ごとに更新します var x = setInterval(function() { // 今日の日付と時刻を取得します var now = new Date().getTime(); // 現在とカウントダウン日の間の距離を求める var distance = countDownDate - 現在; // 日、時間、分、秒の時間計算 var days = Math.floor(距離 / (1000 * 60 * 60 * 24)); var hours = Math.floor((距離 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((距離 % (1000 * 60 * 60)) / (1000 * 60)); var 秒 = Math.floor((距離 % (1000 * 60)) / 1000); // id="sale-end" の要素に結果を出力します。 var html = 日数 時間 " : "分」 : "秒。 thisis.html(html); // カウントダウンが終了したら、テキストを書き込みます if (距離 < 0) { クリアインターバル(x); parent.css("表示", "なし"); } }, 1000); thisis.removeAttr("カウントダウン"); }); }); </スクリプト> <!-- ここにカウントダウンが表示されます --> <div class="製品カウントダウン"> <span class="カウントダウンカウンター"カウントダウン = "。 $html .'></span> </div>; <?php } } }</pre> <p>このコードは製品の単一ページでは機能しますが、アーカイブ ページとループ ページでも必要です。アーカイブ ページでは、すべての製品に同じカウントダウン値が表示されます。これは、各アーカイブ項目のプロパティを提供できないためだと思います。 </p> <p>役立つ可能性のある関連投稿:</p>
    <li>リンク 1</li> <li>リンク 2</li> </ul><

P粉237647645
P粉237647645

全員に返信(1)
P粉449281068

このコードが製品の単一ページで実行される場合、WooCommerce フックを使用してアーカイブ/ループ ページにアクション フックを追加できます。

###例:-### リーリー

編集済み

このクラスは、追加された製品 ID に置き換えることができます。

リーリー

HTML部分も置き換えます。

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート