カスタムカートリクエスト後のカートのAJAX再レンダリング

Question

特定されたいくつかの製品に関連する追加の製品またはサービスを提供するShopifyアプリを構築しています。場合によっては、カートページからカートに商品を追加してしまうことがあります。

カートの変更に対してアクションを実行するには、この質問が非常に役立つことがわかりました。問題は、現在、新しい製品と一緒にカートを再レンダリングするためにページをリロードすることを余儀なくされていることです。カートを自分で再構築して新しいアイテムを含めることは合理的にできません。

したがって、カートの「AJAXレンダリング」をトリガーして、ページ全体のリロードを回避する方法はありますか？

Answer 1

最終目標に応じて、さまざまな方法でこれを達成できます。あなたの説明から、あなたはあなたのスクリプトをカートページで実行したいだけだと理解しました。ただし、ユーザーはカートページにアクセスせずにチェックアウトページに進むことができることに注意してください。したがって、すべてのユースケースをカバーするだけです。

アプリではなくテーマでこれを行う必要がある場合、これははるかに簡単でした。アプリはカートページのマークアップについて何も知らないため、既存のテーブルに新しい商品行を追加するのは簡単ではありません。回避策として、新製品を追加する際に、Ajaxを介してカートページを呼び出し、返されたHTMLを解析して、カートフォームを置き換えます。したがって、新しい製品を追加した後、以下のコードを呼び出すだけで、カートページに製品フォームを再レンダリングできます。

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

カートページのチェックを追加し、返されたHTMLでフォームが見つかったかどうかを確認します。

このコードは、DebutShopifyテーマで正常に機能します。すべてのユースケースで徹底的にテストしてください。

DOMParser