Иконки разных цветов вместо текста в отметках карточек товаров на Tilda

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

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

Скрипт автоматически подменяет стандартные отметки, сохраняя логику работы магазина. Решение подходит для выделения товаров со статусами «sale», «хит», «новинка» и других.

⠀

Пример

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

⠀

Инструкция

❗️ ВАЖНО: Чтобы код работал на вашем сайте проверьте, что у вас включен jQuery в настройках сайта.

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

⠀

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

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

⠀

2️⃣ ОТМЕТКИ

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

⠀

3️⃣ НИЖЕ ВСТАВЛЯЕМ КОД

❗️ ВАЖНО:

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

⠀

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

<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>

⠀

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

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