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

<!-- Несколько отметок с иконками разных цветов в карточках товаров
Студия веб-дизайна SHEINA – https://sheina-studio.ru/ -->



<!-- ===== ИНСТРУКЦИЯ =====

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>