Zitieren
Wunschthema: Lieferzeitanzeige mit Datumsbereich
Über die Feiertage ist mir etwas eingefallen, was für die Kundenfreundlichkeit sicherlich interessant wäre – man kennt es von Amazon. Vielleicht ließen sich damit Rückfragen reduzieren und die Kundenfreundlichkeit ein Stück steigern.

(Ein bisschen Wunschdenken / Nice to have 😄)
Statt der Lieferzeitangabe im Shop bei jedem Artikel (z. B. „X–Y Werktage, Tage oder Wochen“) würden im Shop konkrete Lieferdaten angezeigt werden, z. B. „Lieferung Di., 16.01.–Do., 18.01.“.
Das Datum errechnet sich automatisch aus den hinterlegten Werktagen/Tagen.
Nicht-zählende Tage wie Wochenenden, bundesweite Feiertage sowie hinterlegte Urlaubszeiten/Betriebsferien würden dabei ausgeschlossen.

Zu beachten wäre, dass diese Anzeige nur sinnvoll ist, wenn keine Vorkasse gewählt wird, da sich der Versandzeitpunkt sonst nicht zuverlässig bestimmen lässt. Das könnte man aber sicherlich mit einem Vermerk ergänzen.

Vielleicht gibt es ja irgendwann Zeit, so ein Thema anzugehen – wollte es zumindest einmal hier „verewigen“, damit es nicht im Sande verläuft. 😉
Administrator
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
Da begegnet mir gerade diese Anzeige:
01-18-2026, 12-04-26.png
Administrator
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
Ich hab ein bisschen gebastelt:
01-19-2026, 20-29-53.png
Den Code habe ich jetzt zum testen einfach komplett im Zusatzfeld. Für dauerhaft ist er natürlich besser in der p̶̶r̶̶o̶̶d̶̶u̶̶c̶̶t̶̶_̶̶i̶̶n̶̶f̶̶o̶̶_̶̶p̶̶r̶̶o̶̶d̶̶u̶̶c̶̶t̶̶_̶̶b̶̶o̶̶x̶̶_̶̶b̶̶o̶̶t̶̶t̶̶o̶̶m̶̶.̶̶h̶̶t̶̶m̶̶l̶ product_info_template_standard.html aufgehoben. :-)

Code: Alles auswählen

