gelöst Versand-Countdown auf Produktdetailseite

nein

 

Würde das Thema gerne neu aufgreifen.
Wäre das für einen self-hosted Shop möglich. Wenn ja, wie. Muss ja nicht zwingend auf der Artikeldetailseite sein. Warenkorb oder Startseite wäre auch was.

 

es gibt Countdown-Generatoren. Diesen Code kannst du dann zb in das Zusatzfeld (oder wo du es haben willst) reinkopieren. Hab das mal hier getestet:


da du einen mit "Wiederholung" brauchst, hab ich diesen auf die Schnelle gefunden. (Link nur für registrierte Nutzer sichtbar.)
Gibt aber noch einige andere.

 

KI ist ja in aller Munde. Ich habe sie auch mal getestet. Und was soll ich sagen... ich habe tatsächlich einen Code für einen Countdown-Zähler erhalten.
Den Code habe ich in das Zusatzfeld eingetragen.
Aber man kann ihn auch in die HTML-Datei der Preisbox setzen. (Auch im Cloudshop)

 

oh sorry. den hab ich vergessen. ACHTUNG: Dieser Code erkennt (noch) nicht wann Wochenende oder Feiertag ist.
In (Link nur für registrierte Nutzer sichtbar.) ist der Code der Wochenende und Feiertage berücksichtigt.

Code:

    <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;
        }
    </style>

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

    <script>
        function startTimer() {
            var today = new Date();
            var targetTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
            targetTime.setHours(11, 0, 0); // Setze Zielzeit auf 11 Uhr

            if (today > targetTime) {
                targetTime.setDate(targetTime.getDate() + 1); // Wenn nach 11 Uhr, verschiebe Zielzeit auf den nächsten Tag
            }

            var remainingTime = Math.floor((targetTime - today) / 1000);
            var timerElement = document.getElementById('timer');
            var timerInterval = setInterval(updateTimer, 1000);

            function updateTimer() {
                remainingTime--;
                if (remainingTime <= 0) {
                    clearInterval(timerInterval);
                    if (today > targetTime) {
                        timerElement.textContent = "Ihr Paket wird morgen versendet.";
                    } else {
                        timerElement.innerHTML = "Bestellen Sie in den nächsten <span class='time'>" + hours + " Stunden, " + minutes + " Minuten und " + seconds + " Sekunden</span> und es wird heute noch versendet";
                    }
                    return;
                }

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

                timerElement.innerHTML = "Bestellen Sie in den nächsten <span class='time'>" + hours + " Stunden, " + minutes + " Minuten und " + seconds + " Sekunden</span> und es wird heute noch versendet";
            }
        }

        startTimer();
    </script>

wenn du ihn ins Zusatzfeld packst, brauchst noch diesen CSS Code, damit er über die ganze Breite angezeigt wird. (das ist jetzt für die Variante der Produktseite "links ausrichten"):

Code:

dd.col-xs-8:last-child {
        width: 100% !important;
    padding: 0px !important;
}

 

der Countdown soll sich um Mitternacht aktualisieren. Dies muss ich noch abwarten, ob das auch funktioniert.

Wenn du es nicht in jedes Zusatzfeld setzen magst, dann kann man es auch die Preisbox-Datei schreiben. Beim Cloudshop mit der Einschränkung, dass es nur in Deutsch geht. Falls man einen mehrsprachigen Shop hat, geht es nicht in der Datei (soweit ich weiß)
Oder man kann es auch im Banner-Manager in einen Banner schreiben.

 

Das sieht ja super aus! Vielen Dank für diesen tollen Beitrag.

Eine Frage hätte ich jetzt aber trotzdem noch dazu, wahrscheinlich übersehe ich die Einstellung auch einfach, aber wo stelle ich denn ein, dass es nur an normalen Werktagen und nicht an Feiertagen oder am Wochenende gilt? Wenn ich das so richtig sehe ist ein anderes "Problem" wenn man es ins Zusatzfeld packt, dass man es bei jedem Artikel einfügen muss oder übersehe ich da auch schon wieder eine Einstellung?

Auf jeden Fall tausend Dank Michaela für deine Mühen die du dir hier auch wieder für uns Cloud-Shop-Besitzer gemacht hast.

 

das ist eine gute Frage. Da schau ich im Laufe des Tages danach.

du kannst es auch in die Preisbox-Datei packen. Dann ist es automatisch in jedem Artikel. Dazu musst du das Theme duplizieren und herunterladen. Dann kannst die Dateien bearbeiten und wieder hochladen. Wenn Interesse daran besteht, kann ich heute im Laufe des Tages eine Anleitung dazu schreiben.

 

Da schließe ich mich an und der Counter erschein dann ja auch immer, auch wenn der Artikel zurzeit ausverkauft ist

 

Hallo,

danke für den super Beitrag.

Kannst Du mir verraten wo ich die finde und an welcher Stelle in der Datei Du das eingefügt hast?

 

das ganze ist tatsächlich "nur" ein Test mit der KI von mir.

Aber vielleicht bekommen wir es ja gemeinsam hin.

Heute Abend habe ich ein bisschen mehr Luft. Da schaue ich, ob ich das mit den Feiertagen und Wochenenden einbauen lassen kann.



Die Datei heißt product_info_product_box_bottom.html

 

Ich hab das jetzt mal in die Top-Bar versucht einzubauen, damit ich nicht an die Datei muss (Bin da doch sehr ängstlich) mit sehr unterschiedlichen Erfolgen

Aktuell habe ich dort das Problem, dass die Farbgestaltung nicht übernommen wird, wenn ich den Text über eine Codeerweiterung mittig mache. Wenn ich den Code einfach so von Michaela übernehme, habe ich den Timerkasten linksbündig, was da nicht so toll aussieht. Irgendwie müsste das wahrscheinlich mit CSS zu ändern gehen, da kenne ich mich aber eben auch nicht aus. Und in der mobilen Ansicht überlagert die Top-Bar meinen Header was aber wahrscheinlich einfach eine Einstellungssache im Style-Editor ist.

Aber vielleicht ist das trotzdem ein Ideen-Ansatz für die Nutzung ohne die Datei anpacken zu müssen.

 

ich brauche eure Hilfe:

wenn Wochenende oder Feiertag ist, was soll dann angezeigt werden?

 

setz es in einen Banner im Banner-Manager. Da ist es auch auch auf jeder Seite.

 

Idee: Versand am nächsten Werktag.

 

Coole Idee für zeitlich begrenzte Sonderangebote

 

also... meine KI macht durchaus auch Fehler. Man muss mitdenken. Aber bisher bin ich begeistert.

Dieser Code berücksichtigt jetzt Wochenende und Feiertage.
Die Feiertage trägt man selbst ein. Da ja nicht alle Feiertage in jedem Bundesland sind.
Wenn ihr Feiertage dazu schreiben wollt, einfach die selbe Zeile einfügen mit dem Datum.
Zuerst den Monat 0=Januar 1=Februar usw.
und dann den Tag.
Findet ihr bei "Liste der Feiertage": Dies bedeutet: 24.Mai

Code:

new Date(today.getFullYear(), 4, 24), // Testheute

Code ist auf Seite 2.

 

ich habe es jetzt so gemacht. Am Wochenende kommt dieser Text:
Da heute ein Wochenende ist, wird der Versand am nächsten Werktag erfolgen.
Und am Feiertag dieser:
Da heute ein Feiertag ist, wird der Versand am nächsten Werktag erfolgen.