תוכנית קומה אינטראקטיבית של לוח שחמט לאתר מפתח על 1C-Bitrix

בניית אתר מפתח על 1C-Bitrix עם פריסת לוח שחמט

מחזור המכירה הממוצע בנדל"ן הוא 2–4 חודשים. הקונים חוזרים לאתר 8–15 פעמים: משווים תכניות, עוקבים אחר התקדמות הבנייה, מחשבים משכנתאות. אם האתר לא נותן מענה לצרכים אלה, הלקוח פונה למתחרה עם לוח שחמט עובד. הניסיון שלנו מראה שארכיטקטורת נתונים נכונה וכלים אינטראקטיביים מעלים את ההמרה ב-30–40%. לוח שחמט יעיל פי שניים מקטלוג טבלאי ומייצר פי 2 יותר לידים.

המאפיין הטכני המרכזי הוא תכנית הקומות האינטראקטיבית (לוח השחמט). זה לא רק טבלה אלא סכמת SVG שבה כל דירה ניתנת ללחיצה, מקודדת בצבע לפי סטטוס, ומקושרת לנתוני אינפובלוק אמיתיים. לוח השחמט מבדל את אתר המפתח מקטלוג תבניתי.

אנו מבטיחים שלוח השחמט שלך יהיה מהיר, אדפטיבי ומסונכרן עם 1C. מומחי Bitrix מוסמכים מבטיחים יציבות ואבטחה. במשך למעלה מ-10 שנים, ביצענו 200+ פרויקטים למפתחים — ממתחמי מגורים קטנים ועד פורטלים למפתחים גדולים.

כיצד לוח השחמט מעלה את ההמרה

לוח השחמט הוא ייצוג חזותי של קומות ודירות בתוך בניין. המשתמשים רואים חזית בניין או תכנית קומה, לוחצים על דירה ומקבלים כרטיס עם מחיר, שטח ותכנית. הדירות מקודדות בצבע לפי סטטוס: ירוק — זמין, צהוב — שמור, אפור — נמכר. מפתח עם לוח שחמט עובד מקבל 30–40% יותר לידים מאשר עם קטלוג טבלאי. זה מוכח ב-200+ פרויקטים: המרה ממוצעת עם לוח שחמט היא 5.2% לעומת 2.8% בלעדיו.

מדוע אינטגרציית 1C היא קריטית

מפתחים מנהלים את מלאי הדירות ב-1C:Enterprise. המחירים והסטטוסים מתעדכנים ב-1C, והאתר חייב לשקף נתונים בזמן אמת. ללא אינטגרציה, הנתונים מוזנים ידנית — מה שמוביל לשגיאות ועיכובים שעולים עד $1.8k–2.6k לחודש לתיקון. אינטגרציה זולה פי 10 מהזנה ידנית, וחוסכת עד $1.8k–2.6k לחודש. אנו מציעים שלוש אפשרויות:

• החלפה סטנדרטית של 1C-Bitrix (מודול catalog) — דרך CommerceML. עובד למחירים, אך סטטוסים דורשים מיפוי.
• REST API — 1C קורא ל-endpoint /api/apartments/update-status/, שולח JSON {apartment_code, status, price}. בקר בצד Bitrix מוצא את האלמנט לפי LAYOUT_SVG_ID ומעדכן מאפיינים. זמן עדכון: פחות משנייה אחת.
• ייצוא CSV תקופתי — 1C מעלה CSV ל-FTP; סוכן Bitrix אוסף אותו כל 15 דקות ומנתח. שגיאות ניתוח מתרחשות בכ-2% מהמקרים — מקובל עבור 1C ישן.

ארכיטקטורת נתונים: מתחם → בניין → דירה

מבנה האינפובלוק משקף את ההיררכיה הפיזית: מתחם מגורים מכיל בניינים (סקציות), בניין מכיל דירות.

אינפובלוק "מתחמי מגורים" (או Highload-block אם פחות מ-50 מתחמים) — ישות אב. מאפיינים:

סקציות אינפובלוק — בניינים וסקציות. כל מתחם הוא סקציה ברמה ראשונה. בניינים הם סקציות ברמה שנייה בתוך המתחם. אם לבניין יש מספר סקציות (כניסות) — סקציות ברמה שלישית. קינון זה מאפשר שימוש בניווט סטנדרטי של bitrix:catalog.section.list ללא שאילתות מותאמות אישית.

אלמנטים של אינפובלוק — דירות. כל דירה מקושרת לסקציית הבניין שלה. סט מאפיינים מינימלי:

המאפיין LAYOUT_SVG_ID הוא הקשר בין רשומת מסד הנתונים לקובץ לוח השחמט SVG.

כיצד פועל לוח השחמט האינטראקטיבי

בצע את השלבים הבאים כדי ליישם לוח שחמט:

1. הכנת קובץ SVG. המעצב מצייר חזית או תכנית קומה ב-Adobe Illustrator או Figma ומייצא ל-SVG. כל דירה היא <path> נפרד עם מאפיין data-apartment-id התואם לערך המאפיין LAYOUT_SVG_ID. מוסכמת שמות: בניין-קומה-מספר (לדוגמה, K1-5-01). הפורמט מוגדר במפרט הטכני. אם המעצב מגיש SVG ללא מאפיינים, המפתח מבזבז 2-3 ימים על הוספת הערות ידנית. לכן, תבנית SVG עם דוגמאות מאפיינים ניתנת למעצב לפני תחילת הציור.

2. SVG מוטבע, לא . ה-SVG אינו מוטמע דרך <img>, אלא מוטבע ישירות ב-HTML של הדף. סיבה: התוכן של <img> אינו נגיש ל-JavaScript (מדיניות cross-origin). SVG מוטבע הופך לחלק מה-DOM, וכל <img src="plan.svg"> נגיש דרך <path data-apartment-id="...">. בפועל: Bitrix קורא את קובץ ה-SVG ממאפיין סקציית הבניין ומוציא את התוכן שלו דרך document.querySelector ישירות לתבנית הרכיב:

$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: קישור SVG לנתוני דירות. בעת טעינת הדף, הפרונטאנד מקבל מערך JSON של דירות לבניין הנוכחי. מבנה JSON:

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 בריחוף. בריחוף מעל דירה, מופיע tooltip עם מידע קצר: חדרים, שטח, מחיר. מיקום ה-tooltip מחושב דרך file_get_contents().

5. כרטיס בלחיצה. נפתח פאנל צדדי עם פרטים מלאים: תכנית, שטח לפי חדרים, קומה, נוף מחלון, גימור, וכפתורים "הזמנה" ו"הורדת PDF". הנתונים כבר נטענו — אין צורך בבקשת AJAX נוספת.

6. סינון בלוח השחמט. מעל סכמת ה-SVG, יש פאנל סינון: מספר חדרים, טווח מחירים, טווח שטח. כשהסינון משתנה, JavaScript מסתיר דירות שאינן תואמות על ידי הפחתת האטימות שלהן ל-0.1. התואמות נשארות בהירות. זה עובד מיידית ללא בקשות לשרת.

7. SVG רספונסיבי. במחשב שולחני, ה-SVG תופס 100% מרוחב המכולה. במכשירים ניידים (<768px), תצוגת החזית אינה קריאה — אנו משתמשים בתצוגה לפי קומות שבה קומה אחת ממלאת את הרוחב, או pinch-to-zoom דרך ספריית panzoom. האפשרות הראשונה אמינה יותר.

8. עדכוני סטטוס בזמן אמת. כשמנהל מזמין דירה ב-CRM או ב-1C, סטטוס האתר חייב להשתנות ללא רענון. אנו משתמשים ב-polling כל 30 שניות: בקשת AJAX מחזירה מערך $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 מעדכן צבעים. עם 200 דירות, תגובת ה-JSON היא מתחת ל-5 KB.

