Обновляем счётчик корзины на открытых вкладках

Пользователи интернета нередко открывают различные товары из одного магазина Shop-Script в нескольких вкладках браузера, просматривая их и добавляя в свою корзину.

Если покупатель добавляет товар в корзину в одной из вкладок и затем переключается на другую, информация о содержимом корзины в верхней части страницы не обновляется. Это может вызвать недоумение у посетителей, так как они точно знают, что положили что-то в корзину.

Подобная ситуация повторяется, когда пользователь добавляет товар в корзину и использует кнопку "Назад" в браузере. В большинстве случаев корзина не обновляется, даже когда пользователь находится на странице корзины в различных темах дизайна.

Это создает путаницу и может негативно сказаться на общем пользовательском опыте, так как клиенты не могут быть уверены, что их выбор учтен. Поэтому важно обеспечить правильное обновление информации о содержимом корзины, чтобы избежать таких ситуаций.

// Позволяет обновлять счетчик открытых вкладок, страниц из кэша
async function getCartCount(counter) {
    const response = await fetch('/cart/save/');
    const {data, status} = await response.json();
    const $cart = $(counter).closest('.cart-block');
    if (status == 'ok') {
        localStorage.setItem('cartcounter', data.count);
        $(counter).text( data.count );
        $cart.toggleClass('empty', data.count == 0);
    } 
}
$(document).ready(function () {
    // вызываем счетчик корзины
    window.addEventListener('storage', event => {
        if (event.key != 'cartcounter') return;
        getCartCount('.js-cart_count');
    });
    getCartCount('.js-cart_count');
});