Filtrerbare boligannoncer i Divi 5

De fleste ejendomssider løser søgning og filtrering med en dedikeret plugin, der ofte trækker sit eget CSS, JavaScript og databaselag med sig. Det virker, men det lægger vægt på siden og gør layoutet svært at style, så det matcher resten af designet.

Divi 5's tilgang går den modsatte vej. Løsningen bygges af moduler, der allerede findes i temaet: Loop-layoutet til at vise boligerne, og Post Filter-modulet til at lade brugeren indsnævre listen. Ingen tredjepartskode, ingen ekstra loadtid, og fuld kontrol over, hvordan resultaterne ser ud på skærmen.

Det er en pointe, der rækker ud over boligannoncer. Enhver side, der viser en liste af indhold, produkter eller cases, og som skal kunne filtreres, kan bruge den samme opskrift.

I guiden kan besøgende søge på adresse eller by og derefter filtrere efter boligtype, antal værelser, antal badeværelser og faciliteter. Det hele sker direkte på siden. Resultaterne opdateres uden en sideindlæsning, så man slipper for den lille hvide blinken, hver gang man krydser et felt af.

Det er en oplevelse, mange kender fra større boligsider, og guiden viser, hvordan du kan få noget lignende på din egen side.

Et praktisk tip, som er min egen vurdering og ikke noget, der står i guiden: tænk over, hvilke filtre dine besøgende reelt bruger. Fem velvalgte filtre slår femten, som ingen forstår.

Den visuelle del af løsningen er et Loop-layout, som fungerer som en skabelon for hvert enkelt boligkort. Du designer kortet én gang, med billede, pris, kvadratmeter og en kort beskrivelse, og Divi 5 gentager det automatisk for hver bolig i databasen.

Det, der gør kombinationen stærk, er at Loop-layoutet og Post Filter-modulet taler samme sprog. Når filtrene ændrer, hvilke boliger der skal vises, er det Loop-layoutet, der straks tegner de rigtige kort på skærmen igen. Der er ingen mellemstation, hvor data skal hentes fra et eksternt system eller renderes om via en plugin.

Det betyder også, at hele oversigten arver dit eksisterende design. Skifter du farver, skrifttyper eller kortstørrelse i Divi Builder, følger boligoversigten automatisk med, fordi den er bygget af de samme byggeklodser som resten af siden.

Vil du i gang, så start med at skrive ned, hvad dine besøgende skal kunne søge og filtrere på. Brug de filtre, guiden nævner, som udgangspunkt: adresse eller by, boligtype, værelser, badeværelser og faciliteter. Strø dem ikke ud over siden, bare fordi det er muligt.

Læs derefter Elegant Themes' guide igennem og følg den trin for trin. Byg først boligkortet i loop-layoutet, og tilføj filtrene bagefter. Så kan du selv se, hvad der virker, inden du giver det til de første rigtige besøgende.