106 lines
4.3 KiB
JavaScript
106 lines
4.3 KiB
JavaScript
// US01-02: Paketdetails und Coaching-Rabatt im Dialog (Vorlage: Prototyp)
|
|
'use strict';
|
|
|
|
(() => {
|
|
const section = document.querySelector('#angebote');
|
|
if (!section) return;
|
|
|
|
const packages = {
|
|
starter: {
|
|
name: 'Starter',
|
|
title: 'Dein erster guter Schritt.',
|
|
description: 'Du möchtest wissen, wo du stehst und was du konkret verändern kannst? Starter schafft eine persönliche Grundlage für deinen Einstieg.',
|
|
features: [
|
|
'Gemeinsames Erstgespräch zu Zielen, Training, Alltag und Vorlieben.',
|
|
'Auswertung eines Ernährungsprotokolls mit Blick auf deine bisherigen Gewohnheiten.',
|
|
'Persönliche Handlungsempfehlungen für Essen und Trinken im Alltag und rund um dein Training.',
|
|
'Abschlussgespräch zur Einordnung deiner nächsten Schritte.'
|
|
]
|
|
},
|
|
standard: {
|
|
name: 'Standard',
|
|
title: 'Aus guten Vorsätzen wird dein Plan.',
|
|
description: 'Du möchtest aus einzelnen Empfehlungen eine verlässliche Routine machen? Standard verbindet die Bestandsaufnahme mit einem individuellen Plan und persönlichem Feedback.',
|
|
features: [
|
|
'Alle vorgeschlagenen Leistungen aus Starter.',
|
|
'Ein individueller Ernährungsrahmen für Trainings- und Ruhetage.',
|
|
'Praktische Mahlzeitenideen, abgestimmt auf deine Vorlieben und deinen Alltag.',
|
|
'Feedbackgespräche, um Erfahrungen zu besprechen und den Plan gemeinsam anzupassen.'
|
|
]
|
|
},
|
|
premium: {
|
|
name: 'Premium',
|
|
title: 'Dein Ziel. Ganz persönlich.',
|
|
description: 'Du möchtest deine Ernährung gezielt auf sportliche Herausforderungen abstimmen? Premium sieht eine besonders enge Begleitung bis in die Wettkampfvorbereitung vor.',
|
|
features: [
|
|
'Alle vorgeschlagenen Leistungen aus Standard.',
|
|
'Eine individuelle Strategie für Essen und Trinken vor, während und nach Wettkämpfen.',
|
|
'Erprobung der Verpflegung im Training und Anpassung an deine Erfahrungen.',
|
|
'Engmaschiger persönlicher Austausch und laufende Anpassungen an deine Trainingsphasen.'
|
|
]
|
|
}
|
|
};
|
|
|
|
const dialog = section.querySelector('#package-dialog');
|
|
const select = section.querySelector('#coaching-select');
|
|
const result = section.querySelector('#discount-result');
|
|
let trigger = null;
|
|
|
|
function updateDiscount() {
|
|
const rate = Number(select.value);
|
|
result.replaceChildren();
|
|
if (rate) {
|
|
const strong = document.createElement('strong');
|
|
strong.textContent = `${rate} % Rabatt`;
|
|
result.append(strong, document.createTextNode(' auf deine Ernährungsberatung.'));
|
|
} else {
|
|
result.textContent = 'Mit Coaching 1zu1: Starter 3 %, Standard 5 %, Premium 10 % Rabatt.';
|
|
}
|
|
}
|
|
|
|
function openDetails(key, button) {
|
|
trigger = button;
|
|
const data = packages[key];
|
|
|
|
section.querySelector('#dialog-eyebrow').textContent =
|
|
data ? `Ernährungsberatung · ${data.name}` : 'Coaching 1zu1 · Bonusregelung';
|
|
section.querySelector('#dialog-title').textContent =
|
|
data ? data.title : 'Dein Coaching zahlt sich aus.';
|
|
section.querySelector('#dialog-description').textContent = data
|
|
? data.description
|
|
: 'Dein bestehendes Coaching-Paket bringt dir einen Preisvorteil bei der Ernährungsberatung. Wähle es aus und sieh deinen Rabatt.';
|
|
|
|
section.querySelector('#detail-section').hidden = !data;
|
|
const list = section.querySelector('#dialog-features');
|
|
list.replaceChildren();
|
|
if (data) {
|
|
data.features.forEach((text) => {
|
|
const li = document.createElement('li');
|
|
li.textContent = text;
|
|
list.append(li);
|
|
});
|
|
}
|
|
|
|
updateDiscount();
|
|
dialog.showModal();
|
|
}
|
|
|
|
section.querySelectorAll('[data-package]').forEach((button) => {
|
|
button.addEventListener('click', () => openDetails(button.dataset.package, button));
|
|
});
|
|
|
|
select.addEventListener('change', updateDiscount);
|
|
|
|
section.querySelectorAll('.close-dialog, .dialog-done').forEach((button) => {
|
|
button.addEventListener('click', () => dialog.close());
|
|
});
|
|
|
|
// Klick auf den abgedunkelten Hintergrund schließt den Dialog
|
|
dialog.addEventListener('click', (event) => {
|
|
if (event.target === dialog) dialog.close();
|
|
});
|
|
|
|
// Fokus zurück auf den auslösenden Button (Barrierefreiheit)
|
|
dialog.addEventListener('close', () => trigger?.focus());
|
|
})();
|