Building a real estate website

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

 In this article, you'll get an overview of the process of creating a site designed to enable sellers to post properties for sale to promote them online. The site is a searchable gallery of available properties that house seekers can use to look for real estate. In order to achieve this level of functionality, you'll need to create two web apps (for gathering and displaying custom content) along with configuring and inserting modules, including the Photo Gallery module to display images of the properties.

Primary components and modules required to build a real estate site

  • Property Listing Web App - The Web App enables the posts of property listings. It include fields for data such as the address, description, number of rooms, number of bathrooms, price, property images, and more.
  • Property inquiry Web Form - The form will reside in the detail layout of the listing Web App described above. The form enables visitors to inquire about the listings.
  • Google Map - The map resides on the detail layout of the listings Web App. It dynamically displays the property address using the Google Map API.
  • Refer a friend form - The refer a friend form resides on the detail layout of the listing Web App. This form allows visitors to send the URL of the currently viewed property (along with the custom message) to a friend.
  • Listings Web App search - The Web App search allows visitors to search for properties by filters, such as suburb, city, country, zip code, and other advanced search options.
  • Add to favorites function - Visitors can use this feature to store their favorite property listings in their favorites list for future reference.
  • Print function - Visitors can print the listing in a printer-friendly format from the site.
  • Photo gallery - The gallery displays the property images in a grid of thumbnails with navigation; when clicked, the larger version of the image is displayed.
  • Youtube video - The property agent can optionally tape and publish video of the property on YouTube, a dedicated video streaming network. The embed code for the video is then posted along with the property listing.
  • Other components - Other optional components may include a blog, reviews/testimonial page, recent sales page and a contact page. The process for adding these features is outside the scope of this guide. However, you can access the instructions for working with blogs, announcements, and other related features by searching this help system.  

Implementation instructions

Implementing the Web App

Depending on the nature of business, you may need multiple Web Apps. Consider building one for displaying the properties for sale and another for the rental properties. In this example, you'll learn how to create a a single Web App with properties for sale. If your project requires multiple Web Apps, you'll use the same process described below.

Step 1 - Defining the Web App

Choose Admin > Build Web Apps and click the option to Build a New Web App. Enter the name of the Web App, such as Property Listings, and click Save.

Next, decide if the agents/real estate owners will submit web app items through the site (rather than entering the data in the Admin Console). If visitors of the site can submit Web App items, select the applicable settings in the section titled Can Customers Create Web Apps? For more information and instructions on this feature, see the applicable section in the article titled Working with the Web Apps module .

Step 2 - Creating custom fields

Create custom fields by clicking the Add custom fields to Web App button. The following types of data fields are available:

Field Name Field Type Values Explanation of the field
Headline Text (String) This is the sales headline. The headline is like a title: "Find your dream home"
Property name Text (String) Sunshine Apartments
Open for inspection? Dropdown Yes,No Is property available for inspection?
Address Text (String) Unit number, street number, street name, such as 453 Main St.
Reference number Text (String) Reference number used in inquiries for tracking purposes
City Text (String) Name of the city, such as San Francisco
Property intro description Text (Multiline) Description of the property, such as: Centrally located in the South of Market, this home is close to shops, restaurants and public transportation. This condo includes a brand new dishwasher and recently remodelled kitchen...
Bedroom Number Number of bedrooms
Bathroom Number Number of bathrooms
Car Number Number of parking spaces
Price Number Price
Type of price Dropdown For sale,Offers from,Offers around,Auction,Sold for,For rent (pw) Type of price
Date available DateTime Date available
Sold date DateTime Sold date
Inspection time Text(String) Inspection time
Photo (main) Image Main image of the property that is displayed in the large view when the listing is displayed
Photo 1 Image Additional image
Photo 2 Image Additional image
Photo 3 Image Additional image
Photo 4 Image Additional image
Photo 5 Image Additional image
Photo 6 Image Additional image
Photo 7 Image Additional image
Photo 8 Image Additional image
Photo 9 Image Additional image
Photo 10 Image Additional image
Contact person Text(String) Contact person
Property Management Text(String) Property Management
HOA Dues Text(String) HOA Dues
Sold Dropdown Yes,No Has property been sold?
Youtube video code Text (Multiline) Container used to paste in the YouTube embed code for video

Step 3 - Customizing the appearance with layouts

