Property Agency Website

Ask the community
, ,
1

Here I’ve used a mix of great Wix design, Wix Code & Wix Databases to create a turnkey solution for property agencies.

The website has 4 pages. A home page with great search and filter functionality, a dynamic page with a custom designed gallery to display more about the individual property’s features, a page linked to the databse for easily creating a new listing and adding photo’s, and a similar dynamic page that automatically pulls through a selected property’s details where admin staff can update and delete listings.

Thanks for all the help from the Wix experts, a special thanks to Yisrael from Wix for all the detailed explanations!

Have a look at it here:
https://tiaanrich.wixsite.com/propertyfilter

3 Likes
2

Looks supernice. I would go with the repeaters on front page instead of table. Repeaters is way better in all categories. Supernice jobb, you should write an article or do a video on the project.

Thumbs up!

3

Hi Andreas.

I wasn’t familiar with repeaters, thanks for the suggestion, they look very nice!

4

You just connect one box and then repeaters will auto populate themselves.

5

Adreas,

I just had a go at it and it looks great! And it worked with only a little modification to my original code for the table.

Just a question, do you know why the background would change from white to transparent when I do a filtered search?

6

Please send me the site address and I will take a look.

7

https://tiaanrich.wixsite.com/propertyfilter

8

Hey
I will check with Wix Code team asap and see if there is a bug or something. Haven’t seen that and with respect to repeaters being in Beta maybe it will get fixed. I will keep you posted.

9

Many thanks Andreas! I also noticed on some searches it overlays one box’s data on top of another, and creates a blank space where the overlapping box should have been. I understand this is still in Beta, so no biggy for me at this point.

Great work on all the awesome features!! Keep them coming!

10

Thanks a lot! The Wix Code team is an amazing group of people and the stuff they are working on is mind blowing!

11

Hi Gentlemen,
Love the site!
As for the background - that’s a bug. We’ve prepared a fix and are working to get it into production systems (within a day or two). Sorry for the trouble.

Uval

12

Hi Uval

Thank you for the update! Have a great Christmas!!

Tiaan

13

Hi Tiann,
love the site. I’m just starting to work on a new site with similar functionality and am working on the dynamic page currently. I came to this page because I want to know how to create the gallery of images for each property. I love the way you did the image with thumbnails underneath. Would you be willing to share how you coded that part please?

14

Hi Lorraine,

Off course. It’s much simpler than it looks, in fact it’s very simple. For the main image (the big one) I overlapped 12 images and connected each one to the relevant database field, eg. Image1; Image2, etc. I only set the first image’s property to “show” and set the remaining 11 to “hide”.

I then continued to do exactly the same thing for the 12 thumbnail images(apart from hiding any of them), but for each one of these I added an onClick handler that says show this image and hide all the others.

I’m sure the experts at Wix can show us a more efficient way to do this, but at this point of the project my brain was running on fumes…

Best of luck with your project!
Tiaan

15

It would be ne nice to create a new Data Collection named PropertyImages and then connect that using a reference field and then add a second data set on the dynamic page which is connected to the property it self. Then you could use any standard image gallery from Wix and just connect it to that data set and voila, all images shown is filtered correctly from that data collection using reference fields.

16

Tiaan, thank you so much for the explanation and it worked perfectly- so exciting when it works! Andreas, I will explore the additional method tomorrow - It will be the first time trying a reference field. If I get stuck ill be back…

17

Hey Tiaan. Great work. Tried to do a similar thing recently. Had an issue with the min and max and also slideshows on dynamic pages. Would you be able to share your code on this? Would be amazing if possible. Thanks!

18

Hi Steve

The min & max were a bit more tricky, both the input field and db fields should be set to ‘number’. Here is the code below:

.between("price", parseFloat($w('#selection8').value), parseFloat($w('#selection9').value)))

For the slideshows, name your db fields image1, image2, image3, etc. Then use the code below and it should work: (change the ‘12’ to your max number + 1)

$w.onReady(function () { 
    $w('#dynamicDataset').onReady(() => { 
        let item = $w('#dynamicDataset').getCurrentItem(); 
        let itemsForGallery = []; for (let i = 1; i < 12; i++) { 
        if (item[`image${i}`]) { 			        
            itemsForGallery.push({src: item[`image${i}`] }); 
        } } 
    $w("#gallery1").items = itemsForGallery; 
}); 
});

Best of luck with your project!
Tiaan

19

Hey Tiann you rock! Plugged it in and it fixed my min max problem!!! Gonna try the other solution you presented. Also curious about your refresh code that one is a good idea as well. Thank you so much!

20

Hey Tiaan,
I’m still having issues with my search code. It wont display results without the min and max selected. for instance if I wanted to just search for a “house” it wouldn’t display results but if I select house with the min and max price it shows.
Below is my code. Not sure why it does this? Otherwise would it be possible to share your code for the full search?

import wixData from ‘wix-data’;

$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;

});

export function searchButton_click() {
wixData.query(‘PropertiesNew’)
.contains(‘area’,$w(‘#dropdown4’).value)
.contains(‘location’,$w(‘#dropdown5’).value)
.contains(‘propertyType’,$w(‘#dropdown6’).value)
.contains(‘beds’,$w(‘#dropdown7’).value)
.contains(‘area’,$w(‘#dropdown4’).value)
.contains(‘baths’,$w(‘#dropdown8’).value)
.between(“fieldprice”, parseFloat($w(‘#dropdown2’).value), parseFloat($w(‘#dropdown3’).value))

.find() 
.then( (results) =>{ 
	$w('#repeater1').data = results.items; 
});

}