Ri-rendering AJAX del carrello dopo le richieste del carrello personalizzato

Question

Sto creando un'app Shopify che offre prodotti o servizi aggiuntivi relativi ad alcuni prodotti identificati. In alcuni casi, finisco per aggiungere un prodotto al carrello dalla pagina del carrello.

Ho trovato questa domanda molto utile, per intraprendere azioni sulle modifiche al carrello. Il problema è che al momento sono costretto a ricaricare la pagina per rieseguire il rendering del carrello insieme al nuovo prodotto. Non posso ragionevolmente ricostruire il carrello da solo per includere nuovi articoli.

Quindi, c'è un modo per attivare un "rendering AJAX" del carrello ed evitare un ricaricamento dell'intera pagina?

Answer 1

Puoi raggiungere questo obiettivo in molti modi a seconda del tuo obiettivo finale. Dalla tua descrizione, ho capito che vuoi solo che il tuo script venga eseguito sulla pagina del carrello. Tuttavia, tieni presente che un utente può procedere alla pagina di pagamento senza visitare la pagina del carrello. Quindi copri tutti i tuoi casi d'uso.

Sarebbe stato molto più semplice se avessi dovuto farlo in tema e non in un'app. Poiché la tua app non ha idea del markup della pagina Carrello, non è facile aggiungere semplicemente la nuova riga del prodotto alla tabella esistente. Come soluzione alternativa, quando aggiungi un nuovo prodotto, chiama la pagina del carrello tramite Ajax, analizza l'HTML restituito e sostituisci il modulo del carrello. Quindi, dopo aver aggiunto un nuovo prodotto, chiama il codice sottostante per visualizzare nuovamente il modulo del prodotto nella pagina del carrello.

function RerenderCart() {
  $.get("/cart", function (data) { const parser = new DOMParser(); const doc = parser.parseFromString(data, "text/html"); const formSelector = doc.querySelector("form[action='/cart']"); $("form[action='/cart']").replaceWith(formSelector);
  });
}

Aggiungi controlli per la pagina del carrello e se il modulo è stato trovato nell'HTML restituito.

Questo codice funziona bene sul tema Debut Shopify. Basta testarlo a fondo su tutti i tuoi casi d'uso.

DOMParser