dsgnmax.ru
Смотрите подробную инструкцию и код ниже
Иконки корзины и избранного в зеро-блоке
Инструкция

  1. На страницу добавляем стандартные блоки ST100 (корзина) и ST110 (избранное)
  2. Добавляем в зеро-блоке два шейпа, для корзины задаём класс – cart, а для избранного fav
  3. Чтобы задать класс нужному шейпу, необходимо нажать правой кнопкой мыши, выбрать Add CSS Class Name и прописать необходимый класс
  4. Копируем код ниже и вставляем его в блок T123
  5. Ориентируясь по комментариям в коде вы можете настроить те стили, которые нет возможности редактировать в настройках стандартного блока
Все основные настройки внешнего вида, а именно добавление своих иконок, фоновый цвет всех подложек вы можете настроить прямо из настроек стандартного блока
   <!--https://dsgnmax.ru/useful/cart-fav-in-zero--> <style>
:root{
    
    /*Стилизация иконок корзины и избранного*/
    
    --borderRadius: 8px;    /*Радиус скругления углов у иконки корзины или избранного*/
    --marginIcon: 6px;  /*Отступы вокруг иконки*/
    --scaleHover: 1.1; /*Увеличение иконки корзины и избранного при наведении*/
    --transitionHover: all 0.3s ease-in;    /*Плавность анимации при наведении*/
    
    
    /*Лейбл с итоговой суммой в корзине*/
    --displaySumm: block; /*Скрыть информацию о сумме в корзине, block – отобразить, none – скрыть*/
    --borderLabelSumm: 8px; /*Радиус скругления лейбла*/
    --fontSizeLabelSumm: 14px; /*Размер текста внутри лейбла*/
    --rightLabelSumm: 110%; /*Отступ справа, настройка для позицонирования лейбла относительно иконки корзины*/
    --marginTopBottomLabelSumm: 4px; /*Отступы сверху и снизу внутри лейбла с итоговой суммой*/ 
    --marginLeftRightLabelSumm: 8px; /*Отступы слева и справа внутри лейбла с итоговой суммой*/ 
    
    
    /*Лейбл с количеством товаров*/
    --topLabelCounter: -6px;   /*Позиционирование лейбла относительно верха иконки*/
    --rightLabelCounter: -6px; /*Позиционирование лейбла относительно правой стороны иконки*/
    --paddingLabelCounter: 4px 6px;  /*Отступы внутри лейбла с количеством товаров*/ 
    --fontSizeCounter: 11px;    /*Размер текста внутри лейбла с количеством добавленных товаров*/

}




/*----------Стилизация корзины----------*/
.t706__carticon {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}
.t706__body_cartwinshowed .t706__carticon{
    display: block !important;
}
.t706__carticon-wrapper {
    width: 100% !important;
    height: 100% !important;
}

.t706__carticon {
    width: inherit;
    height: inherit;
}

.t706__carticon-imgwrap {
    width: 100%;
    height: 100%;
    border-radius: var(--borderRadius);
}

.t706__carticon-imgwrap:hover{
    transform: scale(1) !important;
}

.t706__carticon-counter {
    min-width: auto;
    height: auto;
    padding: var(--paddingLabelCounter);
    bottom: inherit;
    top: -5px;
    right: -5px;
    line-height: 1;
    font-size: var(--fontSizeCounter);
}

.t706__bgimg {
    margin: var(--marginIcon);
    height: 100% !important;
}

.t706__carticon-text {
    display: none !important;
}

.t706__carticon-wrapper {
    width: 100% !important;
    height: 100% !important;
}

.t706__carticon {
    width: inherit;
    height: inherit;
    transition: var(--transitionHover) !important;
}

.t706__carticon-imgwrap {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--borderRadius);
    box-shadow: none;
}

.t706__carticon-counter {
    min-width: auto !important;
    height: auto !important;
    padding: var(--paddingLabelCounter) !important;
    bottom: inherit !important;
    top: var(--topLabelCounter) !important;
    right: var(--rightLabelCounter) !important;
}

.t706__carticon:hover{
    scale: var(--scaleHover) !important;
}

.t706__carticon.t706__carticon_showed.t706__carticon_neworder{
    transform: scale(1) !important;
}

.t706__carticon-text:after {
    display: none;
}

/*Сумма товаров в корзине*/
.t706__carticon-text {
    padding: 0 !important;
    opacity: 1 !important;
    display: block !important;
    width: fit-content;
    height: auto;
    line-height: 1;
    align-content: center;
    font-size: var(--fontSizeLabelSumm);
    border-radius: var(--borderLabelSumm);
    display: var(--displaySumm) !important;
    right: var(--rightLabelSumm) !important;
}
.t706__cartwin-prodamount-price {
    margin-left: var(--marginLeftRightLabelSumm);
    margin-top: var(--marginTopBottomLabelSumm);
    margin-bottom: var(--marginTopBottomLabelSumm);
}

