Filtrado Dinámico

Los usuarios no quieren desplazarse por todos los servicios. Quieren filtrar por categoría — mostrame solo el cuidado de jardín, solo las consultas. Esto combina todo lo que aprendiste: estado para el filtro seleccionado, condiciones para los estados vacíos y bucles para renderizar los resultados.

Qué Aprenderás

Rastrear la categoría seleccionada con estado
Filtrar arrays según la selección
Manejar estados vacíos filtrados
Construir una UI de filtros completa

Los Bloques de Construcción

Necesitamos:

Datos de servicios — La lista completa de servicios
Estado de categoría seleccionada — Qué filtro está activo
Servicios filtrados — Calculados a partir de la lista completa
Botones de categoría — Para cambiar el filtro
Visualización de servicios — Los resultados filtrados

Configurar los Datos

Comienza con servicios que tengan información de categoría:

<script>
  const services = [
    { id: '1', slug: 'lawn-mowing', name: 'Lawn Mowing', category: 'lawn-care', price: 50 },
    { id: '2', slug: 'hedge-trimming', name: 'Hedge Trimming', category: 'lawn-care', price: 75 },
    { id: '3', slug: 'garden-consultation', name: 'Garden Consultation', category: 'consultation', price: 100 },
    { id: '4', slug: 'tree-pruning', name: 'Tree Pruning', category: 'tree-care', price: 150 },
    { id: '5', slug: 'patio-cleaning', name: 'Patio Cleaning', category: 'cleaning', price: 80 }
  ];
  
  const categories = [
    { id: 'all', name: 'All Services' },
    { id: 'lawn-care', name: 'Lawn Care' },
    { id: 'tree-care', name: 'Tree Care' },
    { id: 'consultation', name: 'Consultation' },
    { id: 'cleaning', name: 'Cleaning' }
  ];
  
  let selectedCategory = $state('all');
</script>

Calcular los Servicios Filtrados

Usa $derived para filtrar automáticamente según la selección:

<script>
  // ... services and categories data ...
  
  let selectedCategory = $state('all');
  
  let filteredServices = $derived(
    selectedCategory === 'all'
      ? services
      : services.filter(s => s.category === selectedCategory)
  );
</script>

Cuando selectedCategory cambia, filteredServices se recalcula automáticamente. Cubriremos $derived en profundidad en el Módulo 10 — por ahora, sabé que crea valores calculados que se actualizan de forma reactiva.

Construir la UI de Filtros

Crea botones para cada categoría:

