Разный цвет отметок у карточек товаров на Tilda

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

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

⠀

Пример

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

⠀

Инструкция

❗️ ВАЖНО:

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

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

⠀

1️⃣  ДОБАВЛЯЕМ БЛОК МАГАЗИНА
(ST310N, ST305N, ST315N, ST320N, ST330)

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

⠀

2️⃣ ПРОПИСЫВАЕМ ОТМЕТКИ У КАРТОЧЕК В КАТАЛОГЕ И НИЖЕ В КОДЕ
Отметки в карточках товаров и в коде должны совпадать буква в букву

⠀

3️⃣ ПОД БЛОКОМ С ТОВАРАМИ ВСТАВЛЯЕМ КОД

❗️ ВАЖНО:

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

⠀

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

<script>
t_onReady(function () {

const COLORS = {
// ниже прописываем все лейблы, которые будем использовать
// каждый отдельно, как с процентами скидки
// bg - задаем фон лейблу, color - задаем цвет текста лейбла
'-30%': { bg: '#cd0000', color: '#fff' },
'-25%': { bg: '#cd0000', color: '#fff' },
'NEW': { bg: '#0f969d', color: '#fff' },
'ХИТ': { bg: '#752dae', color: '#fff' },
'SALE': { bg: '#cd0000', color: '#fff' }
};

function norm(s){
return (s || '')
.replace(/[−–—]/g, '-')
.replace(/\s*%\s*/g, '%')
.replace(/-\s+/g, '-')
.trim()
.toUpperCase();
}

function pickTarget(el) {
const isRounded = (node) => {
if (!node) return false;
const br = getComputedStyle(node).borderRadius;
return br && br !== '0px';
};
if (isRounded(el)) return el;
if (isRounded(el.parentElement)) return el.parentElement;
return el;
}

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

marks.forEach(mark => {
const parts = norm(mark.textContent).split(',').map(x => x.trim()).filter(Boolean);
const key = parts.find(p => COLORS[p]); //
if (!key) return;

const rule = COLORS[key];
const target = pickTarget(mark);

target.style.setProperty('background-color', rule.bg, 'important');
target.style.setProperty('color', rule.color, 'important');
});
}

function runAll(){
document.querySelectorAll('.uc-katalog').forEach(root => {
ucColorMarks(root);
});
}

runAll();

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

});
</script>

⠀

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

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