> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Licznik ilości na ikonie koszyka się nie aktualizuje

> Ten artykuł opisuje, jak naprawić licznik ilości na ikonie koszyka, gdy nie aktualizuje się w Upcart.

<div id="overview">
  # Przegląd
</div>

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ść:**

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/cart-counter-drawer-vs-theme-icon.gif?s=2b4c08af3555b89b66d7926793bc3833" alt="Drawer Upcart pokazujący Cart 2, podczas gdy dymek ikony koszyka motywu nadal wyświetla 1" width="2560" height="1080" data-path="images/upcart/cart-counter-drawer-vs-theme-icon.gif" />

***

<div id="important-steps-before-you-start">
  # Ważne kroki, zanim zaczniesz!
</div>

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.

<div id="1-use-chrome-developer-tools">
  ### **1. Użyj Chrome Developer Tools**
</div>

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](https://developer.chrome.com/docs/devtools/overview/) z instrukcjami krok po kroku.

<div id="2-reach-out-for-help-optional">
  ### **2. Poproś o pomoc (opcjonalnie)**
</div>

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](https://experts.shopify.com/).

<div id="custom-code-disclaimer">
  ## 🚧 **Zastrzeżenie dotyczące niestandardowego kodu**
</div>

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.

***

<div id="step-by-step-fix">
  # Naprawa krok po kroku
</div>

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.

<div id="step-1-add-custom-code-in-upcart">
  ## **Krok 1: Dodaj niestandardowy kod w Upcart**
</div>

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

1. 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).
2. Ustaw lokalizację na **Scripts (Before Load)**.
3. Wklej tutaj swój zmodyfikowany kod (przykłady dla każdego poziomu podajemy poniżej).

Oto jak to wygląda:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/cart-counter-custom-html-settings-location.gif?s=d70ce32a4328c99bf2d0b9d18efcd853" alt="Ustawienia Custom HTML w Upcart z lokalizacją HTML ustawioną na Scripts Before Load" width="1588" height="1080" data-path="images/upcart/cart-counter-custom-html-settings-location.gif" />

***

<div id="step-2-apply-the-fix-by-level">
  # **Krok 2: Zastosuj poprawkę według poziomu**
</div>

<div id="level-1-basic">
  ## Poziom 1 (podstawowy)
</div>

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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/cart-counter-level-1-count-bubble-script.gif?s=ef698547d55d921009278b3a006e4a9d" alt="Wklejanie skryptu liczącego Poziomu 1 do Custom HTML Upcart z użyciem selektora cart-count-bubble" width="1996" height="1080" data-path="images/upcart/cart-counter-level-1-count-bubble-script.gif" />

<div id="example-code-for-level-1">
  ## Przykładowy kod dla Poziomu 1
</div>

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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>
```

<Note>
  **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.
</Note>

***

<div id="level-2-moderate">
  ## Poziom 2 (średniozaawansowany)
</div>

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.

<Frame>
  <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/cart-counter-level-2-icon-bubble-script.gif?s=7d36ca92c77564a670a1940818b7d86b" alt="Wklejanie skryptu ikony koszyka Poziomu 2 do Custom HTML Upcart z użyciem selektora cart-icon-bubble-custom" width="1876" height="1080" data-path="images/upcart/cart-counter-level-2-icon-bubble-script.gif" />
</Frame>

<div id="example-code-for-level-2">
  ### Przykładowy kod dla Poziomu 2
</div>

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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>
```

<Note>
  **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.
</Note>

***

<div id="level-3-advanced">
  ## Poziom 3 (zaawansowany)
</div>

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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/cart-counter-level-3-desktop-mobile-script.gif?s=36058384ee181aa8fc630e3c7bfc8716" alt="Wklejanie skryptu Poziomu 3 do Custom HTML Upcart z oddzielnymi selektorami ikony koszyka dla desktopu i mobile" width="1996" height="1080" data-path="images/upcart/cart-counter-level-3-desktop-mobile-script.gif" />

<div id="example-code-for-level-3">
  ### Przykładowy kod dla Poziomu 3
</div>

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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>
```

<Note>
  **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.
</Note>

***

<div id="still-not-working">
  # Nadal nie działa?
</div>

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](https://www.shopify.com/partners/directory), który stworzy niestandardowe rozwiązanie dopasowane do Twojego sklepu.