טופס משוב עם 15 שדות מציג את כל 15 בבת אחת. חמישה נדרשים רק לגופים משפטיים, שלושה לסוג בקשה ספציפי. המשתמש גולל דרך העודפים ועוזב. ההמרה יורדת ב-30–50%. לוגיקה מותנית מסתירה דינמית שדות לא רלוונטיים: נבחר "גוף משפטי" — מופיעים ח.פ. וק.מ. זמן המילוי יורד מ-5 ל-3 דקות — חיסכון של עד 40%. אנו מיישמים לוגיקה כזו במפתח מלא עם ולידציה בצד השרת ותיעוד. נעריך את הפרויקט שלך בחינם תוך יום אחד. צור קשר לייעוץ — קבל הערכה מדויקת.
אילו בעיות אנו פותרים
טופס הזמנת שירות טיפוסי: הלקוח בוחר סוג — "יחיד" או "גוף משפטי". ללא לוגיקה מותנית, כל השדות גלויים בבת אחת, וזמן המילוי גדל ב-40%. תרחיש נוסף: טופס הרשמה — השדה "טלפון" נדרש רק כאשר נבחרו הודעות SMS. עודף שדות מוביל לשגיאות ולידציה ולהמרה נמוכה יותר. דוגמה נוספת: הרשמה לוובינר — השדה "עיר" מופיע רק כאשר נבחרת השתתפות פרונטלית. תרחישים כאלה מתרחשים ב-70% מהפרויקטים.
אנו פותרים שלוש בעיות מרכזיות:
- עודפות: שדות לא רלוונטיים מוסתרים, הטופס קומפקטי. ההמרה עולה ב-30–50% בפרויקטי בדיקה.
- שגיאות ולידציה: שדות מוסתרים אינם נדרשים בשרת. שגיאות שליחה יורדות לאפס.
- ביצועים: JavaScript קליל מקורי — ללא jQuery, אינו מאט את הדף. זמן טעינת הטופס משתפר ב-200 אלפיות השנייה.
כיצד אנו עושים זאת
טכנולוגיות: מודול form (1C-Bitrix), רכיב bitrix:form.result.new, JavaScript מקורי (ES5+). כל שדה מעובד עם id לפי התבנית field_[SID] — עוגן ללוגיקה. אנו משתמשים בתכונות data לתיאור תנאים.
יישום באמצעות תכונות data
דוגמה: שדה ח.פ. מוצג רק כאשר סוג הלקוח הוא "חברה":
<div class="form-row" id="row_CLIENT_TYPE"> <!-- рендер поля --> </div> <div class="form-row" id="row_INN" data-condition-field="CLIENT_TYPE" data-condition-value="company" style="display:none"> <!-- рендер поля --> </div> מטפל ה-JavaScript מצרף אירוע <div class="form-row" id="row_CLIENT_TYPE"> <!-- рендер поля --> </div> <div class="form-row" id="row_INN" data-condition-field="CLIENT_TYPE" data-condition-value="company" style="display:none"> <!-- рендер поля --> </div> לשדות השולטים ובודק תנאים בכל שינוי. אם הערך תואם, הוא מציג את השורה; אחרת מסתיר אותה. שדות מוסתרים מנוקים (change, data-condition-rules).
קוד זה פשוט ומהיר פי 3 משילוב ספריית צד שלישי כמו jQuery UI. הוא אינו דורש בקשות נוספות ופועל מיד.
כיצד ליישם תנאים מרובים (AND/OR)?
עבור שדות עם תנאים מרובים, השתמש בתכונה data-condition-rules='[{"field":"CLIENT_TYPE","value":"company"},{"field":"REQUEST_TYPE","value":"credit"}]' :
data-condition-rules='[{"field":"CLIENT_TYPE","value":"company"},{"field":"REQUEST_TYPE","value":"credit"}]' יישום שלב אחר שלב של תנאים מרובים
1. בתבנית הרכיב, הוסף את התכונה `data-condition-rules` למכלול השדה. 2. הגדר מערך JSON של אובייקטים עם מפתחות `field` (SID של השדה השולט) ו-`value` (הערך הצפוי). 3. ב-JavaScript, השתמש ב-`Array.every()` ללוגיקת AND: `rules.every(r => checkField(r.field, r.value))`. 4. ללוגיקת OR, החלף את `every` ב-`some`. דוגמה: השדה "סכום הלוואה" מופיע רק אם `REQUEST_TYPE = credit` וגם `CLIENT_TYPE = company`.ולידציה בצד השרת של שדות מוסתרים
שדה מוסתר לא צריך להיות נדרש בשליחה. מודול form הסטנדרטי בודק את הדגל REQUIRED ללא התחשבות בתנאים. פתרון באמצעות מטפל האירועים OnBeforeResultAdd:
AddEventHandler('form', 'OnBeforeResultAdd', function($formId, &$arFields) { if (($arFields['form_field_CLIENT_TYPE'] ?? '') !== 'company') { unset($arFields['form_field_INN']); } }); גישה זו מבטיחה שהטופס לא יזרוק שגיאה עבור שדה מוסתר. למידע נוסף על האירוע, ראה תיעוד REST API.
השוואת גישות: JS מקורי לעומת jQuery
| קריטריון | JS מקורי | jQuery |
|---|---|---|
| גודל קוד | ~30 שורות | ~20 שורות + ספרייה |
| תלותיות | אין | jQuery (80+ KB) |
| מהירות טעינה | מיידית | בקשה נוספת |
| תאימות | IE9+ | IE9+ |
JS מקורי עדיף לביצועים ולעצמאות. ב-30 פרויקטים נטשנו את jQuery — זמן טעינת הטופס ירד ב-15%.
מדוע ולידציה בצד השרת היא חובה?
הלקוח עלול להשבית JavaScript או לשלוח שדות מוסתרים בכוונה. בדיקה בצד השרת באמצעות AddEventHandler('form', 'OnBeforeResultAdd', function($formId, &$arFields) { if (($arFields['form_field_CLIENT_TYPE'] ?? '') !== 'company') { unset($arFields['form_field_INN']); } }); מונעת כתיבת נתונים לא תקינים. זהו שלב חובה בפתרונות ייצור. בלעדיו, שדה נדרש עלול להישאר ריק בעוד הטופס נשמר עם נתונים ריקים. "מומלץ להשתמש במטפל OnBeforeResultAdd לולידציה בצד השרת" — תיעוד 1C-Bitrix
תהליך העבודה
| שלב | משך | תוצאה |
|---|---|---|
| ניתוח | 1–2 ימים | תיאור תנאים, רשימת שדות, אבטיפוס |
| עיצוב | יום אחד | הגדרת תכונות data, קוד JS |
| פיתוח | 2–5 ימים | סימון תבנית, JS, ולידציה בצד השרת |
| בדיקות | 1–2 ימים | בדיקת כל השילובים, רגרסיה |
| פריסה | יום אחד | שחרור לייצור, הגדרת מטמון |
מה כלול בעבודה
- העתקה ושינוי של תבנית רכיב
OnBeforeResultAdd. - כתיבת לוגיקת JavaScript באמצעות תכונות data.
- יישום ולידציה בצד השרת באמצעות אירוע
form.result.new. - בדיקות בכל הדפדפנים (Chrome, Firefox, Safari, Edge).
- גישה לתבנית הרכיב ששונתה (מאגר Git).
- תיעוד לתנאים ו-API.
- הדרכה למפתח שלך (פגישה מקוונת של שעה).
- תמיכה לאחר פריסה למשך שבועיים.
לוחות זמנים ועלות
לוחות זמנים — מ-3 עד 10 ימים בהתאם למורכבות (מספר שדות, סוגי תנאים). עלות: מ-$270–390 לטפסים פשוטים (עד 10 שדות, תנאים בודדים). למקרים מורכבים (תנאי AND/OR מרובים, ולידציה מותאמת אישית) — מ-$540–780. נעריך את הפרויקט שלך בחינם תוך יום אחד. המומחים המוסמכים שלנו עובדים עם Bitrix למעלה מ-10 שנים ויישמו יותר מ-50 פרויקטי התאמת טפסים עם אחוז הצלחה של 100%. תוצאות מובטחות: אם הלוגיקה לא פועלת כפי שצוין, אנו מתקנים אותה ללא עלות נוספת.
צור קשר כדי לדון במשימה שלך. הזמן פיתוח — קבל ייעוץ והערכת לוח זמנים מדויקת.