[Wix Velo] Filters (Dropdowns, Inputs) and Search on Repeater Not Working (Home to Dynamic Page)

Ask the community
, , ,
1

Hello everyone,

I need help with implementing filters on my Wix site. I have a homepage (/) with a search form (dropdowns, text inputs, and price range inputs) and a dynamic page (/properties-1) that displays a repeater connected to the #dataset12dataset (from the Properties collection).

The core issue is that the filtering functionality is not working:

  1. Homepage Dropdowns and Inputs: They don’t populate their options dynamically from the database, and when I try to “Search,” they either don’t redirect correctly or the filters aren’t applied on the dynamic page.
  2. Dynamic Page Filters: The dropdowns and inputs on the /properties-1 page also don’t populate with database options, nor do they restore the values passed via the URL. The repeater filtering isn’t applied, and the “No results” message (#textNoResults) isn’t showing/hiding correctly.
  3. Header Search Magnifying Glass: The functionality to show/hide the header search input (#inputBusquedaHeader) when clicking the magnifying glass (#btnLupaHeader) is also non-operational.
  4. Console Errors: I’ve been seeing errors like no-undef: 'poblarDropdownTipoInmueble' is not defined and Parsing error: Unexpected token in the console on the homepage.

Details of my setup:

  • Database Collection: Properties
  • Key Element IDs (confirmed):
    • Homepage: #dropdownTipoInmueble, #dropdownDireccion, #inputColonia, #dropdownHabitaciones, #dropdownBanios, #dropdownPlantas, #inputPrecioMin, #inputPrecioMax, #btnMasFiltros, #boxMaFiltro, #btnCerrarFiltros, #btnBuscar, #btnLimpiar, #btnVenta, #btnRenta. For the header: #btnLupaHeader, #inputBusquedaHeader, #menuPrincipalHeader.
    • Dynamic Page (/properties-1): #dataset12 (connected to repeater), #dropdownTipoInmueble, #dropdownDireccion, #inputColonia, #dropdownHabitaciones, #dropdownBanios, #dropdownPlantas, #inputPrecioMin, #inputPrecioMax, #btnMasFiltros, #boxMaFiltro, #btnCerrarFiltros, #btnBuscar, #btnLimpiar, #btnVenta, #btnRenta, #textNoResults.
  • Properties Collection Field Names (confirmed):
    • type (Text): For “Venta” / “Renta” (Sale / Rent)
    • tipoDePropiedad (Text)
    • mainLocation (Text)
    • bedrooms (Number)
    • bathrooms (Number)
    • levels (Number)
    • precioSinCaracteres (Number)

I’ve tried several code iterations, but I’m still unable to get the dropdowns to populate, the filters to correctly apply to the dataset, and the header search to function.

Any help or suggestions for debugging and resolving these issues would be greatly appreciated.

CODE “homepage”
// homeBuscador.js
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;

let categoriaSeleccionada = “Venta”;
let masFiltrosVisible = false;

// — IDs de Elementos del Header —
const LUPA_BUTTON_ID = “#btnLupaHeader”;
const SEARCH_INPUT_ID = “#inputBusquedaHeader”;
const MAIN_MENU_ID = “#menuPrincipalHeader”;

$w.onReady(function () {
console.log(“Página principal lista. Inicializando…”);
// ---- Configuración Inicial al cargar la página ----
$w(SEARCH_INPUT_ID).hide();
$w(“#boxMaFiltro”).hide();

// ---- Poblar Dropdowns Dinámicamente ----
poblarDropdownTipoInmueble();
poblarDropdownDireccion(); // Esto es para Ciudad (mainLocation)
poblarDropdownHabitaciones();
poblarDropdownBanios(); // <-- El error está en esta función.
poblarDropdownNiveles(); // Esto es para Niveles (levels)

// ---- Configuración del Estilo de Pestañas (Venta/Renta) ----
actualizarEstiloBotones(categoriaSeleccionada);

// ---- Eventos de Clic ----
$w("#btnVenta").onClick(() => {
    categoriaSeleccionada = "Venta";
    actualizarEstiloBotones(categoriaSeleccionada);
    console.log("Categoría seleccionada: Venta");
});
$w("#btnRenta").onClick(() => {
    categoriaSeleccionada = "Renta";
    actualizarEstiloBotones(categoriaSeleccionada);
    console.log("Categoría seleccionada: Renta");
});

$w("#btnMasFiltros").onClick(() => {
    toggleMasFiltros();
});

if ($w("#btnCerrarFiltros").length > 0) { 
    $w("#btnCerrarFiltros").onClick(() => {
        if (masFiltrosVisible) {
            toggleMasFiltros(); 
        }
    });
}

$w("#btnBuscar").onClick(() => {
    realizarBusqueda();
});

$w("#btnLimpiar").onClick(() => {
    limpiarFiltros();
});

$w(LUPA_BUTTON_ID).onClick(() => { 
    toggleHeaderSearch();
});

});

// — Funciones de Estilo y Visibilidad —
function actualizarEstiloBotones(activo) {
const botones = [$w(“#btnVenta”), $w(“#btnRenta”)];
botones.forEach(btn => {
if (btn.label.toUpperCase() === activo.toUpperCase()) {
btn.style.backgroundColor = “#F00000”;
btn.style.color = “white”;
btn.style.borderBottom = “2px solid #F00000”;
} else {
btn.style.backgroundColor = “white”;
btn.style.color = “black”;
btn.style.borderBottom = “none”;
}
});
}

function toggleMasFiltros() {
if (masFiltrosVisible) {
$w(“#boxMaFiltro”).hide(“slide”, { direction: “top”, duration: 300 });
$w(“#btnMasFiltros”).label = “Más filtros”;
console.log(“Ocultando más filtros.”);
} else {
$w(“#boxMaFiltro”).show(“slide”, { direction: “top”, duration: 300 });
$w(“#btnMasFiltros”).label = “Menos filtros”;
console.log(“Mostrando más filtros.”);
}
masFiltrosVisible = !masFiltrosVisible;
}

function toggleHeaderSearch() {
if ($w(SEARCH_INPUT_ID).isVisible) {
$w(SEARCH_INPUT_ID).hide(“fade”);
$w(MAIN_MENU_ID).show(“fade”, { duration: 200 });
console.log(“Ocultando búsqueda de header.”);
} else {
$w(SEARCH_INPUT_ID).show(“fade”, { duration: 200 })
.then(() => {
$w(SEARCH_INPUT_ID).focus();
});
$w(MAIN_MENU_ID).hide(“fade”);
console.log(“Mostrando búsqueda de header.”);
}
}

// — Funciones para Poblar Dropdowns Dinámicamente —
async function poblarDropdownTipoInmueble() {
try {
const results = await wixData.query(“Properties”).limit(1000).find();
console.log(“Datos de Properties para Tipo Inmueble:”, results.items.length, “ítems encontrados.”);
const tiposInmueble = new Set(results.items.map(item => item.tipoDePropiedad).filter(Boolean));
const opcionesDropdown = Array.from(tiposInmueble).map(tipo => ({ label: tipo, value: tipo }));
opcionesDropdown.unshift({ label: “Tipo inmueble”, value: “” });
$w(“#dropdownTipoInmueble”).options = opcionesDropdown;
console.log(“Opciones de Tipo Inmueble:”, opcionesDropdown);
} catch (error) { console.error(“Error al poblar dropdown de Tipo Inmueble:”, error); }
}

async function poblarDropdownDireccion() {
try {
const results = await wixData.query(“Properties”).limit(1000).find();
console.log(“Datos de Properties para Dirección (Ciudad):”, results.items.length, “ítems encontrados.”);
const ciudades = new Set(results.items.map(item => item.mainLocation).filter(Boolean));
const opcionesDropdown = Array.from(ciudades).map(ciudad => ({ label: ciudad, value: ciudad }));
opcionesDropdown.unshift({ label: “Ciudad”, value: “” });
$w(“#dropdownDireccion”).options = opcionesDropdown;
console.log(“Opciones de Ciudad/Dirección:”, opcionesDropdown);
} catch (error) { console.error(“Error al poblar dropdown de Dirección (ciudad):”, error); }
}

async function poblarDropdownHabitaciones() {
try {
const results = await wixData.query(“Properties”).limit(1000).find();
console.log(“Datos de Properties para Habitaciones:”, results.items.length, “ítems encontrados.”);
const habitaciones = new Set(results.items.map(item => item.bedrooms).filter(Boolean));
const opcionesDropdown = Array.from(habitaciones).sort((a, b) => a - b).map(num => ({ label: num.toString(), value: num.toString() }));
opcionesDropdown.unshift({ label: “Habitaciones”, value: “” });
$w(“#dropdownHabitaciones”).options = opcionesDropdown;
console.log(“Opciones de Habitaciones:”, opcionesDropdown);
} catch (error) { console.error(“Error al poblar dropdown de Habitaciones:”, error); }
}

// — ¡LA FUNCIÓN CORREGIDA ESTÁ AQUÍ! —
async function poblarDropdownBanios() {
try {
const results = await wixData.query(“Properties”).limit(1000).find();
console.log(“Datos de Properties para Baños:”, results.items.length, “ítems encontrados.”);
// — ESTA LÍNEA FUE CORREGIDA —
const banios = new Set(results.items.map(item => item.bathrooms).filter(Boolean));
const opcionesDropdown = Array.from(banios).sort((a, b) => a - b).map(num => ({ label: num.toString(), value: num.toString() }));
opcionesDropdown.unshift({ label: “Baños”, value: “” });
$w(“#dropdownBanios”).options = opcionesDropdown;
console.log(“Opciones de Baños:”, opcionesDropdown);
} catch (error) { console.error(“Error al poblar dropdown de Baños:”, error); }
}

async function poblarDropdownNiveles() {
try {
const results = await wixData.query(“Properties”).limit(1000).find();
console.log(“Datos de Properties para Niveles:”, results.items.length, “ítems encontrados.”);
const niveles = new Set(results.items.map(item => item.levels).filter(Boolean));
const opcionesDropdown = Array.from(niveles).sort((a, b) => a - b).map(num => ({ label: num.toString(), value: num.toString() }));
opcionesDropdown.unshift({ label: “Plantas”, value: “” });
$w(“#dropdownPlantas”).options = opcionesDropdown;
console.log(“Opciones de Niveles:”, opcionesDropdown);
} catch (error) { console.error(“Error al poblar dropdown de Niveles:”, error); }
}

// — Funciones de Búsqueda y Limpieza —
function realizarBusqueda() {
const tipoPropiedad = $w(“#dropdownTipoInmueble”).value;
const ciudad = $w(“#dropdownDireccion”).value;
const direccionTexto = $w(“#inputColonia”).value;

const habitaciones = $w("#dropdownHabitaciones").value;
const banios = $w("#dropdownBanios").value;
const niveles = $w("#dropdownPlantas").value; 
const precioMin = $w("#inputPrecioMin").value;
const precioMax = $w("#inputPrecioMax").value;

const params = {};
params.tipo = categoriaSeleccionada; 

if (tipoPropiedad) { params.tipoDePropiedad = tipoPropiedad; } 
if (ciudad) { params.mainLocation = ciudad; } 
if (direccionTexto) { params.direccionTexto = direccionTexto; } 

if (habitaciones) { params.bedrooms = habitaciones; }
if (banios) { params.bathrooms = banios; }
if (niveles) { params.levels = niveles; } 

if (precioMin) { params.precioSinCaracteresMin = precioMin; } 
if (precioMax) { params.precioSinCaracteresMax = precioMax; } 

console.log("Parámetros de búsqueda:", params);

const queryString = new URLSearchParams(params).toString();

// Asegúrate de que este slug coincida con la URL de tu página de lista de propiedades.
// Según tu imagen (image_ef5c7b.jpg), es "/propiedades-1"
const targetUrl = "/propiedades-1?" + queryString; 

console.log("URL de destino:", targetUrl); 

wixLocation.to(targetUrl);

}

function limpiarFiltros() {
$w(“#dropdownTipoInmueble”).value = “”;
$w(“#dropdownDireccion”).value = “”;
$w(“#inputColonia”).value = “”;

$w("#dropdownHabitaciones").value = "";
$w("#dropdownBanios").value = "";
$w("#dropdownPlantas").value = ""; 
$w("#inputPrecioMin").value = "";
$w("#inputPrecioMax").value = "";

categoriaSeleccionada = "Venta"; 
actualizarEstiloBotones(categoriaSeleccionada);

if (masFiltrosVisible) {
    toggleMasFiltros();
}
console.log("Filtros limpiados.");

}

2

Will try have a look at this later today if I have time. I have implemented lots of filtering on websites, so it may just need some minor tweaking to get it to work.