Ascolta la quantità di aggiornamento del carrello di Shopify
Sto scrivendo un'app Shopify e vorrei ascoltare l'evento di aggiornamento del carrello di Shopify. So che quando l'utente fa clic su Rimuovi o aumenta la quantità dell'articolo. Shopify invia una richiesta POST al backend per aggiornare la carta. La mia app calcola il valore di spedizione in base alla quantità di articoli del carrello di Shopify. Aggiungo lo script della mia app a Shopify tramite script-tag.
Ho provato ad ascoltare l'input della quantità ma questo evento ne attiva solo uno. Penso che Shopify aggiorni il DOM di input dopo ogni aggiornamento del carrello in modo che possa rimuovere il mio ascoltatore.
$('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});
Come posso ascoltare l'evento di aggiornamento del carrello? Sembra essere una domanda semplice ma davvero non riesco a trovare alcuna risposta su Shopify!
Risposte
Quindi ci sono 2 modi in cui un carrello di Shopify può essere aggiornato. O tramite l'invio del modulo o utilizzando Ajax API. Supponendo che tu abbia già risolto il caso di invio del modulo chiamando la funzione di calcolo della spedizione al caricamento della pagina. Per gli aggiornamenti del carrello basati su Ajax non esiste un evento standard. Alcuni temi possono attivare un evento sull'aggiornamento del carrello, ma nel caso di un'app generica, non è possibile fare affidamento su di essi a causa di un comportamento standard non definito.
Quindi quello che puoi fare è ascoltare le chiamate AJAX e chiamare la tua funzione se soddisfa le tue condizioni. L'API di Shopify Docs for Ajax elenca i 4 tipi di richieste POST che possono aggiornare il carrello. Quindi, applicando la patch alla funzione open di XMLHttpRequest , aggiungiamo un listener di eventi per il caricamento che si attiva quando la richiesta è terminata con successo. In caso di richiamata, controlliamo se l'URL era quello utilizzato per l'aggiornamento del carrello, quindi chiamiamo la funzione di aggiornamento della spedizione.
const open = window.XMLHttpRequest.prototype.open;
function openReplacement() {
this.addEventListener("load", function () {
if (
[
"/cart/add.js",
"/cart/update.js",
"/cart/change.js",
"/cart/clear.js",
].includes(this._url)
) {
calculateShipping(this.response);
}
});
return open.apply(this, arguments);
}
window.XMLHttpRequest.prototype.open = openReplacement;
function calculateShipping(cartJson) {
console.log("calculate new shipping");
console.log(JSON.parse(cartJson));
}
Idea presa dalla risposta di Nicolas
ajaxComplete non è stato utilizzato perché ascolta solo le richieste effettuate utilizzando jQuery.
Passare la risposta alla funzione di spedizione salva la chiamata aggiuntiva Get Cart Ajax.
Aggiornare
Se il codice sopra non funziona per te o non cattura tutte le chiamate, vedi la mia altra risposta che ascolta anche tutte le chiamate API Fetch se viene utilizzata per aggiornare il carrello.
Per aggiornare i campi della quantità degli articoli nel carrello nel tema sezionato
Passaggio 1: accedi all'amministratore di Shopify, fai clic su Negozio online e vai a Temi.
Passaggio 2: trova i temi che desideri modificare, quindi premi Azioni quindi Modifica codice.
Passaggio 3: guarda le sezioni, fai clic su cart-template.liquid. Nel caso in cui non utilizzi il tema che non ha l'indirizzo, puoi accedere alla directory dei modelli e fare clic su cart.liquid.
Passaggio 4: trova la frase scritta come aggiornamento [item.id] nel tag di input.
Passaggio 5: modifica il nome nel valore di name = "updates []".
Passaggio 6: ribadire questi passaggi di cui sopra ogni volta che viene visualizzato un valore di nome di aggiornamenti [] nel tag di input.
Passaggio 7: fare clic su Salva e aggiornare correttamente i campi della quantità degli articoli.