Built on WIX Headless

Blog / how-to

Cómo añadir filtros de categoría a un Wix Repeater

· filtros de categoría Wix Repeater

Cómo añadir filtros de categoría a un Wix Repeater

Los filtros de categoría son cómo los visitantes acotan una cuadrícula de cards sin salir de la página: «Muéstrame solo Marketing», «solo Austin», «solo workshops». En Wix, eso suele significar una colección CMS alimentando un Repeater, más controles que filtran el mismo dataset o widget.

Abajo: un ejemplo concreto, lo que Studio puede hacer de forma nativa, dónde Harmony difiere y cómo configurarlo con CMS for Harmony (funciona en Editor, Studio y Harmony). En esa app, «cards» significa el layout Repeater—no un widget aparte.

Más contexto: Guía de Wix CMS.

Qué vas a construir

Una colección Programs con Name, Category, Summary e Image. Un Repeater muestra las cards. Los visitantes eligen una categoría y la cuadrícula se actualiza.

Ruta nativa (Studio / Editor)

La documentación CMS de Wix cubre conectar dropdowns, radio buttons o selection tags a un dataset para que los visitantes filtren un repeater, gallery o table—a menudo sin código. Cada input se conecta a un campo; al elegir un valor solo se muestran los ítems que coinciden. Puedes añadir botones de reset o «apply filter» si quieres ese comportamiento.

Esa ruta es un buen default cuando tu equipo ya construye con datasets en Studio.

Harmony

Los Repeaters conectados nativos no exponen hoy la misma UI de filtro de categoría para visitantes en una sola lista. Los builders o mantienen un Repeater por categoría (filtros del lado del editor) o usan una app. Detalles: Limitaciones del CMS en Harmony.

Repeater de CMS for Harmony

  1. Crea la colección y añade ítems en al menos dos categorías (las categorías vacías hacen que los filtros se sientan rotos).
  2. Añade el Repeater, conecta la colección y mapea Name, Image y Summary.
  3. Abre Search & filters → activa Show filters.
  4. Añade un filtro en Category:
    • Coincide con equals (o contains, según cómo guardes los tags)
    • Usa Show filter para que los visitantes puedan elegir el valor
  5. Pon Filters display en Top (encima de la cuadrícula) o Side (sidebar; se apila en pantallas pequeñas).
  6. Publica y recorre cada categoría como visitante.

Opcional: el modo Choose value aplica una regla fija sin UI de visitante (por ejemplo, solo ítems marcados Published).

Referencia de panel: Search & filters. How-to más amplio: Resumen de search and filters.

Comparación rápida

Native HarmonyCMS for Harmony
Control de categoría de visitante en un RepeaterLimited hoyShow filter en Category
Evitar Repeaters duplicados por categoríaDifícilUn Repeater + filter
EditorsHarmonyEditor, Studio, Harmony

Casos límite que conviene conocer

SituaciónTip
Categoría vacíaSiembra ítems de ejemplo antes de demostrar filtros
Docenas de categoríasPrefiere layout Side; añade search también
Las categorías viven en una colección relacionadaUsa reference filters y un Display field—ver docs
El color es la «categoría»Usa Color swatches

Siguientes pasos

Relacionado

Actualizado:

¿Listo para probarlo en Harmony? Consigue un sitio de inicio gratis CMS for Harmony