Il carrello di Shopify non si aggiorna fino all'aggiornamento: correzioni AJAX, temi e app (2026)

Correzione rapida con Thunder

Per prima cosa verifica se i dati del carrello o l'interfaccia utente del carrello sono danneggiati

Apri DevTools, fai clic su Aggiungi al carrello e guarda Rete. Se /cart/add.js o Risorse /cart/change.js restituisce una risposta 200 e /cart.js mostra il conteggio degli articoli corretto, i dati del carrello di Shopify vanno bene. La parte interrotta è l'interfaccia utente visibile: HTML del cassetto, conteggio del carrello, quantità di elementi pubblicitari, totale parziale o stato del pulsante di pagamento.

Se la richiesta fallisce con un reindirizzamento 400, 422 o un reindirizzamento, eseguire prima il debug del modulo del prodotto. Gli ID delle varianti, i piani di vendita, le app di abbonamento e le proprietà degli elementi pubblicitari in bundle possono far fallire una richiesta di carrello prima che il cassetto abbia qualcosa da aggiornare.

Per problemi relativi al percorso di acquisto, utilizzare il file cassetto del carrello che non apre la guida, Lista di controllo del pulsante aggiungi al carrelloe Guida alla risoluzione dei problemi dal carrello alla cassa.

Correggi gli aggiornamenti del carrello AJAX con il rendering della sezione

I temi Shopify moderni spesso recuperano sezioni aggiornate del carrello dopo una mutazione del carrello. Ciò mantiene sincronizzati il ​​cassetto, il totale parziale, l'elenco degli articoli e l'icona del carrello senza ricaricare l'intera pagina. Gli ID esatti delle sezioni variano in base al tema, quindi controlla il cassetto del carrello e le sezioni dell'intestazione prima di copiare il codice.

async function changeCartQuantity(line, quantity) {
  const change = await fetch('/cart/change.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({ line, quantity }),
  });

  if (!change.ok) throw new Error('Cart quantity update failed');

  const sections = ['cart-drawer', 'cart-icon-bubble'];
  const html = await fetch('/?sections=' + sections.join(',')).then((res) => res.json());

  document.querySelector('cart-drawer')?.replaceWith(
    new DOMParser().parseFromString(html['cart-drawer'], 'text/html').querySelector('cart-drawer')
  );

  document.querySelector('#cart-icon-bubble')?.replaceWith(
    new DOMParser().parseFromString(html['cart-icon-bubble'], 'text/html').querySelector('#cart-icon-bubble')
  );

  document.dispatchEvent(new CustomEvent('cart:updated'));
}

Non dare per scontato che questi ID di sezione esistano nel tuo tema. Cerca il tuo tema carrello-cassetto, icona-carrello-bolla, carrello-articolie articoli del carrello principale. I temi in stile Dawn hanno assistenti di aggiornamento diversi rispetto ai temi personalizzati precedenti.

Aggiorna insieme i pulsanti Conteggio carrello, Totale parziale e Rimuovi

Una correzione parziale comune aggiorna le voci del cassetto del carrello ma lascia obsoleto il conteggio delle intestazioni. Un altro bug comune rimuove visivamente un elemento ma mantiene il vecchio totale parziale. Entrambi fanno sì che gli acquirenti diffidino del momento del pagamento. Tratta il carrello come un unico sistema con stato, non come widget separati.

Dopo ogni mutazione del carrello, verifica cinque elementi: righe articolo, input di quantità, conteggio del carrello, totale parziale e stato disabilitato del pulsante di pagamento. Se qualcuno di essi mostra ancora dati non aggiornati, l'aggiornamento è incompleto.

Disabilita le app del carrello e i vecchi snippet in un tema duplicato

I problemi del carrello spesso iniziano dopo l'installazione di un pacchetto, un regalo gratuito, un upsell, un abbonamento o un'app per il cassetto del carrello. L'app potrebbe ascoltare il nome di un evento mentre il tuo tema ne invia un altro. Oppure potrebbe modificare il carrello dopo che il tuo tema ha già eseguito il rendering del nuovo HTML.

Duplica il tema, disabilita gli incorporamenti dell'app e testa un prodotto semplice. Quindi riattiva le app una per una. Inizia con le app per carrello, pacchetto, regalo, abbonamento, popup, personalizzazione e creazione di pagine. Se il problema persiste dopo aver disinstallato un'app, esegui il file Elenco di controllo per la pulizia degli avanzi dell'app Shopify.

Anche gli stack pesanti di app danneggiano la reattività. Il Guida alla correzione degli script dell'app, Guida Shopify INPe guida completa all'ottimizzazione della velocità di Shopify coprire il lato velocità in modo più approfondito.

Correzione manuale vs. Correzione Thunder

Se il problema del carrello è legato alle prestazioni più ampie del negozio, confronta Prezzi tempestosi con Ottimizzazione pratica della velocità di Shopify.

FAQ