Корзина, избранное и поиск вместо ссылок на соц. сети со своей иконкой в меню

Теперь не обязательно выбирать из ME40* или собственноручно рисовать меню в Zero-блоке, чтобы добавить туда корзину, избранное или поиск. Просто выберите любое стандартное меню, где есть ссылки на соц. сети, добавьте нужную вам иконку и разместите скрипт в блоке T123.

Инструкция

Добавьте на страницу стандартное меню, в котором есть ссылки на соц. сети, например блок ME301.
В настройках блока добавьте нужные вам иконки: Добавить пункт → Универсальные → Website.

Добавить пункт → Универсальные → Website

Обязательно пропишите названия и ссылки для каждой иконки:

Корзина = #opencart
Избранное = #showfavorites
Поиск = #opensearch

Пропишите названия и ссылки

Добавьте корзину, избранное и поиск.
В настройках (пункт «Дополнительные настройки») каждого из этих блоков поставьте галочку «Не показывать кнопку открытия виджета».
Если используете поиск, то в разделе «Контент» соответствующего блока пропишите ссылку #opensearch.
В форме ниже выберите цвета фона и текста для иконок с количеством товаров, а также измените названия для кнопок, если хотите использовать другие.
Скопируйте полученный код и разместите его в блоке T123.

<!-- Корзина, избранное и поиск вместо ссылок на соц. сети со своей иконкой | https://necodim.ru/tilda/cart-favorites-search-in-menu -->
<script>
const lsListener = () => {
    const originalSetItem = localStorage.setItem;
    localStorage.setItem = function(key, value) {
        const event = new Event('itemInserted');
        event.key = key;
        document.dispatchEvent(event);
        originalSetItem.apply(this, arguments);
    };
    const localStorageSetHandler = function(e) {
        setTimeout(() => {
            if ((e.key == 'tcart' || e.key == 'twishlist') && window.localStorage.getItem(e.key) != null) {
                let total = parseInt(JSON.parse(window.localStorage.getItem(e.key)).total);
                let el = document.querySelector(`.menu-icon-counter.${e.key}-total`);
                if (total != null && el != null) {
                    el.innerHTML = total;
                    el.style.opacity = total == 0 ? 0 : 1;
                }
            }
        }, 100);
    };
    document.addEventListener("itemInserted", localStorageSetHandler, false);
}

const iconInMenu = (type) => {
    let link = document.querySelector(`.t-sociallinks__item[title="${type}"] a`);
    let href = link.getAttribute('href').trim();
    link.setAttribute('href', href);
    link.removeAttribute('target');
    if (type == 'Корзина' || type == 'Избранное') {
        if (type == 'Корзина') typeTilda = 'tcart';
        if (type == 'Избранное') typeTilda = 'twishlist';
        let counter = document.createElement('div');
        counter.classList.add('menu-icon-counter', `${typeTilda}-total`, 't-text');
        if (window.localStorage.getItem(typeTilda) != null) {
            let total = JSON.parse(window.localStorage.getItem(typeTilda)).total;
            counter.innerHTML = total;
            counter.style.opacity = total == 0 ? 0 : 1;
        }
        link.prepend(counter);
    }
}

document.addEventListener("DOMContentLoaded", function(event) {
    lsListener();
    iconInMenu('Корзина');
    iconInMenu('Избранное');
    iconInMenu('Поиск');
});
</script>

<style>
.t-sociallinks__item {
    position: relative;
}
.menu-icon-counter {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -5px;
    bottom: unset;
    left: unset;
    right: 0;
    z-index: 1;
    transform: translate(0,0);
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    border: none;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}
.menu-icon-counter.tcart-total {
    color: #222222;
    background-color: #ffcc00;
}
.menu-icon-counter.twishlist-total {
    color: #ffffff;
    background-color: #ca1a2b;
}
</style>