Обзор

Некоторые темы не обновляют значок автоматически, и это руководство покажет вам, как исправить это с помощью небольшого фрагмента пользовательского кода. Выполните шаги ниже, чтобы все синхронизировалось корректно. Вот пример того, как выглядит это несоответствие:

Важные шаги перед началом!

Чтобы исправить проблему со значком корзины, вам нужно определить имя класса вашего значка корзины. Каждая тема отличается, и этот шаг гарантирует, что код будет работать именно для вашего магазина.

1. Используйте Chrome Developer Tools

Каждая тема отличается, поэтому вам понадобятся Chrome Developer Tools (Inspect), чтобы определить имя класса вашего значка корзины.

Щелкните правой кнопкой мыши по значку корзины на витрине и выберите Inspect в Google Chrome.
Найдите HTML-элемент вашего значка корзины (например, <span class="cart-count-bubble">).
Нужна помощь с Chrome Developer Tools? Ознакомьтесь с этим руководством с пошаговыми инструкциями.

2. Обратитесь за помощью (необязательно)

Если вы не можете найти класс своего значка корзины или зашли в тупик, не переживайте! У вас есть варианты:

Свяжитесь с разработчиком вашей темы: они лучше всех знают вашу тему и могут помочь найти правильный класс.
Наймите эксперта Shopify: если вам нужна дополнительная поддержка, у Shopify есть каталог проверенных экспертов, которые могут помочь. Найдите эксперта Shopify здесь.

🚧 Отказ от ответственности за пользовательский код

Приведенный ниже пример кода — это лишь шаблон, он не будет работать, если вы скопируете и вставите его напрямую. Вы должны заменить имя класса-заполнителя (например, .cart-count-bubble > span) на конкретное имя класса вашего значка корзины.

Пошаговое исправление

Мы разбили этот процесс на три уровня исправлений, начиная с самого простого решения (уровень 1). Каждый уровень строится на предыдущем; сначала попробуйте уровень 1, а затем переходите к уровню 2 или 3 только при необходимости.

Шаг 1: добавьте пользовательский код в Upcart

Сначала, поскольку нам понадобится добавить пользовательский HTML-код в редакторе Upcart, подготовим этот раздел:

Перейдите в Upcart Editor > Settings, затем откройте вкладку Custom HTML (находится в More settings, если не помещается в ряд вкладок).
Установите расположение Scripts (Before Load).
Вставьте сюда ваш отредактированный код (мы приведем примеры для каждого уровня ниже).

Вот как это выглядит:

Настройки Custom HTML в Upcart с расположением HTML, установленным на Scripts Before Load

Шаг 2: примените исправление по уровню

Уровень 1 (базовый)

Когда корзина загружается, этот скрипт суммирует количества по позициям корзины и записывает результат в элемент счетчика внутри пузырька корзины вашей темы. Он подходит для тем, где счетчик находится в простом вложенном элементе (например, .cart-count-bubble > span). Не забудьте

Заменить .cart-count-bubble > span на класс вашего значка корзины.
Протестировать на витрине после добавления кода.

Вставка скрипта счетчика уровня 1 в Custom HTML Upcart с использованием селектора cart-count-bubble

Пример кода для уровня 1

<script>  
window.upcartSubscribeCartLoaded((event) => {  
    const countEl = document.querySelector('.cart-count-bubble > span');  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    countEl.innerText = itemCount;  
});  
</script>

Уровень 2 (средний)

Если уровень 1 не сработал, ваша тема, возможно, заменяет весь HTML значка корзины при изменении счетчика. Эта версия перестраивает разметку значка для состояний пустой и непустой корзины, чтобы счетчик и значок оставались синхронизированными. Не забудьте

Заменить #cart-icon-bubble-custom на селектор обертки значка корзины вашей темы.
Протестировать после сохранения.

Пример кода для уровня 2

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    const iconWrapperEl = document.querySelector('#cart-icon-bubble-custom');  
    if (itemCount === 0) {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

Примечание об устаревшем API: колбэки window.upcartOnCartLoaded по-прежнему работают, но объявлены устаревшими и выводят предупреждения в консоль. Используйте upcartSubscribeCartLoaded для всех новых скриптов.Обратите внимание, что у event.cart нет свойства item_count — приведенные выше скрипты вычисляют итог с помощью event.cart.items.reduce((total, item) => total + item.quantity, 0) и передают его как itemCount. Более старые копии этих сниппетов, использующие cart.item_count, вызывают ReferenceError и незаметно никогда не обновляют значок.

Уровень 3 (продвинутый)

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

Заменить #cart-icon-bubble-custom-desktop и #cart-icon-bubble-custom-mobile на классы вашей темы.
Тщательно протестировать как на десктопе, так и на мобильных устройствах.

Вставка скрипта уровня 3 в Custom HTML Upcart с отдельными селекторами значка корзины для десктопа и мобильных устройств

Пример кода для уровня 3

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    // Desktop  
    const desktopIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-desktop');  
    if (itemCount === 0) {  
        desktopIconWrapperEl.innerHTML = `<span>Cart</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span>`;  
    } else {  
        desktopIconWrapperEl.innerHTML = `<span>Cart (${itemCount})</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span>`;  
    }  
  
    // Mobile  
    const mobileIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-mobile');  
    if (itemCount === 0) {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

Все еще не работает?

Если ни один из этих уровней не решает проблему, не переживайте — у вас еще есть варианты! Скорее всего, это означает, что ваша тема требует более сложной настройки. Вот что можно сделать дальше:

Обратитесь за помощью к разработчику вашей темы.
Наймите эксперта Shopify, который сможет создать индивидуальное решение для вашего магазина.

Начало работы

Модули корзины

Настройки корзины

Закреплённая кнопка корзины

Multicart

Кастомизации

Аналитика

Интеграции и совместимость

Оплата и аккаунт

Устранение неполадок

Количество/счетчик на значке корзины не обновляется

Обзор

Важные шаги перед началом!

1. Используйте Chrome Developer Tools

2. Обратитесь за помощью (необязательно)

🚧 Отказ от ответственности за пользовательский код

Пошаговое исправление

Шаг 1: добавьте пользовательский код в Upcart

Шаг 2: примените исправление по уровню

Уровень 1 (базовый)

Пример кода для уровня 1

Уровень 2 (средний)

Пример кода для уровня 2

Уровень 3 (продвинутый)

Пример кода для уровня 3

Все еще не работает?

​Обзор

​Важные шаги перед началом!

​1. Используйте Chrome Developer Tools

​2. Обратитесь за помощью (необязательно)

​🚧 Отказ от ответственности за пользовательский код

​Пошаговое исправление

​Шаг 1: добавьте пользовательский код в Upcart

​Шаг 2: примените исправление по уровню

​Уровень 1 (базовый)

​Пример кода для уровня 1

​Уровень 2 (средний)

​Пример кода для уровня 2

​Уровень 3 (продвинутый)

​Пример кода для уровня 3

​Все еще не работает?

Обзор

Важные шаги перед началом!

1. Используйте Chrome Developer Tools

2. Обратитесь за помощью (необязательно)

🚧 Отказ от ответственности за пользовательский код

Пошаговое исправление

Шаг 1: добавьте пользовательский код в Upcart

Шаг 2: примените исправление по уровню

Уровень 1 (базовый)

Пример кода для уровня 1

Уровень 2 (средний)

Пример кода для уровня 2

Уровень 3 (продвинутый)

Пример кода для уровня 3

Все еще не работает?