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

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

Вы указываете в тексте отметки несколько значений через запятую — например: «-30%, ХИТ, SALE», — а скрипт автоматически разделяет их на две или три отдельные отметки с подложками. Форма стандартных отметок при этом сохраняется. Решение подходит для ситуаций, когда товар имеет несколько статусов одновременно. Модификация работает со стандартным магазином Tilda, не требует изменения структуры карточек и помогает сделать каталог более наглядным и читаемым.

⠀

Пример

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

⠀

Инструкция

❗️ ВАЖНО:

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

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

⠀

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

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

⠀

2️⃣ ОТМЕТКИ

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

⠀

3️⃣ В КОДЕ ЗАДАЕМ СВОИ ОТМЕТКИ И ЦВЕТ
Меняем в коде слова отметок на свои и задаем им цвет, который хотим.

⠀

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

❗️ ВАЖНО:

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

⠀

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

<script>
t_onReady(function () {

const COLORS = {
// ниже прописываем все лейблы, которые будем использовать
// каждый отдельно, как с процентами скидки
// bg - задаем фон лейблу, color - задаем цвет текста лейбла
'-30%': { bg: '#f45252', color: '#fff' },
'-25%': { bg: '#f45252', color: '#fff' },
'NEW': { bg: '#16a4ab', color: '#fff' },
'ХИТ': { bg: '#46b480', color: '#fff' },
'SALE': { bg: '#f45252', 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>



<script>
t_onReady(function () {

function isMarkWrapper(el){
return el && /(^|\s)[^\s]+__mark(-)?wrapper(\s|$)/.test(el.className || '');
}

function normalize(el){
el.style.display = 'flex';
el.style.alignItems = 'center';
el.style.justifyContent = 'center';
el.style.whiteSpace = 'nowrap';
}

function ucSplitMarks(scope) {
scope = scope || document;

const roots = scope.querySelectorAll('.uc-katalog, .js-store');
if (!roots.length) return;

roots.forEach(root => {
const marks = root.querySelectorAll('[class$="__mark"]');

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

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

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

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

mark.dataset.ucSplitDone = '1';

wrapper.style.display = 'flex';
wrapper.style.flexDirection = 'column';
wrapper.style.gap = '5px';

mark.textContent = parts[0];
normalize(mark);

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

ucSplitMarks(document);

let n = 0;
const timer = setInterval(() => {
ucSplitMarks(document);
if (++n >= 12) clearInterval(timer); // ~6 секунд
}, 500);

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

});
</script>


<style>
/* кастомизация самого лейбла */
.uc-katalog .t778__mark,
.uc-katalog .t776__mark,
.uc-katalog .t786__mark,
.uc-katalog .t-store__card__mark,
.uc-katalog .t1025__mark {
height: auto !important;
width: auto !important;
font-weight: 600 !important;

/* здесь прописываем отступы для вашего лейбла, т.е. какие отступы будут у текста от фона лейбла
1 – верх, 2 - правая сторона, 3 - низ, 4 - левая сторона */
padding: 5px 26px 5px 26px !important;

/* задаем цвет фона лейбла */
background-color: #2a88d2 !important;

/* задаем цвет текста лейбла */
color: #ffffff !important;

/* задаем скругление у углов лейбла
если они одинаковые пишем одну цифру
если нужно задать для всех углов разные скрегления
1 – верхний левый угол, 2 - правый верхний угол, 3 - нижний правый угол, 4 - левый нижний угол */
border-radius: 0px 10px 0px 10px !important;
}

/* положение лейбла */
.uc-katalog .t778__markwrapper,
.uc-katalog .t776__markwrapper,
.uc-katalog .t786__markwrapper,
.uc-katalog .t-store__card__mark-wrapper,
.uc-katalog .t1025__markwrapper {
/* слева или справа
если нужно расположение справа, то пишем left и задаем отступ, а для right пишем auto, если нужно справа, то наоборот */
right: 10px !important;
left: auto !important;

/* снизу или сверху фото товара
если нужно расположение снизу, то пишем bottom и задаем отступ, а для top пишем auto, если нужно сверху, то наоборот */
top: 10px !important;
bottom: auto !important;
}
</style>

⠀

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

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