С 1 ЯНВАРЯ ПОВЫШЕНИЕ ЦЕН
Отметки иконками разных цветов в карточках товаров
0007
₽
₽
Эта модификация заменяет стандартные отметки на карточках товаров в магазине Tilda на иконки с индивидуальным фоном.
Вместо обычного текстового круга отметок используются графические отметки — каждая со своей иконкой и цветом, вы можете задать свои иконки и цвет подложки для них следуя инструкции.
Скрипт автоматически подменяет стандартные отметки, сохраняя логику работы магазина. Решение подходит для выделения товаров со статусами «sale», «хит», «новинка» и других.
Вместо обычного текстового круга отметок используются графические отметки — каждая со своей иконкой и цветом, вы можете задать свои иконки и цвет подложки для них следуя инструкции.
Скрипт автоматически подменяет стандартные отметки, сохраняя логику работы магазина. Решение подходит для выделения товаров со статусами «sale», «хит», «новинка» и других.
мясо
Стейк с картофелем и соусом
With a new design approach for flexible use: from a dinner for two, to a big celebration.
550
₽
веган
Вегетарианская боул с овощами
With a new design approach for flexible use: from a dinner for two, to a big celebration.
300
₽
мясо
Цыпленок пикката с гарниром
With a new design approach for flexible use: from a dinner for two, to a big celebration.
350
₽
без сахара
Торт с клубничным соусом
With a new design approach for flexible use: from a dinner for two, to a big celebration.
450
₽
1️⃣ ДОБАВЛЯЕМ СТАНДАРТНЫЙ БЛОК МАГАЗИНА
2️⃣ ОТМЕТКИ
3️⃣ НИЖЕ ВСТАВЛЯЕМ КОД
❗️ ВАЖНО. В редакторе изменения, внесенные с помощью кода не видны, вы их увидите только на опубликованной странице.
- Добавляем всему блоку класс — .uc-katalog
2️⃣ ОТМЕТКИ
- Задаем нужным карточкам товаров соответствующие отметки (названия любые, как на английском, так и на русском, можно несколько слов, например «без сахара».
- Далее вписываем в код свои названия отметок, вставляем соответствующие им иконки и задаем фон.
3️⃣ НИЖЕ ВСТАВЛЯЕМ КОД
❗️ ВАЖНО. В редакторе изменения, внесенные с помощью кода не видны, вы их увидите только на опубликованной странице.
<!-- Свои отметки с иконками в карточках товаров
Студия веб-дизайна SHEINA – https://sheina-studio.ru/ -->
<!-- ===== ИНСТРУКЦИЯ =====
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>