public
/
di-stepper
6
0
Fork 0
Code Issues Pull Requests Projects Releases 6 Wiki Activity
Browse Source

Mod frontend

dev
Philipp Lang 4 years ago
parent
ecf629c635
commit
c7d27c73c4
5 changed files with 185 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      views/client.twig.htm
  2. 133
      views/daten.twig.htm
  3. 12
      views/mail.twig.htm
  4. 84
      views/stepper.twig.htm
  5. 95
      views/vorhaben.twig.htm

2
views/client.twig.htm
View File

@ -1,9 +1,9 @@
Vielen Dank für Ihre Anfrage. Vielen Dank für Ihre Anfrage.
Unsere Experten werden sich in den nächsten 48 Stunden bei Ihnen melden!
Anbei Ihre Daten: Anbei Ihre Daten:
Name: {{firstname}} {{lastname}} Name: {{firstname}} {{lastname}}
Adresse: {{zip}} {{location}}
Tel: {{phone}} Tel: {{phone}}
Mail: {{email}} Mail: {{email}}

133
views/daten.twig.htm
View File

@ -1,81 +1,66 @@
<div> <div>
<h2 class="gradient">Geben Sie Ihre persönlichen Daten ein</h2>
<div class="form-container">
<div class="field-grid">
<label for="greeting">
<span>Anrede</span>
<select x-model="value.greeting" id="greeting">
<template x-for="greeting in greetings">
<option :value="greeting.value" x-text="greeting.label"></option>
</template>
</select>
</label>
<label for="title">
<span>Titel</span>
<select x-model="value.title" id="title">
<template x-for="title in titles">
<option :value="title.value" x-text="title.label"></option>
</template>
</select>
</label>
<label for="firstname">
<span>Vorname</span>
<input type="text" x-model="value.firstname" id="firstname">
</label>
<label for="lastname">
<span>Nachname</span>
<input type="text" x-model="value.lastname" id="lastname">
</label>
<label for="zip">
<span>PLZ</span>
<input type="text" x-model="value.zip" id="zip">
</label>
<label for="location">
<span>Ort</span>
<input type="text" x-model="value.location" id="location">
</label>
<label for="phone">
<span>Telefon</span>
<input type="tel" x-model="value.phone" id="phone">
</label>
<label for="email">
<span>E-Mail-Adresse</span>
<input type="email" x-model="value.email" id="email">
</label>
<label for="job">
<span>Beruf des Hauptverdieners</span>
<select x-model="value.job" id="job">
<template x-for="job in jobs">
<option :value="job.value" x-text="job.label"></option>
</template>
</select>
</label>
<div class="geschafft">
<div class="check-geschafft">
<h3>Fast geschafft!</h3>
<p>Wir ermitteln jetzt das passende Finanzierungsangebot für Sie und prüfen Ihre Finanzierung bei der Bank innerhalb 48 Stunden.</p>
</div>
</div>
<h2 class="gradient">Für die Angebotserstellung benötigen wir noch Kontaktdaten von Ihnen</h2>
<label for="haushalt">
<span>Haushaltsnetto monatlich</span>
<input type="text" x-model="value.haushalt" id="haushalt">
</label>
<div class="form-container last-step">
<div class="field-grid stepper-contact">
<div class="one-half">
<label for="firstname" :class="{'is-invalid': error('firstname')}">
<span>Vorname <span class="required-star">*</span></span>
<input type="text" x-model="value.firstname" id="firstname" placeholder="Max">
<var class="field-error" x-show="error('firstname')" x-text="error('firstname')"></var>
</label>
<label for="einnahme">
<span>Netto-Mieteinnahme monatlich</span>
<input type="text" x-model="value.einnahme" id="einnahme">
</label>
<label for="lastname" :class="{'is-invalid': error('lastname')}">
<span>Nachname <span class="required-star">*</span></span>
<input type="text" x-model="value.lastname" id="lastname" placeholder="Mustermann">
<var class="field-error" x-show="error('lastname')" x-text="error('lastname')"></var>
</label>
</div>
<div class="one-half">
<div class="button-row">
<button @click="slideTo($event, step-1)" type="button">Zurück</button>
<button type="submit">Absenden</button>
</div>
<label for="phone" :class="{'is-invalid': error('phone')}">
<span>Telefon <span class="required-star">*</span></span>
<input type="tel" x-model="value.phone" id="phone" placeholder="0212 123456">
<var class="field-error" x-show="error('phone')" x-text="error('phone')"></var>
</label>
</div>
<label for="email" :class="{'is-invalid': error('email')}">
<span>E-Mail-Adresse <span class="required-star">*</span></span>
<input type="email" x-model="value.email" id="email" placeholder="max@mustermann.de">
<var class="field-error" x-show="error('email')" x-text="error('email')"></var>
</label>
</div>
<h4>Optionale Bedürfnisse (Förderung & Modernisierungsarbeiten)</h4>
<div class="open-query">
<label for="modernisierung" class="fancy-checkbox">
<input type="checkbox" x-model="value.modernisierung" id="modernisierung">
<span>Ich benötige Hilfe bei der Planung der Modernisierungsarbeiten sowie der dazugehörigen Kostenaufstellung. RCK stellt den Hauseigenen Architekten für ein Informationsgespräch kostenfrei zur Verfügung.</span>
</label>
<label for="energetisch" class="fancy-checkbox">
<input type="checkbox" x-model="value.energetisch" id="energetisch">
<span>Ich interessiere mich für die energetische Förderung durch Photovoltaik, Solar, Erdwärme etc.. RCK verfügt über hervorragende Verbindungen zu Fördermittelberatern und Produktanbietern (made in Germany).</span>
</label>
</div>
<label for="datenschutz" class="fancy-checkbox" :class="{'is-invalid': error('datenschutz')}">
<input type="checkbox" x-model="value.datenschutz" id="datenschutz">
<span>Ich habe die <a href="/datenschutzerklaerung/" target="_blank">Datenschutzerklärung</a> zur Kenntnis genommen.</span>
<var class="field-error" x-show="error('datenschutz')" x-text="error('datenschutz')"></var>
</label>
<div class="button-row letzter-step">
<button type="submit" class="weiter-step">Finanzierungsangebot erhalten</button>
</div>
<div class="usp-form">
<ul>
<li>SSL Verschlüsselt</li>
<li>Schnelle Rückmeldung</li>
</ul>
</div>
</div> </div>
</div>
</div> </div>

