gelöst Versand-Countdown auf Produktdetailseite

Code:

{block name="product_info_template_standard_sticky_box_product_options_if" append}
<style>
    .timer {
        font-size: 14px;
        text-align: center;
        margin: 5px;
        border: 1px solid black; /* Rahmen um den Timer */
        background-color: #bff6ab; /* Grüne Hintergrundfarbe */
        color: black; /* Textfarbe */
        padding: 5px;
        display: inline-block;
    }

    .time {
        color: red; /* Farbe für Stunden, Minuten und Sekunden */
        font-size: 14px;
    }

    .unavailable {
        color: red; /* Farbe für nicht verfügbare Artikel */
        font-size: 14px;
    }
</style>

<div class="timer" id="timer"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var timerElement = document.getElementById('timer');
        var today = new Date();
        var targetTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 15, 0, 0); // Setze Zielzeit auf 15 Uhr

        var productsShippingTimeValue = document.getElementsByClassName("products-shipping-time-value");
        var isUnavailable = false;

        // Überprüfung auf Lieferzeit für ausverkaufte Artikel
        for (var i = 0; i < productsShippingTimeValue.length; i++) {
            if (productsShippingTimeValue[i].textContent.trim() === "Ausverkauft") {
                isUnavailable = true;
                break;
            }
        }

        if (isUnavailable) {
            timerElement.textContent = "Dieser Artikel ist im Moment nicht lieferbar.";
            return;
        }

        var holidays = [
            new Date(today.getFullYear(), 0, 1), // Neujahr am 01.01.
            new Date(today.getFullYear(), 11, 24) // Heiligabend 24.12.
            // ... weitere Feiertage hier hinzufügen ...
        ];

        var isHoliday = false;

        // Überprüfung auf Feiertage
        for (var i = 0; i < holidays.length; i++) {
            if (today.toDateString() === holidays[i].toDateString()) {
                isHoliday = true;
                break;
            }
        }

        if ((today.getDay() === 6 || today.getDay() === 0 || isHoliday) && !isUnavailable) {
            timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt.";
            return;
        }

        if (today.getHours() >= 15) {
            timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt.";
            return;
        }

        var remainingTime = Math.floor((targetTime - today) / 1000);
        var timerInterval = setInterval(updateTimerText, 1000);

        function updateTimerText() {
            remainingTime--;
            if (remainingTime <= 0) {
                clearInterval(timerInterval);
                timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt.";
                return;
            }

            var hours = Math.floor(remainingTime / 3600);
            var minutes = Math.floor((remainingTime % 3600) / 60);
            var seconds = remainingTime % 60;

            timerElement.innerHTML = "Bestellen Sie innerhalb <span class='time'>" + hours + " Stunden, " + minutes + " Minuten und " + seconds + " Sekunden</span> dann erfolgt der Versand noch heute";
        }
    });
</script>
{/block}

so. Mit diesem Code funktioniert es (zumindest bei mir). Sag mir bitte kurz Bescheid ob es bei dir klappt:

 

Es funktioniert super
Vielen, vielen Dank Michaela für Deine Mühe.

 

sehr gerne. Es freut mich wenn es funktioniert.

 

Eine kurze Frage habe ich noch.
Wenn es nicht geht ist auch nicht schlimm.
Ist es auch möglich den Timer unter die Zusatzfelder zu bringen.
Da es beim Desktop super aussieht, aber leider beim Tablett und Handy nicht so schön ist an dieser Stelle,
da die Artikelbezeichnung verdeckt ist.

 

ja, lösche in der ersten Zeile des Codes das "prepend" und ersetze es mit "append". (Ohne " " )

 

Super
Vielen Dank

 

Hallo Michaela,
sorry das ich nochmal störe.
Soll der Timer automatisch rückwärts laufen oder immer nur die neue Zeit anzeigen
wenn der Browser aktualisiert wird?
Bei mir ist es nun so das sich die zeit nur ändert wenn ich den Browser ( Chrome) aktualisiere.

 

oh doch, er soll natürlich schon rückwärts laufen. Danke fürs Bescheid geben. Mit diesem Code läuft er wieder:

Code:

{block name="product_info_template_standard_sticky_box_product_options_if" prepend}
<style>
    .timer {
        font-size: 14px;
        text-align: center;
        margin: 5px;
        border: 1px solid black; /* Rahmen um den Timer */
        background-color: #bff6ab; /* Grüne Hintergrundfarbe */
        color: black; /* Textfarbe */
        padding: 5px;
        display: inline-block;
    }

    .time {
        color: red; /* Farbe für Stunden, Minuten und Sekunden */
        font-size: 14px;
    }

    .unavailable {
        color: red; /* Farbe für nicht verfügbare Artikel */
        font-size: 14px;
    }
