Il cassetto del carrello di Shopify non si apre: correzioni AJAX, temi e app (2026)

Soluzione rapida: riduzione della pressione degli script attorno al carrello

Identificare innanzitutto quale percorso del carrello non funziona

Non iniziare modificando Liquid. Riproduci il problema in quattro posizioni: pagina del prodotto, griglia di raccolta, prodotto in evidenza sulla home page e modalità di visualizzazione rapida. Molti negozi Shopify hanno un codice aggiungi al carrello separato per ciascuna superficie. Il drawer può lavorare sul modello del prodotto mentre le schede di raccolta continuano a essere pubblicate direttamente nella pagina del carrello.

Apri DevTools, fai clic su Aggiungi al carrello e guarda la scheda Rete. Un flusso AJAX sano di solito invia post a /cart/add.js, ottiene una risposta positiva, recupera le sezioni aggiornate del carrello o /cart.jse apre il cassetto. Un reindirizzamento a /cart significa che il modulo utilizza il normale invio HTML o che il gestore AJAX non si è allegato.

Se l'aggiunta al carrello funziona ma gli acquisti continuano a scomparire in seguito, confronta questo con Shopify aggiungi al carrello ma nessuna lista di controllo delle vendite e il Guida al debug del pulsante di pagamento.

Controlla le impostazioni del carrello dei temi prima di toccare il codice

In molti temi del Negozio online 2.0, il drawer è controllato da un'impostazione del tema. Vai su Negozio online, Personalizza, Impostazioni tema, Carrello, quindi conferma che il tipo di carrello è impostato su Cassetto o Notifica anziché su Pagina. Salva, visualizza l'anteprima e prova in una finestra di navigazione in incognito.

Quindi duplica il tema live e visualizza l'anteprima di un tema Dawn non modificato. Se Dawn apre il drawer e il tuo tema live no, il problema è il codice del tema o un'app del negozio installata. Se Dawn reindirizza anche al carrello, cerca le impostazioni, la disponibilità del prodotto o un pulsante per la creazione di pagine che reindirizza intenzionalmente.

Anche i negozi che hanno installato e rimosso più strumenti per il carrello dovrebbero eseguire il file Elenco di controllo per la pulizia degli avanzi dell'app. I vecchi snippet possono continuare ad ascoltare gli eventi del carrello anche molto tempo dopo la scomparsa dell'app.

Correggi il flusso di aggiunta al carrello e di aggiornamento del cassetto AJAX

Un cassetto necessita di due lavori separati: aggiungere l'oggetto, quindi eseguire il rendering del cassetto aggiornato. Gli sviluppatori spesso risolvono il primo lavoro e dimenticano il secondo. Il risultato è un conteggio del carrello che cambia solo dopo l'aggiornamento, un cassetto che si apre vuoto o una scheda prodotto che indirizza gli acquirenti alla pagina del carrello.

async function addToCart(form) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    body: new FormData(form),
    headers: { Accept: 'application/json' },
  });

  if (!response.ok) throw new Error('Add to cart failed');

  const cart = await fetch('/cart.js').then((res) => res.json());
  document.dispatchEvent(new CustomEvent('cart:refresh', { detail: { cart } }));
  document.dispatchEvent(new CustomEvent('cart:open'));
}

Il tuo tema potrebbe utilizzare nomi di eventi diversi. I temi basati su Dawn spesso hanno una propria notifica del carrello o una classe per il cassetto del carrello. Cerca il tuo tema carrello:aggiorna, carrello: aperto, carrello-cassetto, notifica carrelloe /cart/add.js, quindi mantieni un percorso evento coerente.

I page builder e gli incorporamenti di app possono bypassare il drawer

GemPages, PageFly, pagine di destinazione personalizzate, sezioni di acquisto rapido e widget in bundle possono visualizzare il proprio pulsante Aggiungi al carrello. Questi pulsanti possono essere configurati per reindirizzare al carrello, aprire un mini carrello o richiamare uno script di supporto. Se solo le pagine del generatore di pagine falliscono, correggi l'impostazione dell'elemento prima di riscrivere il codice del tema.

Disabilita l'incorporamento dell'app in un tema duplicato, quindi riprova. Riattivali uno per uno, iniziando con cassetti del carrello, omaggi, pacchetti, abbonamenti, upsell, ricerca, personalizzazione, chat e pixel. Lo stesso flusso di debug nel file Gli script dell'app rallentano la guida Shopify si applica qui.

Per una pulizia più ampia dello script, utilizzare il file Guida all'impatto degli script di terze parti, guida alla pulizia del codice inutilizzatoe guida completa all'ottimizzazione della velocità di Shopify.

Elenco di controllo manuale per il debug del cassetto del carrello Shopify

Di Google Interazione con la guida Next Paint è utile qui perché un cassetto del carrello ritardato è spesso un problema di reattività. Se i tocchi mobili presentano ritardi, leggi il Guida Shopify INP e riprova dopo la pulizia dello script.

Quando il cassetto fa parte di una perdita di entrate più ampia, utilizzare Ottimizzazione della velocità professionale di Shopify o Risorse Prezzi tempestosi per decidere se l'automazione delle app o la pulizia esperta è il percorso più veloce.

FAQ