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