הגדרת ביקורות וידאו בכרטיס מוצר ב-1C-Bitrix

לעתים קרובות אנו נתקלים בתרחיש שבו כרטיס מוצר טוען iframe של YouTube, ומשתמשים רואים רק בלוק ריק עד שהנגן מאותחל. זה מגדיל את LCP במכשירים ניידים עד 4 שניות, וההמרה יורדת. פתרנו זאת עם טעינה עצלה של תצוגות מקדימות. תצוגות מקדימות בטעינה עצלה יעילות פי 10 מאשר iframe ישיר: משקל העמוד יורד מ-800 KB ל-10 KB, ומספר בקשות ה-HTTP יורד פי 4. הניסיון שלנו — למעלה מ-7 שנים עם Bitrix, למעלה מ-120 פרויקטים עם אינטגרציות וידאו. לפי מחקר של Google Web Vitals, כל שנייה של עיכוב בטעינה מפחיתה את ההמרה ב-20%. לפי ההערכות שלנו, תצוגות מקדימות בטעינה עצלה מפחיתות את עלויות האחסון בעד 30% בשל הפחתת התעבורה.

היכן לאחסן וידאו ב-infoblock?

ל-Bitrix אין סוג שדה 'וידאו' מקורי בסוגי המאפיינים הסטנדרטיים. לרוב, סקירת וידאו מאוחסנת באחד משלושה מקומות:

• מאפיין מסוג S (מחרוזת) עם כתובת URL ל-YouTube/Vimeo — האפשרות הנפוצה ביותר
• מאפיין מסוג F (קובץ) — העלאת mp4 ישירה לשרת, טבלה b_iblock_element_property
• שדה תיאור מפורט (HTML/TinyMCE) — וידאו קבור בתוך b_iblock_element.DETAIL_TEXT

לחנות מקוונת על bitrix.catalog, הדרך הנכונה היא מאפיין נפרד עם קוד סמלי, לדוגמה, VIDEO_URL, המקושר ל-infoblock של הקטלוג. שאל אותו דרך CIBlockElement::GetProperty() או דרך \Bitrix\Iblock\ElementPropertyTable (D7):

$props = \Bitrix\Iblock\ElementPropertyTable::getList([
    'filter' => ['IBLOCK_ELEMENT_ID' => $elementId, 'CODE' => 'VIDEO_URL'],
    'select' => ['VALUE'],
])->fetch();

השווה בין שיטות האחסון:

מדוע iframe מאט את הטעינה?

הבעיה העיקרית — $props = \Bitrix\Iblock\ElementPropertyTable::getList([ 'filter' => ['IBLOCK_ELEMENT_ID' => $elementId, 'CODE' => 'VIDEO_URL'], 'select' => ['VALUE'], ])->fetch(); חוסם את ה-thread הראשי: הדפדפן טוען את כל חבילת ה-JS של YouTube (500–800 KB) עוד לפני שהמשתמש לוחץ על Play. זה קריטי עבור LCP במובייל ושיעור הנטישה.

פתרון: הצג תצוגה מקדימה מותאמת אישית באמצעות API של תמונות ממוזערות של YouTube (<iframe src="https://www.youtube.com/embed/..." title="YouTube video">) והחלף אותה ב-iframe רק בלחיצה.

בתבנית הרכיב https://img.youtube.com/vi/{VIDEO_ID}/hqdefault.jpg (catalog.element), ההיגיון הוא:

<?php if (!empty($arResult['PROPERTIES']['VIDEO_URL']['VALUE'])): ?>
    <?php $videoUrl = $arResult['PROPERTIES']['VIDEO_URL']['VALUE']; preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $videoUrl, $matches); $videoId = $matches[1] ?? ''; ?>
    <div class="product-video" data-video-id="<?= htmlspecialchars($videoId) ?>">
        <img src="https://img.youtube.com/vi/<?= $videoId ?>/hqdefault.jpg" loading="lazy" alt="Видеообзор товара" class="video-preview">
        <button class="video-play-btn" aria-label="Воспроизвести видео">▶</button>
    </div>
<?php endif; ?>

JavaScript בלחיצה מחליף את ה-div ב-iframe עם template.php. זה מסיר בקשה נוספת ל-YouTube בטעינת העמוד ומפחית את משקל העמוד ב-500–800 KB.

