अनेक उत्पादों के लिए प्रभावी जावास्क्रिप्ट काउंटर अपडेट
जावास्क्रिप्ट डायनेमिक इनपुट तत्वों के साथ काम करना चुनौतीपूर्ण हो सकता है, खासकर जब अंदर मानों को सशर्त रूप से अपडेट किया जा रहा हो यदि-अन्यथा बयान. ऑनलाइन शॉपिंग कार्ट में आइटम जोड़ने जैसी स्थितियों में कुल और मात्रा को सटीक रूप से रिकॉर्ड करना महत्वपूर्ण है। हालाँकि, इस स्थिति में कई चीजों को प्रबंधित करना डेवलपर्स के लिए अक्सर कठिनाइयाँ पेश करता है।
यह पोस्ट एक प्रचलित समस्या पर चर्चा करेगी जिसमें शॉपिंग बास्केट में नई चीजों का चयन करने से पहले से चुनी गई वस्तुओं के लिए काउंटर रीसेट हो जाता है। वस्तुओं के बीच स्थानांतरण करते समय काउंटर रीसेट होते प्रतीत होते हैं, भले ही वे शुरुआत में ठीक से काम करते हों। उपयोगकर्ता इस व्यवहार से भ्रमित हो जाते हैं क्योंकि कार्ट में सभी उत्पाद सही मात्रा का प्रतिनिधित्व नहीं करते हैं।
हम एक कोड उदाहरण देखेंगे जहां यह समस्या उत्पन्न होती है और कारण पर चर्चा करेंगे। सुचारू संचालन के लिए, यह जानना आवश्यक है कि प्रत्येक उत्पाद के काउंटर को कैसे नियंत्रण में रखा जाए और यह गारंटी दी जाए कि सभी इनपुट नंबर स्थिर रहें। कुछ बदलावों के साथ, यदि-अन्यथा जावास्क्रिप्ट तर्क का उपयोग करने वाले कथन इसे उचित रूप से संभाल सकते हैं।
जब तक आप इस लेख को पढ़ना समाप्त करेंगे, आपको पता चल जाएगा कि समस्या को कैसे ठीक किया जाए और सभी काउंटरों को सुरक्षित रखा जाए, यह सुनिश्चित करते हुए कि आपका शॉपिंग कार्ट हमेशा प्रत्येक आइटम की सही मात्रा दिखाता है, भले ही आप उनके बीच संक्रमण करते हों।
| आज्ञा | उपयोग का उदाहरण |
|---|---|
| cart = {} | कार्ट आइटम काउंटर स्टोरेज के लिए एक रिक्त ऑब्जेक्ट को परिभाषित करता है। इस ऑब्जेक्ट की सहायता से, आप वस्तुओं के बीच परिवर्तन करते समय स्थिति को रीसेट किए बिना गतिशील रूप से प्रत्येक उत्पाद के लिए कुल और मात्रा का ट्रैक रख सकते हैं। |
| updateCart(item, price, counterKey) | एक मूल सुविधा जो हर बार किसी आइटम पर क्लिक करने पर कार्ट को संशोधित करती है। गिनती और मात्रा को अद्यतन करने के लिए, यह आइटम के नाम, कीमत और प्रत्येक आइटम के लिए एक विशेष कुंजी के लिए पैरामीटर लेता है। |
| cart[counterKey] | प्रत्येक आइटम के लिए कार्ट ऑब्जेक्ट में एक प्रॉपर्टी (जैसे "मिलोकाउंटर") तक पहुंचता है या जोड़ता है। यदि यह पहले से मौजूद नहीं है तो यह कुंजी को आरंभ करता है, यह सुनिश्चित करते हुए कि संख्या केवल उस विशेष उत्पाद के लिए बढ़ती है। |
| renderCart() | एक फ़ंक्शन जो सामग्री को गतिशील रूप से प्रस्तुत करने के लिए कार्ट में प्रत्येक आइटम पर पुनरावृत्त होता है। उत्पाद का कुल योग और मात्रा दिखाने के लिए, यह आवश्यक HTML उत्पन्न करता है और गैर-शून्य काउंटरों की तलाश करता है। |
| for (var item in cartItems) | कार्ट में प्रत्येक आइटम के लिए दोहराएँ। उत्पाद विवरण तक पहुँचें और आइटम ऑब्जेक्ट का उपयोग करके सुनिश्चित करें कि सभी चयनित उत्पाद कार्ट में प्रतिबिंबित हों। रेंडर करने से पहले, यह लूप प्रत्येक आइटम की संख्या निर्धारित करता है। |
| document.getElementById() | HTML घटकों (जैसे "मिलो" और "ओवाल्टाइन") को उनकी विशिष्ट आईडी के आधार पर चुनता है। इससे कार्ट में प्रत्येक उत्पाद के साथ इंटरेक्शन के लिए इवेंट श्रोताओं को जोड़कर यूआई को जावास्क्रिप्ट लॉजिक से जोड़ना संभव हो जाता है। |
| console.assert() | परीक्षण के लिए नमूना इकाई परीक्षण में उपयोग किया गया। यह सत्यापित करता है कि कार्ट में वास्तविक मान अपेक्षित मानों (जैसे "मिलो" गिनती) से मेल खाते हैं। परीक्षण विफल होने पर कंसोल में एक त्रुटि उत्पन्न हो जाती है, जो समस्या की पहचान में सहायता करती है। |
| innerHTML += | पहले से मौजूद तत्व में नई HTML सामग्री जोड़ता है, जैसे कार्ट में तालिका पंक्ति। इस तकनीक के साथ, नई उत्पाद प्रविष्टियों को वर्तमान सामग्री को मिटाए बिना गतिशील रूप से शॉपिंग कार्ट में जोड़ा जा सकता है। |
| addEventListener('click') | प्रत्येक उत्पाद के बटन या चित्र में एक क्लिक इवेंट श्रोता जोड़ता है। जब कोई उपयोगकर्ता किसी आइटम पर क्लिक करता है, तो संबंधित फ़ंक्शन सक्रिय हो जाता है, जिससे कार्ट की मात्रा और कुल में गतिशील रूप से परिवर्तन होता है। |
जावास्क्रिप्ट के साथ डायनामिक कार्ट अपडेट समस्याओं का समाधान
शॉपिंग कार्ट में कई उत्पादों को प्रबंधित करने के लिए जावास्क्रिप्ट का उपयोग करते समय उपरोक्त स्क्रिप्ट एक आम समस्या का समाधान करती है। प्राथमिक मुद्दा यह है कि एक नया आइटम जोड़ने से पहले जोड़े गए आइटम के लिए काउंटर रीसेट हो जाते हैं। स्क्रिप्ट इसे संबोधित करने के लिए इवेंट श्रोताओं के साथ-साथ आइटम गिनती और कुल को संग्रहीत करने के लिए ऑब्जेक्ट-आधारित विधि को नियोजित करती है। हम गारंटी देते हैं कि प्रत्येक उत्पाद के काउंटर को अद्यतन किया जाता है और उपयोग करके उनके साथ हस्तक्षेप किए बिना दूसरों से अलग बनाए रखा जाता है कार्ट वस्तु। यह विधि रीसेट समस्या से छुटकारा दिलाती है ताकि प्रत्येक उत्पाद की गिनती सटीक रहे।
कार्ट अपडेट करें विधि, जो कार्ट में उत्पादों को गतिशील रूप से जोड़ने का प्रबंधन करती है, समाधान का एक महत्वपूर्ण घटक है। यह फ़ंक्शन यह निर्धारित करने के लिए अद्वितीय काउंटर कुंजी (जैसे कि "मिलोकाउंटर") का उपयोग करता है कि कोई आइटम कार्ट में है या नहीं। यदि यह पहली बार आइटम जोड़ा जा रहा है तो स्क्रिप्ट काउंटर को प्रारंभ करती है। यदि नहीं, तो फ़ंक्शन कुल कीमत की पुनर्गणना करता है और वर्तमान काउंटर को बढ़ाता है। आंतरिक HTML विशेषता HTML को अद्यतन करती है ताकि उपयोगकर्ता परिवर्तनों को तुरंत देख सके।
कार्ट में प्रत्येक उत्पाद के सटीक प्रदर्शन की गारंटी दी जाती है रेंडरकार्ट समारोह। यह के माध्यम से पुनरावृत्त होता है कार्टआइटम ऑब्जेक्ट, यह सत्यापित करना कि प्रत्येक उत्पाद की संख्या शून्य से अधिक है या नहीं। उस स्थिति में, फ़ंक्शन प्रत्येक आइटम की राशि और कुल लागत प्रदर्शित करने के लिए आवश्यक HTML बनाता है। यह गारंटी देता है कि नए उत्पाद जोड़ने से पुराने उत्पाद अधिलेखित नहीं होते हैं और कार्ट का डिस्प्ले चालू रहता है। ऑनलाइन अनुप्रयोगों में, गतिशील सामग्री को संभालने के लिए यह तकनीक बहुत सहायक है।
आगे, कंसोल.जोर इसका उपयोग इकाई परीक्षणों में यह सत्यापित करने के लिए किया जाता है कि आइटम काउंटर और योग इच्छानुसार काम कर रहे हैं। उत्पाद बटनों पर क्लिक करके और यह सुनिश्चित करके कि अपेक्षित काउंटर मान उसमें सहेजे गए वास्तविक परिणामों से मेल खाते हैं कार्ट ऑब्जेक्ट, ये परीक्षण उपयोगकर्ता इंटरैक्शन का अनुकरण करते हैं। यह ठोस तर्क की गारंटी देता है और बगों का पता नहीं चल पाता है। सभी बातों पर विचार करने पर, स्क्रिप्ट जावास्क्रिप्ट पर चलने वाले शॉपिंग कार्ट में उत्पाद अपडेट प्रबंधित करने के लिए एक पुन: प्रयोज्य और मॉड्यूलर दृष्टिकोण प्रदान करती है।
जावास्क्रिप्ट शॉपिंग कार्ट में गतिशील उत्पाद काउंटरों को संभालना
डायनामिक कार्ट अपडेट के लिए बुनियादी जावास्क्रिप्ट का उपयोग करना
var milo = document.getElementById('milo');var ovaltine = document.getElementById('ovaltine');var bournvita = document.getElementById('bournvita');var miloPrice = 2000.00, miloCounter = 0, miloAmount = 0;var ovaltinePrice = 1500.00, ovaltineCounter = 0, ovaltineAmount = 0;var bournvitaPrice = 1850.00, bournvitaCounter = 0, bournvitaAmount = 0;var cart = {}; // Object to store counters for each itemfunction updateCart(item, price, counterKey) {if (!cart[counterKey]) { cart[counterKey] = 1; }else { cart[counterKey] += 1; }var total = cart[counterKey] * price;document.getElementById('cartdetails').innerHTML +='<tr><td>' + cart[counterKey] + '</td><td>' + total + '</td></tr>';}milo.addEventListener('click', function() { updateCart('milo', miloPrice, 'miloCounter'); });ovaltine.addEventListener('click', function() { updateCart('ovaltine', ovaltinePrice, 'ovaltineCounter'); });bournvita.addEventListener('click', function() { updateCart('bournvita', bournvitaPrice, 'bournvitaCounter'); });
जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करके कार्ट आइटम अपडेट को संभालना
ऑब्जेक्ट-आधारित राज्य प्रबंधन के साथ जावास्क्रिप्ट का उपयोग करना
var cartItems = {'milo': { price: 2000, count: 0, total: 0 },'ovaltine': { price: 1500, count: 0, total: 0 },'bournvita': { price: 1850, count: 0, total: 0 }};function updateCartItem(item) {cartItems[item].count += 1;cartItems[item].total = cartItems[item].count * cartItems[item].price;renderCart();}function renderCart() {var cartHTML = '';for (var item in cartItems) {if (cartItems[item].count > 0) {cartHTML += '<tr><td>' + cartItems[item].count + '</td><td>' + cartItems[item].total + '</td></tr>';}}document.getElementById('cartdetails').innerHTML = cartHTML;}document.getElementById('milo').addEventListener('click', function() { updateCartItem('milo'); });document.getElementById('ovaltine').addEventListener('click', function() { updateCartItem('ovaltine'); });document.getElementById('bournvita').addEventListener('click', function() { updateCartItem('bournvita'); });
जावास्क्रिप्ट कार्ट काउंटर कार्यक्षमता के लिए यूनिट टेस्ट
परीक्षण मामलों के साथ सरल जावास्क्रिप्ट फ़ंक्शंस का उपयोग करना
function testCartCounter() {var testCart = { 'milo': 0, 'ovaltine': 0, 'bournvita': 0 };function clickProduct(item) { testCart[item] += 1; }clickProduct('milo');clickProduct('ovaltine');console.assert(testCart['milo'] === 1, 'Milo should have 1 count');console.assert(testCart['ovaltine'] === 1, 'Ovaltine should have 1 count');clickProduct('milo');console.assert(testCart['milo'] === 2, 'Milo should have 2 counts');console.log('All tests passed');}testCartCounter();
जावास्क्रिप्ट शॉपिंग कार्ट में स्थिति बनाए रखना और काउंटर रीसेट को रोकना
जावास्क्रिप्ट में गतिशील शॉपिंग कार्ट के साथ काम करते समय कार्ट में प्रत्येक आइटम की स्थिति बनाए रखना एक आम कठिनाई है, खासकर जब नए उत्पाद जोड़े जाते हैं। समस्या आमतौर पर तब उत्पन्न होती है जब ईवेंट श्रोता उत्पादों के बीच स्विच करते समय गिनती को रीसेट कर देते हैं क्योंकि वे प्रत्येक उत्पाद के लिए ठीक से संग्रहीत या बनाए नहीं रखे जाते हैं। एक वैश्विक ऑब्जेक्ट बनाना जिसमें कार्ट में प्रत्येक आइटम की स्थिति शामिल हो, इसे संभालने का एक अधिक प्रभावी तरीका होगा। इस प्रकार, किसी नए आइटम पर क्लिक करने पर भी पहले वाले आइटम के काउंटर नहीं बदलते हैं।
आप प्रत्येक उत्पाद की मात्रा और कीमत को किसी वैश्विक ऑब्जेक्ट में संग्रहीत करके अन्य स्क्रिप्ट तत्वों के हस्तक्षेप के बिना आसानी से एक्सेस और संपादित कर सकते हैं कार्टआइटम. इसके अतिरिक्त, ऑब्जेक्ट-आधारित पद्धति एक अच्छी तरह से परिभाषित संरचना प्रदान करती है जो एक साथ कई वस्तुओं के प्रबंधन की सुविधा प्रदान करती है। हर बार किसी आइटम पर क्लिक करने पर ऑब्जेक्ट का संबंधित भाग संशोधित होता है, और संशोधन तुरंत शॉपिंग कार्ट इंटरफ़ेस में प्रदर्शित होते हैं।
यह सुनिश्चित करना भी महत्वपूर्ण है कि कार्ट के प्रत्येक रेंडर या अपडेट के लिए पिछली आइटम स्थितियों को सत्यापित और बनाए रखा जाए। इसे पूरा करने के लिए, इसमें रखे गए नवीनतम डेटा का उपयोग करके कार्ट को प्रस्तुत करें कार्टआइटम वस्तु। यह विधि गारंटी देती है कि कार्ट में सभी उत्पाद आइटम जोड़ने या हटाने के बाद भी सही संख्या और कुल प्रदर्शित करते हैं, जिससे पिछले डेटा को ओवरराइट करने की समस्या से बचा जा सकता है।
जावास्क्रिप्ट शॉपिंग कार्ट लॉजिक के बारे में अक्सर पूछे जाने वाले प्रश्न
- जब मैं सामान इधर-उधर करता हूँ तो मैं काउंटरों को दोबारा शुरू होने से कैसे रोक सकता हूँ?
- काउंटर रीसेट से बचने के लिए, आप वैश्विक ऑब्जेक्ट का उपयोग करके प्रत्येक आइटम के लिए कुल और मात्रा को व्यक्तिगत रूप से रिकॉर्ड कर सकते हैं cartItems.
- जब मैं अपने कार्ट में कोई नया आइटम जोड़ता हूं, तो वह पिछली प्रविष्टियों को अधिलेखित क्यों कर देता है?
- यह कार्ट के मूल HTML को प्रतिस्थापित करने वाले कोड के परिणामस्वरूप होता है। इसे ठीक करने के लिए, नए आइटम का उपयोग करके संलग्न करें innerHTML += मौजूदा को हटाए बिना.
- कार्ट को गतिशील रूप से अपडेट करने का सबसे अच्छा तरीका क्या है?
- यह सुनिश्चित करने के लिए कि कार्ट हमेशा जावास्क्रिप्ट डेटा के साथ अद्यतित है, जैसे फ़ंक्शन का उपयोग करें renderCart जो कार्ट के सभी आइटमों के माध्यम से पुनरावृत्त होता है और डिस्प्ले को बदल देता है।
- मैं कैसे सत्यापित कर सकता हूं कि मेरे काउंटर ठीक से काम कर रहे हैं?
- समस्याओं की पहचान करने में सहायता के लिए उपयोग करें console.assert यह सत्यापित करने के लिए कि प्रत्येक इंटरैक्शन के बाद आपके कार्ट की संख्या सही मान दिखाती है।
- क्या विभिन्न उत्पादों पर एक ही कोड लागू करना संभव है?
- हां, आप कोड को मॉड्यूलराइज़ करके और जैसे फ़ंक्शंस का उपयोग करके न्यूनतम परिवर्तनों के साथ किसी भी संख्या में सामान के लिए तर्क को संभाल सकते हैं updateCart.
जावास्क्रिप्ट में काउंटर रीसेट को रोकने पर अंतिम विचार
गतिशील कार्ट की स्थिति को अक्षुण्ण रखने का रहस्य किसी ऑब्जेक्ट में आइटम-विशिष्ट जानकारी, जैसे कुल और काउंटर, को सहेजना है। यह तकनीक यह सुनिश्चित करती है कि नए उत्पाद पेश किए जाने पर भी पूर्व आइटम अपना सटीक मान बनाए रखें। काउंटरों को एक पर रीसेट करने की समस्या से बचा जा सकता है।
संग्रहीत डेटा का उपयोग करके कार्ट को गतिशील रूप से प्रस्तुत करके उपयोगकर्ता अनुभव को और बेहतर बनाया गया है। इस पद्धति का उपयोग करके, कार्ट अधिक प्रतिक्रियाशील और इंटरैक्टिव बन जाता है, और वर्तमान उपयोगकर्ता इंटरैक्शन को प्रतिबिंबित करने के लिए उत्पाद मूल्य निर्धारण और मात्रा अपडेट की जाती है।
जावास्क्रिप्ट डायनेमिक कार्ट काउंटरों के लिए संदर्भ और संसाधन
- जावास्क्रिप्ट के उपयोग पर विस्तृत जानकारी के लिए यदि-अन्यथा शर्तें और DOM तत्वों को अद्यतन करना, पर जाएँ एमडीएन वेब डॉक्स - यदि...अन्यथा .
- गतिशील सामग्री को प्रबंधित करने और जावास्क्रिप्ट का उपयोग करके HTML तत्वों को अपडेट करने के बारे में अधिक जानें W3Schools - जावास्क्रिप्ट HTML DOM .
- जावास्क्रिप्ट अनुप्रयोगों में काउंटर और कार्ट से संबंधित समस्याओं के निवारण के लिए, इस गाइड से परामर्श लें स्टैक ओवरफ़्लो - जावास्क्रिप्ट में काउंटर रीसेट .
- इस ट्यूटोरियल के साथ जावास्क्रिप्ट में ऑब्जेक्ट-आधारित कार्ट लॉजिक की संरचना के लिए सर्वोत्तम प्रथाओं का पता लगाएं JavaScript.info - ऑब्जेक्ट मूल बातें .