Interactive Chessboard Floor Plan for Developer's Website on 1C-Bitrix

Build a Developer's Website on 1C-Bitrix with Chessboard Layout

The average real estate sales cycle is 2–4 months. Buyers return to the website 8–15 times: comparing layouts, monitoring construction progress, calculating mortgages. If the site doesn't address these needs, the prospect turns to a competitor with a working chessboard. Our experience shows that proper data architecture and interactive tools boost conversion by 30–40%. A chessboard is twice as effective as a tabular catalog, generating 2x more leads.

The key technical feature is the interactive floor plan (chessboard). It's not just a table but an SVG scheme where each apartment is clickable, color-coded by status, and linked to real infoblock data. The chessboard sets a developer's site apart from a templated catalog.

We guarantee your chessboard will be fast, adaptive, and sync with 1C. Certified Bitrix specialists ensure stability and security. Over 10+ years, we've completed 200+ projects for developers — from small residential complexes to portals for major developers.

How the Chessboard Boosts Conversion

The chessboard is a visual representation of floors and apartments within a building. Users see a building facade or floor plan, click on an apartment, and receive a card with price, area, and layout. Apartments are color-coded by status: green — available, yellow — reserved, gray — sold. A developer with a working chessboard gets 30–40% more leads than with a tabular catalog. This is proven across 200+ projects: average conversion with a chessboard is 5.2% vs. 2.8% without.

Why 1C Integration Is Critical

Developers manage apartment inventory in 1C:Enterprise. Prices and statuses are updated in 1C, and the site must reflect real-time data. Without integration, data is entered manually — leading to errors and delays costing up to $1.8k–2.6k per month to fix. Integration is 10x cheaper than manual data entry, saving up to $1.8k–2.6k per month. We offer three options:

• Standard 1C-Bitrix exchange (catalog module) — via CommerceML. Works for prices, but statuses require mapping.
• REST API — 1C calls endpoint /api/apartments/update-status/, sends JSON {apartment_code, status, price}. A controller on the Bitrix side finds the element by LAYOUT_SVG_ID and updates properties. Update time: under 1 second.
• Periodic CSV export — 1C uploads CSV to FTP; a Bitrix agent picks it up every 15 minutes and parses it. Parse errors occur in ~2% of cases — acceptable for legacy 1C.

Data Architecture: Complex → Building → Apartment

The infoblock structure mirrors the physical hierarchy: a residential complex contains buildings (sections), a building contains apartments.

Infoblock "Residential Complexes" (or Highload-block if fewer than 50 complexes) — parent entity. Properties:

Infoblock sections — buildings and sections. Each complex is a first-level section. Buildings are second-level sections within the complex. If a building has multiple sections (entrances) — third-level sections. This nesting allows using standard bitrix:catalog.section.list navigation without custom queries.

Infoblock elements — apartments. Each apartment is linked to its building section. Minimum property set:

The property LAYOUT_SVG_ID is the link between the database record and the SVG chessboard file.

How the Interactive Chessboard Works

Follow these steps to implement a chessboard:

1. SVG file preparation. The designer draws a facade or floor plan in Adobe Illustrator or Figma and exports to SVG. Each apartment is a separate <path> with attribute data-apartment-id matching the LAYOUT_SVG_ID property value. Naming convention: building-floor-number (e.g., K1-5-01). The format is specified in the technical specification. If the designer submits an SVG without attributes, the developer spends 2-3 days manually annotating it. Therefore, an SVG template with example attributes is provided to the designer before drawing begins.

2. Inline SVG, not . The SVG is not embedded via <img>, but inlined directly into the page HTML. Reason: contents of <img src="plan.svg"> are inaccessible to JavaScript (cross-origin policy). Inline SVG becomes part of the DOM, and each <path data-apartment-id="..."> is accessible via document.querySelector. In practice: Bitrix reads the SVG file from the building section property and outputs its contents via file_get_contents() directly into the component template:

$svgPath = CFile::GetPath($arResult['SECTION']['UF_FLOOR_PLAN_SVG']);
$svgContent = file_get_contents($_SERVER['DOCUMENT_ROOT'] . $svgPath);
$svgContent = preg_replace('/<\?xml[^?]*\?>/', '', $svgContent);
echo '<div class="chess-board">' . $svgContent . '</div>';

3. JavaScript: linking SVG with apartment data. On page load, the frontend receives a JSON array of apartments for the current building. JSON structure:

const apartments = [
    {
        svgId: "K1-5-01",
        id: 4521,
        rooms: 2,
        area: 58.3,
        floor: 5,
        price: 7200000,
        status: "available",
        layoutImg: "/upload/layouts/k1-5-01.jpg",
        url: "/zhk-solnechnyj/korpus-1/kvartira-4521/"
    }
];

