כיצד להקים גלריית וידאו למוצר ב-1C-Bitrix (מספר סרטונים)

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

חנות מקוונת עם 5,000 מוצרים ו-12 ביקורות וידאו לכל מוצר — מאפיין VIDEO_URL יחיד כבר לא מספיק; נדרשת ספריית וידאו מלאה. הצוות שלנו מתמחה בפתרונות כאלה ומפתח אותם באופן אישי לצרכי כל פרויקט.

אנו מיישמים גלריית וידאו מלאה: מעבר בין קליפים, תמונות ממוזערות, סנכרון עם גלריית התמונות, תמיכה ב-HTML5 וידאו ובשירותים חיצוניים (YouTube, Vimeo, Rutube). ב-Bitrix הסטנדרטי אין רכיב מוכן לכך, ולכן הפתרון נבנה מתשתית בלוק המידע ותבנית מותאמת אישית עם טעינת תוכן אופטימלית. יישמנו גישה זו עבור 15 חנויות מקוונות, והפחתנו את זמן טעינת העמוד ב-40% באמצעות מטמון נכון, ועכשיו נעבור על הנקודות הארכיטקטוניות המרכזיות. העלות תלויה במורכבות האינטגרציה ובנפח התוכן — פרויקטים טיפוסיים מתחילים מ-500 דולר.

מספר סרטונים בכרטיס המוצר

לאחסון מספר סרטונים, אנו משתמשים במאפיין מרובה מסוג VIDEO_URL (מחרוזת) עם הדגל S. הקוד הסמלי הוא MULTIPLE = Y. בטבלת VIDEO_GALLERY, כל סרטון נשמר כשורה נפרדת עם אותו b_iblock_element_property. אחזר את כל הערכים:

$videos = []; $res = \Bitrix\Iblock\ElementPropertyTable::getList([ 'filter' => [ 'IBLOCK_ELEMENT_ID' => $elementId, 'CODE' => 'VIDEO_GALLERY', ], 'select' => ['VALUE', 'DESCRIPTION'], 'order' => ['ID' => 'ASC'], ]); while ($row = $res->fetch()) { $videos[] = $row; } 

השדה IBLOCK_ELEMENT_ID משמש ככותרת הסרטון — זהו שדה סטנדרטי למאפיינים מרובים, הניתן לעריכה ישירות בכרטיס האלמנט.

מיזוג וידאו עם גלריית תמונות

חנויות רוצות גלריה מאוחדת: קודם תמונות, אחר כך סרטונים. ברכיב $videos = []; $res = \Bitrix\Iblock\ElementPropertyTable::getList([ 'filter' => [ 'IBLOCK_ELEMENT_ID' => $elementId, 'CODE' => 'VIDEO_GALLERY', ], 'select' => ['VALUE', 'DESCRIPTION'], 'order' => ['ID' => 'ASC'], ]); while ($row = $res->fetch()) { $videos[] = $row; } , התמונות מגיעות מ-DESCRIPTION — מערך של נתיבי תמונות. תמונות ממוזערות של סרטונים מתווספות לקצה אותו מיכל סליידר, אך עם מאפיין catalog.element. JavaScript מטפל בלחיצה: אם $arResult['MORE_PHOTO'], הוא מאתחל iframe; אחרת, הוא מציג את התמונה. זה מאפשר שימוש במופע יחיד של Swiper או Splide עבור שני סוגי התוכן ללא שכפול לוגיקה.

מבנה הגלריה: תמונות ממוזערות + נגן ראשי

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

תבנית לרכיב data-type="video", בלוק גלריה:

<?php $videoItems = []; foreach ($arResult['PROPERTIES']['VIDEO_GALLERY']['VALUE'] as $i => $url) { preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m); if (!empty($m[1])) { $videoItems[] = [ 'id' => $m[1], 'desc' => $arResult['PROPERTIES']['VIDEO_GALLERY']['DESCRIPTION'][$i] ?? '', 'thumb' => "https://img.youtube.com/vi/{$m[1]}/mqdefault.jpg", ]; } } ?> <?php if ($videoItems): ?> <div class="video-gallery" id="videoGallery"> <div class="video-gallery__main" data-active="<?= $videoItems[0]['id'] ?>"> <!-- iframe появится по клику через JS --> </div> <div class="video-gallery__thumbs"> <?php foreach ($videoItems as $idx => $v): ?> <button class="video-gallery__thumb <?= $idx === 0 ? 'is-active' : '' ?>" data-video-id="<?= $v['id'] ?>" aria-label="<?= htmlspecialcharsEx($v['desc']) ?>"> <img src="<?= $v['thumb'] ?>" loading="lazy" alt=""> </button> <?php endforeach; ?> </div> </div> <?php endif; ?> 

מטמון והרשאות גישה