12
views/mail.twig.htm
View File

@ -5,6 +5,18 @@ Adresse: {{zip}} {{location}}
Tel: {{phone}} Tel: {{phone}}
Mail: {{email}} Mail: {{email}}
{% if energetisch %}
Der Kunde interessiert sich für eine energetische Förderung.
{% endif %}
{% if modernisierung %}
Der Kunde wünscht eine Modernisierung.
{% endif %}
{% if datenschutz %}
Der Kunde hat die Datenschutzerklärung akzeptiert.
{% endif %}
Anfrage für: {{kind}} Anfrage für: {{kind}}
{% if kind == 'kauf' %} {% if kind == 'kauf' %}

84
views/stepper.twig.htm
View File

@ -1,18 +1,29 @@
<div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
<div class="stepper"
x-data="{ ...stepper, step: {{data.step}}, value: { ...stepper.value, kind: '{{data.kind}}', {% if data.kind %} {{data.kind}}: { ...stepper.value.{{data.kind}}, eigenkapital: {{data.eigenk}}, kaufpreis: {{data.kaufpreis}} } {% endif %} }, sprite: '{{sprite|raw}}' }"
{% if data.step == 1 %} x-init="slideTo(null, {{data.step}})" {% endif %}>
<div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
<div class="step">
<div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div>
</div>
<form @submit.prevent="submit" novalidate> <form @submit.prevent="submit" novalidate>
<div x-ref="slider" class="slider" x-on:resize.debounce.window="$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active"> <div x-ref="slider" class="slider" x-on:resize.debounce.window="$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active">
<div> <div>
<h2>Was möchten Sie finanzieren</h2>
<h2 class="desktop">Das beste <span>Finanzierungsangebot</span> finden!</h2>
<h2 class="mobil">Kostenloses Finanzierungsangebot einholen</span></h2>
<p class="finanz-angebot">Als unabhängiger Finanzberater ermitteln wir bei hunderten Anbietern das passende Angebot für Sie und prüfen Ihre Finanzierung kostenlos bei der Bank innerhalb 48 Stunden!
</p>
<h4 class="sub-was">Schritt 1 von 3:</h4>
<h3 class="was-finanzieren">Was möchten Sie finanzieren?</h3>
<div class="radio-grid"> <div class="radio-grid">
<template x-for="ckind in kinds"> <template x-for="ckind in kinds">
<label> <label>
<input @change="slideTo($event, step+1)" 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>
<span x-html="svg(ckind.icon)"></span>
<span>
<img :src="'/wp-content/plugins/rck-stepper/assets/svg/'+ckind.icon+'.svg'" :class="'icon-'+ckind.icon">
</span>
<span x-text="ckind.label"></span> <span x-text="ckind.label"></span>
</span> </span>
</label> </label>
@ -21,50 +32,59 @@
</div> </div>
{% include 'vorhaben.twig.htm' with { {% include 'vorhaben.twig.htm' with {
'kind': "bau",
bezahlt: true,
second: {label: 'Baukosten', value: 'baukosten'},
main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
'kind': "bau",
bezahlt: true,
second: {label: 'Baukosten', value: 'baukosten'},
main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
} %} } %}
{% include 'vorhaben.twig.htm' with { {% include 'vorhaben.twig.htm' with {
'kind': "kauf",
bezahlt: false,
second: {label: 'Modernisierung', value: 'modernisierung'},
main: {label: 'Kaufpreis', value: 'kaufpreis'}
'kind': "kauf",
bezahlt: false,
second: {label: 'Modernisierung', value: 'modernisierung'},
main: {label: 'Kaufpreis', value: 'kaufpreis'}
} %} } %}
<div x-show="value.kind == 'anschluss'"> <div x-show="value.kind == 'anschluss'">
<h2 class="gradient">Das Vorhaben in Zahlen</h2>
<h4 class="sub-was-second">Schritt 2 von 3:</h4>
<h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>
<div class="form-container"> <div class="form-container">
<div class="form-grid"> <div class="form-grid">
<label>Objektwert</label>
<input type="tel" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
<span class="unit">€</span>
<label>Objektwert <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
<div class="open-popup">aktueller Verkehrswert, evtl. Gutachten (bei RCK erhältlich).</div>
</span></label>
<input type="tel" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
<span class="unit">€</span>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<div class="form-grid"> <div class="form-grid">
<label>Umschuldung</label>
<input type="tel" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
<span class="unit">€</span>
<span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
<label>Umschuldung <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
<div class="open-popup">aktuell noch neu zu finanzierende Restschuld.</div>
</span></label>
<input type="tel" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
<span class="unit">€</span>
<span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<div class="form-grid"> <div class="form-grid">
<label>Zusätzl. Kapital</label>
<input type="tel" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
<span class="unit">€</span>
<label>Kapitalbeschaffung <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
<div class="open-popup">z.B. für Modernisierung, Reparaturen, Sauna, Klimaanlage.</div>
</span></label>
<input type="tel" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
<span class="unit">€</span>
</div> </div>
<div class="separator primary"></div> <div class="separator primary"></div>
<div>
<div>Darlehensbetrag</div>
<div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
<div class="form-grid">
<div class="darlehen-name"><span class="yellow-darlehen">=</span>Darlehensbetrag <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
<div class="open-popup">der Betrag, der durch die Bank finanziert wird.</div>
</span></div>
<div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)" class="text-right darlehen-zahl"></div>
</div> </div>
<div class="separator gray"></div> <div class="separator gray"></div>
<div class="button-row"> <div class="button-row">
<button @click="slideTo($event, step-1)" type="button">Zurück</button>
<button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
<button @click="slideTo($event, step-1)" type="button" class="zurueck-step">Zurück</button>
<button @click="slideTo($event, step+1)" type="button" class="weiter-step">Weiter zum letzten Schritt</button>
</div> </div>
</div> </div>
</div> </div>
@ -72,8 +92,12 @@
{% include 'daten.twig.htm' %} {% include 'daten.twig.htm' %}
<div> <div>
<div class="form-container">
Vielen Dank für Ihre Anfrage.
<div class="form-container fertig-container">
<div class="fertig-step">
Vielen Dank für Ihre Anfrage!<br>
Unsere Experten werden sich in den nächsten 48 Stunden bei Ihnen melden.<br>
In der Zwischenzeit können Sie sich gerne weitere Informationen zum Thema <a href="/baufinanzierung/">Baufinanzierung</a> einholen oder unser <a href="/team/">Team</a> kennenlernen.
</div>
</div> </div>
</div> </div>

