Бейджи и плашки на карточке товара: скидка, хит, новинка

Покупатель проходит по каталогу глазами за секунды и цепляется за то, что выделяется. Маленькая метка «-20%» в углу картинки или подпись «Хит продаж» под товаром работают как указатели: они говорят, куда смотреть и что здесь выгодно. Но стоит перегнуть — навесить на каждый товар по четыре разноцветных стикера — и каталог превращается в мигающую витрину, где акцент теряется полностью.

Эта статья — о том, как выстроить в 1С-Битрикс аккуратную и управляемую систему бейджей и плашек: какие метки нужны, как их автоматизировать через свойства инфоблоков и правила корзины, как задать приоритеты и не убить скорость каталога. Если бейджи ведутся вместе со скидками в учётной системе, за корректность отвечает автоматизация на 1С — с неё и начинается порядок в акциях.

Зачем каталогу бейджи и плашки

Бейджи решают одну задачу — управлять вниманием. В длинном списке товаров глаз не читает каждую позицию, он сканирует. Метка выступает визуальным крючком: она сообщает выгоду («скидка»), снижает риск выбора («хит», то есть «берут другие») или создаёт ощущение свежести («новинка»). Всё это влияет на кликабельность карточки и, в итоге, на конверсию каталога в переходы и покупки.

Второй смысл — статусная информация. Плашки «Осталось 2 шт.», «Под заказ», «Бесплатная доставка» снимают вопросы ещё до входа в карточку. Чем меньше поводов уйти и «подумать», тем выше шанс, что посетитель двинется дальше по воронке. Важно только, чтобы метки говорили правду: фальшивая срочность и вечная «скидка» быстро подрывают доверие.

Виды меток: скидка, хит, новинка, статус

Прежде чем что-то программировать, полезно разложить метки по назначению. У каждой — свой источник данных и своя логика появления.

Такое разделение сразу подсказывает архитектуру: одни метки нужно считать на лету, другие — хранить флагом, третьи — брать из остатков. Смешивать источники в одну «ручную галочку» — прямой путь к тому, что бейджи начнут врать.

Ручные и автоматические бейджи

Ключевое проектное решение — какие метки ставит человек, а какие система вычисляет сама. Ручные бейджи гибки, но требуют дисциплины: кто-то должен вовремя включать и, главное, выключать их. Автоматические не требуют внимания, но нуждаются в чётком правиле.

• Автоматические. «Скидка», «Новинка», статус наличия — вычисляются из цены, даты и остатка. Идеальны там, где данные и так есть.
• Полуавтоматические. «Хит продаж» — считается по статистике, но порог задаёт менеджер.
• Ручные. «Рекомендуем», «Выбор редакции», сезонные акции — их осмысленно ставит человек через свойство-флаг.

Практическое правило простое: всё, что можно вычислить из имеющихся данных, лучше вычислять, а не ставить руками. Ручной флаг «Скидка», который забыли снять после акции, — классическая причина расхождения бейджа и реальной цены.

Приоритеты: какой бейдж главнее

Как только меток становится больше одной, возникает конфликт: что показать, если товар одновременно новинка, хит и со скидкой? Без правила приоритета шаблон покажет всё подряд, и карточка захламится. Задайте явный порядок и лимит.

1. Статус наличия — вне очереди. «Нет в наличии» или «Под заказ» перекрывает акционные метки: покупателю в первую очередь важно, можно ли купить.
2. Скидка — высший акционный приоритет. Прямая выгода сильнее всего влияет на решение, поэтому «-20%» идёт первым из «продающих» бейджей.
3. Хит продаж — второй. Социальное доказательство ценно, но уступает прямой выгоде.
4. Новинка и ручные метки — далее. Показываются, если осталось место в лимите.

Бейдж «Скидка» и правила корзины

