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 (
catalogmodule) — 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 byLAYOUT_SVG_IDand 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:
| Property | Type | Purpose |
|---|---|---|
| NAME | Complex name | Title and SEO |
| ADDRESS | S (string) | Address, geocoding |
| COORDINATES | S ("lat,lng") | Map marker |
| STAGE | L (list) | Stage: design, foundation, construction, completed |
| COMPLETION_DATE | S (date) | Planned completion date |
| INFRASTRUCTURE | S (HTML/text) | Infrastructure description |
| DEVELOPER_ID | E (link) | Reference to developer company |
| GENPLAN_SVG | F (file) | SVG of territory master plan |
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:
| Property | Type | Index | Comment |
|---|---|---|---|
| ROOMS | L (list) | Facet | Studio, 1, 2, 3, 4+ |
| AREA_TOTAL | N (number) | Facet | Total area, m² |
| AREA_LIVING | N | No | Living area |
| AREA_KITCHEN | N | No | Kitchen area |
| FLOOR | N | Facet | Floor number |
| PRICE | N | Facet | Price, ₽ |
| PRICE_PER_M2 | N | Facet | Price per m² |
| STATUS | L | Facet | Available / Reserved / Sold |
| LAYOUT_IMG | F (file) | No | Layout image |
| LAYOUT_SVG_ID | S (string) | No | Apartment ID in SVG chessboard |
| FINISHING | L | Facet | No finish / Rough / Fine |
| WINDOW_VIEW | L | No | Courtyard / Street / Panoramic |
| DECORATION_IMG | F (multiple) | No | Decoration photos (if any) |
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:
-
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 attributedata-apartment-idmatching theLAYOUT_SVG_IDproperty 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. -
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 viadocument.querySelector. In practice: Bitrix reads the SVG file from the building section property and outputs its contents viafile_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>';
- 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);
});
});
}
-
Tooltip on hover. On hover over an apartment, a tooltip appears with brief info: rooms, area, price. Tooltip position is calculated via
getBoundingClientRect(). -
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.
-
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.
-
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.
-
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.
Technical requirements for SVG chessboard
- The file must be pure SVG without embedded raster images. - Each apartment element must have a unique identifier in the `data-apartment-id` attribute. - Canvas size: no larger than 2000x2000 px for Retina compatibility. - Default fill colors should be neutral (e.g., #E0E0E0) so that JS can recolor.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
| Project Scale | Timeline |
|---|---|
| One residential complex, 1-2 buildings, up to 200 apartments, basic chessboard | 1-4 weeks |
| 2-5 complexes, chessboard + construction progress + mortgage calculator + CRM | 5-8 weeks |
| Developer portal, 10+ complexes, 1C integration, PDF, personal account | 8-12 weeks |
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.