🛬 🕶️ 👩🏻‍🔬 JQuery ऑनलाइन शॉपिंग कार्ट मॉड्यूल 📰 🗳️ 🏊

ऑनलाइन स्टोर विकसित करते समय, मुझे अक्सर कुछ चीजों को करने के लिए जावास्क्रिप्ट (और विशेष रूप से इसकी रूपरेखा, jQuery के साथ) का उपयोग करना पड़ता था जो परियोजना से परियोजना के लिए दोहराए जाते थे। उदाहरण के लिए, टोकरी में सामान जोड़ना, माल की मात्रा और पृष्ठ पर कुल राशि के बारे में जानकारी अपडेट करना, एक समय में टोकरी से सामान निकालना, उनकी मात्रा बदलना और टोकरी से सभी सामानों को पूरी तरह से साफ़ करना। और यह सब, ज़ाहिर है, पृष्ठ को फिर से लोड किए बिना।
और मैं इस निष्कर्ष पर पहुंचा कि आपको कोड लिखने की आवश्यकता है ताकि बाद में आप इसे भविष्य की परियोजनाओं में आसानी से उपयोग कर सकें।

इसलिए, हम jQuery का उपयोग करके एक ऑनलाइन स्टोर की टोकरी के साथ काम करने के लिए एक मॉड्यूल लिख रहे हैं।
मैं एक आरक्षण करूंगा कि मैं केवल जावास्क्रिप्ट कोड प्रकाशित करूंगा, मैं सर्वर भाग को नहीं छूऊंगा, मैं यह भी निर्दिष्ट करूंगा कि ग्राहक और सर्वर किस डेटा का आदान-प्रदान करेंगे।

हम तरीकों का निर्धारण करते हैं:

