Счётчик товаров на иконках мобильного меню ME503

В нижнем мобильном меню ME503 иконки корзины и избранного — обычные картинки, и количество товаров на них не показать. Модификация рисует поверх иконки кружок со счётчиком.

Что настраивается

• Что делать, когда товаров нет — прятать счётчик, как это делают штатные иконки Тильды, или показывать ноль.
• Размер, сдвиг от угла иконки, размер и насыщенность шрифта, обводка.
• Цвета отдельно для корзины и для избранного — фон и цифры.

Как это работает

Счётчик не пересчитывается заново и не вычитывается из хранилища напролом: код встраивается в те функции Тильды, которыми она перерисовывает свои собственные счётчики на иконках корзины и избранного. Поэтому число в меню обновляется ровно тогда же, когда штатное, — при добавлении товара, изменении количества, удалении, очистке корзины после оформленного заказа и при возврате на страницу кнопкой «Назад».

Что учтено

• Ссылка карточки приводится к точному виду #opencart и #showfavorites: Тильда ловит нажатие по строгому совпадению адреса, и лишний пробел ломает открытие корзины. Заодно снимается атрибут открытия в новой вкладке.
• Иконка ищется и внутри ссылки, и рядом с ней — разметка карточки в ME503 отличается в зависимости от того, задана ли ссылка всей карточке или только подписи.
• Счётчик не задваивается, даже если код вставлен на страницу дважды.
• Испорченные данные в хранилище браузера дают ноль, а не NaN.
• Счётчик обновляется и при изменении корзины в соседней вкладке.

Ограничения

Карточек в меню может не быть вовсе — тогда код просто ничего не делает. Для корзины и избранного нужны блоки магазина и списка избранного на сайте: без них Тильде нечего считать.