You can customize the way the property listings are displayed on the screen. There are three different layouts you can edit, but for the purposes of this article, we'll discuss the list and detail layouts. This example does not use the backup list layout, which is optional.

Note: You would use the backup list layout if you'd like to display a different looking, shorter list of properties in a separate location on the site, such as adding a teaser of the content in the sidebar of the home page.

The List Layout is used to display the multiple properties on the screen and the Detail Layout is used to display a single Web App item after the visitor has clicked on an item in the list to see more details.

Step 3.1 - Styling the List layout

First, customize the List layout to show the city, price, number of bedrooms, number of bathrooms, number of parking spots, an excerpt from the description, the main property image, headline, address, reference number, the link to the detailed view of a property and so on.

Part of the customization process involves deciding which information you want to display in the list layout and which information you want to display in the detail layout. It is helpful to sketch out the data on paper, to help arrange the data most efficiently.

After defining the design, add HTML code and CSS rules to format the appearance of the individual elements in the list. At this time, you'll also incorporate the tags for the custom fields you've added into each layout.

Here is an example of HTML code used to format a layout:

<div id="webapp-item-list-main">
<div id="webapp-item-list-heading">
<div class="webapp-item-list-left-col">{tag_property name}, {tag_surburb}</div>
<div class="webapp-item-list-center-col">
<div id="price">{tag_type of price} <strong><span id="list_{tag_itemid}"> </span></strong></div>
</div>
<div class="webapp-item-list-right-col"><img alt="" src="/realestate/bed.png" /> 
{tag_bedroom} 
<img alt="" src="/realestate/bath.png" />&nbsp;&nbsp;{tag_bathroom} <img alt="" src="/realestate/car.png" /> {tag_car}
</div>
<div id="clear"></div>
</div>
<div id="webapp-item-list-content">
<div class="webapp-item-list-left-col">{tag_photo (main)}</div>
<div class="webapp-item-list-center-col">
<p><strong>{tag_headline}</strong>
{tag_address}</p>
<p>{tag_property intro description}</p>
</div>

And here's an example of the CSS styles used to format the page shown above:

/* PROPERTY LISTING WEB APP */
 
    width: 710px;
    border-bottom: 0px solid #C6C8CC;
    padding-bottom: 10px;
    padding-top: 10px;
    font-family: Arial;
    font-size: 13px;
    color: #4b4b4b;
    }
    padding: 0;
}
    width: 710px;
    height: 25px;
    line-height:150%;
    vertical-align:middle;
    background: #4B4B4B;
    color: #C5C5C5;
    }
    width: 240px;
    float: left;
    line-height:150%;
    vertical-align:middle;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    font-family:Arial;
    }
    width: 230px;
    float: left;
    margin-left: 20px;
    display: inline;
    line-height:150%;
    vertical-align:middle;    
    font-family:Arial;
    font-size: 13px;
    }
     
    width: 240px;
    float: right;
    padding-right: 10px;
    text-align:right;
    line-height:150%;
    vertical-align:middle;    
    margin-top: -17px;
    font-weight: bold;
    font-size: 13px;
     
    }
 
    width: 710px;
    padding-top: 10px;
    background: #d8d9db;
    padding-bottom: 10px;
       height:140px;
    }
 
    width: 150px;
    padding: 5px;
    background: #dedfe3;
    float:left;
 
    }
 
    width: 150px;
    padding: 5px;
    background: #909299;
    float:left;
    }    
 
    width: 150px;
    float: left;
    margin-left: 10px;
    }
 
    width: 380px;
    float: left;
    margin-left: 20px;
    }
    padding-bottom: 5px;
    font-family:Arial;
    font-size:13px;
    }    
     
    width: 100px;
    float: left;
    margin-left: 10px;
    border-left: 1px dotted #909299;
    padding-left: 10px;
    height: 100px;
    font-size:13px;
    font-family:Arial;
    vertical-align: bottom;
    }

Please note that this example site uses three images in the heading.

The files are named bath.png, bed.png and car.png, which were uploaded to the site and display above and to the right of each item:

After uploading the images and publishing the layouts with the updated code, the Web App item looks like this:

Note: If the visitor clicks the View Details link, the page will display the detail layout with data for that specific item.

When you log into the Admin Console and view the Web App item, this is how the Item Details page looks:

Step 3.2 - Styling the Detail Layout

Next, customize the Detail layout. This layout will display all of the information about the property. It also includes a form so that visitors can submit an inquiry and a second form to refer a friend. Depending on your project requirements, you may also choose to implement a photo gallery, a favorites list, the link to a printer-friendly version of the page, and other relevant features.

When you update the Detail layout, use the mockup you created on paper to determine how to implement the HTML code and CSS styles that will control the appearance of the individual property details page.

In this example, begin with the top banner that will display the details about the property, similar to the process used for the list layout.

The entire listing is wrapped inside a div container with an ID of "ListItemCtnr." Another div container with an ID of "ListItemHead" contains the heading.

Here is an example of the HTML code:

<div id="ListItemHead">
    <div class="LeftCol">{tag_property name}, {tag_surburb}</div>
    <div class="CenterCol">&nbsp;</div>
    <div class="RightCol"><img alt="" src="/realestate/bed.png" /> {tag_bedroom} 
              <img alt="" src="/realestate/bath.png" />&nbsp;&nbsp;{tag_bathroom} 
              <img alt="" src="/realestate/car.png" /> {tag_car}
  </div>
</div>

Note: This is very similar to the list layout.

Next, display one large (main) image to the left and display the rest of the images as thumbnails to the right. The goal was to create a photo gallery that looks something like this:

Shadowbox site . However, you can choose to use any photo gallery effect you wish. The system supports any implementation of HTML, CSS and JavaScript.

When the visitor clicks a thumbnail, it opens in a new window while the rest of the page is shaded dark gray:

A photo gallery is helpful because it allows visitors to navigate through the larger sized images easily.

When you use the Photo Gallery module, it automatically generates the thumbnail images based upon the larger sized images that you upload for the gallery folder.

The following code to set the dimensions of the thumbnail and the path to the image you want to display:

<img src="/folder_name/image_file_name.jpg?Action=thumbnail&Width=80&Height=80" />

The first part of source path above:

<img src="/folder_name/image_file_name.jpg

provides the path to the image file that will be converted into a thumbnail. For example, the following code will use a file named duplex.jpg that is uploaded to the site's images folder:

<img src="/images/duplex.jpg?Action=thumbnail&Width=80&Height=80" />

Enter the numeric values for width and height to define the dimensions of the thumbnail image. For example, Width=80 and Height=80 refer to the thumbnail image's width and height in pixels. The link that opens the image inside the shadowbox gallery looks like this:

<a rel="shadowbox[gallery]" href="{tag_photo 1_value}">
<img alt="Duplex" src="{tag_photo 1_value}?Action=thumbnail&Width=150&Height=99" />
</a>

In this example, the _value parameter is added to each tag to render the path of the image for both the link and the image's source. The image is then constructed in this manner:

<img alt="Duplex" src="{tag_photo 2_value}?Action=thumbnail&Width=150&Height=99" />

The following pieces of the URL are described below: Action=thumbnail - Is the utility that creates a thumbnail from a larger uploaded image Width=150 - Sets the thumbnail image width to 150 pixels Height=99 - Sets the thumbnail image height to 99 pixels Here is the code for the whole gallery:

<div id="ItemImg">
    <div class="LeftCol">{tag_photo (main)}</div>
    <div class="RightCol"> 
    <a rel="shadowbox[gallery]" href="{tag_photo 1_value}">
    <img alt="" src="{tag_photo 1_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
    <a rel="shadowbox[gallery]" href="{tag_photo 2_value}">
    <img alt="" src="{tag_photo 2_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
    <a rel="shadowbox[gallery]" href="{tag_photo 3_value}">
    <img alt="" src="{tag_photo 3_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
      <a rel="shadowbox[gallery]" href="{tag_photo 4_value}">
      <img alt="" src="{tag_photo 4_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
      <a rel="shadowbox[gallery]" href="{tag_photo 5_value}">
      <img alt="" src="{tag_photo 5_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
      <a rel="shadowbox[gallery]" href="{tag_photo 6_value}"> 
      <img alt="" src="{tag_photo 6_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
      <a rel="shadowbox[gallery]" href="{tag_photo 7_value}">
      <img alt="" src="{tag_photo 7_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
      <a rel="shadowbox[gallery]" href="{tag_photo 8_value}">
      <img alt="" src="{tag_photo 8_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
      <a rel="shadowbox[gallery]" href="{tag_photo 9_value}">
      <img alt="" src="{tag_photo 9_value}?Action=thumbnail&Width=150&Height=99"/>
</a>
    </div>
    <div id="clear"></div>
</div>

If desired, you can implement a disjointed image swap behavior to add a visual effect. When a visitor clicks one of the thumbnail images in the left scrolling pane, a larger version of that image is displayed in the main image area. You can use the swap image behaviors provided in Dreamweaver (using the MM_swapImage() JavaScript method) to achieve this effect. See the Swap Image TechNote for more instructions. Next, you'll display the property details, including the following data: Property headline (Displayed in big bold letters) Detailed property description (This is the text entered in the main content area of the online editor) YouTube video embed code Type of sale Price HOA dues and other purchase fees Inspection times Contact Information Any other information you want to display to the potential home buyer In this example, these details are listed in the left column, so that the forms appear in the right column. However, the layout of the page and the data you choose to display is completely up to you. You can customize it to fit your project as needed. 

Adding Google Maps to the listings

Google Maps API site to get the Google Maps key for the site's domain name.

The key generated by the site will look something like this:

ABQIAAAAFpzxY6IeWCvvzZBuZgZEFRScORB2vu23Xe0GmXrkmbsnDwR-VhR9W-Y43KrBb8dE8sVMwbyjiM8sMw

Next, place a div container where the map will be displayed, like this:

<div style="width: 500px; height: 300px;" id="map_canvas"></div>

In this example, the size of the map is 500 pixels x 300 pixels, but you can adjust these dimensions to fit your layout. Add some JavaScript to the detail layout between the head tags, like this script:

<script src="http://maps.google.com/maps?file=api&v=1&key=YOUR_KEY" type="text/javascript" />

In the code above, replace YOUR_KEY with the Google key you obtained for the site's domain. Add the following script to the bottom of your detailed web app layout:

<script type="text/javascript">    
    var map = null;    
    var geocoder = null;    
    function initialize() {    
    if (GBrowserIsCompatible()) {    
    map = new GMap2(document.getElementById(&#39;map_canvas&#39;));    
    map.setCenter(new GLatLng({tag_addresslongitude}, {tag_addresslatitude}), 13);    
    map.addControl(new GLargeMapControl());    
    map.addControl(new GMapTypeControl());    
    geocoder = new GClientGeocoder();    
    }}    
    function showAddress(address) {    
    if (geocoder) {    
    geocoder.getLatLng(    
    address,    
    function(point) {    
    if (!point) {    
    alert(address + " not found");    
    } else {    
    map.setCenter(point, 13);    
    var marker = new GMarker(point);    
    map.addOverlay(marker);    
    marker.openInfoWindowHtml(address);    
    }});}}
initialize();
showAddress(&#39;{tag_address1}  {tag_addresscity},  {tag_addressstate}  {tag_addresszipcode}  {tag_addresscountry}&#39;);
</script>

It is necessary to call the showAddress() function and pass the action address to it. One strategy is to place the address into a form field, and then submit the form with the onSubmit call to showAddress() function in the form's action. There are many different ways you can draw the map and the Google Maps API accepts many different parameters. Visit the Google Base Data API page to find information and examples to learn more about working with Google Maps API.

Adding a link for a printer-friendly version of the page

Visitors appreciate the ability to print pages of your site so that they can bring the details with them as they hunt for a new home. You can use a Print View template to print the listings in a format that will print easily.

After you've created the print template, place the following link in the detail layout:

<a target="_blank" href="/PrinterView.aspx">Print this listing</a>

When a visitor clicks the link above, the listing opens in a new browser window, inside the Print View template.

Collecting customer inquiries about the listing

This is probably one of the most important features on the real estate listing site. The Dashboard will alert you every time a form is submitted, but you can also set up workflows to alert you via email or text messages whenever a new inquiry is received.

Formatting currency values with JavaScript

The following script formats the property price to place a comma after every three digits. It also displays a dollar sign ($) in front of the dollar amount. For example, the script converts the value 1500000 to $1,500,000

<script language="JavaScript">
 
function formatCurrency(num) 
{
num = num.toString().replace(/\$|\,/g,&#39;&#39;);
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+&#39;,&#39;+
num.substring(num.length-(4*i+3));
return (((sign)?&#39;&#39;:&#39;-&#39;) + &#39;$&#39; + num);
}
 
</script>
<script language="javascript">
 
var result = formatCurrency({tag_price});
document.getElementById(&#39;list_{tag_itemid}&#39;).innerHTML = result;
 
</script>