Alışveriş sepeti güncelleme miktarını dinleyin

Aug 17 2020

Bir Shopify uygulaması yazıyorum ve shopify alışveriş sepeti güncelleme etkinliğini dinlemek istiyorum. Kullanıcı kaldırmaya tıkladığında veya öğe miktarını artırdığında bunu biliyorum. Shopify, kartı güncellemek için arka uca bir POST isteği gönderir. Uygulamam, kargo değerini shopify alışveriş sepeti ürün miktarına göre hesaplıyor. Uygulama komut dosyamı shopify'a komut dosyası etiketi aracılığıyla ekliyorum.

Miktar girdisini dinlemeye çalıştım ama bu olay sadece birini tetikliyor. Shopify'ın her alışveriş sepeti güncellemesinden sonra DOM girişini güncellediğini ve böylece dinleyicimi kaldırabileceğini düşünüyorum.

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

Alışveriş sepeti güncelleme olayını nasıl dinleyebilirim? Basit bir soru gibi görünüyor ama Shopify ile ilgili herhangi bir cevap bulamıyorum!

Yanıtlar

6 BilalAkbar Aug 20 2020 at 13:00

Dolayısıyla, bir Shopify alışveriş sepetinin güncellenmesinin 2 yolu vardır. Form göndererek veya Ajax API kullanarak. Varsayalım ki, sayfa yüklemesinde gönderim bedelini hesapla işlevinizi çağırarak form gönderme sorununu çözdünüz. Ajax tabanlı alışveriş sepeti güncellemeleri için standart bir olay yoktur. Bazı temalar, alışveriş sepeti güncellemesinde bir olayı tetikleyebilir, ancak genel bir uygulama olması durumunda, tanımlanmış standart davranış olmaması nedeniyle bunlara güvenmek mümkün değildir.

Yani yapabileceğiniz şey AJAX çağrılarını dinlemek ve koşullarınıza uyuyorsa işlevinizi çağırmaktır. Ajax API için Shopify Docs, Alışveriş Sepetini güncelleyebilecek 4 tür POST isteğini listeler. Bu nedenle, XMLHttpRequest öğesinin açık işlevine yama uygulayarak , istek başarıyla tamamlandığında tetiklenen yük için bir olay dinleyicisi ekleriz . Olay geri aramasında, URL'nin alışveriş sepetini güncellemek için kullanılıp kullanılmadığını kontrol eder ve ardından gönderim gönderim işlevini güncelle işlevini çağırırız.

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

Nicolas'ın cevabıyla alınan fikir

ajaxComplete , yalnızca jQuery kullanılarak yapılan istekleri dinlediği için kullanılmadı.

Gönderi işlevinize yanıt iletmeniz ek Sepeti Al Ajax çağrısını kaydeder.

Güncelleme

Yukarıdaki kod sizin için işe yaramazsa veya tüm çağrıları yakalamazsa, sepeti güncellemek için kullanılıyorsa tüm Fetch API çağrılarını da dinleyen diğer cevabıma bakın.

Getirme API'sını kullanarak Alışveriş Sepeti değişikliklerini dinleyin

Yashchitroda Aug 20 2020 at 13:03

Sepetteki madde miktarı alanlarını bölümlü temada güncellemek için

1. Adım: Shopify yöneticisine erişirsiniz, Online Mağaza'yı tıklayın ve Temalar'a gidin.

Adım 2: Düzenlemek istediğiniz temaları bulun, ardından Eylemler'e ve ardından Kodu Düzenle'ye basın.

Adım 3: Bölümlere bakın, cart-template.liquid'e tıklayın. Adresi olmayan temayı kullanmıyorsanız, Şablon dizinine erişebilir ve cart.liquid'e tıklayabilirsiniz.