Oversigt

Nogle temaer opdaterer ikke ikonet automatisk, og denne guide viser dig, hvordan du løser det med lidt brugerdefineret kode. Følg trinnene nedenfor for at få alt til at synkronisere korrekt. Her er et eksempel på, hvordan denne uoverensstemmelse ser ud:

Vigtige trin, før du starter!

For at rette kurvikon-problemet skal du finde klassenavnet på dit kurvikon. Hvert tema er forskelligt, og dette trin sikrer, at koden fungerer specifikt for din butik.

1. Brug Chrome Developer Tools

Hvert tema er forskelligt, så du skal bruge Chrome Developer Tools (Inspect) til at finde klassenavnet på dit kurvikon.

Højreklik på dit kurvikon på din butiksfacade, og vælg Inspect i Google Chrome.
Find HTML-elementet for dit kurvikon (f.eks. <span class="cart-count-bubble">).
Brug for hjælp til Chrome Developer Tools? Se denne guide for trinvise instruktioner.

2. Bed om hjælp (valgfrit)

Hvis du ikke kan finde din kurvikonklasse eller sidder fast, så fortvivl ikke! Du har muligheder:

Kontakt din temaudvikler: De kender dit tema bedst og kan hjælpe dig med at finde den korrekte klasse.
Hyr en Shopify Expert: Hvis du har brug for yderligere hjælp, har Shopify et katalog over betroede eksperter, der kan hjælpe. Find en Shopify Expert her.

🚧 Forbehold om brugerdefineret kode

Eksempelkoden nedenfor er kun en skabelon — den virker ikke, hvis du kopierer og indsætter den direkte. Du skal erstatte pladsholder-klassenavnet (f.eks. .cart-count-bubble > span) med det specifikke klassenavn for dit kurvikon.

Trinvis løsning

Vi har opdelt processen i tre niveauer af løsninger, startende med den enkleste (Niveau 1). Hvert niveau bygger videre på det foregående — prøv Niveau 1 først, og gå kun videre til Niveau 2 eller 3, hvis det er nødvendigt.

Trin 1: Tilføj brugerdefineret kode i Upcart

Da vi skal tilføje noget brugerdefineret HTML-kode i Upcart-editoren, gør vi først den sektion klar:

Gå til Upcart Editor > Settings, og åbn derefter fanen Custom HTML (bag More settings, hvis den ikke er plads til den på fanerækken).
Sæt placeringen til Scripts (Before Load).
Indsæt din redigerede kode her (vi giver eksempler for hvert niveau nedenfor).

Sådan ser det ud:

Upcart Custom HTML-indstillinger med HTML-placeringen sat til Scripts Before Load

Trin 2: Anvend løsningen efter niveau

Niveau 1 (Grundlæggende)

Når kurven indlæses, lægger dette script antallene på kurvens varelinjer sammen og skriver resultatet ind i antalselementet i dit temas kurvboble. Det passer til temaer, hvor antallet ligger i et simpelt indlejret element (for eksempel .cart-count-bubble > span). Glem ikke

Erstat .cart-count-bubble > span med din kurvikonklasse.
Test det på din butiksfacade, efter du har tilføjet koden.

Indsættelse af Niveau 1-antalsscriptet i Upcart Custom HTML med cart-count-bubble-selektoren

Eksempelkode til Niveau 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>

Niveau 2 (Moderat)

Hvis Niveau 1 ikke virkede, erstatter dit tema muligvis hele kurvikonets HTML, når antallet ændres. Denne version genopbygger ikon-markuppen for tomme og ikke-tomme kurvtilstande, så antal og ikon forbliver synkroniseret. Glem ikke

Erstat #cart-icon-bubble-custom med dit temas wrapper-selektor for kurvikonet.
Test det, efter du har gemt.

Eksempelkode til Niveau 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>

Bemærkning om ældre versioner: window.upcartOnCartLoaded-callbacks fungerer stadig, men er udfaset og logger advarsler i konsollen. Brug upcartSubscribeCartLoaded til alle nye scripts.Bemærk, at event.cart ikke har en item_count-egenskab — scriptsene ovenfor udleder totalen med event.cart.items.reduce((total, item) => total + item.quantity, 0) og sender den ind som itemCount. Ældre kopier af disse kodestykker, der interpolerer cart.item_count, kaster en ReferenceError og opdaterer aldrig ikonet uden fejlmelding.

Niveau 3 (Avanceret)

Hvis dit tema bruger separat kurvikon-markup til desktop og mobil, skal du køre samme opdateringslogik mod to selektorer, så hver visning får den korrekte HTML og det korrekte antal. Glem ikke

Erstat #cart-icon-bubble-custom-desktop og #cart-icon-bubble-custom-mobile med dit temas klasser.
Test grundigt på både desktop- og mobilvisninger.

Indsættelse af Niveau 3-scriptet i Upcart Custom HTML med separate kurvikon-selektorer til desktop og mobil

Eksempelkode til Niveau 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>

Virker det stadig ikke?

Hvis ingen af disse niveauer løser problemet, så fortvivl ikke — du er ikke løbet tør for muligheder! Det betyder sandsynligvis, at dit tema kræver mere avanceret tilpasning. Her er, hvad du kan gøre som det næste:

Kontakt din temaudvikler for hjælp.
Hyr en Shopify Expert, der kan skabe en skræddersyet løsning til din butik.

Kom godt i gang

Kurvmoduler

Kurvindstillinger

Fastgjort kurvknap

Multicart

Tilpasninger

Analyser

Integrationer og kompatibilitet

Fakturering og konto

Fejlfinding

Kurvikonets antal/tæller opdateres ikke

Oversigt

Vigtige trin, før du starter!

1. Brug Chrome Developer Tools

2. Bed om hjælp (valgfrit)

🚧 Forbehold om brugerdefineret kode

Trinvis løsning

Trin 1: Tilføj brugerdefineret kode i Upcart

Trin 2: Anvend løsningen efter niveau

Niveau 1 (Grundlæggende)

Eksempelkode til Niveau 1

Niveau 2 (Moderat)

Eksempelkode til Niveau 2

Niveau 3 (Avanceret)

Eksempelkode til Niveau 3

Virker det stadig ikke?

​Oversigt

​Vigtige trin, før du starter!

​1. Brug Chrome Developer Tools

​2. Bed om hjælp (valgfrit)

​🚧 Forbehold om brugerdefineret kode

​Trinvis løsning

​Trin 1: Tilføj brugerdefineret kode i Upcart

​Trin 2: Anvend løsningen efter niveau

​Niveau 1 (Grundlæggende)

​Eksempelkode til Niveau 1

​Niveau 2 (Moderat)

​Eksempelkode til Niveau 2

​Niveau 3 (Avanceret)

​Eksempelkode til Niveau 3

​Virker det stadig ikke?

Oversigt

Vigtige trin, før du starter!

1. Brug Chrome Developer Tools

2. Bed om hjælp (valgfrit)

🚧 Forbehold om brugerdefineret kode

Trinvis løsning

Trin 1: Tilføj brugerdefineret kode i Upcart

Trin 2: Anvend løsningen efter niveau

Niveau 1 (Grundlæggende)

Eksempelkode til Niveau 1

Niveau 2 (Moderat)

Eksempelkode til Niveau 2

Niveau 3 (Avanceret)

Eksempelkode til Niveau 3

Virker det stadig ikke?