<div class="delivery-info" id="deliveryInfo"></div>
<style>
.delivery-info {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.fa-arrow-right{
    color: #3dce37;
}
</style>
<script>
(function(){ 
     
    window.addEventListener ? window.addEventListener("load", initDeliveryInfo, false) : window.attachEvent && window.attachEvent("onload", initDeliveryInfo); 

function initDeliveryInfo() {
    // --- Feiertagsberechnung ---
    function getEasterSunday(year) {
        var f = Math.floor,
            G = year % 19,
            C = f(year / 100),
            H = (C - f(C / 4) - f((8 * C + 13) / 25) + 19 * G + 15) % 30,
            I = H - f(H / 28) * (1 - f(29 / (H + 1)) * f((21 - G) / 11)),
            J = (year + f(year / 4) + I + 2 - C + f(C / 4)) % 7,
            L = I - J,
            month = 3 + f((L + 40) / 44),
            day = L + 28 - 31 * f(month / 4);

        return new Date(year, month - 1, day);
    }

    function getHolidays(year) {
        var easter = getEasterSunday(year);
        return [
            new Date(year, 0, 1),
            new Date(easter.getFullYear(), easter.getMonth(), easter.getDate() - 2),
            new Date(easter.getFullYear(), easter.getMonth(), easter.getDate() + 1),
            new Date(year, 4, 1),
            new Date(easter.getFullYear(), easter.getMonth(), easter.getDate() + 39),
            new Date(easter.getFullYear(), easter.getMonth(), easter.getDate() + 50),
            new Date(year, 9, 3),
            new Date(year, 11, 25),
            new Date(year, 11, 26)
        ];
    }

    function isHoliday(date) {
        return getHolidays(date.getFullYear()).some(function (h) {
            return h.toDateString() === date.toDateString();
        });
    }

    function addWorkingDays(date, days) {
        var result = new Date(date);
        while (days > 0) {
            result.setDate(result.getDate() + 1);
            if (result.getDay() !== 0 && result.getDay() !== 6 && !isHoliday(result)) {
                days--;
            }
        }
        return result;
    }

    function formatDate(date) {
        return date.toLocaleDateString('de-DE', {
            weekday: 'short',
            day: '2-digit',
            month: '2-digit'
        }).replace(',', '');
    }

    // --- Lieferzeit-Element ---
    var infoEl = document.getElementById('deliveryInfo');
    if (!infoEl) return;

    var lastShippingText = '';

    function updateDeliveryInfo() {
        var shippingTextEl = document.querySelector('.products-shipping-time-value');
        if (!shippingTextEl) return;

        var text = shippingTextEl.textContent.trim();
        if (text === lastShippingText) return;
        lastShippingText = text;

        var rangeWeeks  = text.match(/(\d+)\s*-\s*(\d+)\s*Wochen?/i);
		var singleWeeks = text.match(/(\d+)\s*Wochen?/i);

		var rangeDays   = text.match(/(\d+)\s*-\s*(\d+)\s*Werktage?/i);
		var singleDays  = text.match(/(\d+)\s*Werktage?/i);

		var minDays, maxDays;
		
		// Fall 1: Wochen
		if (rangeWeeks || singleWeeks) {
			var minW, maxW;
			if (rangeWeeks) {
				minW = parseInt(rangeWeeks[1], 10);
				maxW = parseInt(rangeWeeks[2], 10);
		} else {
			minW = maxW = parseInt(singleWeeks[1], 10);
		}
		// Umrechnung: 1 Woche = 5 Werktage (Mo–Fr)
		minDays = minW * 5;
		maxDays = maxW * 5;

		// Fall 2: Werktage
		} else if (rangeDays || singleDays) {
			if (rangeDays) {
				minDays = parseInt(rangeDays[1], 10);
				maxDays = parseInt(rangeDays[2], 10);
			} else {
				minDays = maxDays = parseInt(singleDays[1], 10);
			}

		// Fall 3: nichts Erkennbares
		} else {
			infoEl.innerHTML = '';
			return;
		}

		// --- Cut-off: nach 10:00 Uhr startet die Berechnung ab dem nächsten Werktag ---
		var startDate = new Date();
		var cutoffHour = 10;
		if (startDate.getHours() >= cutoffHour) {
			startDate = addWorkingDays(startDate, 1);
		}
	
		// --- Zustellzeitraum berechnen ---
		var fromDate = addWorkingDays(startDate, minDays);
		var toDate   = addWorkingDays(startDate, maxDays);

        var dateText = (minDays === maxDays)
            ? formatDate(fromDate)
            : formatDate(fromDate) + ' – ' + formatDate(toDate);

        infoEl.innerHTML =
            '<strong>Heute bestellt & bezahlt:</strong><br>' +
            '<i class="fa fa-arrow-right"></i> Lieferung: <strong>' +
            dateText + '</strong>';
    }

    // Initial
    var checkInterval = setInterval(function() { 
            var shippingNode = document.querySelector('.products-shipping-time-value'); 
            if (shippingNode) { 
                updateDeliveryInfo();  

                
                var observer = new MutationObserver(updateDeliveryInfo); 
                observer.observe(shippingNode, { characterData: true, childList: true, subtree: true }); 
                clearInterval(checkInterval);  
            } 
        }, 200); 

        // Initial Update, falls Element schon da 
        updateDeliveryInfo(); 
    } 
})();
</script>
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
Das ist toll, @Michaela . Dankeschön. :D 🤗

Meinst du, das geht auch bei Artikeln mit Varianten (Beispiel https://www.dietierbestatterin.de/de/Ti ... enweg.html)?

Und warum ist es besser, das dauerhaft in der product_info_product_box_bottom.html zu haben? Ich habe so gar keine Ahnung.... 🙈
Administrator
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
Hi Manja,
der Code ist jetzt angepasst. Jetzt klappt es auch, wenn die Lieferzeit erst nach auswählen der Variante angezeigt wird.

Wenn der Code direkt in der Datei platziert wird, hast du einen Ort zum einfügen und ändern. In den Zusatzfeldern müsstest du zuerst jeden Artikel öffnen einfügen.

Leider ist es in der Cloud (oder zumindest bei mir) seit Monaten fast unmöglich Änderungen im Theme vorzunehmen. Hoffe dass sich der Support zeitnah meldet. Ich kann es gerade nämlich nicht selbst testen.

Muss mich aber korrigieren. Der HTML Code sollte in die product_info_template_standard.html, das Javascript natürlich separat und das CSS ins eigene CSS.
Aber zum Testen kannst du den kompletten Code einfach kopieren und ins Zusatzfeld einfügen.
Administrator
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
*Link zum Beispielartikel nicht mehr aktiv.*
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
Fein, dankeschön, Michaela.

Kannst du mir noch sagen, ob und wo ich diesen Doppelpunkt weg bekomme und ob ich die Anzeige direkt unter die Lieferzeit bekomme (siehe Anhang)? Ich habe vorher teilweise schon Zusatzfelder angelegt, die aber ja leider nicht verschoben werden können.
Zwischenablage01.jpg
Administrator
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
Tatsache, Zusatzfelder lassen sich nicht verschieben... :?: Das merke ich auch gerade erst.

Aber falls du es bei allen Artikeln haben magst, ist es dann besser die Codes in die Dateien zu speichern. Und da kann es dann direkt unter der Lieferzeit platziert werden. Dann ist das Problem mit dem Doppelpunkt auch nicht mehr.
Das kann ich dir heute Nachmittag dann sagen. Ich ärgere mich gerade noch mit meinem Theme rum. :-)
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
Michaela hat geschrieben: 20 Jan 2026, 12:10 Tatsache, Zusatzfelder lassen sich nicht verschieben... Das merke ich auch gerade erst.
Ja, hab ich im G....-Forum gelesen.
Michaela hat geschrieben: 20 Jan 2026, 12:10 Aber falls du es bei allen Artikeln haben magst, ist es dann besser die Codes in die Dateien zu speichern. Und da kann es dann direkt unter der Lieferzeit platziert werden. Dann ist das Problem mit dem Doppelpunkt auch nicht mehr.
Das kann ich dir heute Nachmittag dann sagen. Ich ärgere mich gerade noch mit meinem Theme rum. :-)
Ja, das wäre fein. Zeitlich aber überhaupt nicht eilig, Michaela - du wirst den Kampf mit deinem Theme gewinnen! ;)
Ich habe mir den Code schon etwas angepasst, dass er auch Wochenangaben mitrechnet (ich habe teilweise Wochenangaben als Lieferzeit).
Wenn du mir sagst, was ich wo genau eintragen muss in den Dateien, bekomme ich das sicherlich hin. CSS weiß ich auch wo ich das hinterlegen muss.
DANKESCHÖN!
Administrator
Zitieren
Re: Wunschthema: Lieferzeitanzeige mit Datumsbereich
Manja hat geschrieben: 20 Jan 2026, 13:18 dass er auch Wochenangaben mitrechnet
Mega. Das bekomm ich einfach nicht hin. Er rechnet bei mir dann immer 2 Tage anstatt 2 Wochen.
Die Änderung hätte ich bitte gerne. :D
Antworten