दुकान अपडेट की मात्रा को सुनें
मैं एक Shopify ऐप लिख रहा हूं और मैं Shopify कार्ट अपडेट इवेंट सुनना चाहता हूं। मुझे पता है कि जब उपयोगकर्ता आइटम की मात्रा को हटाने या बढ़ाने पर क्लिक करता है। शॉपिफाई कार्ड को अपडेट करने के लिए बैकएंड पर एक पोस्ट अनुरोध भेजें। मेरा ऐप कार्टिफ़ाइड कार्ट आइटम मात्रा के आधार पर शिपिंग मूल्य की गणना करता है। मैं स्क्रिप्ट-टैग के माध्यम से दुकान में अपनी ऐप स्क्रिप्ट जोड़ता हूं।
मैंने मात्रा के इनपुट को सुनने की कोशिश की, लेकिन यह घटना केवल एक आग। मुझे लगता है कि प्रत्येक कार्ट अपडेट के बाद इनपुट डोम को अपडेट करना आसान है ताकि यह मेरे श्रोता को हटा सके।
$('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});
मैं कार्ट अपडेट इवेंट को कैसे सुन सकता हूं? यह एक आसान सवाल लगता है, लेकिन मैं वास्तव में Shopify के बारे में कोई जवाब नहीं मिल सकता है!
जवाब
तो ऐसे 2 तरीके हैं जिनसे Shopify कार्ट अपडेट हो सकती है। फार्म जमा करने या अजाक्स एपीआई का उपयोग करने के माध्यम से। मान लें, आपने पहले ही पृष्ठ लोड पर अपनी गणना शिपिंग फ़ंक्शन को कॉल करके फ़ॉर्म सबमिशन केस हल कर लिया है। अजाक्स आधारित कार्ट अपडेट के लिए कोई मानक घटना नहीं है। कुछ थीम कार्ट अपडेट पर एक घटना को आग लगा सकती हैं, लेकिन एक जेनेरिक ऐप के मामले में, कोई भी परिभाषित व्यवहार नहीं होने के कारण उन पर भरोसा करना संभव नहीं है।
तो आप क्या कर सकते हैं AJAX कॉल सुनने के लिए और अपने फ़ंक्शन को कॉल करें यदि यह आपकी शर्तों से मेल खाता है। Ajax API के लिए Shopify डॉक्स 4 प्रकार के POST अनुरोध को सूचीबद्ध करता है जो कार्ट को अपडेट कर सकते हैं। तो XMLHttpRequest के खुले फ़ंक्शन को पैच करके हम लोड के लिए एक इवेंट श्रोता जोड़ते हैं जो अनुरोध सफलतापूर्वक समाप्त होने पर आग लगाता है। ईवेंट कॉलबैक में, हम जाँचते हैं कि यदि 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 का उपयोग करके किए गए अनुरोधों को सुनता है।
अपने शिपिंग फ़ंक्शन के प्रतिसाद देना अतिरिक्त गेट कार्ट अजाक्स कॉल को बचाता है।
अपडेट करें
यदि उपरोक्त कोड आपके लिए काम नहीं करता है या सभी कॉलों को नहीं पकड़ता है, तो मेरा दूसरा जवाब देखें जो कार्ट को अपडेट करने के लिए उपयोग किया जा रहा है, तो सभी Fetch API कॉल्स को भी सुनता है।
Fetch API का उपयोग करके कार्ट परिवर्तन को सुनें
खंड थीम में कार्ट में आइटम मात्रा फ़ील्ड अपडेट करने के लिए
चरण 1: आप Shopify व्यवस्थापक तक पहुंचें, ऑनलाइन स्टोर पर क्लिक करें और थीम पर जाएं।
चरण 2: उन विषयों को खोजें जिन्हें आप संपादित करना चाहते हैं, फिर क्रियाओं को दबाएँ फिर कोड को संपादित करें।
चरण 3: अनुभागों को देखें, आप कार्ट-टेम्पलेट पर क्लिक करें। उस स्थिति में जब आप उस विषय का उपयोग नहीं कर रहे हैं जिसमें पता नहीं है, आप टेम्पलेट निर्देशिका तक पहुंच सकते हैं और कार्ट क्लिक करें।
चरण 4: इनपुट टैग में अपडेट [मद .id] के रूप में लिखा गया वाक्यांश ढूंढें।
चरण 5: नाम को मूल्य में बदलें = "अपडेट []"।
चरण 6: इनपुट टैग में [] अपडेट का नाम मान देखने पर इन उल्लिखित चरणों को दोहराएं।
चरण 7: सहेजें पर क्लिक करें और आप आइटम मात्रा फ़ील्ड को सफलतापूर्वक अपडेट करते हैं ..