Add slider

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,6 +116,7 @@ body {
                 }
             }
         }
+    }
 
     .step {
         height: 5px;
@@ -118,4 +131,3 @@ body {
         }
     }
 }
-}

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;
+        });
+    },
 };

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();    

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 %}

views/daten.twig.htm

@@ -1,4 +1,4 @@
-<div x-show="step == 2">
+<div>
     <h2 class="gradient">Geben Sie Ihre persönlichen Daten ein</h2>
 
     <div class="form-container">

views/stepper.twig.htm

@@ -1,11 +1,16 @@
 <div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
+
+    <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
+
     <form @submit.prevent="submit">
-        <div x-show="step == 0">
+
+        <div x-ref="slider" class="slider" x-on:resize.debounce.window="$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active">
+            <div>
                 <h2>Was möchten Sie finanzieren</h2>
                 <div class="radio-grid">
                     <template x-for="ckind in kinds">
                         <label>
-                        <input @change="step++" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
+                            <input @change="slideTo($event, step+1)" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
                             <span>
                                 <span x-html="svg(ckind.icon)"></span>
                                 <span x-text="ckind.label"></span>
@@ -15,7 +20,6 @@
                 </div>
             </div>
 
-        <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
             {% include 'vorhaben.twig.htm' with {
                 'kind': "bau",
                 bezahlt: true,
@@ -30,9 +34,7 @@
                 main: {label: 'Kaufpreis', value: 'kaufpreis'}
             } %}
 
-        {% include 'daten.twig.htm' %}
-
-        <div x-show="step == 1 && value.kind == 'anschluss'">
+            <div x-show="value.kind == 'anschluss'">
                 <h2 class="gradient">Das Vorhaben in Zahlen</h2>
 
                 <div class="form-container">
@@ -60,16 +62,19 @@
                         <div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
                     </div>
                     <div class="separator gray"></div>
-                <button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+                    <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
                 </div>
             </div>
 
-        <div x-show="step === 3">
+            {% include 'daten.twig.htm' %}
+
+            <div>
                 <div class="form-container">
                     Vielen Dank für Ihre Anfrage.
                 </div>
             </div>
 
+        </div>
 
     </form>
 </div>

views/vorhaben.twig.htm

@@ -1,4 +1,4 @@
-<div x-show="step == 1 && value.kind == '{{kind}}'">
+<div x-show="value.kind == '{{kind}}'">
     <h2 class="gradient">Ihr Bauvorhaben</h2>
 
     <div class="form-container">
@@ -66,6 +66,6 @@
             <div x-text="units.currency.to(  Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital) / 1000)*1000  )"></div>
         </div>
         <div class="separator gray"></div>
-        <button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+        <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
     </div>
 </div>