השוואה: iframe לעומת טעינה עצלה

כיצד להגדיר שמירה במטמון של וידאו?

התבנית <?php if (!empty($arResult['PROPERTIES']['VIDEO_URL']['VALUE'])): ?> <?php $videoUrl = $arResult['PROPERTIES']['VIDEO_URL']['VALUE']; preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $videoUrl, $matches); $videoId = $matches[1] ?? ''; ?> <div class="product-video" data-video-id="<?= htmlspecialchars($videoId) ?>"> <img src="https://img.youtube.com/vi/<?= $videoId ?>/hqdefault.jpg" loading="lazy" alt="Видеообзор товара" class="video-preview"> <button class="video-play-btn" aria-label="Воспроизвести видео">▶</button> </div> <?php endif; ?> נשמרת במטמון דרך autoplay=1. אם הווידאו משתנה בלוח הניהול, המטמון לא מתאפס אוטומטית — יש צורך לקרוא ל-catalog.element כאשר CBitrixComponent::StartResultCache() ריק, או להוסיף תג מטמון:

$GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . $iblockId); 

לאחר מכן, כאשר רכיב infoblock נשמר (אירוע $this->AbortResultCache()), המטמון מתבטל כראוי.

וידאו בווריאציות מוצר (SKU)

אם לווריאציות SKU (טבלה VIDEO_URL, סוג $GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . $iblockId); — הצעה) יש וידאו שונה, יש צורך לטעון את המאפיין של ההצעה הספציפית, לא של רכיב האב. ה-OnAfterIBlockElementUpdate הסטנדרטי לא עושה זאת — הוא מחזיר רק מאפיינים של המוצר הראשי. פתרון: בקשת AJAX בעת שינוי SKU לפעולה או רכיב מותאם אישית שמחזיר b_catalog_product עבור ה-P הנבחר.

ברכיב catalog.element, הפרמטר VIDEO_URL מצביע על ה-infoblock של ההצעות — משם יש לשלוף מאפייני מדיה.

כיצד להוסיף נתונים מובנים עבור וידאו?

גוגל מאנדקסת וידאו בכרטיס המוצר אם קיים סימון VideoObject. Bitrix לא מייצר זאת אוטומטית. הוסף זאת ידנית בתבנית:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "VideoObject",
    "name": "<?= htmlspecialcharsEx($arResult['NAME']) ?>",
    "thumbnailUrl": "https://img.youtube.com/vi/<?= $videoId ?>/hqdefault.jpg",
    "uploadDate": "<?= date('Y-m-d') ?>",
    "embedUrl": "https://www.youtube.com/embed/<?= $videoId ?>"
  }
</script>

זה נותן סיכוי להופיע בקרוסלת הווידאו בחיפוש ללא תוספים של צד שלישי.

מה כולל הגדרת סקירות וידאו?

• יצירה או הגדרה של מאפיין offerId עבור infoblock הקטלוג
• פיתוח תצוגה מקדימה בטעינה עצלה עם תמונות ממוזערות של YouTube
• הגדרת שמירה במטמון עם תגים עבור הרכיב
• הטמעת נתונים מובנים VideoObject
• בדיקה במכשירים ניידים ושולחניים
• תיעוד לניהול וידאו מלוח הניהול

תהליך העבודה

1. ניתוח — ביקורת על כרטיס המוצר הנוכחי, מדידת LCP ומספר הבקשות.
2. עיצוב — בחירת שיטת האחסון ותוכנית השמירה במטמון.
3. פיתוח — שינוי התבנית bitrix:catalog.element, היגיון JS ו-JSON-LD.
4. בדיקה — בדיקה ב-3–5 מכשירים פופולריים.
5. פריסה — העלאה לסביבת הייצור עם ניטור מדדים.

לוח זמנים: בין יום ל-3 ימי עסקים בהתאם למורכבות האינטגרציה. העלות נקבעת לאחר הניתוח. כדי להתחיל, בקש ייעוץ וביקורת מפורטת.

הניסיון שלנו — למעלה מ-7 שנים עם Bitrix, מומחים מוסמכים, ואחריות על כל השינויים. צור קשר להערכת פרויקט — ננתח את כרטיס המוצר הנוכחי שלך ונציע פתרון אופטימלי.