arne/simple-withdrawalbutton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Redesign withdrawal form: step indicator, refined CSS, print button

Browse Source 
Add scoped CSS with Navy/warm-white palette, system serif headings, and
card-style radio inputs. Add 3-step progress indicator across all views.
Add print/PDF button on success page. Register CSS via registerStylesheet.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Arne Weiss
2026-06-01 08:39:34 +02:00
parent a9d8966e22
commit 16fa6de209
6 changed files with 700 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
controllers/front/withdraw.php
+6
View File
@@ -26,6 +26,12 @@ class Simple_withdrawalbuttonWithdrawModuleFrontController extends ModuleFrontCo
{
parent::initContent();
$this->registerStylesheet(
'cyp-withdrawal',
'modules/' . $this->module->name . '/views/css/withdrawal.css',
['media' => 'all', 'priority' => 200]
);
$this->context->smarty->assign([
'errors_list' => $this->errorsList,
'form_data' => $this->formData,
views/css/index.php
+8
View File
@@ -0,0 +1,8 @@
<?php
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');
header('Location: ../');
exit;
views/css/withdrawal.css
+466
View File
@@ -0,0 +1,466 @@
:root {
--cyw-bg: #faf8f5;
--cyw-surface: #ffffff;
--cyw-border: #e2ddd8;
--cyw-text: #1c1a17;
--cyw-text-muted: #6b645e;
--cyw-accent: #1e3a5f;
--cyw-accent-hover: #162d4b;
--cyw-accent-light: #eef2f8;
--cyw-success: #1e5c3a;
--cyw-success-bg: #f0f7f3;
--cyw-error: #8b1e2d;
--cyw-error-bg: #fdf2f3;
--cyw-warning: #7a5a1e;
--cyw-warning-bg: #fdf7ee;
}
/* ── Layout ─────────────────────────────────────────────── */
.cyp-withdrawal-page {
max-width: 660px;
margin: 0 auto;
padding: 0 16px 56px;
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
color: var(--cyw-text);
}
.cyp-withdrawal-page .page-header {
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--cyw-border);
}
.cyp-withdrawal-page .page-header h1 {
font-family: Georgia, 'Times New Roman', serif;
font-size: 26px;
font-weight: normal;
letter-spacing: -0.02em;
margin: 0;
color: var(--cyw-text);
}
.cyp-withdrawal-page .card,
.cyp-withdrawal-page .card-block {
border: 1px solid var(--cyw-border);
border-radius: 8px;
padding: 32px;
background: var(--cyw-surface);
box-shadow: 0 1px 4px rgba(28,26,23,0.05);
}
/* ── Step indicator ─────────────────────────────────────── */
.cyp-steps {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 36px;
gap: 0;
}
.cyp-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
min-width: 72px;
}
.cyp-step-bubble {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
border: 2px solid var(--cyw-border);
background: var(--cyw-surface);
color: var(--cyw-text-muted);
flex-shrink: 0;
}
.cyp-step.active .cyp-step-bubble {
background: var(--cyw-accent);
border-color: var(--cyw-accent);
color: #fff;
}
.cyp-step.done .cyp-step-bubble {
background: var(--cyw-success);
border-color: var(--cyw-success);
color: #fff;
font-size: 15px;
}
.cyp-step-label {
font-size: 10px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--cyw-text-muted);
font-weight: 500;
white-space: nowrap;
}
.cyp-step.active .cyp-step-label {
color: var(--cyw-accent);
font-weight: 700;
}
.cyp-step.done .cyp-step-label {
color: var(--cyw-success);
}
.cyp-step-line {
height: 2px;
width: 56px;
background: var(--cyw-border);
flex-shrink: 0;
margin-bottom: 19px;
}
.cyp-step-line.done {
background: var(--cyw-success);
}
/* ── Intro block ────────────────────────────────────────── */
.cyp-intro {
font-size: 14px;
color: var(--cyw-text-muted);
line-height: 1.7;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--cyw-border);
}
.cyp-intro a {
color: var(--cyw-accent);
text-underline-offset: 3px;
}
/* ── Alerts ─────────────────────────────────────────────── */
.cyp-withdrawal-page .alert {
border-radius: 6px;
padding: 12px 16px;
font-size: 14px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.cyp-withdrawal-page .alert ul {
margin: 4px 0 0 16px;
padding: 0;
}
.cyp-withdrawal-page .alert-danger {
background: var(--cyw-error-bg);
border-color: #f0c0c7;
color: var(--cyw-error);
}
.cyp-withdrawal-page .alert-success {
background: var(--cyw-success-bg);
border-color: #b8dfc9;
color: var(--cyw-success);
}
.cyp-withdrawal-page .alert-warning {
background: var(--cyw-warning-bg);
border-color: #e8d5a8;
color: var(--cyw-warning);
}
/* ── Form elements ──────────────────────────────────────── */
.cyp-withdrawal-page .form-group {
margin-bottom: 20px;
}
.cyp-withdrawal-page .form-control-label,
.cyp-withdrawal-page fieldset.form-group legend {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--cyw-text-muted);
margin-bottom: 7px;
}
.cyp-withdrawal-page .form-control {
width: 100%;
padding: 10px 13px;
border: 1px solid var(--cyw-border);
border-radius: 6px;
font-size: 15px;
color: var(--cyw-text);
background: var(--cyw-surface);
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
appearance: none;
}
.cyp-withdrawal-page .form-control:focus {
outline: none;
border-color: var(--cyw-accent);
box-shadow: 0 0 0 3px var(--cyw-accent-light);
}
.cyp-withdrawal-page textarea.form-control {
resize: vertical;
min-height: 96px;
}
.cyp-withdrawal-page .form-text {
font-size: 12px;
color: var(--cyw-text-muted);
margin-top: 5px;
display: block;
}
/* ── Radio card buttons ─────────────────────────────────── */
.cyp-withdrawal-page fieldset.form-group {
border: none;
padding: 0;
margin-bottom: 20px;
}
.cyp-radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.cyp-radio-label {
display: flex;
align-items: center;
gap: 11px;
cursor: pointer;
padding: 12px 14px;
border: 1px solid var(--cyw-border);
border-radius: 6px;
font-size: 15px;
color: var(--cyw-text);
user-select: none;
transition: border-color 0.12s, background 0.12s;
}
.cyp-radio-label:hover {
border-color: var(--cyw-accent);
background: var(--cyw-accent-light);
}
.cyp-radio-label input[type="radio"] {
width: 17px;
height: 17px;
accent-color: var(--cyw-accent);
cursor: pointer;
flex-shrink: 0;
}
.cyp-radio-label.cyp-selected {
border-color: var(--cyw-accent);
background: var(--cyw-accent-light);
}
/* ── Buttons ────────────────────────────────────────────── */
.cyp-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--cyw-border);
flex-wrap: wrap;
}
.cyp-withdrawal-page .btn-primary {
background: var(--cyw-accent) !important;
border: 1px solid var(--cyw-accent) !important;
color: #fff !important;
padding: 11px 28px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.03em;
cursor: pointer;
transition: background 0.15s;
font-family: inherit;
}
.cyp-withdrawal-page .btn-primary:hover {
background: var(--cyw-accent-hover) !important;
border-color: var(--cyw-accent-hover) !important;
color: #fff !important;
}
.cyp-withdrawal-page .btn-secondary {
background: transparent !important;
border: 1px solid var(--cyw-border) !important;
color: var(--cyw-text-muted) !important;
padding: 11px 22px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
font-family: inherit;
}
.cyp-withdrawal-page .btn-secondary:hover {
border-color: var(--cyw-text-muted) !important;
color: var(--cyw-text) !important;
}
/* ── Summary table (confirm + success) ─────────────────── */
.cyp-summary {
border: 1px solid var(--cyw-border);
border-radius: 6px;
overflow: hidden;
margin-bottom: 24px;
}
.cyp-summary-row {
display: grid;
grid-template-columns: 176px 1fr;
border-bottom: 1px solid var(--cyw-border);
}
.cyp-summary-row:last-child {
border-bottom: none;
}
.cyp-summary-key {
padding: 11px 14px;
background: #f7f5f2;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cyw-text-muted);
border-right: 1px solid var(--cyw-border);
display: flex;
align-items: center;
}
.cyp-summary-val {
padding: 11px 14px;
font-size: 14px;
color: var(--cyw-text);
line-height: 1.5;
}
/* ── Legal fine print ───────────────────────────────────── */
.cyp-legal {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--cyw-border);
font-size: 12px;
color: var(--cyw-text-muted);
line-height: 1.65;
}
.cyp-legal a {
color: var(--cyw-accent);
text-underline-offset: 2px;
}
/* ── Success page ───────────────────────────────────────── */
.cyp-success-header {
text-align: center;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--cyw-border);
}
.cyp-success-icon {
width: 52px;
height: 52px;
background: var(--cyw-success-bg);
border: 2px solid #b8dfc9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 22px;
color: var(--cyw-success);
}
.cyp-success-header h2 {
font-family: Georgia, serif;
font-size: 20px;
font-weight: normal;
color: var(--cyw-success);
margin: 0 0 6px;
}
.cyp-success-header p {
font-size: 14px;
color: var(--cyw-text-muted);
margin: 0;
}
.cyp-print-btn {
background: none;
border: 1px solid var(--cyw-border);
color: var(--cyw-text-muted);
padding: 9px 18px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 7px;
transition: border-color 0.15s, color 0.15s;
margin-top: 16px;
}
.cyp-print-btn:hover {
border-color: var(--cyw-text-muted);
color: var(--cyw-text);
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 576px) {
.cyp-withdrawal-page .card,
.cyp-withdrawal-page .card-block {
padding: 20px 16px;
}
.cyp-summary-row {
grid-template-columns: 1fr;
}
.cyp-summary-key {
border-right: none;
border-bottom: 1px solid var(--cyw-border);
padding-bottom: 4px;
}
.cyp-step-line {
width: 28px;
}
}
@media print {
.cyp-withdrawal-page .page-header,
.cyp-steps,
.cyp-actions,
.cyp-print-btn,
.cyp-legal {
display: none !important;
}
}
views/templates/front/confirm.tpl
+69 -41
View File
@@ -3,9 +3,26 @@
<h1>{l s='Widerruf bestätigen' mod='simple_withdrawalbutton'}</h1>
</header>
<div class="cyp-steps">
<div class="cyp-step done">
<div class="cyp-step-bubble">✓</div>
<div class="cyp-step-label">{l s='Angaben' mod='simple_withdrawalbutton'}</div>
</div>
<div class="cyp-step-line done"></div>
<div class="cyp-step active">
<div class="cyp-step-bubble">2</div>
<div class="cyp-step-label">{l s='Prüfen' mod='simple_withdrawalbutton'}</div>
</div>
<div class="cyp-step-line"></div>
<div class="cyp-step">
<div class="cyp-step-bubble">3</div>
<div class="cyp-step-label">{l s='Bestätigt' mod='simple_withdrawalbutton'}</div>
</div>
</div>
<div class="card card-block">
{if $errors_list|@count > 0}
<div class="alert alert-danger">
<div class="alert alert-danger" role="alert">
<ul>
{foreach from=$errors_list item=error}
<li>{$error|escape:'html':'UTF-8'}</li>
@@ -14,57 +31,68 @@
</div>
{/if}
<p>{l s='Bitte prüfen Sie Ihre Angaben. Wenn die Angaben korrekt sind, können Sie Ihren Widerruf jetzt absenden.' mod='simple_withdrawalbutton'}</p>
<dl class="row">
<dt class="col-sm-4">{l s='Name' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$form_data.customer_name|escape:'html':'UTF-8'}</dd>
<dt class="col-sm-4">{l s='E-Mail-Adresse' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$form_data.customer_email|escape:'html':'UTF-8'}</dd>
<dt class="col-sm-4">{l s='Bestellnummer / Bestellreferenz' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$form_data.order_reference|escape:'html':'UTF-8'}</dd>
<dt class="col-sm-4">{l s='Widerruf betrifft' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">
{if $form_data.withdrawal_scope == 'partial'}
{l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
{else}
{l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
{/if}
</dd>
<p style="font-size:14px;color:var(--cyw-text-muted);margin-bottom:20px;">
{l s='Bitte prüfen Sie Ihre Angaben. Wenn alles korrekt ist, klicken Sie auf „Widerruf absenden".' mod='simple_withdrawalbutton'}
</p>
<div class="cyp-summary">
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Name' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$form_data.customer_name|escape:'html':'UTF-8'}</div>
</div>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='E-Mail' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$form_data.customer_email|escape:'html':'UTF-8'}</div>
</div>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Bestellnummer' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$form_data.order_reference|escape:'html':'UTF-8'}</div>
</div>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Betrifft' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">
{if $form_data.withdrawal_scope == 'partial'}
{l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
{else}
{l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
{/if}
</div>
</div>
{if $form_data.withdrawal_scope == 'partial'}
<dt class="col-sm-4">{l s='Betroffene Artikel / Mengen' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$form_data.withdrawal_items_text|escape:'html':'UTF-8'|nl2br nofilter}</dd>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Betroffene Artikel' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$form_data.withdrawal_items_text|escape:'html':'UTF-8'|nl2br nofilter}</div>
</div>
{/if}
{if $form_data.message != ''}
<dt class="col-sm-4">{l s='Nachricht / Bemerkung' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$form_data.message|escape:'html':'UTF-8'|nl2br nofilter}</dd>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Nachricht' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$form_data.message|escape:'html':'UTF-8'|nl2br nofilter}</div>
</div>
{/if}
</dl>
</div>
<form method="post" action="{$action_url|escape:'html':'UTF-8'}">
<input type="hidden" name="csrf_token" value="{$csrf_token|escape:'html':'UTF-8'}">
<input type="hidden" name="customer_name" value="{$form_data.customer_name|escape:'html':'UTF-8'}">
<input type="hidden" name="customer_email" value="{$form_data.customer_email|escape:'html':'UTF-8'}">
<input type="hidden" name="order_reference" value="{$form_data.order_reference|escape:'html':'UTF-8'}">
<input type="hidden" name="withdrawal_scope" value="{$form_data.withdrawal_scope|escape:'html':'UTF-8'}">
<input type="hidden" name="withdrawal_items_text" value="{$form_data.withdrawal_items_text|escape:'html':'UTF-8'}">
<input type="hidden" name="message" value="{$form_data.message|escape:'html':'UTF-8'}">
<div style="position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;" aria-hidden="true">
<input type="hidden" name="csrf_token" value="{$csrf_token|escape:'html':'UTF-8'}">
<input type="hidden" name="customer_name" value="{$form_data.customer_name|escape:'html':'UTF-8'}">
<input type="hidden" name="customer_email" value="{$form_data.customer_email|escape:'html':'UTF-8'}">
<input type="hidden" name="order_reference" value="{$form_data.order_reference|escape:'html':'UTF-8'}">
<input type="hidden" name="withdrawal_scope" value="{$form_data.withdrawal_scope|escape:'html':'UTF-8'}">
<input type="hidden" name="withdrawal_items_text" value="{$form_data.withdrawal_items_text|escape:'html':'UTF-8'}">
<input type="hidden" name="message" value="{$form_data.message|escape:'html':'UTF-8'}">
<div style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;" aria-hidden="true">
<label for="cyp_withdrawal_hp_confirm">Website</label>
<input type="text" id="cyp_withdrawal_hp_confirm" name="cyp_hp_v1" value="" tabindex="-1" autocomplete="off">
</div>
<button type="submit" name="submit_withdrawal_confirm" value="1" class="btn btn-primary">
{l s='Widerruf bestätigen' mod='simple_withdrawalbutton'}
</button>
<button type="submit" name="submit_withdrawal_back" value="1" class="btn btn-secondary" formaction="{$action_url|escape:'html':'UTF-8'}">
{l s='Angaben ändern' mod='simple_withdrawalbutton'}
</button>
<div class="cyp-actions">
<button type="submit" name="submit_withdrawal_confirm" value="1" class="btn btn-primary">
{l s='Widerruf absenden' mod='simple_withdrawalbutton'}
</button>
<button type="submit" name="submit_withdrawal_back" value="1" class="btn btn-secondary">
{l s='Angaben ändern' mod='simple_withdrawalbutton'}
</button>
</div>
</form>
</div>
</section>
views/templates/front/form.tpl
+84 -58
View File
@@ -1,23 +1,35 @@
<section class="cyp-withdrawal-page">
<header class="page-header">
<h1>{l s='Vertrag widerrufen' mod='simple_withdrawalbutton'}</h1>
<h1>{l s='Widerruf erklären' mod='simple_withdrawalbutton'}</h1>
</header>
<div class="card card-block">
<p>
{l s='Sie können hier den Vertrag zu einer Bestellung vollständig oder teilweise widerrufen. Bitte geben Sie die Bestellnummer und bei einem Teilwiderruf die betroffenen Artikel und Mengen an.' mod='simple_withdrawalbutton'}
</p>
<div class="cyp-steps">
<div class="cyp-step active">
<div class="cyp-step-bubble">1</div>
<div class="cyp-step-label">{l s='Angaben' mod='simple_withdrawalbutton'}</div>
</div>
<div class="cyp-step-line"></div>
<div class="cyp-step">
<div class="cyp-step-bubble">2</div>
<div class="cyp-step-label">{l s='Prüfen' mod='simple_withdrawalbutton'}</div>
</div>
<div class="cyp-step-line"></div>
<div class="cyp-step">
<div class="cyp-step-bubble">3</div>
<div class="cyp-step-label">{l s='Bestätigt' mod='simple_withdrawalbutton'}</div>
</div>
</div>
{if isset($revocation_url) && $revocation_url != ''}
<p>
<a href="{$revocation_url|escape:'html':'UTF-8'}" target="_blank" rel="noopener">
{l s='Unsere Widerrufsbelehrung (14-Tage-Frist)' mod='simple_withdrawalbutton'}
</a>
</p>
{/if}
<div class="card card-block">
<div class="cyp-intro">
{l s='Sie können hier den Vertrag zu einer Bestellung vollständig oder teilweise widerrufen. Bitte geben Sie die Bestellnummer und bei einem Teilwiderruf die betroffenen Artikel und Mengen an.' mod='simple_withdrawalbutton'}
{if isset($revocation_url) && $revocation_url != ''}
&nbsp;–&nbsp;<a href="{$revocation_url|escape:'html':'UTF-8'}" target="_blank" rel="noopener">{l s='Widerrufsbelehrung lesen (14-Tage-Frist)' mod='simple_withdrawalbutton'}</a>
{/if}
</div>
{if $errors_list|@count > 0}
<div class="alert alert-danger">
<div class="alert alert-danger" role="alert">
<ul>
{foreach from=$errors_list item=error}
<li>{$error|escape:'html':'UTF-8'}</li>
@@ -28,7 +40,7 @@
<form method="post" action="{$action_url|escape:'html':'UTF-8'}" class="cyp-withdrawal-form" novalidate>
<input type="hidden" name="csrf_token" value="{$csrf_token|escape:'html':'UTF-8'}">
<div style="position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;" aria-hidden="true">
<div style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;" aria-hidden="true">
<label for="cyp_withdrawal_hp">Website</label>
<input type="text" id="cyp_withdrawal_hp" name="cyp_hp_v1" value="" tabindex="-1" autocomplete="off">
</div>
@@ -37,91 +49,105 @@
<label for="cyp_withdrawal_customer_name" class="form-control-label">
{l s='Name' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
</label>
<input class="form-control" type="text" id="cyp_withdrawal_customer_name" name="customer_name" maxlength="255" required value="{$form_data.customer_name|default:''|escape:'html':'UTF-8'}">
<input class="form-control" type="text" id="cyp_withdrawal_customer_name" name="customer_name"
maxlength="255" required
value="{$form_data.customer_name|default:''|escape:'html':'UTF-8'}">
</div>
<div class="form-group">
<label for="cyp_withdrawal_customer_email" class="form-control-label">
{l s='E-Mail-Adresse für die Eingangsbestätigung' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
{l s='E-Mail für die Eingangsbestätigung' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
</label>
<input class="form-control" type="email" id="cyp_withdrawal_customer_email" name="customer_email" maxlength="255" required value="{$form_data.customer_email|default:''|escape:'html':'UTF-8'}">
<input class="form-control" type="email" id="cyp_withdrawal_customer_email" name="customer_email"
maxlength="255" required
value="{$form_data.customer_email|default:''|escape:'html':'UTF-8'}">
</div>
<div class="form-group">
<label for="cyp_withdrawal_order_reference" class="form-control-label">
{l s='Bestellnummer / Bestellreferenz' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
</label>
<input class="form-control" type="text" id="cyp_withdrawal_order_reference" name="order_reference" maxlength="64" required value="{$form_data.order_reference|default:''|escape:'html':'UTF-8'}">
<input class="form-control" type="text" id="cyp_withdrawal_order_reference" name="order_reference"
maxlength="64" required
value="{$form_data.order_reference|default:''|escape:'html':'UTF-8'}">
</div>
<fieldset class="form-group">
<legend class="form-control-label">
{l s='Widerruf betrifft' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
</legend>
<label class="custom-radio" for="cyp_withdrawal_scope_full">
<input type="radio" id="cyp_withdrawal_scope_full" name="withdrawal_scope" value="full" {if !isset($form_data.withdrawal_scope) || $form_data.withdrawal_scope != 'partial'}checked{/if}>
<span></span>
{l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
</label>
<br>
<label class="custom-radio" for="cyp_withdrawal_scope_partial">
<input type="radio" id="cyp_withdrawal_scope_partial" name="withdrawal_scope" value="partial" {if isset($form_data.withdrawal_scope) && $form_data.withdrawal_scope == 'partial'}checked{/if}>
<span></span>
{l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
</label>
<div class="cyp-radio-group">
<label class="cyp-radio-label{if !isset($form_data.withdrawal_scope) || $form_data.withdrawal_scope != 'partial'} cyp-selected{/if}" for="cyp_withdrawal_scope_full">
<input type="radio" id="cyp_withdrawal_scope_full" name="withdrawal_scope" value="full"
{if !isset($form_data.withdrawal_scope) || $form_data.withdrawal_scope != 'partial'}checked{/if}>
{l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
</label>
<label class="cyp-radio-label{if isset($form_data.withdrawal_scope) && $form_data.withdrawal_scope == 'partial'} cyp-selected{/if}" for="cyp_withdrawal_scope_partial">
<input type="radio" id="cyp_withdrawal_scope_partial" name="withdrawal_scope" value="partial"
{if isset($form_data.withdrawal_scope) && $form_data.withdrawal_scope == 'partial'}checked{/if}>
{l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
</label>
</div>
</fieldset>
<div class="form-group" id="cyp-withdrawal-items-group">
<label for="cyp_withdrawal_items_text" class="form-control-label">
{l s='Welche Artikel / Mengen möchten Sie widerrufen?' mod='simple_withdrawalbutton'}
{l s='Welche Artikel / Mengen?' mod='simple_withdrawalbutton'}
</label>
<textarea class="form-control" id="cyp_withdrawal_items_text" name="withdrawal_items_text" rows="4" maxlength="5000" placeholder="{l s='Beispiel: 1x Tomizu 720 ml, 2x Magokoro 300 ml' mod='simple_withdrawalbutton'}">{$form_data.withdrawal_items_text|default:''|escape:'html':'UTF-8'}</textarea>
<small class="form-text text-muted">
{l s='Nur bei einem Teilwiderruf erforderlich.' mod='simple_withdrawalbutton'}
</small>
<textarea class="form-control" id="cyp_withdrawal_items_text" name="withdrawal_items_text"
rows="4" maxlength="5000"
placeholder="{l s='Beispiel: 1x Tomizu 720 ml, 2x Magokoro 300 ml' mod='simple_withdrawalbutton'}">{$form_data.withdrawal_items_text|default:''|escape:'html':'UTF-8'}</textarea>
<small class="form-text">{l s='Nur bei einem Teilwiderruf erforderlich.' mod='simple_withdrawalbutton'}</small>
</div>
<div class="form-group">
<label for="cyp_withdrawal_message" class="form-control-label">
{l s='Nachricht / Bemerkung optional' mod='simple_withdrawalbutton'}
{l s='Nachricht / Bemerkung' mod='simple_withdrawalbutton'} <span style="font-weight:400;text-transform:none;letter-spacing:0;">({l s='optional' mod='simple_withdrawalbutton'})</span>
</label>
<textarea class="form-control" id="cyp_withdrawal_message" name="message" rows="4" maxlength="5000">{$form_data.message|default:''|escape:'html':'UTF-8'}</textarea>
<textarea class="form-control" id="cyp_withdrawal_message" name="message"
rows="4" maxlength="5000">{$form_data.message|default:''|escape:'html':'UTF-8'}</textarea>
</div>
<p class="small text-muted">
{l s='Pflichtfelder sind mit * gekennzeichnet. Ein Widerrufsgrund ist nicht erforderlich.' mod='simple_withdrawalbutton'}
</p>
<div class="cyp-legal">
<p>{l s='Pflichtfelder sind mit * gekennzeichnet. Ein Widerrufsgrund ist nicht erforderlich.' mod='simple_withdrawalbutton'}</p>
<p>
{l s='Ihre Angaben (Name, E-Mail-Adresse) werden zur Bearbeitung Ihrer Widerrufserklärung verarbeitet. Rechtsgrundlage: Art. 6 Abs. 1 lit. b und c DSGVO.' mod='simple_withdrawalbutton'}
{if isset($privacy_url) && $privacy_url != ''}
<a href="{$privacy_url|escape:'html':'UTF-8'}" target="_blank" rel="noopener">{l s='Datenschutzerklärung' mod='simple_withdrawalbutton'}</a>
{/if}
</p>
</div>
<p class="small text-muted">
{l s='Ihre Angaben (Name, E-Mail-Adresse) werden zur Bearbeitung Ihrer Widerrufserklärung verarbeitet. Rechtsgrundlage: Art. 6 Abs. 1 lit. b und c DSGVO.' mod='simple_withdrawalbutton'}
{if isset($privacy_url) && $privacy_url != ''}
<a href="{$privacy_url|escape:'html':'UTF-8'}" target="_blank" rel="noopener">
{l s='Datenschutzerklärung' mod='simple_withdrawalbutton'}
</a>
{/if}
</p>
<button type="submit" name="submit_withdrawal_prepare" value="1" class="btn btn-primary">
{l s='Angaben prüfen' mod='simple_withdrawalbutton'}
</button>
<div class="cyp-actions">
<button type="submit" name="submit_withdrawal_prepare" value="1" class="btn btn-primary">
{l s='Angaben prüfen →' mod='simple_withdrawalbutton'}
</button>
</div>
</form>
</div>
</section>
<script>
(function () {
var partial = document.getElementById('cyp_withdrawal_scope_partial');
var full = document.getElementById('cyp_withdrawal_scope_full');
var group = document.getElementById('cyp-withdrawal-items-group');
var partial = document.getElementById('cyp_withdrawal_scope_partial');
var full = document.getElementById('cyp_withdrawal_scope_full');
var group = document.getElementById('cyp-withdrawal-items-group');
var textarea = document.getElementById('cyp_withdrawal_items_text');
var labels = document.querySelectorAll('.cyp-radio-label');
function update() {
if (!group || !partial || !textarea) return;
var show = partial.checked;
group.style.display = show ? '' : 'none';
textarea.required = show;
var isPartial = partial.checked;
group.style.display = isPartial ? '' : 'none';
textarea.required = isPartial;
labels.forEach(function (label) {
var input = label.querySelector('input[type="radio"]');
label.classList.toggle('cyp-selected', input && input.checked);
});
}
if (partial) partial.addEventListener('change', update);
if (full) full.addEventListener('change', update);
if (full) full.addEventListener('change', update);
update();
})();
</script>
views/templates/front/success.tpl
+67 -36
View File
@@ -3,57 +3,88 @@
<h1>{l s='Widerruf übermittelt' mod='simple_withdrawalbutton'}</h1>
</header>
<div class="cyp-steps">
<div class="cyp-step done">
<div class="cyp-step-bubble">✓</div>
<div class="cyp-step-label">{l s='Angaben' mod='simple_withdrawalbutton'}</div>
</div>
<div class="cyp-step-line done"></div>
<div class="cyp-step done">
<div class="cyp-step-bubble">✓</div>
<div class="cyp-step-label">{l s='Prüfen' mod='simple_withdrawalbutton'}</div>
</div>
<div class="cyp-step-line done"></div>
<div class="cyp-step active">
<div class="cyp-step-bubble">3</div>
<div class="cyp-step-label">{l s='Bestätigt' mod='simple_withdrawalbutton'}</div>
</div>
</div>
<div class="card card-block">
{if isset($success_data.mail_ok) && $success_data.mail_ok}
<div class="alert alert-success">
{l s='Ihr Widerruf wurde übermittelt. Eine Eingangsbestätigung wurde an die angegebene E-Mail-Adresse gesendet.' mod='simple_withdrawalbutton'}
</div>
{else}
<div class="alert alert-warning">
{l s='Ihr Widerruf wurde gespeichert, aber die automatische Eingangsbestätigung konnte möglicherweise nicht versendet werden. Bitte kontaktieren Sie uns zusätzlich per E-Mail, falls Sie keine Bestätigung erhalten.' mod='simple_withdrawalbutton'}
</div>
{/if}
<div class="cyp-success-header">
<div class="cyp-success-icon" aria-hidden="true">✓</div>
{if isset($success_data.mail_ok) && $success_data.mail_ok}
<h2>{l s='Ihr Widerruf wurde erfolgreich übermittelt.' mod='simple_withdrawalbutton'}</h2>
<p>{l s='Eine Eingangsbestätigung wurde an Ihre E-Mail-Adresse gesendet.' mod='simple_withdrawalbutton'}</p>
{else}
<h2 style="color:var(--cyw-warning);">{l s='Ihr Widerruf wurde gespeichert.' mod='simple_withdrawalbutton'}</h2>
<p class="alert alert-warning" style="display:inline-block;text-align:left;margin-top:8px;">
{l s='Die automatische Eingangsbestätigung konnte möglicherweise nicht versendet werden. Bitte kontaktieren Sie uns zusätzlich per E-Mail, falls Sie keine Bestätigung erhalten.' mod='simple_withdrawalbutton'}
</p>
{/if}
</div>
<dl class="row">
<div class="cyp-summary">
{if isset($success_data.created_at)}
<dt class="col-sm-4">{l s='Eingang:' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$success_data.created_at|escape:'html':'UTF-8'}</dd>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Eingangsdatum' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$success_data.created_at|escape:'html':'UTF-8'}</div>
</div>
{/if}
{if isset($success_data.customer_email)}
<dt class="col-sm-4">{l s='E-Mail-Adresse:' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$success_data.customer_email|escape:'html':'UTF-8'}</dd>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='E-Mail' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$success_data.customer_email|escape:'html':'UTF-8'}</div>
</div>
{/if}
{if isset($success_data.order_reference) && $success_data.order_reference != ''}
<dt class="col-sm-4">{l s='Bestellnummer / Bestellreferenz' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$success_data.order_reference|escape:'html':'UTF-8'}</dd>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Bestellnummer' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$success_data.order_reference|escape:'html':'UTF-8'}</div>
</div>
{/if}
{if isset($success_data.withdrawal_scope)}
<dt class="col-sm-4">{l s='Widerruf betrifft' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">
{if $success_data.withdrawal_scope == 'partial'}
{l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
{else}
{l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
{/if}
</dd>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Betrifft' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">
{if $success_data.withdrawal_scope == 'partial'}
{l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
{else}
{l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
{/if}
</div>
</div>
{/if}
{if isset($success_data.withdrawal_items_text) && $success_data.withdrawal_items_text != ''}
<dt class="col-sm-4">{l s='Betroffene Artikel / Mengen' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$success_data.withdrawal_items_text|escape:'html':'UTF-8'|nl2br nofilter}</dd>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Betroffene Artikel' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$success_data.withdrawal_items_text|escape:'html':'UTF-8'|nl2br nofilter}</div>
</div>
{/if}
{if isset($success_data.message) && $success_data.message != ''}
<dt class="col-sm-4">{l s='Nachricht / Bemerkung' mod='simple_withdrawalbutton'}</dt>
<dd class="col-sm-8">{$success_data.message|escape:'html':'UTF-8'|nl2br nofilter}</dd>
<div class="cyp-summary-row">
<div class="cyp-summary-key">{l s='Nachricht' mod='simple_withdrawalbutton'}</div>
<div class="cyp-summary-val">{$success_data.message|escape:'html':'UTF-8'|nl2br nofilter}</div>
</div>
{/if}
</dl>
</div>
<p class="small text-muted">
<div class="cyp-legal">
{l s='Diese Bestätigung betrifft nur den Eingang Ihrer Widerrufserklärung. Die weitere Bearbeitung und Prüfung erfolgt separat.' mod='simple_withdrawalbutton'}
</p>
</div>
<button class="cyp-print-btn" onclick="window.print()" type="button">
⎙ {l s='Seite drucken / als PDF speichern' mod='simple_withdrawalbutton'}
</button>
</div>
</section>