Несколько отметок с иконками разных цветов у карточки товара на Tilda

Эта модификация позволяет добавить в стандартный каталог Tilda несколько отметок на карточке товара с иконками и разными цветами.

Каждая отметка может иметь собственную иконку и цвет фона, что помогает наглядно выделять статусы товара: скидка, хит, новинка, особенности или любые другие обозначения.

Модификация работает со стандартным магазином Tilda и не требует изменения структуры карточек. Решение подходит для каталогов, где важно визуально разделять товары и делать акценты понятными с первого взгляда.

⠀

Пример

Пример применения

⠀

Инструкция

❗️ ВАЖНО:

Чтобы код работал на вашем сайте проверьте, что у вас включен jQuery в настройках сайта.

Настройки сайта ⟶ Вкладка Вставка кода ⟶ Ставим галочку у «Подключить jQuery на страницах сайта»

⠀

1️⃣  ДОБАВЛЯЕМ СТАНДАРТНЫЙ БЛОК МАГАЗИНА

• Добавляем всему блоку класс — .uc-katalog

⠀

2️⃣ ОТМЕТКИ

• Задаем нужным карточкам товаров соответствующие отметки (названия любые, как на английском, так и на русском, можно несколько слов, например «без сахара».
• Карточки у которых будет несколько отметок: разделяем между собой отметки запятой   ,

Пример, что пишем в поле отметки карточки: веган, без сахара

⠀

3️⃣ В КОДЕ ЗАДАЕМ СВОИ ОТМЕТКИ И ЦВЕТ

• Создаем zero-блок с 0 высотой, чтобы его было не видно и добавляем туда иконки. Берем ссылки каждой из них.
• Далее вписываем в код свои названия отметок, вставляем соответствующие им иконки и задаем фон.

⠀

4️⃣  НИЖЕ ПОД БЛОКОМ КАТАЛОГА ВСТАВЛЯЕМ КОД

❗️ ВАЖНО:

В редакторе изменения, внесенные с помощью кода не видны, вы их увидите только на опубликованной странице.

⠀

Код для вставки

<script>
t_onReady(function () {

// === НАСТРОЙКИ ОТМЕТОК ===
const LABEL_ICONS = {
'МЯСО': { // вставляем свои названия отметок
icon: 'https://static.tildacdn.com/tild6436-6162-4664-a466-326361633465/icon.svg', // вставляем сюда свои ссылки на соответствующии отметкам иконки
bg: '#AC0505' // пишем сюда цвет фона для отметки с этой иконкой и текстом
},
'ВЕГАН': {
icon: 'https://static.tildacdn.com/tild3863-3637-4334-b135-616231653938/icon.svg',
bg: '#14883A'
},
'БЕЗ САХАРА': {
icon: 'https://static.tildacdn.com/tild3436-3335-4330-b461-636461626635/icon.svg',
bg: '#9E7A25'
}
};

function norm(s){
return (s || '').trim().toUpperCase();
}

function applyForRoot(root){
const marks = root.querySelectorAll(
'[class*="__mark"]:not([class*="wrapper"]):not([class*="markwrapper"]), .t-store__card__mark'
);

marks.forEach(mark => {
if (mark.dataset.ucIconApplied) return;

const text = norm(mark.textContent);
const cfg = LABEL_ICONS[text];
if (!cfg) return;

mark.dataset.ucIconApplied = '1';

mark.textContent = '';
mark.style.setProperty('background-color', cfg.bg, 'important');

const img = document.createElement('img');
img.src = cfg.icon;
img.alt = text;
img.style.width = '30px';
img.style.height = '30px';
img.style.display = 'block';

mark.appendChild(img);
});
}

function runAll(){
document.querySelectorAll('.uc-katalog').forEach(applyForRoot);
}

runAll();

const obs = new MutationObserver(runAll);
obs.observe(document.body, { childList: true, subtree: true });

});
</script>


<script>
t_onReady(function () {

function isMarkWrapper(el){
if (!el) return false;
const cls = el.className || '';
return cls.includes('markwrapper') || cls.includes('mark-wrapper');
}

function normalizeMark(el){
el.style.display = 'flex';
el.style.alignItems = 'center';
el.style.justifyContent = 'center';
el.style.whiteSpace = 'nowrap';
el.style.boxSizing = 'border-box';
}

function splitOneMark(mark){
if (!mark || mark.dataset.ucSplitDone) return;

const raw = (mark.textContent || '').trim();
if (!raw.includes(',')) return;

const parts = raw.split(',').map(t => t.trim()).filter(Boolean);
if (parts.length < 2) return;

const wrapper = mark.parentElement;
if (!isMarkWrapper(wrapper)) return;

wrapper.style.display = 'flex';
wrapper.style.flexDirection = 'column';
wrapper.style.gap = '5px';
wrapper.style.alignItems = 'flex-end'; // чтобы прижато к правому краю как было
wrapper.style.width = 'auto';

mark.dataset.ucSplitDone = '1';
mark.textContent = parts[0];
normalizeMark(mark);

parts.slice(1, 3).forEach(p => {
const clone = mark.cloneNode(true);
clone.dataset.ucSplitDone = '1';
clone.textContent = p;

if (clone.dataset.ucIconApplied) delete clone.dataset.ucIconApplied;

normalizeMark(clone);
wrapper.appendChild(clone);
});

if (mark.dataset.ucIconApplied) delete mark.dataset.ucIconApplied;
}

function runSplit(){
const roots = document.querySelectorAll('.uc-katalog, .js-store');
roots.forEach(root => {
const marks = root.querySelectorAll(
'[class*="__mark"]:not([class*="wrapper"]):not([class*="markwrapper"]), .t-store__card__mark'
);
marks.forEach(splitOneMark);
});
}

runSplit();

const obs = new MutationObserver(runSplit);
obs.observe(document.body, { childList: true, subtree: true });

});
</script>

⠀

Смотреть модификацию на сайте:

Больше модификаций на Tilda: