Przegląd

Niektóre motywy nie aktualizują ikony automatycznie, a ten przewodnik pokaże Ci, jak to naprawić za pomocą odrobiny niestandardowego kodu. Wykonaj poniższe kroki, aby wszystko poprawnie się synchronizowało. Oto przykład, jak wygląda ta niezgodność:

Ważne kroki, zanim zaczniesz!

Aby naprawić problem z ikoną koszyka, musisz zidentyfikować nazwę klasy swojej ikony koszyka. Każdy motyw jest inny, a ten krok zapewnia, że kod będzie działał konkretnie w Twoim sklepie.

1. Użyj Chrome Developer Tools

Każdy motyw jest inny, więc musisz użyć Chrome Developer Tools (Inspect), aby zidentyfikować nazwę klasy swojej ikony koszyka.

Kliknij prawym przyciskiem myszy ikonę koszyka w swoim sklepie i wybierz Inspect w Google Chrome.
Znajdź element HTML swojej ikony koszyka (np. <span class="cart-count-bubble">).
Potrzebujesz pomocy z Chrome Developer Tools? Zajrzyj do tego przewodnika z instrukcjami krok po kroku.

2. Poproś o pomoc (opcjonalnie)

Jeśli nie możesz znaleźć klasy ikony koszyka lub utkniesz, nie martw się! Masz opcje:

Skontaktuj się z deweloperem motywu: zna Twój motyw najlepiej i pomoże Ci znaleźć właściwą klasę.
Zatrudnij eksperta Shopify: jeśli potrzebujesz dodatkowego wsparcia, Shopify ma katalog zaufanych ekspertów, którzy mogą pomóc. Znajdź eksperta Shopify tutaj.

🚧 Zastrzeżenie dotyczące niestandardowego kodu

Podany poniżej przykładowy kod to tylko szablon — nie zadziała, jeśli po prostu go skopiujesz i wkleisz. Musisz zastąpić przykładową nazwę klasy (np. .cart-count-bubble > span) konkretną nazwą klasy Twojej ikony koszyka.

Naprawa krok po kroku

Podzieliliśmy ten proces na trzy poziomy poprawek, zaczynając od najprostszego rozwiązania (Poziom 1). Każdy poziom bazuje na poprzednim — najpierw wypróbuj Poziom 1, a do Poziomu 2 lub 3 przechodź tylko w razie potrzeby.

Krok 1: Dodaj niestandardowy kod w Upcart

Najpierw, ponieważ będziemy musieli dodać niestandardowy kod HTML w edytorze Upcart, przygotujmy tę sekcję:

Przejdź do Upcart Editor > Settings, a następnie otwórz zakładkę Custom HTML (znajduje się pod More settings, jeśli nie mieści się w rzędzie zakładek).
Ustaw lokalizację na Scripts (Before Load).
Wklej tutaj swój zmodyfikowany kod (przykłady dla każdego poziomu podajemy poniżej).

Oto jak to wygląda:

Ustawienia Custom HTML w Upcart z lokalizacją HTML ustawioną na Scripts Before Load

Krok 2: Zastosuj poprawkę według poziomu

Poziom 1 (podstawowy)

Gdy koszyk się ładuje, ten skrypt sumuje ilości z pozycji koszyka i wpisuje wynik do elementu licznika w dymku koszyka Twojego motywu. Pasuje do motywów, w których licznik znajduje się w prostym zagnieżdżonym elemencie (na przykład .cart-count-bubble > span). Nie zapomnij

Zastąp .cart-count-bubble > span klasą swojej ikony koszyka.
Po dodaniu kodu przetestuj go w swoim sklepie.

Wklejanie skryptu liczącego Poziomu 1 do Custom HTML Upcart z użyciem selektora cart-count-bubble

Przykładowy kod dla Poziomu 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>

Uwaga dotycząca starszych wersji: callbacki window.upcartOnCartLoaded nadal działają, ale są przestarzałe i logują ostrzeżenia w konsoli. Używaj upcartSubscribeCartLoaded we wszystkich nowych skryptach. Pamiętaj, że event.cart nie ma właściwości item_count — użyj event.cart.items.reduce((total, item) => total + item.quantity, 0), aby obliczyć łączną liczbę produktów.

Poziom 2 (średniozaawansowany)

Jeśli Poziom 1 nie zadziałał, Twój motyw może zastępować cały kod HTML ikony koszyka przy zmianie licznika. Ta wersja odbudowuje znaczniki ikony dla stanów pustego i niepustego koszyka, aby licznik i ikona pozostawały zsynchronizowane. Nie zapomnij

Zastąp #cart-icon-bubble-custom selektorem kontenera ikony koszyka w Twoim motywie.
Przetestuj po zapisaniu.

Przykładowy kod dla Poziomu 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>