95
views/vorhaben.twig.htm
View File

@ -1,74 +1,93 @@
<div x-show="value.kind == '{{kind}}'"> <div x-show="value.kind == '{{kind}}'">
<h2 class="gradient">Ihr Bauvorhaben</h2>
{% if kind == 'bau' %} <h4 class="sub-was-second">Schritt 2 von 3:</h4>
<h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>{% endif %}
{% if kind == 'kauf' %} <h4 class="sub-was-second">Schritt 2 von 3:</h4>
<h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>{% endif %}
<div class="form-container"> <div class="form-container">
<div class="form-grid"> <div class="form-grid">
<label>{{main.label}}</label>
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}>
<span class="unit">€</span>
<label>{{main.label}} <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
{% if kind == 'bau' %} <div class="open-popup">Notariell zu vereinbarender Kaufpreis.</div> {% endif %}
{% if kind == 'kauf' %} <div class="open-popup">Notariell zu vereinbarender Kaufpreis, möglichst ohne Zubehör wie Küche, Gartenmöbel, Rasenmäher etc.</div> {% endif %}
</span></label>
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}>
<span class="unit">€</span>
</div> </div>
{% if bezahlt %} {% if bezahlt %}
<div class="form-grid"> <div class="form-grid">
<label>Bereits bezahlt?</label>
<select name="bezahlt" x-model="value.{{kind}}.bezahlt">
<option value="1">Ja</option>
<option value="0">Nein</option>
</select>
<label>Bereits bezahlt? <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
<div class="open-popup">Kaufpreis fürs Grundstück, Planungskosten etc.).</div>
</span></label>
<select name="bezahlt" x-model="value.{{kind}}.bezahlt">
<option value="1">Ja</option>
<option value="0">Nein</option>
</select>
</div> </div>
{% endif %} {% endif %}
<div class="separator"></div> <div class="separator"></div>
<div class="form-grid"> <div class="form-grid">
<label>{{second.label}}</label>
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}>
<span class="unit">€</span>
<label class="plus">{{second.label}} <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
{% if kind == 'bau' %} <div class="open-popup">Kosten zur Herstellung des Gebäudes inkl. Baunebenkosten wie Planung durch Architekt und Fachingenieure etc.</div> {% endif %}
{% if kind == 'kauf' %} <div class="open-popup">Alle Kosten für Material + Lohn für z.B. Malerarbeiten.</div> {% endif %}
</span></label>
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}>
<span class="unit">€</span>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<div class="form-grid"> <div class="form-grid">
<label>Notar- & Gerichtskosten</label>
<span>
<span class="result-label" x-text="units.percent.to(parts.notar * 100)"></span>
<span class="result" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.notar)"></span>
<label class="plus">Notar- & Gerichtskosten</label>
<span class="text-right">
<span class="result-label prozent-zahl" x-text="units.percent.to(parts.notar * 100)"></span>%
<span class="result wert-zahl" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.notar)"></span>
</span> </span>
<span class="unit">€</span> <span class="unit">€</span>
</div> </div>
<div class="separator primary"></div>
<div class="separator"></div>
<div class="form-grid"> <div class="form-grid">
<label>Grunderwerbsteuer</label>
<span>
<span class="result-label" x-text="units.percent.to(parts.grundsteuer * 100)"></span>
<span class="result" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.grundsteuer)"></span>
<label class="plus">Grunderwerbsteuer</label>
<span class="text-right">
<span class="result-label prozent-zahl" x-text="units.percent.to(parts.grundsteuer * 100)"></span>%
<span class="result wert-zahl" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.grundsteuer)"></span>
</span> </span>
<span class="unit">€</span> <span class="unit">€</span>
<span class="comment">Diese Beträge sind gesetzlich vorgegeben und werden deshalb automatisch ermittelt.</span>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<div class="form-grid"> <div class="form-grid">
<label>
<label class="plus">
Makler Makler
<span x-html="`${units.percent.to(parts.makler * 100)} %`"></span> <span x-html="`${units.percent.to(parts.makler * 100)} %`"></span>
</label>
<input type="tel" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)"
@focus="$event.target.value = Math.round(value.{{kind}}.{{main.value}} * parts.makler)"
@blur="console.log($event); ($event.target || $event.originalTarget).value = units.currency.to(value.{{kind}}.{{main.value}} * parts.makler);"
@change="console.log('change'); parts.makler = units.currency.from($event.target.value) / value.{{kind}}.{{main.value}};"
>
<span class="unit">€</span>
<span class="comment">Die vorgeschlagene Maklercourtage gentspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span>
<span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
<div class="open-popup">s.o.</div>
</span></label>
<input type="tel" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)" @focus="$event.target.value = Math.round(value.{{kind}}.{{main.value}} * parts.makler)"
@blur="console.log($event); ($event.target || $event.originalTarget).value = units.currency.to(value.{{kind}}.{{main.value}} * parts.makler);"
@change="console.log('change'); parts.makler = units.currency.from($event.target.value) / value.{{kind}}.{{main.value}};">
<span class="unit">€</span>
<span class="comment">Die vorgeschlagene Maklercourtage entspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<div class="form-grid"> <div class="form-grid">
<label>Eigenkapital</label>
<input type="tel" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}>
<span class="unit">€</span>
<label class="minus">Eigenkapital <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
<div class="open-popup">Bitte nur das Kapital ansetzen, dass Sie wirklich auch einsetzen wollen.</div>
</span></label>
<input type="tel" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}>
<span class="unit">€</span>
</div> </div>
<div class="separator primary"></div> <div class="separator primary"></div>
<div>
<div><span>=</span>Darlehensbetrag</div>
<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 class="form-grid darlehen-grid">
<div class="darlehen-name"><span class="yellow-darlehen">=</span>Darlehensbetrag <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
<div class="open-popup">Der Betrag, der durch die Bank finanziert wird.</div>
</span></div>
<div class="text-right darlehen-zahl"
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 - (value.{{kind}}.bezahlt == 1 ? value.{{kind}}.grundstueckspreis : 0)) / 1000)*1000 )">
</div><span class="unit" style="font-weight:bold;">€</span>
</div> </div>
<div class="separator gray"></div> <div class="separator gray"></div>
<div class="button-row"> <div class="button-row">
<button @click="slideTo($event, step-1)" type="button">Zurück</button>
<button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
<button @click="slideTo($event, step-1)" type="button" class="zurueck-step">Zurück</button>
<button @click="slideTo($event, step+1)" type="button" class="weiter-step">Weiter zum letzten Schritt</button>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save