Zum Inhalt wechseln
// Array mit allen verfügbaren Tags
const availableTags = [
'Streetwear',
'Minimalistic',
'Classic',
'Experimental',
'Alternative',
'Techwear',
'Eco-Friendly'
];
document.addEventListener('DOMContentLoaded', function() {
// Filter-Container erstellen
const filterContainer = document.querySelector('.filter-container');
// "Alle" Button zuerst
const allButton = document.createElement('button');
allButton.className = 'filter-button active';
allButton.setAttribute('data-filter', 'all');
allButton.textContent = 'Alle';
filterContainer.appendChild(allButton);
// Tags als Buttons hinzufügen
availableTags.forEach(tag => {
const button = document.createElement('button');
button.className = 'filter-button';
button.setAttribute('data-filter', tag.toLowerCase());
button.textContent = tag;
filterContainer.appendChild(button);
});
// Filter Logik
const filterButtons = document.querySelectorAll('.filter-button');
const shopCards = document.querySelectorAll('.shop-card');
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// Active State aktualisieren
filterButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
const filterValue = this.getAttribute('data-filter');
// Shops filtern
shopCards.forEach(card => {
const cardTags = card.getAttribute('data-tags').split(',');
if (filterValue === 'all' || cardTags.includes(filterValue)) {
card.style.display = 'block';
card.style.animation = 'fadeIn 0.5s ease';
} else {
card.style.display = 'none';
}
});
});
});
});
// Animation
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