(function($) { $.Cart = { init : function(settings){ //   }, add : function(context){ //         1. }, get : function(){ //           }, count : function(context) { //           }, del : function(context) { //      }, clear : function() { //    }, showMessage : function(message) { //      } } })(jQuery);

प्रारंभ:
आरंभीकरण में हमें क्या करने की आवश्यकता है?
Init विधि में पारित सेटिंग्स को ठीक से संसाधित किया जाना चाहिए (डिफ़ॉल्ट मापदंडों के साथ संयुक्त) और लागू किया जाता है, साथ ही सेटिंग्स में सेट किए गए संबंधित ईवेंट हैंडलर को तत्वों पर लटका दिया जाना चाहिए।
हम डिफ़ॉल्ट सेटिंग्स निर्धारित करते हैं।

 var defaults = { content : '.content', //       count : '.prod span font', //   .prod       summ : '.summ span font', //   .prod   add : '.tocart', //  ,          addattr : 'name', //  ,  ID  counta : '.carts .actions .count input', //         countattr : 'name', //  ,  ID  countvattr : 'value', //  ,    del : '.carts .actions .delete input', //  ,     1       delattr : 'name', //  ,  ID  clear : '.cartclear', //  ,        topcart : '.topcart', //      urladd : '/cart/add/', // url     urlget : '/cart/get/', // url          urlcart : '/cart/', // url    urlcount : '/cart/count/', // url      urlclear : '/cart/clear/', // url    urldel : '/cart/del/', // url       type_message : 'flash', //        time_message : 3000, //    interval : 10000 //  ,                };

हम डिफ़ॉल्ट मापदंडों के साथ आरंभीकरण के दौरान निर्दिष्ट मापदंडों को मिलाते हैं और उन्हें लागू करते हैं

 $.extend(defaults, settings); this.settings = defaults;

हम टोकरी में माल की संख्या और कुल राशि के बारे में जानकारी के साथ ब्लॉक को अपडेट करते हैं, दिए गए तत्वों पर इवेंट हैंडलर लटकाते हैं और ऑब्जेक्ट की इकाई को वापस करते हैं (यह काम में आ सकता है)।

 this.get(); //   setInterval(function(){ $.Cart.get(); //        }, this.settings.interval); $(this.settings.add).click(function(){ $.Cart.add(this); //         settings.add,       }); $(this.settings.counta).live('blur', function(){ $.Cart.count(this); //    ,       ,     }); $(this.settings.del).live('click', function(){ $.Cart.del(this); //        "" }); $(this.settings.clear).live('click', function(){ $.Cart.clear(); //   }); return this;

1 पीसी की मात्रा में टोकरी में एक आइटम जोड़ना।
जोड़ने की विधि, संदर्भ पैरामीटर (तत्व जिसे क्लिक किया गया था) मिलता है और सर्वर को डेटा भेजता है।

 $.ajax({ url : $.Cart.settings.urladd, //    type : 'post', //  dataType: 'json', //  ,   data : {id : $(context).attr($.Cart.settings.addattr)}, // ,   (id  ) success : function(data){ //    if (data.count && data.summ || data.count===0 && data.summ===0) { //           ,    $($.Cart.settings.count).html(data.count); //      $($.Cart.settings.summ).html(data.summ); //      if (data.count>0) //     ,  $($.Cart.settings.topcart).find('a').attr('href', $.Cart.settings.urlcart); //      else //    $($.Cart.settings.topcart).find('a').attr('href', 'javascript:void(0);'); //    $.Cart.showMessage('<p>'+data.message+'</p>'+$($.Cart.settings.topcart).html()); //   } });

टोकरी में उत्पादों की संख्या और कुल राशि के बारे में जानकारी प्राप्त करना, ब्लॉक को अपडेट करना (विधि प्राप्त करना)।
गेट मेथड और ऐड के बीच का अंतर उस यूआरएल में होता है, जिसमें डेटा को मापदंडों में भेजा जाता है (गेट मेथड पैरामीटर पास नहीं करता है)।

 $.ajax({ url : $.Cart.settings.urlget, type : 'post', dataType: 'json', data : {}, success : function(data){ if (data.count && data.summ || data.count===0 && data.summ===0) { $($.Cart.settings.count).html(data.count); $($.Cart.settings.summ).html(data.summ); if (data.count>0) $($.Cart.settings.topcart).find('a').attr('href', $.Cart.settings.urlcart); else $($.Cart.settings.topcart).find('a').attr('href', 'javascript:void(0);'); } });

मुझे लगता है कि कोड का पुन: उपयोग करने के लिए, आप कुछ अपडेट विधि जोड़ सकते हैं जिसमें url और vars (पैरामीटर) पास किए जाएंगे।

 $.ajax({ url : data.url, type : 'post', dataType: 'json', data : data.vars, success : function(data){ if (data.count && data.summ || data.count===0 && data.summ===0) { $($.Cart.settings.count).html(data.count); $($.Cart.settings.summ).html(data.summ); if (data.count>0) $($.Cart.settings.topcart).find('a').attr('href', $.Cart.settings.urlcart); else $($.Cart.settings.topcart).find('a').attr('href', 'javascript:void(0);'); $.Cart.showMessage('<p>'+data.message+'</p>'+$($.Cart.settings.topcart).html()); } }, error : function(err) { if (err.status!==200) console.log(err.status+' '+err.statusText); } });

बदले में, इस के लिए जोड़ विधि बदल जाएगी।

 $.Cart.updateCart({ url : $.Cart.settings.urladd, data : {id : $(context).attr($.Cart.settings.addattr)} });

विधि प्राप्त करें

 $.Cart.updateCart({ url : $.Cart.settings.urlget, data : {} });

एक आइटम के सामान की मात्रा में परिवर्तन जब उस आइटम के अनुरूप क्षेत्र का फोकस खो जाता है।

 count : function(context) { //   count   context ( -   ) $.post($.Cart.settings.urlcount, { //     url   id : $(context).attr($.Cart.settings.countattr), // ID   count : $(context).attr($.Cart.settings.countvattr) //     }, function(data){ //   (text/html) $($.Cart.settings.content).html(data); //     $.Cart.get(); //       }); },

एक नाम हटाओ।

 del : function(context) { //   del   context ( -       ) $.post($.Cart.settings.urldel, { //   id : $(context).attr($.Cart.settings.delattr) // ID  }, function(data){ //   (text/html) $($.Cart.settings.content).html(data); //     $.Cart.get(); //       }); },

टोकरी खाली करो।

 clear : function() { $.post($.Cart.settings.urlclear, {}, function(data){ $($.Cart.settings.content).html(data); //   data    ,    $.Cart.get(); //     ,       }); },

टोकरी में एक उत्पाद जोड़ने के बारे में एक संदेश (अलर्ट या फ्लैश के प्रकार के आधार पर)।

 showMessage : function(message) { //    if ($.Cart.settings.type_message==='alert') { //  alert alert(message); //   return; } else if ($.Cart.settings.type_message==='flash') { //  flash if ($('.flashmessage').length===0) //        ,  $('<div />').addClass('flashmessage').html(message).hide().appendTo('body').fadeIn(); //  ,    ,      </body>,    else //   $('.flashmessage').html(message); //      if (typeof($.Cart.message_time)==='number') //          clearTimeout($.Cart.message_time); //   $.Cart.message_time = setTimeout(function(){ //    $('.flashmessage').fadeOut(function(){ //       $(this).remove(); //      }); }, $.Cart.settings.time_message); //    } }

अब हम इसे एकजुट करते हैं।
यहाँ आप एक मॉड्यूल का उदाहरण देख सकते हैं,
और यहाँ आप इसे आर्काइव में डाउनलोड कर सकते हैं।

मॉड्यूल को जोड़ा जाएगा और सही किया जाएगा।

आपका ध्यान देने के लिए धन्यवाद। मैं आलोचना, सवाल और टिप्पणी के लिए तत्पर हूं।
ऑनलाइन स्टोर के साथ काम करने के लिए एक निश्चित एपीआई के लिए इसे परिष्कृत करने की इच्छा है।

JQuery ऑनलाइन शॉपिंग कार्ट मॉड्यूल

More articles: