Property Listings Feature

Relevant source files

The following files were used as context for generating this wiki page:

• properties.html
• content/properties/sample.json
• content/properties/test.property.json
• stackbit.config.ts
• about.html
• contact.html
• package.json

The Property Listings feature is a core component of the Vandore Heritage website, responsible for displaying and managing real estate properties. It allows users to browse a collection of properties, apply filters to refine their search, and view individual property details. The system is built as a static site, with property data managed through JSON files and structured via a Stackbit configuration. This approach separates content from presentation, enabling easier content updates.

Architecture Overview

The feature's architecture revolves around a Git-based content source managed by Stackbit. Property data is stored in individual JSON files, which are then used to populate the static HTML pages.

This diagram illustrates the relationship between the data models, content files, and the final rendered HTML pages.

Data Model and Content

The structure of each property is defined by the Property data model within the Stackbit configuration. This ensures consistency across all property listings.

Sources: stackbit.config.ts:100-116

Property Data Model

The Property model is a data type, with each property stored as a separate JSON file in the content/properties/ directory.

This diagram shows the entity relationship for the Property model.

The fields for the Property model are detailed in the table below:

Field	Type	Required	Description
title	string	Yes	The main title of the property.
price	string	Yes	The listing price, formatted as a string (e.g., "$950,000").
address	string	Yes	The physical address of the property.
description	text	Yes	A detailed description of the property.
image	string	Yes	The file path to the property's main image.
url	string	Yes	The URL path to the property's detail page.
bedrooms	number	No	The number of bedrooms.
bathrooms	number	No	The number of bathrooms.
area	number	No	The total area of the property (e.g., in square feet).
floors	number	No	The number of floors in the property.

Sources: stackbit.config.ts:102-115

Example Content File

Below is an example of a property defined in a JSON file, conforming to the Property model.

{
  "type": "Property",
  "title": "Sample Property",
  "price": "$950,000",
  "address": "123 Heritage Lane, Riga",
  "description": "Elegant historic residence with modern amenities and refined finishes.",
  "image": "image/dummy-img-900x700.jpg",
  "url": "/properties/sample.html",
  "bedrooms": 4,
  "bathrooms": 3,
  "area": 2500,
  "floors": 2
}

Sources: content/properties/sample.json:1-13

Property Listings Page

The main interface for browsing properties is properties.html. This page displays a grid of all available properties and includes a comprehensive filtering system.

Sources: properties.html

Filtering System

Users can filter properties based on location, price range, and the number of bedrooms. The filter bar is available in both a full-width version for large screens and a drawer-style offcanvas menu for mobile devices.

This flowchart shows the user interaction with the filtering system.

The filter controls are defined in the HTML as follows:

Filter	Control ID(s)	Type	Description
Location	#location-search, #location-search-mobile	Text Input	Filters by city, district, or neighborhood.
Price Range	#min-price, #max-price, #min-price-mobile, #max-price-mobile	Number Inputs	Sets a minimum and maximum price.
Bedrooms	Button group (.btn-group)	Buttons	Selects properties by number of bedrooms.

Sources: properties.html:224-283

Client-side filtering is likely handled by isotope.pkgd.min.js, which is included in the page's scripts. This allows for dynamic filtering of the property grid without reloading the page.

Sources: properties.html:650

Property Grid and Cards

Properties are displayed in a responsive grid using Bootstrap's grid system. Each property is rendered as a "card" containing its key information.

The HTML structure for a single property card is shown below. Data attributes like data-location, data-price, and data-bedrooms are used by the client-side filtering logic.

<div class="col mb-4" data-location="riga heritage lane" data-price="950000" data-bedrooms="4">
    <div class="card h-100">
        <img src="image/dummy-img-900x700.jpg" class="card-img-top" alt="Sample Property">
        <div class="card-body d-flex flex-column">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <h5 class="card-title mb-0">Sample Property</h5>
                <h6 class="text-accent fw-bold">$950,000</h6>
            </div>
            <div class="d-flex align-items-center mb-2">
                <i class="rtmicon rtmicon-location me-2"></i>
                <span class="text-muted">123 Heritage Lane, Riga</span>
            </div>
            <p class="card-text flex-grow-1">Elegant historic residence...</p>
            <div class="d-flex justify-content-between align-items-center mt-auto">
                <div class="d-flex gap-3">
                    <span class="badge bg-light text-dark">4 bed</span>
                    <span class="badge bg-light text-dark">3 bath</span>
                </div>
                <a href="property_details.html" class="btn btn-accent btn-sm">
                    <span>View Details</span>
                    <i class="rtmicon rtmicon-arrow-up-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>
</div>

Sources: properties.html:303-331

Routing and URL Generation

The stackbit.config.ts file defines how URLs are generated for property pages using the siteMap function. It maps each Property document to a specific URL path.

• Data Source: content/properties/{slug}.json
• URL Path: /properties/{slug}.html
• Template: property-detail-template.html (Note: The content of this template file is not available for analysis, but its role is defined here).

const properties = documents
  .filter((d) => d.modelName === 'Property')
  .map((d) => {
    const slug = path.basename(String(d.filePath || '').replace(/\.json$/, ''));
    return {
      urlPath: `/properties/${slug}.html`,
      pageSrc: `property-detail-template.html`,
      pageObjectId: d.id
    } as SiteMapEntry;
  });

Sources: stackbit.config.ts:139-150

This configuration ensures that a property with the file path content/properties/sample.json will be accessible at the URL /properties/sample.html. This is consistent with the url field found in the sample property data.

Sources: content/properties/sample.json:8