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

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



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

1️⃣  ДОБАВЛЯЕМ СТАНДАРТНЫЙ БЛОК МАГАЗИНА 
Добавляем всему блоку класс —   .uc-katalog  

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

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

❗️   ВАЖНО. В редакторе изменения, внесенные с помощью кода не видны, вы их увидите только на опубликованной странице. -->



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