// Funktion zum Aktualisieren der Anzahl function updateAnzahl(element, increment, event) { event.preventDefault(); // Verhindert das Standardverhalten (z.B. Textauswahl) event.stopPropagation(); // Verhindert die Weiterleitung des Events let anzahlElement = element.closest('.product-item').querySelector('.anzahl'); if (anzahlElement) { let currentValue = Number(anzahlElement.value); let newValue = currentValue + increment; if (newValue >= 1) { // Stellen Sie sicher, dass der Wert nicht unter 1 fällt anzahlElement.value = newValue; updateSummary(); // Aktualisiert die Zusammenfassung nach der Änderung der Anzahl } } } // Funktion zur Überprüfung und Setzen des Pflichtfeldes function checkRequiredFields() { document.querySelectorAll('.product-item').forEach(item => { let inputFieldContainer = item.querySelector('.input-field-card'); // Container mit der Klasse input-field-card if (inputFieldContainer) { let inputField = inputFieldContainer.querySelector('input'); // Das input-Feld innerhalb des Containers if (inputField) { if (item.classList.contains('product-item-checked')) { inputField.setAttribute('required', 'true'); // Macht das Feld zum Pflichtfeld inputField.setAttribute('data-required', 'true'); // Setzt das benutzerdefinierte Attribut data-required auf true } else { inputField.removeAttribute('required'); // Entfernt die Pflichtfeldanforderung inputField.removeAttribute('data-required'); // Entfernt das benutzerdefinierte Attribut data-required } } } // Gleiche Logik für das .input-field-card-donation Feld let donationFieldContainer = item.querySelector('.input-field-card-donation'); if (donationFieldContainer) { let donationField = donationFieldContainer.querySelector('input'); if (donationField) { if (item.classList.contains('product-item-checked')) { donationField.setAttribute('required', 'true'); donationField.setAttribute('data-required', 'true'); } else { donationField.removeAttribute('required'); donationField.removeAttribute('data-required'); } } } }); } // Initialisierung der Event Listener für Buttons, Checkboxen und Input-Felder function initializeButtonsAndFields() { // Event Listener für den count-plus Button document.querySelectorAll('.count-plus').forEach(button => { button.addEventListener('click', function(event) { updateAnzahl(this, 1, event); }); }); // Event Listener für den count-minus Button document.querySelectorAll('.count-minus').forEach(button => { button.addEventListener('click', function(event) { updateAnzahl(this, -1, event); }); }); // Event Listener für die .auswahl Checkboxen document.querySelectorAll('.auswahl').forEach(checkbox => { checkbox.addEventListener('change', function() { let parentItem = this.closest('.product-item'); if (this.checked) { parentItem.classList.add('product-item-checked'); // Fügt die Klasse hinzu, wenn ausgewählt } else { parentItem.classList.remove('product-item-checked'); // Entfernt die Klasse, wenn abgewählt } updateSummary(); checkRequiredFields(); // Überprüft, ob Felder Pflichtfelder sein müssen }); }); // Event Listener für das .input-field-card Feld document.querySelectorAll('.input-field-card input').forEach(inputField => { inputField.addEventListener('input', function() { updateSummary(); // Aktualisiert die Zusammenfassung, wenn sich der Wert im Feld ändert }); }); // Event Listener für das .input-field-card-donation Feld document.querySelectorAll('.input-field-card-donation input').forEach(donationField => { donationField.addEventListener('input', function() { updateSummary(); // Aktualisiert die Zusammenfassung, wenn sich der Wert im Spendenfeld ändert }); }); } // Funktion zur Formatierung der Zahl mit Tausendertrennzeichen function formatNumber(number) { return number.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); // Formatierung für die Schweiz mit 2 Dezimalstellen } // Funktion zur Aktualisierung der Zusammenfassung function updateSummary() { let selectedTickets = document.querySelectorAll('.product-item .auswahl:checked'); let priceLiveValues = document.querySelectorAll('.price-total'); // Für mehrere Felder mit der gleichen Klasse let ticketSummaries = document.querySelectorAll('.product-summary'); // Für mehrere Felder mit der gleichen Klasse let hiddenSummaries = document.querySelectorAll('.product-summary-hidden'); // Elemente mit der Klasse .product-summary-hidden let total = 0; let ticketsOutputHTML = ''; // Berechne den Gesamtpreis der ausgewählten Tickets und aktualisiere die Zusammenfassung selectedTickets.forEach(ticket => { let ticketPrice = Number(ticket.getAttribute('data-calculation-value')); // Preis aus dem data-calculation-value Attribut der Checkbox let ticketName = ticket.value; // Name aus dem value Attribut der Checkbox let ticketAnzahlElement = ticket.closest('.product-item').querySelector('.anzahl'); let inputFieldValue = ''; // Initialisiere den Wert aus dem input-field-card let donationFieldValue = ''; // Initialisiere den Wert aus dem input-field-card-donation // Hole den Wert aus dem input-field-card, falls vorhanden let inputFieldContainer = ticket.closest('.product-item').querySelector('.input-field-card'); if (inputFieldContainer) { let inputField = inputFieldContainer.querySelector('input'); if (inputField) { inputFieldValue = inputField.value.trim(); // Trim für sauberen Text } } // Hole den Wert aus dem input-field-card-donation, falls vorhanden let donationFieldContainer = ticket.closest('.product-item').querySelector('.input-field-card-donation'); if (donationFieldContainer) { let donationField = donationFieldContainer.querySelector('input'); if (donationField) { let donationValue = parseFloat(donationField.value.trim().replace(/[^\d.-]/g, '')); // Entferne unerwünschte Zeichen if (!isNaN(donationValue)) { donationFieldValue = formatNumber(donationValue) + '.- CHF'; total += donationValue; // Addiere den Spendenwert zur Gesamtsumme hinzu } } } let ticketSummaryText = ''; // Wenn Anzahl vorhanden ist, füge sie hinzu if (ticketAnzahlElement) { let ticketAnzahl = Number(ticketAnzahlElement.value); ticketSummaryText += `${ticketAnzahl} x `; } // Füge den Ticketnamen hinzu ticketSummaryText += `${ticketName}`; // Wenn der Input-Feld-Wert vorhanden ist, füge ihn hinzu if (inputFieldValue) { ticketSummaryText += `, Flightname: ${inputFieldValue}`; } // Wenn der Spendenfeld-Wert vorhanden ist, füge ihn als "Gesamtwert: XXX.- CHF" hinzu if (donationFieldValue) { ticketSummaryText += `, Gesamtwert: ${donationFieldValue}`; } // Füge die komplette Zusammenfassung zum HTML hinzu ticketsOutputHTML += `

