1

Hola estoy desarrollando una web inmobiliaria, la misma tiene un buscador y filtros, lo que necesitaría saber es como lograr que los filtros no se pierdan y a medida que voy seleccionándolos vaya mostrando los resultados acorde, les paso una pagina con lo q necesito lograr:

https://www.totalprop.com.ar/casas-venta-1-banios

Además necesitaría que la url sea amigable, es decir en lugar de mostrar:

busqueda.php?tipo=CASA&operacion=VTA&sanitarios=1 quede de la siguiente forma:

/casas-venta-1-banios

Estoy trabajando con javascript, me serviría si tienen algún ejemplo en React, Angular, o JS Vanilla

Espero se entienda lo que necesito y me puedan ayudar.

Gracias!

1
  • Si no agregas el código que has intentado posiblemente termine cerrada la pregunta y con votos negativos. Si solo dices tengo este deber resuelvan no es bien recibido.
    – Bicho
    Commented el 19 oct. 2020 a las 15:18

2 respuestas 2

0

Para que no se pierdan los filtros puedes utilizar localStorage:

localStorage.filtrosActuales = "casas,2 dormitorios,garage";

Esto permanecerá en el navegador en un espacio llamado DOM Storage o Local Storage. Es bastante rápido y único por navegador. Puedes obtener el string y manejarlo como quieras usando la misma propiedad.

let arrayConFiltros = localStorage.filtrosActuales.split(",");

Para la url necesitarías usar código en el servidor. Quizás te interese un framework como Laravel (php).

Si no vas a usar backend puedes simular la ruta en front-end por ejemplo con el router de vue.js. Se puede configurar en modo historial, pero tiene sus problemas, como que no puedes cargar la url directamente sin código backend.

Si vas a hacerla tipo SPA (Aplicación de una sola página) emulando las páginas, utiliza rutas tal que: https://example.com/#/casas-2dormitorios-garage

Puedes usar mi framework si quieres, que tiene router también y es bastante más sencillo, pequeño y básico. https://github.com/stringmanolo/ff

Mira propiedades como window.location, location.hash, y detecta los cambios a la rutas añadiendo un listener al evento popstate. La función decodeURIComponent también te puede ser útil.

Intenta implementarlo y si te atascas pide ayuda.

0

Desde una web, puedes ver aquello mediante el objeto global llamado Location.

Pruebalo desde esta web:

http://playcode.io/?tipo=CASA&operacion=VENTA&sanitario=1 introducir la descripción de la imagen aquí

Aquí te dejo el código:

let local = location.search
let replaced = (local.replace("?","")).split("&")
let rep = replaced.map((x)=>{
  return x.split("=")
})
let result = {}
rep.map((x)=>{
  result[x[0]] = x[1]
})

console.log(result)

Ojo, esto siempre funcionara si se encuentran los parametros en la url

Saludos!💛

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.