function initChessBoard(apartments) {
    const svgContainer = document.querySelector('.chess-board svg');
    if (!svgContainer) return;

    const statusColors = {
        available: '#4CAF50',
        reserved: '#FFC107',
        sold: '#9E9E9E'
    };

    apartments.forEach(apt => {
        const el = svgContainer.querySelector(`[data-apartment-id="${apt.svgId}"]`);
        if (!el) return;

        el.style.fill = statusColors[apt.status];
        el.style.cursor = apt.status === 'sold' ? 'default' : 'pointer';

        el.addEventListener('mouseenter', () => {
            if (apt.status === 'sold') return;
            showTooltip(el, apt);
        });

        el.addEventListener('click', () => {
            if (apt.status === 'sold') return;
            showApartmentCard(apt);
        });
    });
}

4. Tooltip on hover. On hover over an apartment, a tooltip appears with brief info: rooms, area, price. Tooltip position is calculated via getBoundingClientRect().

5. Card on click. A side panel opens with full details: layout, room-by-room area, floor, window view, finishing, and buttons "Book" and "Download PDF". Data is already loaded — no additional AJAX request needed.

6. Filtering on the chessboard. Above the SVG scheme, there's a filter panel: number of rooms, price range, area range. When the filter changes, JavaScript hides non-matching apartments by reducing their opacity to 0.1. Matching ones remain bright. This works instantly without server requests.

7. Responsive SVG. On desktop, the SVG takes 100% container width. On mobile devices (<768px), the facade view is unreadable — we use floor-by-floor view where one floor fills the width, or pinch-to-zoom via the panzoom library. The first option is more reliable.

8. Real-time status updates. When a manager books an apartment in CRM or 1C, the site status must change without reload. We use polling every 30 seconds: an AJAX request returns an array [{svgId, status}], and JavaScript updates colors. With 200 apartments, the JSON response is under 5 KB.

Construction Progress: Photo Reports and Cameras

The "Construction Progress" section is mandatory for projects under construction. Infoblock "Photo Reports": each element = one report (date, description, multiple "Photo" property). Sections — buildings. Output — timeline, sorted by DATE_ACTIVE_FROM DESC. Drone video — string property with YouTube/Vimeo URL. Embed via <iframe> with loading="lazy". Webcam — <iframe> with stream from provider (Ivideon, Trassir). Embedded into the complex section template. Template caching is disabled for the camera block; the rest of the page is cached normally.

Mortgage Calculator with Bank Programs

Pure JavaScript. Highload-block "Mortgage Programs": fields BANK_NAME, PROGRAM_NAME, RATE, MIN_DOWNPAYMENT, MAX_TERM, IS_ACTIVE. On the apartment page load — AJAX request or inline JSON with active programs. Annuity payment formula: P = S × (r × (1 + r)^n) / ((1 + r)^n − 1), where S = price minus down payment, r = annual rate / 12 / 100, n = term in months. Interface: select bank → rate and minimum down payment are filled → three sliders (apartment cost automatically filled, down payment, term) → result: monthly payment, overpayment, total. Recalculated on every slider movement. This helps clients save up to $1.8k–2.6k per year by choosing the optimal program.

SEO and Microdata

Meta templates via infoblock settings:

• Title: Buy an apartment in #SECTION_NAME# — #ELEMENT_NAME#, from #PROPERTY_PRICE# $
• Description: #PROPERTY_ROOMS#-room apartment #PROPERTY_AREA_TOTAL# m² on floor #PROPERTY_FLOOR# in #SECTION_NAME#. Developer #PROPERTY_DEVELOPER#.

Microdata — Schema.org Residence for the complex and Offer for the apartment:

{
  "@context": "https://schema.org",
  "@type": "Residence",
  "name": "Residential Complex \"Solnechny\"",
  "address": "Moscow, Stroiteley St., 15",
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 55.75,
    "longitude": 37.61
  },
  "makesOffer": [
    {
      "@type": "Offer",
      "name": "2-room apartment, 58.3 m², floor 5",
      "price": "7200000",
      "priceCurrency": "USD",
      "availability": "https://schema.org/InStock"
    }
  ]
}

What's Included in Turnkey Developer Website Development

• Analytics and chessboard prototyping
• Infoblock and HL-block structure design
• Integration with 1C and CRM (Bitrix24)
• Mortgage calculator and booking form
• PDF layout generation
• Adaptive chessboard layout
• Microdata markup and SEO templates
• Staff training on site management
• One month of post-release support

Stages and Timelines

Timelines assume ready SVG chessboard files with correct data-apartment-id markup. If SVG needs to be created from scratch — add 1-2 weeks per building.

Development cost is calculated individually based on the scope of integrations. Request a consultation — we'll estimate your project in 1 day. Get a developer website developed with guaranteed results.