${ticketSummaryText}

`; // Berechne den Gesamtpreis if (ticketAnzahlElement) { let ticketTotal = ticketPrice * Number(ticketAnzahlElement.value); total += ticketTotal; } else { total += ticketPrice; // Falls keine Anzahl vorhanden ist, addiere nur den Einzelpreis } // Logge die Zusammenfassung console.log(`Zusammenfassung: ${ticketSummaryText}`); }); // Aktualisiere den Gesamtpreis auf der Webseite für alle Elemente mit der Klasse .price-total priceLiveValues.forEach(priceLiveValue => { priceLiveValue.innerHTML = `${priceLiveValue.dataset.prefix || ''} ${formatNumber(total)} CHF`; }); console.log(`Gesamtpreis: ${formatNumber(total)} CHF`); // Überprüfen und Aktualisieren der Zusammenfassung für Tickets für alle Elemente mit der Klasse .product-summary ticketSummaries.forEach(ticketSummary => { if (ticketsOutputHTML === '') { ticketsOutputHTML = '

Keine Produkte ausgewählt

'; } ticketSummary.innerHTML = ticketsOutputHTML; }); // Aktualisiere den value der .product-summary-hidden Input-Felder mit Zeilenumbrüchen hiddenSummaries.forEach(hiddenSummary => { hiddenSummary.value = ticketsOutputHTML .replace(/<\/li>

/g, '
') // Ersetze jedes

mit einem
.replace(/<\/?li>/g, ''); // Entferne die

-Tags }); } // Initialisierung beim Laden der Seite initializeButtonsAndFields(); // Initiale Zusammenfassungsaktualisierung und Pflichtfeldprüfung updateSummary(); checkRequiredFields();

Hockey Trophy 2022