Почему код JavaScript не зацикливается в WordPress контент-продукт

Question

в content-product.php

у меня есть продукты в качестве аукциона и я хочу показать в таймере обратного отсчета страницы магазина, когда аукцион заканчивается

я пишу код сценария для таймера обратного отсчета

но скрипт покажи для одного товара не петля для всех продуктов

<?php
    date_default_timezone_set("Europe/Oslo");
    $auctionstatus = get_post_meta( $product->get_id(), 'mp_auction_status', true );
    $clientt_tz = date("Y-m-d H:i:s");
    $auctio_time_1= $_product_meta['auction_stop_time'][0];
    if ($auctionstatus == "enabled") {
        if ($auctio_time_1 >= $clientt_tz ){
    echo  "Auction end at ";

    $js_code =<<<JS
    <script language="JavaScript">
    TargetDate = "$auctio_time_1";
    ForeColor = "#009fe3";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%D%% D, %%H%% T, %%M%% M, %%S%% S.";
    FinishMessage = "It is finally here!";
    </script>
    <script language="JavaScript" src="https://scripts.hashemian.com/js/countdown.js"></script>
    JS;

    echo "<br>", $js_code;

        }
        else {
            echo  "Auction end " ;

        }



    } ?>

Answer 1

Есть две основные причины:

1. Вы используете глобальные переменные, которые будут совместно использоваться экземплярами скрипта
2. Скрипт генерирует элемент с жестко заданным идентификатором. Идентификатор должен быть уникальным в документе. Каждый экземпляр скрипта вызывает getElementById и находит первый соответствующий элемент.

Я бы переписал это так, чтобы данные были инициализированы из атрибутов data-* в элементе <script>, и он использовал последний элемент сценария в документе, чтобы определить, куда вставить диапазон (на который он будет ссылаться вместо этого). поиска с помощью gEBId каждый раз).

<p>First</p>
<script data-number=5>
  (function() {
    const scripts = document.querySelectorAll("script");
    const script = scripts[scripts.length - 1];
    const span = document.createElement('span');
    script.parentNode.insertBefore(span, script);
    span.textContent = script.dataset.number;
    setTimeout(update, 1000);
    function update() {
        let num = parseInt(span.textContent, 10);
        num--;
        span.textContent = num;
        if (num > 0) {
            setTimeout(update, 1000);
        }
    }
  }());
</script>


<p>Second</p>
<script data-number=3>
  (function() {
    const scripts = document.querySelectorAll("script");
    const script = scripts[scripts.length - 1];
    const span = document.createElement('span');
    script.parentNode.insertBefore(span, script);
    span.textContent = script.dataset.number;
    setTimeout(update, 1000);
    function update() {
        let num = parseInt(span.textContent, 10);
        num--;
        span.textContent = num;
        if (num > 0) {
            setTimeout(update, 1000);
        }
    }
  }());
</script>