AJAX merender ulang keranjang setelah permintaan keranjang kustom

Question

Saya sedang membangun aplikasi Shopify yang menawarkan produk atau layanan tambahan terkait dengan beberapa produk teridentifikasi. Dalam beberapa kasus, saya akhirnya menambahkan produk ke keranjang dari halaman keranjang.

Saya menemukan pertanyaan ini cukup berguna, untuk mengambil tindakan pada perubahan keranjang. Masalahnya adalah saat ini saya terpaksa memuat ulang halaman untuk merender ulang keranjang bersama dengan produk baru. Saya tidak dapat merekonstruksi gerobak itu sendiri untuk memasukkan item baru.

Oleh karena itu, apakah ada cara untuk memicu "rendering AJAX" dari keranjang dan menghindari pemuatan ulang halaman penuh?

Answer 1

Anda dapat mencapai ini dengan banyak cara tergantung pada tujuan akhir Anda. Dari uraian Anda, saya mengerti bahwa Anda hanya ingin skrip Anda berjalan di halaman Keranjang. Namun, harap diperhatikan bahwa pengguna dapat melanjutkan ke halaman Checkout tanpa mengunjungi halaman Keranjang. Jadi, tutup saja semua kasus penggunaan Anda.

Ini akan jauh lebih mudah jika Anda harus melakukan ini dalam tema dan bukan dalam aplikasi. Karena, aplikasi Anda tidak memiliki ide tentang markup halaman Cart, tidak mudah untuk hanya menambahkan baris produk baru ke tabel yang ada. Sebagai solusinya, saat menambahkan produk baru, panggil halaman keranjang melalui Ajax, parsing HTML yang dikembalikan dan ganti formulir Keranjang. Jadi setelah menambahkan produk baru, cukup panggil kode di bawah ini untuk membuat ulang formulir produk di halaman Keranjang.

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

Tambahkan cek untuk halaman keranjang dan jika formulir ditemukan di HTML yang dikembalikan.

Kode ini berfungsi dengan baik pada tema Debut Shopify. Cukup uji secara menyeluruh pada semua kasus penggunaan Anda.

DOMParser