.t706__cartwin-prodamount-currency {
    margin-right: var(--marginLeftRightLabelSumm);
}
/*------------------------------------------*/



/*----------Стилизация избранного----------*/
.t1002__wishlisticon {
    top: 0;
    left: 0;
    position: relative;
    display: block !important;
    transition: var(--transitionHover) !important;
}
.t1002__wishlisticon:hover{
    scale: var(--scaleHover);   
}

.t1002__body_wishlistwinshowed .t1002__wishlisticon{
    display: block;
}

.t1002__wishlisticon-imgwrap {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--borderRadius);
    box-shadow: none;
}

.t1002__wishlisticon-imgwrap:hover{
    transform: scale(1) !important;
}

.t1002__wishlisticon-wrapper {
    width: 100%;
    height: 100%;
    transition: var(--transitionHover);
}

.t1002__wishlisticon {
    width: inherit;
    height: inherit;
    right: 0;
}

.t1002__wishlisticon-counter {
    padding: var(--paddingLabelCounter) !important;
    height: auto !important;
    width: auto !important;
    bottom: inherit !important;
    top: var(--topLabelCounter) !important;
    right: var(--rightLabelCounter) !important;
    line-height: 1 !important;
    font-size: var(--fontSizeCounter) !important;
}

.t1002__bgimg {
    margin: var(--marginIcon);
    height: 100% !important;
}

/*------------------------------------------*/
</style> <script>
function safeExecute(func) {
    try {
        func();
    } catch (error) {
    }
}

function initElementMover() {
    function findAndMove() {
        const cartIcons = document.querySelectorAll('.t706__carticon');
        const cartTarget = document.querySelector('.cart');
        
        const wishlistIcons = document.querySelectorAll('.t1002__wishlisticon');
        const favTarget = document.querySelector('.fav');
        
        if (cartTarget && cartIcons.length > 0) {
            cartIcons.forEach((icon) => {
                if (!icon.hasAttribute('data-moved')) {
                    icon.setAttribute('data-moved', 'true');
                    cartTarget.appendChild(icon);
                }
            });
        }
        
        if (favTarget && wishlistIcons.length > 0) {
            wishlistIcons.forEach((icon) => {
                if (!icon.hasAttribute('data-moved')) {
                    icon.setAttribute('data-moved', 'true');
                    favTarget.appendChild(icon);
                }
            });
        }
        
        const counters = document.querySelectorAll('.t706__carticon-counter, .t1002__wishlisticon-counter');
        counters.forEach((counter) => {
            if (counter.textContent.trim() === '') {
                counter.textContent = '0';
            }
        });
        
        const textElements = document.querySelectorAll('.t706__carticon-text');
        textElements.forEach((element) => {
            const firstChild = element.firstChild;
            if (firstChild && firstChild.nodeType === 3) {
                element.removeChild(firstChild);
            }
        });
    }
    
    safeExecute(findAndMove);
    
    const intervals = [100, 500, 1000, 2000, 5000];
    intervals.forEach(delay => {
        setTimeout(() => {
            safeExecute(findAndMove);
        }, delay);
    });
    
    const observer = new MutationObserver(function(mutations) {
        let needsUpdate = false;
        
        mutations.forEach(mutation => {
            if (mutation.addedNodes.length > 0) {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === 1) {
                        if (node.matches && (node.matches('.t706__carticon') || node.matches('.t1002__wishlisticon'))) {
                            needsUpdate = true;
                        }
                        if (node.matches && node.matches('.t706__carticon-text')) {
                            const firstChild = node.firstChild;
                            if (firstChild && firstChild.nodeType === 3) {
                                node.removeChild(firstChild);
                            }
                        }
                        if (node.querySelectorAll) {
                            const textElements = node.querySelectorAll('.t706__carticon-text');
                            textElements.forEach((element) => {
                                const firstChild = element.firstChild;
                                if (firstChild && firstChild.nodeType === 3) {
                                    element.removeChild(firstChild);
                                }
                            });
                        }
                    }
                    if (node.nodeType === 3) {
                        const parent = node.parentElement;
                        if (parent && parent.classList.contains('t706__carticon-text')) {
                            parent.removeChild(node);
                        }
                    }
                });
            }
            
            if (mutation.type === 'characterData') {
                const target = mutation.target;
                const parent = target.parentElement;
                if (parent && parent.classList.contains('t706__carticon-text')) {
                    parent.removeChild(target);
                }
            }
            
            if (mutation.type === 'childList') {
                const target = mutation.target;
                if (target.classList && target.classList.contains('t706__carticon-text')) {
                    const firstChild = target.firstChild;
                    if (firstChild && firstChild.nodeType === 3) {
                        target.removeChild(firstChild);
                    }
                }
            }
        });
        
        if (needsUpdate) {
            setTimeout(() => {
                safeExecute(findAndMove);
            }, 10);
        }
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        characterData: true
    });
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        initElementMover();
    });
} else {
    initElementMover();
}
</script>  
Made on
Tilda