Arne Weiss
058937bd64
- Fix CSS loading: register stylesheet via actionFrontControllerSetMedia hook instead of initContent() — guaranteed to fire before page render - Upgrade script registers new hook on existing installations - Feature 1: pre-fill order_reference from ?ref= URL parameter - Feature 2: pre-fill customer name/email from logged-in account when navigating with ?ref= (already worked; now order ref is also pre-filled) - Feature 4: compute Widerrufsfrist (order date +14 days) from DB and display on form (when ref in URL), confirm, and success pages - Feature 3: EN mail templates were already present Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
167 lines
8.2 KiB
Smarty
167 lines
8.2 KiB
Smarty
<section class="cyp-withdrawal-page">
|
||
<header class="page-header">
|
||
<h1>{l s='Widerruf erklären' mod='simple_withdrawalbutton'}</h1>
|
||
</header>
|
||
|
||
<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>
|
||
|
||
<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 != ''}
|
||
– <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 isset($withdrawal_deadline) && $withdrawal_deadline != ''}
|
||
<div class="cyp-deadline-notice" style="
|
||
display:flex; align-items:center; gap:10px; background:#eef2f8;
|
||
border:1px solid #c5d4eb; border-radius:6px; padding:11px 14px;
|
||
font-size:13px; color:var(--cyw-accent); margin-bottom:24px;">
|
||
<span style="font-size:16px;">📅</span>
|
||
<span>
|
||
{l s='Widerrufsfrist (14 Tage ab Bestelldatum): bis' mod='simple_withdrawalbutton'}
|
||
<strong>{$withdrawal_deadline|escape:'html':'UTF-8'}</strong>
|
||
</span>
|
||
</div>
|
||
{/if}
|
||
|
||
{if $errors_list|@count > 0}
|
||
<div class="alert alert-danger" role="alert">
|
||
<ul>
|
||
{foreach from=$errors_list item=error}
|
||
<li>{$error|escape:'html':'UTF-8'}</li>
|
||
{/foreach}
|
||
</ul>
|
||
</div>
|
||
{/if}
|
||
|
||
<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">
|
||
<label for="cyp_withdrawal_hp">Website</label>
|
||
<input type="text" id="cyp_withdrawal_hp" name="cyp_hp_v1" value="" tabindex="-1" autocomplete="off">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<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'}">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="cyp_withdrawal_customer_email" class="form-control-label">
|
||
{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'}">
|
||
</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'}">
|
||
</div>
|
||
|
||
<fieldset class="form-group">
|
||
<legend class="form-control-label">
|
||
{l s='Widerruf betrifft' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
|
||
</legend>
|
||
<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?' 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">{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' 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>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<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 textarea = document.getElementById('cyp_withdrawal_items_text');
|
||
var labels = document.querySelectorAll('.cyp-radio-label');
|
||
|
||
function update() {
|
||
if (!group || !partial || !textarea) return;
|
||
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);
|
||
update();
|
||
})();
|
||
</script>
|