Uwaga dotycząca starszych wersji: callbacki window.upcartOnCartLoaded nadal działają, ale są przestarzałe i logują ostrzeżenia w konsoli. Używaj upcartSubscribeCartLoaded we wszystkich nowych skryptach.Pamiętaj, że event.cart nie ma właściwości item_count — powyższe skrypty wyliczają sumę za pomocą event.cart.items.reduce((total, item) => total + item.quantity, 0) i przekazują ją jako itemCount. Starsze kopie tych fragmentów, które interpolują cart.item_count, rzucają ReferenceError i po cichu nigdy nie aktualizują ikony.

Poziom 3 (zaawansowany)

Jeśli Twój motyw używa oddzielnych znaczników ikony koszyka dla desktopu i mobile, uruchom tę samą logikę aktualizacji na dwóch selektorach, tak aby każdy viewport otrzymał prawidłowy kod HTML i licznik. Nie zapomnij

Zastąp #cart-icon-bubble-custom-desktop i #cart-icon-bubble-custom-mobile klasami swojego motywu.
Dokładnie przetestuj zarówno na desktopie, jak i na mobile.

Wklejanie skryptu Poziomu 3 do Custom HTML Upcart z oddzielnymi selektorami ikony koszyka dla desktopu i mobile

Przykładowy kod dla Poziomu 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>

Uwaga dotycząca starszych wersji: callbacki window.upcartOnCartLoaded nadal działają, ale są przestarzałe i logują ostrzeżenia w konsoli. Używaj upcartSubscribeCartLoaded we wszystkich nowych skryptach.Pamiętaj, że event.cart nie ma właściwości item_count — powyższe skrypty wyliczają sumę za pomocą event.cart.items.reduce((total, item) => total + item.quantity, 0) i przekazują ją jako itemCount. Starsze kopie tych fragmentów, które interpolują cart.item_count, rzucają ReferenceError i po cichu nigdy nie aktualizują ikony.

Nadal nie działa?

Jeśli żaden z tych poziomów nie rozwiązuje problemu, nie martw się — nadal masz opcje! Prawdopodobnie oznacza to, że Twój motyw wymaga bardziej zaawansowanego dostosowania. Oto co możesz zrobić dalej:

Skontaktuj się z deweloperem swojego motywu w celu uzyskania pomocy.
Zatrudnij eksperta Shopify, który stworzy niestandardowe rozwiązanie dopasowane do Twojego sklepu.

Pierwsze kroki

Moduły koszyka

Ustawienia koszyka

Przyklejony przycisk koszyka

Multicart

Personalizacje

Analityka

Integracje i kompatybilność

Rozliczenia i konto

Rozwiązywanie problemów

Licznik ilości na ikonie koszyka się nie aktualizuje

Przegląd

Ważne kroki, zanim zaczniesz!

1. Użyj Chrome Developer Tools

2. Poproś o pomoc (opcjonalnie)

🚧 Zastrzeżenie dotyczące niestandardowego kodu

Naprawa krok po kroku

Krok 1: Dodaj niestandardowy kod w Upcart

Krok 2: Zastosuj poprawkę według poziomu

Poziom 1 (podstawowy)

Przykładowy kod dla Poziomu 1

Poziom 2 (średniozaawansowany)

Przykładowy kod dla Poziomu 2

Poziom 3 (zaawansowany)

Przykładowy kod dla Poziomu 3

Nadal nie działa?

​Przegląd

​Ważne kroki, zanim zaczniesz!

​1. Użyj Chrome Developer Tools

​2. Poproś o pomoc (opcjonalnie)

​🚧 Zastrzeżenie dotyczące niestandardowego kodu

​Naprawa krok po kroku

​Krok 1: Dodaj niestandardowy kod w Upcart

​Krok 2: Zastosuj poprawkę według poziomu

​Poziom 1 (podstawowy)

​Przykładowy kod dla Poziomu 1

​Poziom 2 (średniozaawansowany)

​Przykładowy kod dla Poziomu 2

​Poziom 3 (zaawansowany)

​Przykładowy kod dla Poziomu 3

​Nadal nie działa?

Przegląd

Ważne kroki, zanim zaczniesz!

1. Użyj Chrome Developer Tools

2. Poproś o pomoc (opcjonalnie)

🚧 Zastrzeżenie dotyczące niestandardowego kodu

Naprawa krok po kroku

Krok 1: Dodaj niestandardowy kod w Upcart

Krok 2: Zastosuj poprawkę według poziomu

Poziom 1 (podstawowy)

Przykładowy kod dla Poziomu 1

Poziom 2 (średniozaawansowany)

Przykładowy kod dla Poziomu 2

Poziom 3 (zaawansowany)

Przykładowy kod dla Poziomu 3

Nadal nie działa?