בלוק "נצפה לאחרונה" ב-1C-Bitrix: בחירת הגישה הנכונה

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

יישום בלוק "נצפה לאחרונה" ב-1C-Bitrix הוא משימה שפתרנו עבור 30+ חנויות מקוונות. במאמר זה, נסקור שלוש גישות לאחסון היסטוריה: localStorage, אחסון בצד השרת, והיברידי. תלמד כיצד ליישם כל אפשרות ולהימנע ממלכודות נפוצות. עלות הפיתוח מחושבת באופן אישי, ובחירת גישה נכונה יכולה לחסוך עד 30% בעבודות חוזרות. צור קשר לייעוץ על הפרויקט שלך.

כיצד ליישם בלוק "נצפה לאחרונה" ב-Bitrix?

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

localStorage: מהיר אך ללא סנכרון

localStorage הוא הפתרון הפשוט ביותר. JavaScript שומר מזהי מוצרים שנצפו בדפדפן. כאשר העמוד נטען, הרשימה נשלחת לשרת דרך AJAX, והשרת מחזיר נתונים עדכניים (מחיר, זמינות, הנחה). זה עובד ללא הרשמה ולא מעמיס על מסד הנתונים. החיסרון: ההיסטוריה קשורה למכשיר אחד ונמחקת כאשר נתוני הדפדפן מאופסים.

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

למשתמשים מורשים, אנו שומרים היסטוריה ב-MySQL בטבלת custom_user_recently_viewed. כל צפייה היא רשומה עם user_id, product_id, וזמן. זה מספק סנכרון בין מכשירים אך דורש הרשמה. משתמשים אנונימיים נשארים ללא היסטוריה אלא אם כן אתה משתמש ב-b_sale_fuser (guestID).

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

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

למה לבחור בגישה ההיברידית?

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

מדריך שלב אחר שלב: גישה היברידית

1. התקן גשש JavaScript בדף פרטי המוצר כדי לשמור מזהים ב-localStorage.
2. צור מטפל AJAX שמחזיר נתוני מוצר עבור מזהים נתונים.
3. יישם אחסון בשרת למשתמשים מורשים עם טבלת custom_user_recently_viewed.
4. כתוב סקריפט הגירה להעברת היסטוריה מ-localStorage למסד הנתונים בעת התחברות.
5. הצג את הבלוק בעמוד ובחשבון האישי.

יישום: localStorage ומטפל AJAX

1. כתוב גשש JavaScript לשמירת מזהה המוצר ב-localStorage.
2. צור מטפל AJAX ב-PHP שמחזיר נתוני מוצר עבור מזהים נתונים.
3. הצג את הבלוק בעמוד, והסתר אותו אם אין היסטוריה.

גשש JavaScript

const STORAGE_KEY = 'viewed_products'; const MAX_ITEMS = 20; // Вызывается при загрузке карточки товара function trackProductView(productId) { let viewed = getViewedProducts(); // Удаляем если уже есть (переместим в начало) viewed = viewed.filter(id => id !== productId); // Добавляем в начало viewed.unshift(productId); // Ограничиваем размер if (viewed.length > MAX_ITEMS) { viewed = viewed.slice(0, MAX_ITEMS); } localStorage.setItem(STORAGE_KEY, JSON.stringify(viewed)); } function getViewedProducts() { try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); } catch { return []; } } // Загрузка данных для блока function loadRecentlyViewed(currentProductId, containerId, limit = 8) { const viewed = getViewedProducts() .filter(id => id !== currentProductId) .slice(0, limit); if (viewed.length === 0) { document.getElementById(containerId).style.display = 'none'; return; } fetch('/ajax/recently-viewed/', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ ids: viewed }), }) .then(r => r.json()) .then(data => renderRecentlyViewed(data.products, containerId)); } 

מטפל AJAX ב-PHP

// local/ajax/recently-viewed/index.php \Bitrix\Main\Loader::includeModule('iblock'); \Bitrix\Main\Loader::includeModule('catalog'); $ids = array_filter(array_map('intval', json_decode(file_get_contents('php://input'), true)['ids'] ?? [])); if (empty($ids) || count($ids) > 20) { echo json_encode(['products' => []]); exit; } // Сохраняем порядок из localStorage $result = []; $products = []; $res = \CIBlockElement::GetList( [], ['ID' => $ids, 'IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y'], false, false, ['ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE'] ); while ($product = $res->GetNext()) { $productId = $product['ID']; $product['PRICE'] = \CPrice::GetBasePrice($productId); $products[$productId] = $product; } // Восстанавливаем порядок просмотров foreach ($ids as $id) { if (isset($products[$id])) { $result[] = $products[$id]; } } header('Content-Type: application/json'); echo json_encode(['products' => $result]); 

אחסון בשרת והגירת היסטוריה

למשתמשים מורשים, אנו שומרים היסטוריה במסד הנתונים. בעת התחברות, אנו מעבירים נתונים מ-localStorage.

CREATE TABLE custom_user_recently_viewed ( id SERIAL PRIMARY KEY, user_id INT NOT NULL, product_id INT NOT NULL, viewed_at DATETIME DEFAULT NOW(), UNIQUE KEY uk_user_product (user_id, product_id), INDEX idx_user (user_id, viewed_at DESC) ); 

