Page Rappels Produits.
Refonte UX d’une page critique : recherche, filtres et navigation par année pour rendre 48+ rappels consultables.
htmlcssjavascript
AvantAprès
Challenges
- 01.Gérer 48+ produits rappelés sur plusieurs années
- 02.Permettre une recherche rapide et intuitive
- 03.Différencier visuellement les rappels en cours des archivés
- 04.Créer une navigation claire dans l'historique
Solutions
- 01.Recherche JS avec filtrage en temps réel
- 02.Filtres par statut (Tous / En cours / Archivés) avec compteurs
- 03.Accordéons par année pour l'historique
- 04.Cards produits avec badges de statut et animations
Filtrage en temps réeljavascript
1function filterRecalls() {2 const searchTerm = searchInput.value.toLowerCase();3 const activeFilter = document.querySelector('.recall-toolbar__filter--active').dataset.filter;45 const filtered = recalls.filter(recall => {6 const matchesSearch = recall.title.toLowerCase().includes(searchTerm)7 || recall.description.toLowerCase().includes(searchTerm);89 const matchesFilter = activeFilter === 'all'10 || (activeFilter === 'current' && recall.status === 'current')11 || (activeFilter === 'archived' && recall.status === 'archived');1213 return matchesSearch && matchesFilter;14 });1516 renderCards(filtered);17 updateCounts();18}
→ SuiteAutres projets