<div class="category-filters">
  {#each categories as category (category.id)}
    <button
      class:active={selectedCategory === category.id}
      onclick={() => selectedCategory = category.id}
    >
      {category.name}
    </button>
  {/each}
</div>

La directiva class:active agrega la clase active cuando la condición es verdadera — resaltando el filtro seleccionado.

Mostrar los Resultados Filtrados

Combina el filtro con la lista de servicios:

<div class="services-list">
  {#each filteredServices as service (service.id)}
    <article class="service-card">
      <h3>{service.name}</h3>
      <p class="category">{service.category}</p>
      <p class="price">${service.price}</p>
      <a href="/services/{service.slug}">View Details</a>
    </article>
  {:else}
    <div class="empty-state">
      <p>No services found in this category.</p>
      <button onclick={() => selectedCategory = 'all'}>
        View All Services
      </button>
    </div>
  {/each}
</div>

El {:else} maneja los resultados filtrados vacíos.

El Componente Completo

Aquí está todo junto:

<!-- filename: src/routes/services/+page.svelte -->
<script>
  const services = [
    { id: '1', slug: 'lawn-mowing', name: 'Lawn Mowing', category: 'lawn-care', price: 50 },
    { id: '2', slug: 'hedge-trimming', name: 'Hedge Trimming', category: 'lawn-care', price: 75 },
    { id: '3', slug: 'garden-consultation', name: 'Garden Consultation', category: 'consultation', price: 100 },
    { id: '4', slug: 'tree-pruning', name: 'Tree Pruning', category: 'tree-care', price: 150 },
    { id: '5', slug: 'patio-cleaning', name: 'Patio Cleaning', category: 'cleaning', price: 80 }
  ];
  
  const categories = [
    { id: 'all', name: 'All Services' },
    { id: 'lawn-care', name: 'Lawn Care' },
    { id: 'tree-care', name: 'Tree Care' },
    { id: 'consultation', name: 'Consultation' },
    { id: 'cleaning', name: 'Cleaning' }
  ];
  
  let selectedCategory = $state('all');
  
  let filteredServices = $derived(
    selectedCategory === 'all'
      ? services
      : services.filter(s => s.category === selectedCategory)
  );
</script>

<h1>Our Services</h1>

<div class="category-filters">
  {#each categories as category (category.id)}
    <button
      class:active={selectedCategory === category.id}
      onclick={() => selectedCategory = category.id}
    >
      {category.name}
    </button>
  {/each}
</div>

<p class="results-count">
  Showing {filteredServices.length} of {services.length} services
</p>

<div class="services-list">
  {#each filteredServices as service (service.id)}
    <article class="service-card">
      <h3>
        <a href="/services/{service.slug}">{service.name}</a>
      </h3>
      <span class="category-badge">{service.category}</span>
      <p class="price">${service.price}</p>
    </article>
  {:else}
    <div class="empty-state">
      <p>No services found in this category.</p>
      <button onclick={() => selectedCategory = 'all'}>
        View All Services
      </button>
    </div>
  {/each}
</div>

<style>
  .category-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }
  
  .category-filters button {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: white;
    border-radius: 20px;
    cursor: pointer;
  }
  
  .category-filters button:hover {
    border-color: #007bff;
  }
  
  .category-filters button.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
  }
  
  .results-count {
    color: #666;
    margin-bottom: 1rem;
  }
  
  .services-list {
    display: grid;
    gap: 1rem;
  }
  
  .service-card {
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
  }
  
  .service-card h3 {
    margin: 0 0 0.5rem 0;
  }
  
  .service-card a {
    color: #333;
    text-decoration: none;
  }
  
  .service-card a:hover {
    color: #007bff;
  }
  
  .category-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #666;
  }
  
  .price {
    font-weight: bold;
    color: #007bff;
  }
  
  .empty-state {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
  }
</style>

Probar la Interacción

Cargá la página de servicios — se muestran los 5 servicios
Hacé clic en "Lawn Care" — se muestran 2 servicios
Hacé clic en "Tree Care" — se muestra 1 servicio
Hacé clic en "Consultation" — se muestra 1 servicio
Hacé clic en "All Services" — volvés a los 5 servicios

El conteo se actualiza, la lista se filtra y el botón activo se resalta. Todo reactivo, todo automático.

Errores Comunes

Mutar el Array Original

<!-- ❌ Don't modify the source array -->
let filteredServices = $derived(
  services.filter(s => s.category === selectedCategory)
);
// If you did: services = services.filter(...) — you'd lose data!

<!-- ✅ Filter returns a new array, original is preserved -->
let filteredServices = $derived(
  services.filter(s => s.category === selectedCategory)
);

Olvidar el Estado Vacío

Siempre manejá el caso en que el filtrado produce cero resultados. Los usuarios necesitan retroalimentación.

No Usar Keys

<!-- ❌ Without keys, filtering can cause glitches -->
{#each filteredServices as service}

<!-- ✅ With keys, each item is tracked correctly -->
{#each filteredServices as service (service.id)}

Resumen

El filtrado combina estado, valores derivados, condiciones y bucles. La categoría seleccionada es estado, los servicios filtrados son derivados, el caso vacío es una condición y el renderizado es un bucle. Estos primitivos se componen en características interactivas poderosas.

Puntos clave:

Usá estado para el filtro seleccionado
Usá $derived para calcular los resultados filtrados
Siempre manejá los estados filtrados vacíos
Usá bloques each con clave para listas dinámicas

¡Módulo Completo! 🎉

Terminaste el Módulo 5: Flujo de Control. BookIt ahora tiene:

Comprensión de los bloques de flujo de control de Svelte
Renderizado condicional con {#if}, {:else} y {:else if}
Manejo de estados vacíos para una mejor UX
Renderizado de listas con {#each}
Listas con clave para actualizaciones correctas
Filtrado de categorías interactivo

Lo que aprendiste:

La sintaxis de plantillas de Svelte para el flujo de control
{#if} / {:else} / {:else if} para contenido condicional
Diseñar estados vacíos considerados
{#each} para renderizar arrays
Keys para el seguimiento correcto de listas
Combinar patrones de flujo de control

Próximos Pasos

Los formularios necesitan más que entradas de texto. Continuá con el Módulo 6: Vinculación de Datos para explorar checkboxes, botones de radio, selects y más.