From e82abc786c441d28b0a85d8256ac172116378e34 Mon Sep 17 00:00:00 2001 From: Philipp Lang Date: Sun, 24 Jan 2021 12:23:47 +0100 Subject: [PATCH] Add slider --- assets/css/app.css | 34 +++++++---- assets/js/app.js | 16 ++++- src/Stepper.php | 13 ++++- views/client.twig.htm | 23 ++++++++ views/daten.twig.htm | 2 +- views/stepper.twig.htm | 125 +++++++++++++++++++++------------------- views/vorhaben.twig.htm | 4 +- 7 files changed, 138 insertions(+), 79 deletions(-) create mode 100644 views/client.twig.htm diff --git a/assets/css/app.css b/assets/css/app.css index 663ffd7..d90e324 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -11,6 +11,18 @@ body { } .stepper { + .slider { + display: flex; + flex-wrap: nowrap; + scroll-snap-type: x proximity; + scroll-behavior: smooth; + overflow-x: hidden; + & > * { + flex: 0 0 100%; + scroll-snap-align: start; + } + } + form { font-family: sans-serif; background: var(--bg-color); @@ -104,18 +116,18 @@ body { } } } + } - .step { - height: 5px; - position: relative; - div { - position: absolute; - transition: width 0.5s; - top: 0; - left: 0; - height: 100%; - background: var(--primary); - } + .step { + height: 5px; + position: relative; + div { + position: absolute; + transition: width 0.5s; + top: 0; + left: 0; + height: 100%; + background: var(--primary); } } } diff --git a/assets/js/app.js b/assets/js/app.js index 21f2664..817cc6b 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -96,7 +96,19 @@ window.stepper = { axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', { ...this.value }).then(ret => { - this.step++; + this.slideTo(null, this.step+1); }); - } + }, + + slideTo(e, index) { + if (e !== null) { + e.preventDefault(); + } + + var _self = this; + this.step = index; + this.$nextTick(function() { + _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index; + }); + }, }; diff --git a/src/Stepper.php b/src/Stepper.php index 385148a..8d7cf3b 100644 --- a/src/Stepper.php +++ b/src/Stepper.php @@ -22,6 +22,9 @@ class Stepper { $this->twig->addFunction(new Func('cprop', function ($aprop, $modifier) { return $this->alpineProp($aprop, $modifier); })); + $this->twig->addFunction(new Func('sliderelement', function ($aprop, $modifier) { + return '$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active'; + })); } public function init() { @@ -58,9 +61,13 @@ class Stepper { } public function onSubmit() { - json_decode(file_get_contents('php://input')); - wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', json_decode(file_get_contents('php://input'), true)), [ - 'From' => 'philipp@aweos.de' + $payload = json_decode(file_get_contents('php://input'), true); + + wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', $payload, true), [ + 'From' => 'philipp@zoomyboy.de' + ]); + wp_mail($payload['email'], 'Vielen Dank für Ihre Finanzierungs-Anfrage', $this->twig->render('client.twig.htm', $payload, true), [ + 'From' => 'philipp@zoomyboy.de' ]); die(); diff --git a/views/client.twig.htm b/views/client.twig.htm new file mode 100644 index 0000000..21eb4be --- /dev/null +++ b/views/client.twig.htm @@ -0,0 +1,23 @@ +Vielen Dank für Ihre Anfrage. + +Anbei Ihre Daten: + +Name: {{firstname}} {{lastname}} +Adresse: {{zip}} {{location}} +Tel: {{phone}} +Mail: {{email}} + +Anfrage für: {{kind}} + +{% if kind == 'kauf' %} +* Kaufpreis: {{kauf.kaufpreis}} € +* Modernisierung: {{kauf.modernisierung}} € +* Baukosten: {{kauf.baukosten}} € +* Eigenkapital: {{kauf.eigenkapital}} € +{% endif %} +{% if kind == 'bau' %} +* Grundstückspreis: {{bau.grundstueckspreis}} € +* Bezahlt: {{bau.bezahlt}} € +* Baukosten: {{bau.baukosten}} € +* Eigenkapital: {{bau.eigenkapital}} € +{% endif %} diff --git a/views/daten.twig.htm b/views/daten.twig.htm index d4ed79b..9d6c887 100644 --- a/views/daten.twig.htm +++ b/views/daten.twig.htm @@ -1,4 +1,4 @@ -
+

Geben Sie Ihre persönlichen Daten ein

diff --git a/views/stepper.twig.htm b/views/stepper.twig.htm index 2210439..8b681c7 100644 --- a/views/stepper.twig.htm +++ b/views/stepper.twig.htm @@ -1,75 +1,80 @@
+ +
+
-
-

Was möchten Sie finanzieren

-
- -
-
-
- {% include 'vorhaben.twig.htm' with { - 'kind': "bau", - bezahlt: true, - second: {label: 'Baukosten', value: 'baukosten'}, - main: {label: 'Grundstückspreis', value: 'grundstueckspreis'} - } %} +
+
+

Was möchten Sie finanzieren

+
+ +
+
- {% include 'vorhaben.twig.htm' with { - 'kind': "kauf", - bezahlt: false, - second: {label: 'Modernisierung', value: 'modernisierung'}, - main: {label: 'Kaufpreis', value: 'kaufpreis'} - } %} + {% include 'vorhaben.twig.htm' with { + 'kind': "bau", + bezahlt: true, + second: {label: 'Baukosten', value: 'baukosten'}, + main: {label: 'Grundstückspreis', value: 'grundstueckspreis'} + } %} - {% include 'daten.twig.htm' %} + {% include 'vorhaben.twig.htm' with { + 'kind': "kauf", + bezahlt: false, + second: {label: 'Modernisierung', value: 'modernisierung'}, + main: {label: 'Kaufpreis', value: 'kaufpreis'} + } %} -
-

Das Vorhaben in Zahlen

+
+

Das Vorhaben in Zahlen

-
-
- - - € -
-
-
- - - € - Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an. +
+
+ + + € +
+
+
+ + + € + Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an. +
+
+
+ + + € +
+
+
+
Darlehensbetrag
+
+
+
+
-
-
- - - € -
-
-
-
Darlehensbetrag
-
-
-
-
-
-
-
- Vielen Dank für Ihre Anfrage. + {% include 'daten.twig.htm' %} + +
+
+ Vielen Dank für Ihre Anfrage. +
-
+
diff --git a/views/vorhaben.twig.htm b/views/vorhaben.twig.htm index 6972ecb..e29ac9c 100644 --- a/views/vorhaben.twig.htm +++ b/views/vorhaben.twig.htm @@ -1,4 +1,4 @@ -
+

Ihr Bauvorhaben

@@ -66,6 +66,6 @@
- +