Wix Custom Search Function for Real Estate Listings in Wix Velo.

To add search functionality to your listing page, follow these steps:

Go to the “Code” section of the Wix editor and click “Add (+)” to create a new file. Choose “Server Module” as the file type and give it a name, such as “search.js.”
In the “search.js” file, create a function that takes in the search criteria and queries the collection to find the matching listings. For example:

export function searchListings(criteria) {
  let query = wixData.query("RealEstateListings");

  if (criteria.minPrice) {
    query = query.gte("price", criteria.minPrice);
  }

  if (criteria.maxPrice) {
    query = query.lte("price", criteria.maxPrice);
  }

  if (criteria.location) {
    query = query.contains("address", criteria.location);
  }

  if (criteria.minBedrooms) {
    query = query.gte("bedrooms", criteria.minBedrooms);
  }

  if (criteria.maxBedrooms) {
    query = query.lte("bedrooms", criteria.maxBedrooms);
  }

  return query.find();
}

This function uses the wixData.query method to create a query on the “RealEstateListings” collection. It then adds filters to the query based on the search criteria, such as a minimum and maximum price, a location, and a minimum and maximum number of bedrooms. Finally, it returns the results of the query using the find method.

In the “Code” section, create a new page file and name it “search-page.js”.
In this file, import the search function you just created using the following code:

import { searchListings } from 'backend/search';

5. Create a function in this file that handles the user’s search input, calls the search listings to function with the search criteria, and displays the results using a repeater or a grid element.

export function searchProperties(searchCriteria) {
  searchListings(searchCriteria).then((results) => {
    $w('#repeater1').data = results.items;
    $w('#repeater1').show();
  });
}

This function takes in the search criteria from the user and passes it to the searchListings function. It then uses a repeater element to display the search results.

In the “Code” section, create a new page file and name it “search-page.jsw”.
In this file, write the following code to add an event listener to the search button on your listing page:

import { searchProperties } from 'public/search-page';

export function button1_click(event) {
  const searchCriteria = {
    minPrice: $w('#minPrice').value,
    maxPrice: $w('#maxPrice').value,
    location: $w('#location').value,
    minBedrooms: $w('#minBedrooms').value,
    maxBedrooms: $w('#maxBedrooms').value,
  };

  searchProperties(searchCriteria);
}

This code imports the searchProperties function from the “search-page.js” file and adds an event listener to the search button on your listing page. When the button is clicked, it creates an object with the search criteria based on the user’s input and calls the searchProperties function with the search criteria.

With these steps, you now have a custom real estate listing in Wix that includes collections, Velo, and a search function. Your users can easily find the listings they are interested in by searching based on multiple criteria, providing a more personalized experience.

Need Help?

Leave a Reply Cancel reply