Panoramica

Alcuni temi non aggiornano automaticamente l’icona e questa guida ti mostrerà come risolvere il problema con un po’ di codice personalizzato. Segui i passaggi qui sotto per sincronizzare tutto correttamente. Ecco un esempio di come appare questa discrepanza:

Passaggi importanti prima di iniziare!

Per risolvere il problema dell’icona del carrello, dovrai identificare il nome della classe della tua icona del carrello. Ogni tema è diverso e questo passaggio garantisce che il codice funzioni specificamente per il tuo negozio.

1. Usa gli Strumenti per sviluppatori di Chrome

Ogni tema è diverso, quindi dovrai usare gli Strumenti per sviluppatori di Chrome (Ispeziona) per identificare il nome della classe della tua icona del carrello.

Fai clic destro sull’icona del carrello nel tuo storefront e seleziona Ispeziona in Google Chrome.
Trova l’elemento HTML della tua icona del carrello (ad es. <span class="cart-count-bubble">).
Hai bisogno di aiuto con gli Strumenti per sviluppatori di Chrome? Consulta questa guida per istruzioni passo dopo passo.

2. Chiedi aiuto (facoltativo)

Se non riesci a trovare la classe della tua icona del carrello o ti senti bloccato, niente paura! Hai delle opzioni:

Contatta lo sviluppatore del tuo tema: conosce il tuo tema meglio di chiunque altro e può aiutarti a trovare la classe corretta.
Assumi uno Shopify Expert: se hai bisogno di ulteriore supporto, Shopify dispone di una directory di esperti affidabili che possono aiutarti. Trova uno Shopify Expert qui.

🚧 Avvertenza sul codice personalizzato

Il codice di esempio fornito qui sotto è solo un template, non funzionerà se lo copi e incolli direttamente. Devi sostituire il nome di classe segnaposto (ad es. .cart-count-bubble > span) con il nome di classe specifico della tua icona del carrello.

Soluzione passo dopo passo

Abbiamo suddiviso questo processo in tre livelli di soluzioni, partendo dalla più semplice (Livello 1). Ogni livello si basa sul precedente: prova prima il Livello 1, poi passa al Livello 2 o 3 solo se necessario.

Passo 1: aggiungi il codice personalizzato in Upcart

Per prima cosa, dato che dovremo aggiungere del codice HTML personalizzato nell’editor di Upcart, prepariamo quella sezione:

Vai su Upcart Editor > Settings, poi apri la scheda Custom HTML (sotto More settings se non entra nella riga delle schede).
Imposta la posizione su Scripts (Before Load).
Incolla qui il tuo codice modificato (forniamo esempi per ogni livello qui sotto).

Ecco come appare:

Impostazioni Custom HTML di Upcart con la posizione HTML impostata su Scripts Before Load

Passo 2: applica la soluzione in base al livello

Livello 1 (base)

Quando il carrello si carica, questo script somma le quantità dei line item del carrello e scrive il totale nell’elemento del conteggio all’interno della bolla del carrello del tuo tema. È adatto ai temi in cui il conteggio si trova in un semplice elemento annidato (ad esempio, .cart-count-bubble > span). Non dimenticare

Sostituisci .cart-count-bubble > span con la classe della tua icona del carrello.
Testalo sul tuo storefront dopo aver aggiunto il codice.

Incollare lo script di conteggio del Livello 1 in Upcart Custom HTML usando il selettore cart-count-bubble

Codice di esempio per il Livello 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>

Livello 2 (intermedio)

Se il Livello 1 non ha funzionato, il tuo tema potrebbe sostituire l’intero HTML dell’icona del carrello quando il conteggio cambia. Questa versione ricostruisce il markup dell’icona per gli stati carrello vuoto e non vuoto, così il conteggio e l’icona restano sincronizzati. Non dimenticare

Sostituisci #cart-icon-bubble-custom con il selettore del wrapper dell’icona del carrello del tuo tema.
Testa dopo il salvataggio.

Codice di esempio per il Livello 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>

Nota legacy: le callback window.upcartOnCartLoaded funzionano ancora ma sono deprecate e registrano avvisi in console. Usa upcartSubscribeCartLoaded per tutti i nuovi script.Nota che event.cart non ha una proprietà item_count — gli script qui sopra ricavano il totale con event.cart.items.reduce((total, item) => total + item.quantity, 0) e lo passano come itemCount. Le copie più vecchie di questi snippet che interpolano cart.item_count generano un ReferenceError e non aggiornano mai l’icona, senza segnalarlo.

Livello 3 (avanzato)

Se il tuo tema usa markup separati per l’icona del carrello su desktop e mobile, esegui la stessa logica di aggiornamento su due selettori, così ogni viewport riceve l’HTML e il conteggio corretti. Non dimenticare

Sostituisci #cart-icon-bubble-custom-desktop e #cart-icon-bubble-custom-mobile con le classi del tuo tema.
Testa a fondo sia nella vista desktop che in quella mobile.

Incollare lo script del Livello 3 in Upcart Custom HTML con selettori separati per l'icona del carrello su desktop e mobile

Codice di esempio per il Livello 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>

Non funziona ancora?

Se nessuno di questi livelli risolve il problema, niente paura, non sei senza opzioni! Probabilmente il tuo tema richiede una personalizzazione più avanzata. Ecco cosa puoi fare adesso:

Contatta lo sviluppatore del tuo tema per ricevere aiuto.
Assumi uno Shopify Expert che possa creare una soluzione personalizzata su misura per il tuo negozio.

Per iniziare

Moduli del carrello

Impostazioni del carrello

Pulsante carrello fisso

Multicart

Personalizzazioni

Analisi

Integrazioni e compatibilità

Fatturazione e account

Risoluzione dei problemi

La quantità/il contatore dell'icona del carrello non si aggiorna

Panoramica

Passaggi importanti prima di iniziare!

1. Usa gli Strumenti per sviluppatori di Chrome

2. Chiedi aiuto (facoltativo)

🚧 Avvertenza sul codice personalizzato

Soluzione passo dopo passo

Passo 1: aggiungi il codice personalizzato in Upcart

Passo 2: applica la soluzione in base al livello

Livello 1 (base)

Codice di esempio per il Livello 1

Livello 2 (intermedio)

Codice di esempio per il Livello 2

Livello 3 (avanzato)

Codice di esempio per il Livello 3

Non funziona ancora?

​Panoramica

​Passaggi importanti prima di iniziare!

​1. Usa gli Strumenti per sviluppatori di Chrome

​2. Chiedi aiuto (facoltativo)

​🚧 Avvertenza sul codice personalizzato

​Soluzione passo dopo passo

​Passo 1: aggiungi il codice personalizzato in Upcart

​Passo 2: applica la soluzione in base al livello

​Livello 1 (base)

​Codice di esempio per il Livello 1

​Livello 2 (intermedio)

​Codice di esempio per il Livello 2

​Livello 3 (avanzato)

​Codice di esempio per il Livello 3

​Non funziona ancora?

Panoramica

Passaggi importanti prima di iniziare!

1. Usa gli Strumenti per sviluppatori di Chrome

2. Chiedi aiuto (facoltativo)

🚧 Avvertenza sul codice personalizzato

Soluzione passo dopo passo

Passo 1: aggiungi il codice personalizzato in Upcart

Passo 2: applica la soluzione in base al livello

Livello 1 (base)

Codice di esempio per il Livello 1

Livello 2 (intermedio)

Codice di esempio per il Livello 2

Livello 3 (avanzato)

Codice di esempio per il Livello 3

Non funziona ancora?