// При авторизованном просмотре if ($USER->IsAuthorized()) { $userId = $USER->GetID(); // INSERT или UPDATE viewed_at Application::getConnection()->query(" INSERT INTO custom_user_recently_viewed (user_id, product_id, viewed_at) VALUES ({$userId}, {$productId}, NOW()) ON DUPLICATE KEY UPDATE viewed_at = NOW() "); // Ограничиваем историю 50 записями Application::getConnection()->query(" DELETE FROM custom_user_recently_viewed WHERE user_id = {$userId} AND id NOT IN ( SELECT id FROM ( SELECT id FROM custom_user_recently_viewed WHERE user_id = {$userId} ORDER BY viewed_at DESC LIMIT 50 ) t ) "); } 

הגירת היסטוריה בעת התחברות

לאחר התחברות מוצלחת של משתמש אנונימי, העבר היסטוריה מ-localStorage למסד הנתונים:

// При событии успешной авторизации document.addEventListener('userLoggedIn', function(e) { const viewed = getViewedProducts(); if (viewed.length === 0) return; fetch('/ajax/sync-viewed-history/', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ ids: viewed, user_id: e.detail.userId }), }); }); 

הצגה בחשבון האישי

סעיף "היסטוריית צפייה" בחשבון האישי—רשימה מלאה עם כפתור ניקוי. הצג עד 100 מוצרים אחרונים עם דפדוף. כפתור "נקה היסטוריה" מבצע DELETE מ-const STORAGE_KEY = 'viewed_products'; const MAX_ITEMS = 20; // Вызывается при загрузке карточки товара function trackProductView(productId) { let viewed = getViewedProducts(); // Удаляем если уже есть (переместим в начало) viewed = viewed.filter(id => id !== productId); // Добавляем в начало viewed.unshift(productId); // Ограничиваем размер if (viewed.length > MAX_ITEMS) { viewed = viewed.slice(0, MAX_ITEMS); } localStorage.setItem(STORAGE_KEY, JSON.stringify(viewed)); } function getViewedProducts() { try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); } catch { return []; } } // Загрузка данных для блока function loadRecentlyViewed(currentProductId, containerId, limit = 8) { const viewed = getViewedProducts() .filter(id => id !== currentProductId) .slice(0, limit); if (viewed.length === 0) { document.getElementById(containerId).style.display = 'none'; return; } fetch('/ajax/recently-viewed/', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ ids: viewed }), }) .then(r => r.json()) .then(data => renderRecentlyViewed(data.products, containerId)); } לפי // local/ajax/recently-viewed/index.php \Bitrix\Main\Loader::includeModule('iblock'); \Bitrix\Main\Loader::includeModule('catalog'); $ids = array_filter(array_map('intval', json_decode(file_get_contents('php://input'), true)['ids'] ?? [])); if (empty($ids) || count($ids) > 20) { echo json_encode(['products' => []]); exit; } // Сохраняем порядок из localStorage $result = []; $products = []; $res = \CIBlockElement::GetList( [], ['ID' => $ids, 'IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y'], false, false, ['ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE'] ); while ($product = $res->GetNext()) { $productId = $product['ID']; $product['PRICE'] = \CPrice::GetBasePrice($productId); $products[$productId] = $product; } // Восстанавливаем порядок просмотров foreach ($ids as $id) { if (isset($products[$id])) { $result[] = $products[$id]; } } header('Content-Type: application/json'); echo json_encode(['products' => $result]); ומנקה גם את CREATE TABLE custom_user_recently_viewed ( id SERIAL PRIMARY KEY, user_id INT NOT NULL, product_id INT NOT NULL, viewed_at DATETIME DEFAULT NOW(), UNIQUE KEY uk_user_product (user_id, product_id), INDEX idx_user (user_id, viewed_at DESC) ); .

השוואת גישות

מה כלול בעבודה

• ניתוח ארכיטקטורת הקטלוג הנוכחית והפעלות משתמש
• עיצוב סכמת אחסון (localStorage, מסד נתונים, או היברידי)
• פיתוח גשש JavaScript ומטפל AJAX
• יישום אחסון בשרת עם שאילתות מותאמות
• הגירת היסטוריה בעת התחברות
• דף היסטוריה בחשבון האישי
• בדיקות: בין דפדפנים, מובייל, בדיקות עומס
• תיעוד לשינויים והוראות למנהלי תוכן
• סקירת קוד והעברת גישה
• תמיכה למשך שבועיים לאחר המסירה

לוחות זמנים משוערים

סה"כ: 1–1.5 שבועות לגרסה המלאה. localStorage בלבד: 3–4 ימים.

טעויות נפוצות במהלך הפיתוח

• לא להתחשב במגבלות localStorage (5–10 MB) — ההיסטוריה נחתכת ללא אזהרה בקטלוגים גדולים.
• הצגת המוצר הנוכחי בבלוק — משתמשים רואים את מה שהם כבר צופים בו.
• לא לשמור במטמון בקשות AJAX — בקשה נעשית בכל טעינת עמוד גם אם ההיסטוריה לא השתנתה.
• לא להסיר כפילויות ב-localStorage — המערך גדל ללא שליטה עם ניווט תכוף.
• חוסר טיפול כאשר המשתמש מנקה את מטמון הדפדפן — הקוד חייב לטפל בנתונים חסרים בצורה חלקה.

הזמן פיתוח סוהר של בלוק "נצפה לאחרונה". אנו נעריך את הפרויקט שלך ביום אחד ונציע את הפתרון האופטימלי. קבל ייעוץ — המומחים שלנו עם 10+ שנות ניסיון ו-40+ פרויקטים מבטיחים איכות.