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 200,000 ₽ per month to fix. Integration is 10x cheaper than manual data entry, saving up to 200,000 ₽ 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 200,000 ₽ 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": "RUB", "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.