</style>

<div class="timer" id="timer"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var timerElement = document.getElementById('timer');
        var today = new Date();
        var targetTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 15, 0, 0); // Setze Zielzeit auf 15 Uhr

        var productsShippingTimeValue = document.getElementsByClassName("products-shipping-time-value");
        var isUnavailable = false;

        // Überprüfung auf Lieferzeit für ausverkaufte Artikel
        for (var i = 0; i < productsShippingTimeValue.length; i++) {
            if (productsShippingTimeValue[i].textContent.trim() === "Ausverkauft") {
                isUnavailable = true;
                break;
            }
        }

        if (isUnavailable) {
            timerElement.textContent = "Dieser Artikel ist im Moment nicht lieferbar.";
            return;
        }

        var holidays = [
            new Date(today.getFullYear(), 0, 1), // Neujahr am 01.01.
            new Date(today.getFullYear(), 11, 24) // Heiligabend 24.12.
            // ... weitere Feiertage hier hinzufügen ...
        ];

        var isHoliday = false;

        // Überprüfung auf Feiertage
        for (var i = 0; i < holidays.length; i++) {
            if (today.toDateString() === holidays[i].toDateString()) {
                isHoliday = true;
                break;
            }
        }

        if ((today.getDay() === 6 || today.getDay() === 0 || isHoliday) && !isUnavailable) {
            timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt.";
            return;
        }

        if (today.getHours() >= 15) {
            timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt.";
            return;
        }

        var remainingTime = Math.floor((targetTime - today) / 1000);
        var timerInterval = setInterval(updateTimerText, 1000);

        function updateTimerText() {
            remainingTime--;
            if (remainingTime <= 0) {
                clearInterval(timerInterval);
                timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt.";
                return;
            }

            var hours = Math.floor(remainingTime / 3600);
            var minutes = Math.floor((remainingTime % 3600) / 60);
            var seconds = remainingTime % 60;

            timerElement.innerHTML = "Bestellen Sie innerhalb <span class='time'>" + hours + " Stunden, " + minutes + " Minuten und " + seconds + " Sekunden</span> dann erfolgt der Versand noch heute";
        }
    });
</script>
{/block}

 

Super
Dankeschön

 

Hallo zusammen,

Also habe ich mich endlich an das Thema Datei-Bearbeitung dran getraut und bin genau nach Anleitung vorgegangen mit kopieren, downloaden, bearbeiten und wieder speichern. Beim Hochladen mag mich aber der SE nicht. Wenn ich die bearbeitete ZIP-Datei wieder hochladen möchte (nein, kein neuer Dateiname, ganz brav wirklich exakt nach Anleitung von Michaela vorgegangen) bekomme ich den beigefügten Fehler. Was mache ich da falsch? Ich habe auch schon probiert ohne eine Änderung die Datei wieder hochzuladen, da bekomme ich den gleichen Fehler.

Kann mir hier jemand helfen oder liegt das Problem wo ganz anders und mal ausnahmsweise nicht an mir und ich sollte ein Ticket aufmachen?

 

Du erstellst deine zip Datei an der falschen Stelle.
Gehe dorthin wo der Ordner html ist. Dann gehst du mit dem Pfeil "zurück" einmal zurück. Dann steht da der Ordner so wie du ihn genannt hast. Und genau hier erstellst du deine zip Datei.
Viele klicken von hier nochmal zurück und erstellen dann die zip Datei. Dann bekommst aber den Fehler.

Also deine neu erstellte zip Datei darf nicht auf der gleichen Ebene sein wie deine Runtergeladene, sondern eine Ebene darunter.

 

hier habe ich es mit Screenshots erklärt:
(Link nur für registrierte Nutzer sichtbar.)

 

Vielen lieben Dank, der Fehler war also leider doch mal wieder bei mir. Du hast das super erklärt, echt klasse!

 

Dann hats geklappt? Ich sehe, dass du den Code noch im Banner-Manager hast. Ich glaube den musst jetzt rausmachen. Ich bin mir nicht ganz sicher. Aber ich glaube, dass er nur angezeigt wird wenn er sonst nirgends ist.

 

Erster Versuch hat geklappt, deshalb tausend Dank. Da ich jetzt dann gleich einige Änderungen machen möchte, ist aktuell noch der Countdown im Banner-Manager aktiv. Kommt also die nächsten Tage hoffentlich.

 

ok. Prima. Es freut mich, dass es geklappt hat.