Скидка — самая ответственная метка, потому что её легко рассинхронизировать с реальной ценой. Правильный подход — не хранить факт скидки, а вычислять его в момент вывода. Если итоговая цена товара меньше базовой, показываем бейдж и считаем процент.

В 1С-Битрикс скидки живут в модуле «Торговый каталог»: это правила корзины, типы цен и купоны. Компонент каталога уже возвращает и базовую, и итоговую цену — остаётся сравнить их в шаблоне. Так бейдж «-15%» всегда соответствует тому, что покупатель увидит в корзине, а после окончания акции метка исчезает сама.

Если акции и скидки ведутся в учётной системе и приезжают на сайт обменом, источник правды — 1С, а сайт отражает результат. Чтобы бейджи и цены совпадали, логика скидок на сайте должна повторять учётную. Настроить это — задача автоматизации продаж и склада на 1С, где типы цен и правила синхронизированы с сайтом.

Бейдж «Хит продаж» по статистике

«Хит» — это социальное доказательство: метка говорит, что товар берут другие. Но чтобы она не была обманом, её нужно привязать к реальным продажам, а не ставить вручную на то, что хочется продать.

Практично считать хиты по числу заказов за период (например, за 30 или 90 дней) и присваивать флаг товарам выше заданного порога. Пересчёт удобно вынести в агент, который раз в сутки обновляет свойство «Хит» у товаров. Тогда метка живёт своей жизнью: популярное всплывает, остывшее — теряет бейдж без ручного вмешательства.

Если хочется более умных рекомендаций, чем просто «часто покупают», в дело идут персональные подборки. Но начинать стоит с честного порога по статистике — он прост, прозрачен и не требует сложной инфраструктуры.

Бейдж «Новинка», который снимается сам

Главная боль с «Новинкой» — её забывают снимать, и товар годичной давности всё ещё «новый». Лечится это привязкой метки не к ручному флагу, а к дате.

• По дате создания. Показываем «Новинка», пока с даты добавления товара прошло меньше N дней. Просто и не требует лишних полей.
• По дате поступления. Если важен не момент заведения карточки, а реальная поставка, заводим отдельное свойство «Дата поступления» и считаем от него.
• Через агент. Раз в сутки агент пересчитывает флаг и снимает «Новинку» с просроченных товаров — удобно, если метка используется ещё и в фильтрах.

Такой подход делает метку самоочищающейся: новинки появляются при поступлении и уходят по сроку, а контент-менеджеру не нужно помнить про каждую карточку.

Где хранить: свойства инфоблока

Технически бейджи опираются на данные товара, а товары в 1С-Битрикс — это элементы инфоблока. Ручные и полуавтоматические метки удобно хранить как свойства инфоблока: флаг «Рекомендуем», «Хит», дату поступления для «Новинки». Автоматические — «Скидка», статус наличия — вычислять из цены и остатка, ничего отдельно не храня.

Свойства-флаги полезны вдвойне: по ним же можно строить выборки через D7-ORM и умный фильтр — например, раздел «Новинки» или фильтр «Только со скидкой». Так метка становится не просто украшением карточки, а элементом навигации по каталогу.

Реализация в шаблоне компонента

Выводятся бейджи в шаблоне компонента списка товаров и карточки. Логика проста и не требует лезть в ядро.

1. Соберите данные. В result_modifier.php подготовьте для каждого товара флаги: есть ли скидка (сравнение цен), новинка ли (дата), хит и статус наличия.
2. Примените приоритет. Отберите не более двух меток по заданному порядку, остальные отложите в плашку.
3. Выведите разметку. В template.php отрисуйте бейджи поверх картинки, плашки — под товаром, с семантичными классами.
4. Не делайте запросов в цикле. Все данные должны быть уже в выборке товаров; отдельные запросы на каждый бейдж убивают скорость.

Если система бейджей разрастается и её хочется переиспользовать на разных типах каталога, логику выносят в отдельный модуль или сервис. Как устроена такая разработка, мы разбирали в статье про разработку модуля для Битрикс — метки становятся частью общего механизма, а не копипастой по шаблонам.

