Dengarkan kuantitas pembaruan keranjang shopify

Aug 17 2020

Saya sedang menulis aplikasi Shopify dan saya ingin mendengarkan acara pembaruan keranjang shopify. Saya tahu bahwa ketika pengguna mengklik hapus atau tambah jumlah item. Shopify mengirim permintaan POST ke backend untuk memperbarui kartu. Aplikasi saya menghitung nilai pengiriman berdasarkan kuantitas item keranjang shopify. Saya menambahkan script aplikasi saya ke shopify melalui script-tag.

Saya mencoba mendengarkan input kuantitas tetapi acara ini hanya mengaktifkan satu. Saya pikir shopify memperbarui input DOM setelah setiap pembaruan keranjang sehingga dapat menghapus pendengar saya.

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

Bagaimana saya bisa mendengarkan acara pembaruan keranjang? Tampaknya ini pertanyaan sederhana tetapi saya benar-benar tidak dapat menemukan jawaban apa pun terkait Shopify!

Jawaban

6 BilalAkbar Aug 20 2020 at 13:00

Jadi ada 2 cara keranjang Shopify dapat diperbarui. Baik melalui pengiriman formulir atau menggunakan Ajax API. Dengan asumsi, Anda telah menyelesaikan kasus pengiriman formulir dengan memanggil fungsi menghitung pengiriman Anda pada pemuatan halaman. Untuk pembaruan keranjang berbasis Ajax tidak ada acara standar. Beberapa tema mungkin mengaktifkan peristiwa pada pembaruan keranjang, tetapi dalam kasus aplikasi generik, tidak mungkin untuk mengandalkannya karena tidak ada perilaku standar yang ditentukan.

Jadi yang dapat Anda lakukan adalah mendengarkan panggilan AJAX dan memanggil fungsi Anda jika sesuai dengan kondisi Anda. Dokumen Shopify untuk Ajax API mencantumkan 4 jenis permintaan POST yang dapat memperbarui Keranjang. Jadi dengan menambal fungsi buka XMLHttpRequest, kita menambahkan event listener untuk beban yang dijalankan ketika permintaan selesai dengan sukses. Dalam event callback, kami memeriksa apakah URL-nya yang digunakan untuk mengupdate cart, kemudian memanggil fungsi update shipping.

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

Ide diambil oleh jawaban dari Nicolas

ajaxComplete tidak digunakan karena hanya mendengarkan permintaan yang dibuat menggunakan jQuery.

Meneruskan respons ke fungsi Pengiriman Anda akan menyimpan panggilan Get Cart Ajax tambahan.

Memperbarui

Jika kode di atas tidak berfungsi untuk Anda atau tidak menangkap semua panggilan, lihat jawaban saya yang lain yang juga mendengarkan semua panggilan Fetch API jika itu digunakan untuk memperbarui keranjang.

Dengarkan Perubahan keranjang menggunakan Fetch API

Yashchitroda Aug 20 2020 at 13:03

Untuk memperbarui bidang kuantitas item di keranjang di tema bagian

Langkah 1: Anda mengakses admin Shopify, klik Toko Online dan pergi ke Tema.

Langkah 2: Temukan tema yang ingin Anda edit, lalu tekan Tindakan lalu Edit Kode.

Langkah 3: Lihat Bagian, Anda klik pada keranjang-template.liquid. Jika Anda tidak menggunakan tema yang tidak memiliki alamat tersebut, Anda dapat mengakses direktori Template dan klik cart.liquid.

Langkah 4: Temukan frase yang tertulis sebagai update [item.id] di tag input.

Langkah 5: Ubah nama menjadi nilai name = “update []”.

Langkah 6: Ulangi langkah-langkah yang disebutkan di atas setiap kali Anda melihat nilai nama update [] di tag masukan.

Langkah 7: Klik Simpan dan Anda berhasil memperbarui bidang jumlah item ..