From 52df56d7476408d2c2ac5b729b6e02202524a0f3 Mon Sep 17 00:00:00 2001 From: daniel Date: Wed, 7 Oct 2026 14:10:51 +0200 Subject: - Modul SmartCheckout um Abschlussoptionen erweitert --- views/js/smartcheckout.js | 115 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 108 insertions(+), 7 deletions(-) (limited to 'views/js') diff --git a/views/js/smartcheckout.js b/views/js/smartcheckout.js index 20674f8..9c4f4f1 100644 --- a/views/js/smartcheckout.js +++ b/views/js/smartcheckout.js @@ -46,11 +46,25 @@ queued: false, queuedUpload: null, submitting: false, + confirm: false, timer: null }; }, + computed: { + + /** + * Sind Bestellbedingungen und Bestellbutton zu sehen? Beim Bestellabschluss „Zusammenfassung vor Abschluss“ erst im Bestätigungsschritt + */ + showFinal: function() { + + return (this.state.finish !== 'confirm' || this.confirm); + + } // showFinal() + + }, + created: function() { this.syncForm(true); @@ -65,8 +79,8 @@ // Nach einem abgelehnten Bestellversuch steht der Kunde vor dem ersten Fehler if (this.state.errors.length !== 0) this.$nextTick(this.focusError); - // Das GARAN-Gewährleistungslabel erscheint wie in der klassischen Zusammenfassung beim Betreten der Seite - if (this.state.warranty && this.state.warranty.popup === true && this.state.empty !== true) this.garanPopup = true; + // Das GARAN-Gewährleistungslabel erscheint wie in der klassischen Zusammenfassung beim Betreten der Seite, mit Bestätigungsschritt erst dort + if (this.state.warranty && this.state.warranty.popup === true && this.state.empty !== true && this.state.finish !== 'confirm') this.garanPopup = true; // Die Lightbox des Gewährleistungslabels lässt sich mit Esc schließen var self = this; @@ -77,10 +91,13 @@ }); - // Zurück aus dem Seiten-Cache des Browsers (z.B. Zurück-Button nach dem Zahlungsanbieter): Layer wieder entfernen + // Zurück aus dem Seiten-Cache des Browsers (z.B. Zurück-Button nach dem Zahlungsanbieter): Layer entfernen, Eingaben wieder bearbeitbar window.addEventListener('pageshow', function(event) { - if (event.persisted) self.submitting = false; + if (!event.persisted) return; + + self.submitting = false; + self.confirm = false; }); @@ -157,7 +174,7 @@ selectChoice: function(type, id, event) { if (event && event.target && typeof event.target.closest === 'function' && event.target.closest('.sc_choice_head') !== null) return; - if (this.form[type] === id) return; + if (this.form[type] === id || this.confirm) return; this.form[type] = id; this.refresh(); @@ -242,7 +259,8 @@ var el_form = document.getElementById('wpsg_smartcheckout_form'); - if (el_form === null) return; + // Im Bestätigungsschritt sind die Eingaben gesperrt und würden ohne sie übertragen + if (el_form === null || this.confirm) return; // Dateien der direkt hochzuladenden Felder sofort sichern: der Block wird mit der nächsten Antwort neu aufgebaut var arUpload = []; @@ -358,6 +376,8 @@ } + if (action === 'confirm') self.afterConfirm(result.confirm === true); + if (self.queuedUpload !== null) { var upload = self.queuedUpload; @@ -477,8 +497,75 @@ }, // focusError() /** - * Blockt das Absenden, solange der Server noch rechnet + * Prüft die Angaben und wechselt in den Bestätigungsschritt (Bestellabschluss „Zusammenfassung vor Abschluss“) + * + * Die Pflichtfelder der Eingaben prüft zuerst der Browser, Bestellbedingungen und AGB erst der Bestätigungsschritt. */ + startConfirm: function() { + + if (this.busy) return; + + var el_fieldset = el_root.querySelector('.sc_fieldset'); + + if (el_fieldset !== null && typeof el_fieldset.reportValidity === 'function' && !el_fieldset.reportValidity()) return; + + // Eine noch ausstehende Änderung geht in derselben Anfrage mit + if (this.timer !== null) { + + window.clearTimeout(this.timer); + this.timer = null; + + } + + this.send('confirm'); + + }, // startConfirm() + + /** + * Antwort auf startConfirm(): bei bestandener Prüfung Eingaben sperren, sonst zum ersten Fehler + */ + afterConfirm: function(bConfirm) { + + var self = this; + + if (!bConfirm) { + + this.$nextTick(this.focusError); + + return; + + } + + this.confirm = true; + + // Das GARAN-Gewährleistungslabel erscheint wie in der klassischen Zusammenfassung + if (this.state.warranty && this.state.warranty.popup === true && this.garanConfirmed !== true) this.garanPopup = true; + + this.$nextTick(function() { + + var el_note = el_root.querySelector('.sc_confirm_note'); + + if (el_note !== null) el_note.scrollIntoView({ behavior: 'smooth', block: 'start' }); + + }); + + }, // afterConfirm(bConfirm) + + /** + * Verlässt den Bestätigungsschritt, die Eingaben sind wieder bearbeitbar + */ + editConfirm: function() { + + this.confirm = false; + + this.$nextTick(function() { + + el_root.scrollIntoView({ behavior: 'smooth', block: 'start' }); + + }); + + }, // editConfirm() + /** * Berechnet neu, wenn sich eine Eingabe in einem Block der Module ändert (z.B. Lieferadresse, Produktvariablen) * @@ -698,6 +785,20 @@ } + /* + * Gesperrte Felder würden nicht übertragen. Der Browser stellt die Formulardaten erst nach diesem Ereignis + * zusammen, deshalb hier direkt im DOM freigeben und nicht über Vue (das aktualisiert erst später). + */ + if (this.confirm) { + + el_root.querySelectorAll('fieldset.sc_fieldset').forEach(function(el) { + + el.disabled = false; + + }); + + } + // Ab hier wird tatsächlich bestellt: Layer über die Seite, bis der Browser die nächste Seite lädt this.submitting = true; -- cgit v1.2.3