Дизайн и доступность меток

Бейдж должен подсказывать, а не перекрикивать товар. Несколько правил, которые держат каталог опрятным:

• Единая палитра. Один акцентный цвет для скидки, спокойные — для «хита» и «новинки», красный или серый — для статуса. Не более трёх цветов на весь каталог.
• Одинаковая позиция и размер. Бейдж всегда в одном углу, плашка — в одном месте. Хаотичное расположение выглядит небрежно.
• Контраст и читаемость. Текст метки должен читаться на любой картинке — используйте подложку и достаточный контраст.
• Доступность. Не полагайтесь только на цвет: дублируйте смысл текстом («-20%», «Хит»), добавляйте aria-label, чтобы метку понимали скринридеры.

Производительность и кэш

Бейджи не должны стоить каталогу скорости. При правильной реализации они и не стоят: все условия вычисляются из полей, которые уже загружены вместе с товаром. Проблема появляется, когда для каждой метки делают отдельный запрос — например, тянут статистику продаж по одному товару в цикле. На списке из десятков карточек это выливается в сотни запросов.

Правильный путь — считать статистику заранее (агентом, в свойство) и выводить метки из готовых данных, а всю выборку каталога кэшировать вместе с рассчитанными флагами. Тогда бейджи ничего не добавляют к времени ответа. Общий контекст скорости и инфраструктуры мы разбираем в материале про инфраструктуру на BitrixVM, а системный аудит производительности закрывает услуга аудита и оптимизации 1С.

Частые ошибки

• Ручной флаг «Скидка». Забыли снять после акции — бейдж «-15%» висит на товаре по полной цене. Считайте скидку из цены.
• Слишком много меток. Четыре бейджа на карточке спорят друг с другом, акцент пропадает. Держите лимит.
• Нет приоритета. Товар одновременно «новинка», «хит» и со скидкой — шаблон рисует всё. Задайте порядок.
• «Новинка» навсегда. Метку не привязали к дате, товар «новый» год спустя. Привяжите к сроку.
• Запросы в цикле. Отдельный запрос под каждый бейдж тормозит каталог. Готовьте данные заранее.
• Только цвет. Метка отличается лишь оттенком — недоступна для дальтоников и скринридеров. Дублируйте текстом.
• Расхождение с 1С. Бейдж и цена в корзине не совпадают, потому что логика скидок на сайте не повторяет учётную.

Чек-лист внедрения

1. Список меток закреплён. Определены скидка, хит, новинка, статус и ручные бейджи с источниками данных.
2. Автоматизация настроена. Скидка считается из цены, новинка — из даты, хит — из статистики агентом.
3. Приоритет и лимит заданы. Не более двух бейджей, порядок описан и реализован в шаблоне.
4. Свойства заведены. Ручные флаги и дата поступления хранятся в свойствах инфоблока.
5. Синхронизация с 1С. Скидки и остатки согласованы с учётной системой, бейджи не врут.
6. Дизайн единый. Палитра, позиция, размер меток одинаковы во всём каталоге, есть доступность.
7. Производительность проверена. Нет запросов в цикле, выборка с флагами кэшируется.

Вывод

Бейджи и плашки — сильный, но капризный инструмент. Они повышают кликабельность каталога, когда работают как точные указатели, и вредят, когда превращаются в шумную ярмарку. Секрет в дисциплине: минимум меток на карточке, единая палитра, явный приоритет и — главное — автоматизация вместо ручных флагов.

Считайте «скидку» из цены и правил корзины, «новинку» — из даты, «хит» — из статистики, а статус наличия берите из остатков. Тогда система бейджей живёт сама, не расходится с реальностью и не требует постоянного ручного ухода. А если скидки и остатки ведутся в 1С, свяжите их с сайтом корректной автоматизацией — и метки станут честным помощником покупателя, а не источником недоразумений.