Ich hab den Code zum Test mal in den footer Header eingefügt. Da wird er auch auf jeder Seite angezeigt. 2 Fragen dazu von meiner Seite: 1. Könnte man den Text ändern in : Bestellen Sie in xxx und der Versand erfolgt am selben Tag. Hört sich meine Meinung nach schlüssige an. Wenn ja wie? 2. Wie kann ich die Farbe des Countdown ändern bzw die zeit umstellen. Bsp bis 15 Uhr Bestellungen Auf jeden Fall danke schon m für die Mühe.
ich glaube jetzt passt der Code. Der Code berücksichtigt Wochenende und Feiertage. Testet ihn gerne und gebt Rückmeldung. Ich weiß noch nciht, was er heute um Mitternacht macht.... Falls ihr was ändern wollt, kopiert euch den Code in den Editor. Dann habt ihr den besten Überblick. Bei den einzelnen Positionen steht für was es ist. In diesem Code habe ich jetzt 15 Uhr eingestellt. Wenn ihr eine andere Uhrzeit wollt müsst ihr überall wo 15 steht die Zahl abändern. 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 "weitere Feiertage hinzufügen": Dies bedeutet: 24.Mai Code: new Date(today.getFullYear(), 4, 24), // Testheute 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(), 15, 0, 0); // Setze Zielzeit auf 15 Uhr 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) { var timerElement = document.getElementById('timer'); timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt."; return; } if (today.getHours() >= 15) { var timerElement = document.getElementById('timer'); timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt."; return; } 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.getHours() >= 15) { timerElement.textContent = "Ihre Bestellung wird am nächsten Werktag verschickt."; } else { var hours = Math.floor(remainingTime / 3600); var minutes = Math.floor((remainingTime % 3600) / 60); var seconds = remainingTime % 60; timerElement.innerHTML = "Bestellen Sie in <span class='time'>" + hours + " Stunden, " + minutes + " Minuten und " + seconds + " Sekunden</span> und der Versand erfolgt heute"; } return; } var hours = Math.floor(remainingTime / 3600); var minutes = Math.floor((remainingTime % 3600) / 60); var seconds = remainingTime % 60; timerElement.innerHTML = "Bestellen Sie in <span class='time'>" + hours + " Stunden, " + minutes + " Minuten und " + seconds + " Sekunden</span> und der Versand erfolgt heute"; } } startTimer(); </script> Gebt mir gerne Rückinfo. Ich helfe auch gerne, wenn ich kann.
klar, du kannst es so schreiben wie du magst. Schau dir den Code komplett an, dann siehst du wo der Text steht. Dieser Text steht an 2 Stellen, ziemlich unten. Hier musst du nur die letzen Worte ändern. die Farbe steht ziemlich weit oben. Dahinter steht auch grüne Hintergrundfarbe. Dort ist ein Farbcode. Beginnend mit #. Hier kannst du deinen Farbcode schreiben.
Das macht man nicht in der originalen Datei, weil es beim nächsten Update sonst überschreiben werden könnte. Di originale DAtei findest Du im themes/DeinTheme (oder das von dem Dein Theme erbt) /html/system/ Wie Du das Updatesicher machen kannst, ist ab hier beschrieben: (Link nur für registrierte Nutzer sichtbar.) Da geht es zwar um einen Text, man kann aber genauso mit dem Code machen. wichtig ist, dass Du nur den gewünschten Block mit append oder prepend und den Code in die Datei schreibst, Alles andere muss da nicht mit rein.
Wenn ihr den Code im Cloudshop oder im selfhosted Shop direkt in die Datei schreiben wollt sind diese Dateien: Wenn ihr es unter den Zusatzfeldern stehen haben wollt. Dann ist diese Datei die Richtige: product_info_template_standard.html Wenn es beim "in den Warenkorb"-Button stehen soll ist diese Datei die Richtige: product_info_product_box_bottom.html wie setzt du den Artikel auf ausverkauft. Durch den Lagerbestand? Darf ich deinen Shop sehen? Eventuell kann man das mit einbauen.
Dieser Code berücksichtigt Wochenende, Feiertage (aktuell sind 2 enthalten, die restlichen kann man selbst hinzufügen) und wenn die Lieferzeit "Ausverkauft" benannt ist. Wichtig zu wissen. Der Code erkennt einen Artikel der aktuell nicht lieferbar ist nur, wenn die Lieferzeit "Ausverkauft" heißt. Wenn man die Lieferzeit anders genannt hat, muss man dies im Code ändern. 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; } .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>
Hallo Michaela, vielen Dank für den Code. Ist Super. Zwei Fragen habe ich noch. wie trage ich die Feiertage ein ? Einfach // Pfingstsonntag 28.05 // Pfingstmontag 29.05 usw. ? Und dann nächstes Jahr den Code ändern da die Feiertage nicht immer am gleichen Datum sind ? Kann ich den Code auch irgendwo eingeben, so das ich es nicht bei 1200 Artikeln in dem Zusatzfeld eintragen muss ? Vielen Dank für Deine Hilfe
suche im Code nach diesem Abschnitt: Code: 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 ... ]; und fügst für jeden Feiertag eine Zeile ein: (GANZ WICHTIG: die Schreibweise. Zuerst den Monat (0=Januar, 1 =Februar 2=März, usw.) dann den Tag. Code: var holidays = [ new Date(today.getFullYear(), 0, 1), // Neujahr am 01.01. new Date(today.getFullYear(), 11, 24) // Heiligabend 24.12. new Date(today.getFullYear(), 4, 29) // Pfingstmontag 29.05. // ... weitere Feiertage hier hinzufügen ... ]; Genau. Wie oben geschrieben, kannst du es auch im Banner-Manager in einen Banner eintragen. Dieser wird auf jeder Seite angezeigt. Oder in die jeweiligen Dateien. Hier die Anleitung für den Cloudshop: 1. Im StyleEdit gehst du in die "Meine Themes"-Übersicht. Dort wählst du beim aktiven Theme "Duplizieren" aus. ( Titel/ThemeID/Autor kannst du frei vergeben. Ist nur für dich. ) 2. Beim duplizierten Theme wählst du "Downloaden" 3. Du entpackst die zip-Datei. (rechte Maustaste, alle extrahieren) 4. Du fügst im Ordner, in dem auch die theme.json liegt, einen Ordner "html" hinzu, diesem legst du einen Unterordner "custom" an. 5. Du öffnest den Editor und fügst diesen HTML Code ein: 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} In der ersten Zeile des Codes steht "append". Damit wird der Code unter den Zusatzfeldern angezeigt. Wenn ihr das "append" durch "prepend" ersetzt (ohne " "), dann wird der Code unter dem Artikelnamen angezeigt. (mit "append" ist es in der mobilen Ansicht aber besser) 6. Speichere die Datei in den vorhin angelegten "custom" Ordner: - Nenne die Datei "product_info_template_standard.html" (Speichern unter, klicke zum Ordner "custom", gib den Dateinamen ein (mit .html am Ende), Dateityp: alle Dateien, speichern) 7. Nun erstellst du wieder ein ZIP-Paket aus den entpackten Dateien. (Vergib keinen neuen Namen) 8. Im StyleEdit wählst du in der Meine Themes Übersicht "hochladen". Es kommt eine Meldung, ob das Theme überschrieben werden soll, was du bejahst. 9. Aktiviere das Theme. Falls was nicht gehen sollte, aktivierst du einfach dein voriges Theme.
Vielen Dank für die Anleitung. Da ich nicht viel Ahnung davon habe traue ich mich nicht immer alles zu probieren. Habe aber deine Anleitung ausprobiert. Beim Download und nach dem entpacken habe ich keinen Ordner theme.json sondern nur so (Bild 1) Desweiteren finde ich nichts um es wieder hochzuladen. Nur das ( Bild 2)
Da bist du richtig. Ganz unten steht doch theme.json. Und genau hier legst du den Ordner html an. Im letzten Quadrat, da ist ein Plus drin. Da steht "hochladen".
Hallo Michaela, ich nochmal. Habe es hinbekommen. Erstmal ein großes Dankeschön dafür. Nur ein kleines Problem gibt es noch, das bei Artikeln die ausverkauft sind auch noch steht das der Artikel am nächsten Werktag versendet wird. Siehe Bild Viele Grüße von Michaela
Ich habe nur die Hintergrundfarbe und die Schriftfarbe beim Timer geändert, sowie die zeit von 15 uhr auf 12 Uhr reduziert
Wenn ich den Code ins Zusatzfeld eingebe, dann funktioniert es. Wenn ich ihn in die Datei eingebe, funktioniert es nicht.... Da finde ich gerade keine Lösung. Aber ich suche