Filtrado Dinámico

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

Lo Que Aprenderás

Rastrear la categoría seleccionada con estado
Filtrar arreglos según la selección
Manejar estados vacíos filtrados
Construir una UI de filtro 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, sabe que crea valores calculados que se actualizan de forma reactiva.

Construir la UI de Filtro

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 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

Cargar la página de servicios — se muestran los 5 servicios
Hacer clic en "Lawn Care" — se muestran 2 servicios
Hacer clic en "Tree Care" — se muestra 1 servicio
Hacer clic en "Consultation" — se muestra 1 servicio
Hacer clic en "All Services" — volver 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 Arreglo 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 maneja 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 funcionalidades interactivas poderosas.

Puntos clave:

Usa estado para el filtro seleccionado
Usa $derived para calcular los resultados filtrados
Siempre maneja los estados de filtrado vacíos
Usa bloques each con keys 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 mejor UX
Renderizado de listas con {#each}
Listas con keys para actualizaciones correctas
Filtrado interactivo por categoría

Lo que aprendiste:

La sintaxis de plantillas de Svelte para flujo de control
{#if} / {:else} / {:else if} para contenido condicional
Diseñar estados vacíos bien pensados
{#each} para renderizar arreglos
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. Continúa con el Módulo 6: Enlace de Datos para explorar checkboxes, botones de radio, selects y más.