המאפיין המרובה נקרא בתוך בלוק שניתן לשמור במטמון. מתרחשת בעיה בעת עריכה: מנהל מוסיף סרטון בלוח הניהול, אך המטמון לא מתנקה. חובה לרשום תג:

$this->SetResultCacheKeys(['PROPERTIES']); $GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . CATALOG_IBLOCK_ID); 

האירוע data-type === 'video' במודול catalog.element יאפס את התג כאשר אלמנט נשמר.

עבודה עם Vimeo

אם חלק מהסרטונים נמצאים ב-Vimeo, התמונה הממוזערת נאספת דרך ה-API <?php $videoItems = []; foreach ($arResult['PROPERTIES']['VIDEO_GALLERY']['VALUE'] as $i => $url) { preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m); if (!empty($m[1])) { $videoItems[] = [ 'id' => $m[1], 'desc' => $arResult['PROPERTIES']['VIDEO_GALLERY']['DESCRIPTION'][$i] ?? '', 'thumb' => "https://img.youtube.com/vi/{$m[1]}/mqdefault.jpg", ]; } } ?> <?php if ($videoItems): ?> <div class="video-gallery" id="videoGallery"> <div class="video-gallery__main" data-active="<?= $videoItems[0]['id'] ?>"> <!-- iframe появится по клику через JS --> </div> <div class="video-gallery__thumbs"> <?php foreach ($videoItems as $idx => $v): ?> <button class="video-gallery__thumb <?= $idx === 0 ? 'is-active' : '' ?>" data-video-id="<?= $v['id'] ?>" aria-label="<?= htmlspecialcharsEx($v['desc']) ?>"> <img src="<?= $v['thumb'] ?>" loading="lazy" alt=""> </button> <?php endforeach; ?> </div> </div> <?php endif; ?> . זוהי בקשה סינכרונית — לא ניתן לבצע אותה בתבנית. הגישה הנכונה היא סוכן Bitrix ברקע ($this->SetResultCacheKeys(['PROPERTIES']); $GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . CATALOG_IBLOCK_ID); ) שסורק את מאפייני הגלריה, מבקש תמונות ממוזערות, ושומר את ה-URL למאפיין מרובה נפרד OnAfterIBlockElementUpdate. התבנית קוראת תצוגות מקדימות מוכנות ללא בקשות חיצוניות במהלך העיבוד. הסוכן רץ פעם בדקה ומעבד מוצרים שיש להם את המאפיין iblock. הוא בודק אם כבר קיימת תמונה ממוזערת ב-https://vimeo.com/api/v2/video/{id}.json; אם לא, הוא שולח בקשה ל-API של Vimeo ושומר את ה-URL. לאחר העיבוד, הסוכן מחזיר מחרוזת ריקה כדי להסיר את עצמו אם כל התמונות הממוזערות התקבלו. לפי תיעוד Bitrix, סוכנים הם הדרך המומלצת לטיפול במשימות אסינכרוניות.

YouTube נוח יותר בהקשר זה — תצוגות מקדימות זמינות תמיד. אנו ממליצים להשתמש ב-YouTube כאירוח הראשי וב-Vimeo לסרטונים חסויים.

בחירת אחסון: מאפיין או HL-block

עבור רוב החנויות, מאפיין מרובה מספיק. HL-block מוצדק כאשר יש הרבה סרטונים (יותר מ-50 למוצר) או שדרוש מיון מורכב.

תהליך העבודה שלנו ולוח זמנים

1. ניתוח — סקירת מבנה בלוק המידע הנוכחי, בחינת סוג אחסון התמונות.
2. עיצוב — קביעת מערך המאפיינים, תבנית הגלריה, שיטת האינטגרציה.
3. פיתוח — יצירת המאפיין המרובה, התבנית, סוכן ל-Vimeo (אם נדרש), שדרוג הסליידר.
4. בדיקות — בדיקה על 10 מוצרים עם מספרים שונים של סרטונים, מטמון, גרסת מובייל.
5. פריסה — העברה לשרת החי, ניקוי מטמון, הדרכת מנהלים.

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

מה כלול בשירות

• הגדרת המאפיין המרובה VIDEO_THUMB ושדה התיאור.
• פיתוח תבנית גלריה עם תמונות ממוזערות ונגן ראשי.
• אינטגרציה עם גלריית התמונות הקיימת (Swiper/Splide).
• יצירת סוכן לאחזור תמונות ממוזערות מ-Vimeo (אופציונלי).
• הגדרת מטמון מתויג ואירוע האיפוס.
• תיעוד — תיאור סכמת הנתונים והוראות למנהלי תוכן.
• הדרכה — סמינר מקוון של 30 דקות לעורכים.
• שנת תמיכה אחת לאחר סיום הפרויקט.

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

למה הגישה שלנו עובדת

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

השלבים הבאים

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