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

Cleanup old templates

dev
Philipp Lang 2 years ago
parent
4babd47c44
commit
84e47aef26
7 changed files with 24 additions and 380 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 75
      src/Stepper.php
  2. 4
      templates/stepper.htm
  3. 23
      views/client.twig.htm
  4. 66
      views/daten.twig.htm
  5. 33
      views/mail.twig.htm
  6. 110
      views/stepper.twig.htm
  7. 93
      views/vorhaben.twig.htm

75
src/Stepper.php
View File

@ -4,78 +4,43 @@ namespace Zoomyboy\Stepper;
use GuzzleHttp\Client;
use Dotenv\Dotenv;
use Twig\Environment;
use Twig\Loader\FilesystemLoader;
use Twig\TwigFilter as Filter;
use Twig\TwigFunction as Func;
class Stepper {
class Stepper
{
private $twig;
public string $url;
public string $scriptUrl;
public function __construct() {
$loader = new FilesystemLoader(__DIR__.'/../views');
$this->twig = new Environment($loader);
$this->twig->addFilter(new Filter('svg', [$this, 'svgTag']));
$this->twig->addFilter(new Filter('prop', [$this, 'alpineProp']));
$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 loadEnv(string $dir): void
{
$env = Dotenv::createImmutable($dir);
$env->safeLoad();
}
public function initFrontend() {
add_action('wp_enqueue_scripts', [ $this, 'enqueue' ]);
add_action('wp_ajax_nopriv_stepper_submit', [ $this, 'onSubmit' ]);
add_action('wp_ajax_stepper_submit', [ $this, 'onSubmit' ]);
public function initFrontend()
{
add_action('wp_enqueue_scripts', [$this, 'enqueue']);
add_action('wp_ajax_nopriv_stepper_submit', [$this, 'onSubmit']);
add_action('wp_ajax_stepper_submit', [$this, 'onSubmit']);
if (!is_admin()) {
add_shortcode('stepper', [ $this, 'handle' ]);
add_shortcode('stepper', [$this, 'handle']);
}
}
public function enqueue() {
wp_enqueue_script('stepper-js', $this->scriptUrl.'app.js', [], false, true);
wp_enqueue_style('stepper-css', $this->scriptUrl.'app.css');
}
public function handle() {
$data = [];
return $this->twig->render('stepper.twig.htm', [
'sprite' => $this->url.'assets/public/img/sprite.svg',
'data' => $data,
]);
}
public function svgTag($e, $class = '') {
return '<svg class="'.$class.'"><use xlink:href="'.$sprite.'#'.$e.'"></use></svg>';
public function enqueue()
{
wp_enqueue_script('stepper-js', $this->scriptUrl . 'app.js', [], false, true);
wp_enqueue_style('stepper-css', $this->scriptUrl . 'app.css');
}
public function alpineProp($prop, $modifier) {
$v = '$event.target.value';
$bv = '($event.target || $event.originalTarget).value';
return ':value="units.'.$modifier.'.to('.$prop.')"
@focus="$event.target.value = '.$prop.'"
@blur="console.log($event); '.$bv.' = units.'.$modifier.'.to('.$prop.');"
@change="console.log(\'change\'); '.$prop.' = units.'.$modifier.'.from('.$v.');"
onblur="console.log(\'RRRR\');"';
public function handle()
{
require(__DIR__ . '/../templates/stepper.htm');
}
public function validate($payload) {
public function validate($payload)
{
$errors = [];
if (!$payload['datenschutz']) {
@ -101,7 +66,8 @@ class Stepper {
return $errors;
}
public function onSubmit() {
public function onSubmit()
{
$client = new Client();
$payload = json_decode(file_get_contents('php://input'), true);
@ -109,9 +75,8 @@ class Stepper {
'json' => $payload,
'headers' => [
'Content-Type' => 'application/json',
'Authorization' => 'Bearer '.STEPPER_TOKEN,
'Authorization' => 'Bearer ' . STEPPER_TOKEN,
]
]);
}
}

4
templates/stepper.htm
View File

@ -0,0 +1,4 @@
<div id="stepper-main" class="stepper">
<stepper></stepper>
</div>

23
views/client.twig.htm
View File

@ -1,23 +0,0 @@
Vielen Dank für Ihre Anfrage.
Unsere Experten werden sich in den nächsten 48 Stunden bei Ihnen melden!
Anbei Ihre Daten:
Name: {{firstname}} {{lastname}}
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 %}

66
views/daten.twig.htm
View File

@ -1,66 +0,0 @@
<div>
<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>
<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="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">
<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>
<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>

33
views/mail.twig.htm
View File

@ -1,33 +0,0 @@
Eine neue Anfrage ist eingetroffen.
Name: {{firstname}} {{lastname}}
Adresse: {{zip}} {{location}}
Tel: {{phone}}
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}}
{% 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 %}

110
views/stepper.twig.htm
View File

@ -1,110 +0,0 @@
<div id="stepper-main" class="stepper">
<stepper></stepper>
</div>
<!--
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>
<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>
<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">
<template x-for="ckind in kinds">
<label>
<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>
</span>
</label>
</template>
</div>
</div>
{% include 'vorhaben.twig.htm' with {
'kind': "bau",
bezahlt: true,
second: {label: 'Baukosten', value: 'baukosten'},
main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
} %}
{% include 'vorhaben.twig.htm' with {
'kind': "kauf",
bezahlt: false,
second: {label: 'Modernisierung', value: 'modernisierung'},
main: {label: 'Kaufpreis', value: 'kaufpreis'}
} %}
<div x-show="value.kind == 'anschluss'">
<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-grid">
<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 class="separator"></div>
<div class="form-grid">
<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 class="separator"></div>
<div class="form-grid">
<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 class="separator primary"></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 class="separator gray"></div>
<div class="button-row">
<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>
{% include 'daten.twig.htm' %}
<div>
<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>
</form>
</div>
-->

93
views/vorhaben.twig.htm
View File

@ -1,93 +0,0 @@
<div x-show="value.kind == '{{kind}}'">
{% 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-grid">
<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>
{% if bezahlt %}
<div class="form-grid">
<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>
{% endif %}
<div class="separator"></div>
<div class="form-grid">
<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 class="separator"></div>
<div class="form-grid">
<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 class="unit">€</span>
</div>
<div class="separator"></div>
<div class="form-grid">
<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 class="unit">€</span>
<span class="comment">Diese Beträge sind gesetzlich vorgegeben und werden deshalb automatisch ermittelt.</span>
</div>
<div class="separator"></div>
<div class="form-grid">
<label class="plus">
Makler
<span x-html="`${units.percent.to(parts.makler * 100)} %`"></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 class="separator"></div>
<div class="form-grid">
<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 class="separator primary"></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 class="separator gray"></div>
<div class="button-row">
<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>
Write Preview
Loading…
Cancel
Save