Écouter la quantité de mise à jour du panier shopify

Question

J'écris une application Shopify et je voudrais écouter l'événement de mise à jour du panier shopify. Je sais que lorsque l'utilisateur clique sur supprimer ou augmenter la quantité d'article. Shopify envoie une demande POST au backend pour mettre à jour la carte. Mon application calcule la valeur d'expédition en fonction de la quantité d'articles dans le panier shopify. J'ajoute mon script d'application au shopify via script-tag.

J'ai essayé d'écouter l'entrée de quantité mais cet événement n'en déclenche qu'une. Je pense que shopify met à jour le DOM d'entrée après chaque mise à jour du panier afin qu'il puisse supprimer mon auditeur.

 $('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});

Comment puis-je écouter l'événement de mise à jour du panier? Cela semble être une question simple mais je ne trouve vraiment aucune réponse concernant Shopify!

Answer 1

Il existe donc deux façons de mettre à jour un panier Shopify. Soit via le formulaire de soumission, soit en utilisant l'API Ajax. En supposant que vous ayez déjà résolu le cas de soumission de formulaire en appelant votre fonction de calcul de l'expédition au chargement de la page. Pour les mises à jour de panier basées sur Ajax, il n'y a pas d'événement standard. Certains thèmes peuvent déclencher un événement lors de la mise à jour du panier, mais dans le cas d'une application générique, il n'est pas possible de s'y fier en raison de l'absence de comportement standard défini.

Vous pouvez donc écouter les appels AJAX et appeler votre fonction si elle correspond à vos conditions. L'API Shopify Docs pour Ajax répertorie les 4 types de demande POST qui peuvent mettre à jour le panier. Ainsi, en corrigeant la fonction ouverte de XMLHttpRequest, nous ajoutons un écouteur d'événement pour la charge qui se déclenche lorsque la requête s'est terminée avec succès. En cas de rappel, nous vérifions si l'URL était celle utilisée pour la mise à jour du panier, puis appelons la fonction d'expédition de mise à jour.

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));
}

Idée tirée de la réponse de Nicolas

ajaxComplete n'a pas été utilisé car il n'écoute que les requêtes effectuées à l'aide de jQuery.

Passer une réponse à votre fonction d'expédition enregistre l'appel supplémentaire Get Cart Ajax.

Mettre à jour

Si le code ci-dessus ne fonctionne pas pour vous ou ne capte pas tous les appels, consultez mon autre réponse qui écoute également tous les appels d'API Fetch si cela est utilisé pour mettre à jour le panier.

Écouter les modifications du panier à l'aide de l'API Fetch

Answer 2

Pour mettre à jour les champs de quantité d'articles dans le panier dans un thème en sections

Étape 1: Vous accédez à l'administration Shopify, cliquez sur Boutique en ligne et accédez à Thèmes.

Étape 2: Recherchez les thèmes que vous souhaitez modifier, puis appuyez sur Actions puis sur Modifier le code.

Étape 3: Regardez les sections, vous cliquez sur cart-template.liquid. Dans le cas où vous n'utilisez pas le thème qui n'a pas l'adresse, vous pouvez accéder au répertoire des modèles et cliquer sur cart.liquid.

Étape 4: Trouvez la phrase écrite comme update [item.id] dans la balise d'entrée.

Étape 5: Remplacez le nom par la valeur name = "updates []".

Étape 6: répétez ces étapes ci-dessus chaque fois que vous voyez une valeur de nom de mises à jour [] dans la balise d'entrée.

Étape 7: Cliquez sur Enregistrer et mettez à jour les champs de quantité d'articles avec succès.