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

אנו מפתחים טיימר ספירה לאחור מותאם אישית ויעיל למבצעים ב-1C-Bitrix שמגביר את ההמרה ב-15–25%. תרחיש טיפוסי: בכרטיס מוצר עם הנחה מוגבלת, יש להציג את הזמן שנותר עד לסיום המבצע. מנגנון ההנחות המובנה של Bitrix קובע תקופת תוקף, אך ספירה לאחור חזותית בצד הלקוח דורשת יישום נפרד באמצעות רכיבים ו-JavaScript. בפרויקט אחד, שילבנו טיימר עבור 250 מוצרים ברשימה — ללא מצב אצווה, העמוד נטען תוך 15 שניות. לאחר אופטימיזציה — 0.3 שניות. גישה זו חוסכת עד 40% מזמן הטעינה. טיימר מיושם כראוי מגביר את ההמרה בשל אפקט הדחיפות והלחץ הפסיכולוגי של זמינות מוגבלת של המוצר. אנו מיישמים גישה מקיפה לסנכרון שרת-לקוח, אופטימיזציית ביצועים ואינטגרציה עם מערכת Bitrix.

מקור נתונים: היכן לקבל את תאריך הסיום

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

• הנחות קטלוג — טבלה b_catalog_discount, שדות ACTIVE_FROM ו-ACTIVE_TO. נשלפים באמצעות \Bitrix\Catalog\DiscountTable::getList() עם פילטר ACTIVE = Y ו-ACTIVE_TO > NOW().
• כללי סל — טבלה b_sale_discount, שדות דומים. API: \Bitrix\Sale\Internals\DiscountTable::getList().
• מאפיין מוצר — ניתן ליצור מאפיין אינפובלוק PROMO_END_DATE מסוג "תאריך/שעה" ולמלא אותו ידנית או אוטומטית כאשר מוצר מקושר למבצע.

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

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

ארכיטקטורת רכיב

אנו יוצרים רכיב מותאם אישית local:sale.countdown ב-/local/components/local/sale.countdown/ עם תמיכה מלאה במטמון. המבנה הסטנדרטי:

• class.php — לוגיקת בחירת נתונים.
• templates/.default/template.php — סימון HTML.
• templates/.default/script.js — לוגיקת ספירה לאחור ב-JavaScript.
• .parameters.php — פרמטרי רכיב הניתנים להגדרה.

פרמטרי רכיב:

ב-class.php, הרכיב שולף את תאריך הסיום מהמקור הנבחר ומעביר חותמת זמן לתבנית:

$this->arResult['TIMESTAMP_END'] = (new \Bitrix\Main\Type\DateTime($endDate))->getTimestamp(); 

מדוע הטיימר חייב להיות מקושר להנחות אמיתיות?

אם התאריך מקודד קשיח בתבנית, הטיימר לא יתעדכן כאשר המבצע משתנה בלוח הניהול. הרכיב שולף דינמית ACTIVE_TO ממסד הנתונים, משתמש במטמון מתויג, ומתאפס כאשר ההנחה משתנה באמצעות מטפלי אירועים. שגיאת סנכרון יכולה לעלות עד $900–1.3k ברווח אבוד עקב מבצע שגוי.

כיצד לסנכרן זמן בין לקוח לשרת?

שעוני לקוח עשויים להיות שונים משעוני שרת — זה קריטי עבור טיימר. פתרון: השרת מעביר לא רק $this->arResult['TIMESTAMP_END'] = (new \Bitrix\Main\Type\DateTime($endDate))->getTimestamp(); , אלא גם TIMESTAMP_END — זמן השרת הנוכחי. JavaScript מחשב את ההפרש ומתקן את הספירה לאחור:

const serverNow = parseInt(container.dataset.serverTime); const clientNow = Math.floor(Date.now() / 1000); const drift = serverNow - clientNow; const remaining = endTime - (Math.floor(Date.now() / 1000) + drift); 

עדכון ה-DOM כל שנייה באמצעות TIMESTAMP_SERVER עובד. אך עבור מספר טיימרים בעמוד (רשימת מוצרים עם מבצעים), עדיף לולאת const serverNow = parseInt(container.dataset.serverTime); const clientNow = Math.floor(Date.now() / 1000); const drift = serverNow - clientNow; const remaining = endTime - (Math.floor(Date.now() / 1000) + drift); אחת שמעדכנת את כל הטיימרים במעבר אחד. עצה מעשית: הסטייה מגיעה לעיתים קרובות ל-5-7 שניות במחשבים חלשים, לכן תמיד יש להחיל תיקון, גם אם השרת והלקוח בדרך כלל מסונכרנים.

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

אינטגרציה עם מטמון מרוכב

המטמון המרוכב של Bitrix (autocomposite) מאחסן את כל עמוד ה-HTML. טיימר עם חותמת זמן שרת ב-HTML שובר את המטמון: כל כניסה הופכת לייחודית.

פתרון — הצב את בלוק הטיימר באזור דינמי. ב-requestAnimationFrame:

$frame = new \Bitrix\Main\Page\Frame('countdown_' . $this->arParams['DISCOUNT_ID']); $frame->begin(); // HTML таймера $frame->end(); 

בתוך האזור הדינמי, ה-HTML מתעדכן בכל בקשה, בעוד שאר העמוד מוגש מהמטמון.

חלופה — אל תפלטו את חותמת הזמן ב-HTML כלל. במקום זאת, אחסנו אותה בנקודת קצה נפרדת (remaining <= 0) ש-JavaScript מבקש פעם אחת בטעינת העמוד. העמוד נשמר במטמון מלא; נתוני הטיימר נטענים בנפרד.

\Bitrix\Main\EventManager::getInstance()->addEventHandler( 'catalog', 'OnAfterCatalogDiscountUpdate', function ($discountId) { \Bitrix\Main\Data\Cache::clearCacheByTag('catalog_discount_' . $discountId); } );