התקדמות בנייה: דוחות תמונות ומצלמות

הסקציה "התקדמות בנייה" היא חובה לפרויקטים בבנייה. אינפובלוק "דוחות תמונות": כל אלמנט = דוח אחד (תאריך, תיאור, מאפיין "תמונה" מרובה). סקציות — בניינים. פלט — ציר זמן, ממוין לפי 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); }); }); } DESC. וידאו מרחפן — מאפיין מחרוזת עם URL של YouTube/Vimeo. הטמעה דרך getBoundingClientRect() עם [{svgId, status}]. מצלמת אינטרנט — DATE_ACTIVE_FROM עם סטרים מספק (Ivideon, Trassir). מוטמע בתבנית סקציית המתחם. שמירת מטמון מושבתת לבלוק המצלמה; שאר הדף נשמר במטמון כרגיל.

מחשבון משכנתא עם תוכניות בנקים

JavaScript טהור. Highload-block "תוכניות משכנתא": שדות <iframe>, loading="lazy", <iframe>, BANK_NAME, PROGRAM_NAME, RATE. בעת טעינת דף הדירה — בקשת AJAX או JSON מוטבע עם תוכניות פעילות. נוסחת תשלום שנתי: MIN_DOWNPAYMENT, כאשר S = מחיר פחות מקדמה, r = ריבית שנתית / 12 / 100, n = תקופה בחודשים. ממשק: בחירת בנק → ריבית ומקדמה מינימלית מתמלאים → שלושה סליידרים (עלות דירה מתמלאת אוטומטית, מקדמה, תקופה) → תוצאה: תשלום חודשי, תשלום יתר, סה"כ. מחושב מחדש בכל תנועת סליידר. זה עוזר ללקוחות לחסוך עד $1.8k–2.6k בשנה על ידי בחירת התוכנית האופטימלית.

SEO ומיקרודאטה

תבניות מטא דרך הגדרות אינפובלוק:

• כותרת: MAX_TERM
• תיאור: IS_ACTIVE

מיקרודאטה — Schema.org P = S × (r × (1 + r)^n) / ((1 + r)^n − 1) למתחם ו-Купить квартиру в ЖК #SECTION_NAME# — #ELEMENT_NAME#, от #PROPERTY_PRICE# $ לדירה:

{
  "@context": "https://schema.org",
  "@type": "Residence",
  "name": "ЖК Солнечный",
  "address": "г. Москва, ул. Строителей, 15",
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 55.75,
    "longitude": 37.61
  },
  "makesOffer": [
    {
      "@type": "Offer",
      "name": "2-комн. квартира, 58.3 м², 5 этаж",
      "price": "7200000",
      "priceCurrency": "USD",
      "availability": "https://schema.org/InStock"
    }
  ]
}

מה כלול בפיתוח אתר מפתח Turnkey

• אנליטיקה ואב-טיפוס לוח שחמט
• עיצוב מבנה אינפובלוק ו-HL-block
• אינטגרציה עם 1C ו-CRM (Bitrix24)
• מחשבון משכנתא וטופס הזמנה
• יצירת PDF לתכניות
• פריסת לוח שחמט אדפטיבית
• סימון מיקרודאטה ותבניות SEO
• הדרכת צוות בניהול האתר
• חודש תמיכה לאחר השקה

שלבים ולוחות זמנים

לוחות הזמנים מניחים קבצי SVG מוכנים עם סימון #PROPERTY_ROOMS#-комн. квартира #PROPERTY_AREA_TOTAL# м² на #PROPERTY_FLOOR# этаже в ЖК #SECTION_NAME#. Застройщик #PROPERTY_DEVELOPER#. נכון. אם יש ליצור SVG מאפס — הוסף 1-2 שבועות לכל בניין.

עלות הפיתוח מחושבת באופן אישי לפי היקף האינטגרציות. בקש ייעוץ — נעריך את הפרויקט שלך תוך יום אחד. קבל אתר מפתח שפותח עם תוצאות מובטחות.