Shopifyカートの更新数量を聞く

Aug 17 2020

Shopifyアプリを作成していますが、Shopifyカートの更新イベントを聞きたいと思います。ユーザーが[削除]をクリックすると、アイテムの数量が増えることを知っています。ShopifyはPOSTリクエストをバックエンドに送信してカードを更新します。私のアプリは、shopifyカートアイテムの数量に基づいて送料を計算します。script-tagを介してアプリスクリプトをshopifyに追加します。

数量の入力を聞いてみましたが、このイベントでは1つしか発生しません。shopifyは、カートが更新されるたびに入力DOMを更新するため、リスナーが削除される可能性があると思います。

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

カート更新イベントを聞くにはどうすればよいですか？簡単な質問のようですが、Shopifyに関しては本当に答えが見つかりません！

回答

6 BilalAkbar Aug 20 2020 at 13:00

したがって、Shopifyカートを更新する方法は2つあります。フォームを送信するか、AjaxAPIを使用します。ページの読み込み時に配送計算関数を呼び出すことで、フォーム送信のケースをすでに解決していると仮定します。Ajaxベースのカート更新の場合、標準のイベントはありません。一部のテーマはカートの更新時にイベントを発生させる可能性がありますが、一般的なアプリの場合、標準の動作が定義されていないため、それらに依存することはできません。

したがって、できることは、AJAX呼び出しをリッスンし、条件に一致する場合は関数を呼び出すことです。Shopify Docs for Ajax APIには、カートを更新する可能性のある4種類のPOSTリクエストがリストされています。そのため、XMLHttpRequestのopen関数にパッチを適用することで、リクエストが正常に終了したときに起動するロード用のイベントリスナーを追加します。イベントコールバックでは、URLがカートの更新に使用されたものであるかどうかを確認してから、配送の更新関数を呼び出します。

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

ニコラスからの回答によるアイデア

ajaxCompleteは、jQueryを使用して行われたリクエストのみをリッスンするため、使用されませんでした。

Shipping関数に応答を渡すと、追加のGet CartAjax呼び出しが節約されます。

更新

上記のコードが機能しない場合、またはすべての呼び出しをキャッチできない場合は、カートの更新に使用されている場合は、すべてのFetchAPI呼び出しをリッスンする他の回答を参照してください。

FetchAPIを使用してカートの変更を聞く

Yashchitroda Aug 20 2020 at 13:03

セクション化されたテーマのカートのアイテム数量フィールドを更新するには

ステップ1：Shopify管理者にアクセスし、[オンラインストア]をクリックして[テーマ]に移動します。

ステップ2：編集するテーマを見つけて、[アクション]、[コードの編集]の順に押します。

ステップ3：セクションを見て、cart-template.liquidをクリックします。アドレスのないテーマを使用していない場合は、テンプレートディレクトリにアクセスしてcart.liquidをクリックしてください。