מסנן צבעים ויזואלי לקטלוג 1C-Bitrix

מסנן צבעים ויזואלי לקטלוג 1C-Bitrix

חנות בגדים מקוונת מאבדת עד 30% מההמרות מכיוון שלקוחות לא מוצאים את הגוון המדויק. רשימת טקסט כמו "אדום", "כחול", "לבן" לא מצליחה להעביר את ההבדל בין #E53935 ל-#D32F2F. אנו מפתחים מסנן צבעים ויזואלי מוכן לשימוש — עם עיגולי צבע (swatches), קודי HEX, וסינון לפי הצעות מסחר. ניסיון מ-50+ פרויקטים, לוחות זמנים מיום עסקי אחד. קוד HEX הוא הבסיס לתצוגה מדויקת. לפי תיעוד רשמי של 1C-Bitrix, מאפייני סוג רשימה יכולים לאחסן XML_ID נוסף, שהוא אידיאלי עבור קודי HEX.

ההבדל בין תיבת סימון עם טקסט לעיגול צבעוני הוא הבדל במכירות. הלקוח רואה את הגוון המדויק ומיד עובר לרכישה. היישום שלנו מתחשב במטמון מתויג (tagged caching), אינטגרציית 1C, ו-Bitrix24 REST. נבחן את הפרויקט שלך תוך 24 שעות. צור קשר לפיתוח מוכן לשימוש כדי לקבל ייעוץ כבר עכשיו.

בעיות שאנו פותרים

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

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

איך לאחסן קודי HEX בצורה נכונה?

שתי גישות — הבחירה תלויה במספר ובמורכבות הצבעים. השווה ביניהן בטבלה.

מאפיין רשימה

הדרך הפשוטה ביותר לחנות אופנה עם צבעים בסיסיים. ערך המאפיין הוא שם קריא, XML_ID הוא קוד ה-HEX. דוגמת הגדרה: צור מאפיין מסוג רשימה עם קוד COLOR. ערכים: "אדום" → XML_ID: #E53935, "כחול" → XML_ID: #1565C0, "לבן" → XML_ID: #FFFFFF. בעת הצגה במסנן, השתמש ב-XML_ID כצבע וב-VALUE כטקסט חלופי (alt). מידע נוסף על מאפיינים בתיעוד.

אינפובלוק צבעים נפרד

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

יישום ממשק המסנן והעיגולים

שליפת צבעים ותבנית HTML

// Получение цветов с HEX-кодами из XML_ID
$colors = [];
$res = CIBlockPropertyEnum::GetList(
    ['SORT' => 'ASC'],
    ['IBLOCK_ID' => $iblockId, 'CODE' => 'COLOR']
);
while ($color = $res->Fetch()) {
    $colors[] = [
        'id' => $color['ID'],
        'name' => $color['VALUE'],
        'hex' => $color['XML_ID'],
        'xmlId' => $color['XML_ID'],
    ];
}
// Подсчёт товаров по цвету (через торговые предложения)
$colorCounts = getColorCountsFromOffers($iblockId, OFFERS_IBLOCK_ID);

<div class="filter-block filter-block--color">
    <h3 class="filter-block__title">Цвет</h3>
    <div class="color-swatches">
        <?php $selectedColors = array_map('htmlspecialchars', (array)($_GET['COLOR'] ?? [])); ?>
        <?php foreach ($colors as $color): ?>
            <?php $isSelected = in_array($color['xmlId'], $selectedColors); ?>
            <label class="color-swatch <?= $isSelected ? 'is-active' : '' ?>" title="<?= htmlspecialchars($color['name']) ?>">
                <input type="checkbox" name="COLOR[]" value="<?= htmlspecialchars($color['xmlId']) ?>" <?= $isSelected ? 'checked' : '' ?>>
                <span class="swatch-circle" style="background-color: <?= htmlspecialchars($color['hex']) ?>;" aria-label="<?= htmlspecialchars($color['name']) ?>"></span>
            </label>
        <?php endforeach; ?>
    </div>
</div>

CSS לעיגולים

.color-swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin: 4px;
}
.color-swatch input[type="checkbox"] {
  display: none;
}
.swatch-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  transition: box-shadow 0.15s, transform 0.15s;
}
.color-swatch.is-active .swatch-circle {
  box-shadow: 0 0 0 2px var(--accent-color, #2196f3);
  transform: scale(1.1);
}
.color-swatch:hover .swatch-circle {
  transform: scale(1.05);
}

סינון לפי צבע דרך הצעות מסחר

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

function getProductIdsByColors(int $offersIblockId, array $colorXmlIds): array
{
    if (empty($colorXmlIds)) return [];

    // Получение ID значений свойства по XML_ID
    $enumIds = [];
    $res = CIBlockPropertyEnum::GetList([], ['IBLOCK_ID' => $offersIblockId, 'CODE' => 'COLOR', 'XML_ID' => $colorXmlIds]);
    while ($row = $res->Fetch()) {
        $enumIds[] = $row['ID'];
    }

    if (empty($enumIds)) return [];

    $productIds = [];
    $res = CIBlockElement::GetList(
        [],
        ['IBLOCK_ID' => $offersIblockId, 'ACTIVE' => 'Y', '>CATALOG_QUANTITY' => 0, 'PROPERTY_COLOR' => $enumIds],
        false,
        false,
        ['PROPERTY_CML2_LINK']
    );
    while ($row = $res->GetNext()) {
        if ($row['PROPERTY_CML2_LINK_VALUE']) {
            $productIds[] = intval($row['PROPERTY_CML2_LINK_VALUE']);
        }
    }

    return array_unique($productIds);
}

החלת המסנן: // Получение цветов с HEX-кодами из XML_ID $colors = []; $res = CIBlockPropertyEnum::GetList( ['SORT' => 'ASC'], ['IBLOCK_ID' => $iblockId, 'CODE' => 'COLOR'] ); while ($color = $res->Fetch()) { $colors[] = [ 'id' => $color['ID'], 'name' => $color['VALUE'], 'hex' => $color['XML_ID'], 'xmlId' => $color['XML_ID'], ]; } // Подсчёт товаров по цвету (через торговые предложения) $colorCounts = getColorCountsFromOffers($iblockId, OFFERS_IBLOCK_ID);

הצגת צבעים בכרטיס המוצר

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

למה מסנן ויזואלי משתלם?

מסנן ויזואלי עולה על מסנן טקסט: ההמרה גבוהה ב-15–30% בקטגוריות שבהן צבע הוא קריטי (ביגוד, רהיטים, עיצוב). משתמשים מבלים פי 2 יותר זמן בעמוד הקטלוג. הפיתוח בדרך כלל מחזיר את עצמו תוך חודשיים בזכות הפחתת שיעור הנטישה. הזמן יישום כדי לקבל ייעוץ והערכה מדויקת של הפרויקט שלך.

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

שלבי פיתוח

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

מה כלול

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

טעויות נפוצות

לוחות זמנים

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