/* * SmartCart 2.0 plugin * jQuery Shopping Cart Plugin * by Dipu * * http://www.techlaboratory.net * http://tech-laboratory.blogspot.com */ (function($){ $.fn.smartCart = function(options) { var options = $.extend({}, $.fn.smartCart.defaults, options); return this.each(function() { var obj = $(this); // retrive all products var products = $("input[type=hidden]",obj); var resultName = options.resultName; var cartItemCount = 0; var cartProductCount = 0; // count of unique products added var subTotal = 0; var toolMaxImageHeight = 200; // Attribute Settings // You can assign the same you have given on the hidden elements var attrProductId = "pid"; // Product Id attribute var attrProductName = "pname"; // Product Name attribute var attrProductPrice = "pprice"; // Product Price attribute var attrProductImage = "pimage"; // Product Image attribute var attrCategoryName = "pcategory"; // Labels & Messages var labelCartMenuName = 'Cart (_COUNT_)'; // _COUNT_ will be replaced with cart count var labelCartMenuNameTooltip = "Cart | Total Products: _PRODUCTCOUNT_ | Total Quantity: _ITEMCOUNT_"; var labelProductMenuName = 'Products'; var labelSearchButton = "Search"; var labelSearchText = "Search"; var labelCategoryText = "Category"; var labelClearButton = "Clear"; var labelAddToCartButton = "Update"; var labelQuantityText = "Qty"; var labelProducts = 'Products'; var labelPrice = 'Price'; var labelSubtotal = 'Subtotal'; var labelTotal = 'Total'; var labelRemove = 'Remove'; var labelCheckout = 'Order'; var messageConfirmRemove = 'Do you want to remove "_PRODUCTNAME_" from cart?'; // _PRODUCTNAME_ will be replaced with actula product name var messageCartEmpty = "Your cart is empty."; var messageProductEmpty = "No products to display."; var messageProductAddError = "Product cannot add."; var messageItemAdded = 'Added to the cart.'; var messageItemRemoved = 'Removed from the cart.'; var messageQuantityUpdated = 'Quantity updated.'; var messageQuantityErrorAdd = 'Invalid quantity. Cannot add quantity.'; var messageQuantityErrorUpdate = 'Invalid quantity. Cannot update quantity.'; //Create Main Menu cartMenu = labelCartMenuName.replace('_COUNT_','0'); // display default var btShowCart = $(''+cartMenu+'').attr("href","#scart"); var btShowProductList = $(''+labelProductMenuName+'').attr("href","#sproducts"); var msgBox2 = $('
').addClass("scMessageBar2").hide(); var elmProductMenu = $("
  • ").append(btShowProductList); var elmCartMenu = $("
  • ").append(btShowCart); var elmMsgBox = $("
  • ").append(msgBox2); var elmMenuBar = $('').addClass("scMenuBar").append(elmProductMenu).append(elmCartMenu).append(elmMsgBox); obj.prepend(elmMenuBar); // Create Search Elements var elmPLSearchPanel = $('
    ').addClass("scSearchPanel"); if(options.enableSearch){ //var btSearch = $(''+labelSearchButton+'').attr("href","#").addClass("scSearch").attr("title","Search Product"); //$(btSearch).click(function() { //var searcStr = $(txtSearch).val(); //populateProducts(searcStr); //alert("here"); //return false; //}); var btClear = $(''+labelClearButton+'').attr("href","#").addClass("scSearch").attr("title","Clear Search"); $(btClear).click(function() { $(txtSearch).val(''); populateProducts(''); return false; }); var txtSearch = $('').attr("value","").addClass("scTxtSearch") $(txtSearch).keyup(function() { var searcStr = $(this).val(); populateProducts(searcStr); }); var lblSearch = $('').addClass("scLabelSearch"); //elmPLSearchPanel.append(lblSearch).append(txtSearch).append(btSearch).append(btClear); elmPLSearchPanel.append(lblSearch).append(txtSearch).append(btClear); } // Create Category filter if(options.enableCategoryFilter){ //var lblCategory = $('').addClass("scLabelCategory"); var elmCategory = $("").addClass("scSelCategory"); //elmPLSearchPanel.append(lblCategory).append(elmCategory); elmPLSearchPanel.append(elmCategory); fillCategory(); } // Create Product List var elmPLContainer = $('
    ').addClass("scTabs").hide(); elmPLContainer.prepend(elmPLSearchPanel); var elmPLProducts = $('
    ').addClass("scProductList"); elmPLContainer.append(elmPLProducts); // Create Cart var elmCartContainer = $('
    ').addClass("scTabs").hide(); var elmCartHeader = $('
    ').addClass("scCartHeader"); var elmCartHeaderTitle1 = $('').addClass("scCartTitle scCartTitle1"); var elmCartHeaderTitle2 = $('').addClass("scCartTitle scCartTitle2"); var elmCartHeaderTitle3 = $('').addClass("scCartTitle scCartTitle3"); var elmCartHeaderTitle4 = $('').addClass("scCartTitle scCartTitle4"); //var elmCartHeaderTitle5 = $('').addClass("scCartTitle scCartTitle5"); //GMVelmCartHeader.append(elmCartHeaderTitle1).append(elmCartHeaderTitle2).append(elmCartHeaderTitle3).append(elmCartHeaderTitle4).append(elmCartHeaderTitle5); elmCartHeader.append(elmCartHeaderTitle1).append(elmCartHeaderTitle2).append(elmCartHeaderTitle3).append(elmCartHeaderTitle4); var elmCartList = $('
    ').addClass("scCartList"); elmCartContainer.append(elmCartHeader).append(elmCartList); obj.append(elmPLContainer).append(elmCartContainer); // Create Bottom bar var elmBottomBar = $('
    ').addClass("scBottomBar"); var elmBottomSubtotalText = $('').addClass("scLabelSubtotalText"); var elmBottomSubtotalValue = $('').addClass("scLabelSubtotalValue"); var btCheckout = $(''+labelCheckout+'').attr("href","#").addClass("scCheckoutButton"); $(btCheckout).click(function() { if($.isFunction(options.onCheckout)) { // calling onCheckout event; options.onCheckout.call(this,elmProductSelected); }else{ //GMV$(this).parents("form").submit(); //getLocation(); //////// Get the count of the products var cProductCount = 0; elmProductSelected.children("option").each(function(n) { cProductCount++; }); //alert(cProductCount); //////// if (cProductCount > 0) { var elem = document.getElementById("btnShowModal"); elem.click(); } else { alert("Your cart is empty"); } //createPopup(elem.value); //var person=prompt("Send to",elem.value); //elem.value = address; } return false; }); elmBottomBar.append(btCheckout).append(elmBottomSubtotalValue).append(elmBottomSubtotalText); obj.append(elmBottomBar); // Create Tooltip var tooltip = $('
    ').addClass('tooltip').hide(); obj.append(tooltip); obj.bind("mousemove",function(){ tooltip.hide(); return true; }); // Create SelectList var elmProductSelected = $('select[name="'+resultName+'"]',obj); if(elmProductSelected.length <= 0){ elmProductSelected = $("").attr("name",resultName).attr("multiple","multiple").hide(); refreshCartValues(); }else{ elmProductSelected.attr("multiple","multiple").hide(); populateCart(); // pre-populate cart if there are selected items } obj.append(elmProductSelected); // prepare the product list populateProducts(); if(options.selected == '1'){ showCart(); }else{ showProductList(); } $(btShowProductList).bind("click", function(e){ showProductList(); return false; }); $(btShowCart).bind("click", function(e){ showCart(); return false; }); function showCart(){ $(btShowProductList).removeClass("sel"); $(btShowCart).addClass("sel"); $(elmPLContainer).hide(); $(elmCartContainer).show(); } function showProductList(){ $(btShowProductList).addClass("sel"); $(btShowCart).removeClass("sel"); $(elmCartContainer).hide(); $(elmPLContainer).show(); } function addToCart(i,qty){ var addProduct = products.eq(i); if(addProduct.length > 0){ if($.isFunction(options.onAdd)) { // calling onAdd event; expecting a return value // will start add if returned true and cancel add if returned false if(!options.onAdd.call(this,$(addProduct),qty)){ return false; } } var pId = $(addProduct).attr(attrProductId); var pName = $(addProduct).attr(attrProductName); var pPrice = $(addProduct).attr(attrProductPrice); // Check wheater the item is already added var productItem = elmProductSelected.children("option[rel=" + i + "]"); if(productItem.length > 0){ // Item already added, update the quantity and total var curPValue = productItem.attr("value"); var valueArray = curPValue.split('|'); var prdId = valueArray[0]; var prdQty = valueArray[1]; //GMVprdQty = (prdQty-0) + (qty-0); prdQty = (qty-0); var newPValue = prdId + '|' + prdQty; productItem.attr("value",newPValue).attr('selected', true); var prdTotal = getMoneyFormatted(pPrice * prdQty); // Now go for updating the design var lalQuantity = $('#lblQuantity'+i).val(prdQty); var lblTotal = $('#lblTotal'+i).html(prdTotal); // show product quantity updated message showHighlightMessage(messageQuantityUpdated); }else{ // This is a new item so create the list var prodStr = pId + '|' + qty; productItem = $('').attr("rel",i).attr("value",prodStr).attr('selected', true).html(pName); elmProductSelected.append(productItem); addCartItemDisplay(addProduct,qty); // show product added message showHighlightMessage(messageItemAdded); } // refresh the cart refreshCartValues(); // calling onAdded event; not expecting a return value if($.isFunction(options.onAdded)) { options.onAdded.call(this,$(addProduct),qty); } }else{ showHighlightMessage(messageProductAddError); } } function addCartItemDisplay(objProd,Quantity){ var pId = $(objProd).attr(attrProductId); var pIndex = products.index(objProd); var pName = $(objProd).attr(attrProductName); var pPrice = $(objProd).attr(attrProductPrice); var prodImgSrc = $(objProd).attr(attrProductImage); var pTotal = (pPrice - 0) * (Quantity - 0); pTotal = getMoneyFormatted(pTotal); // Now Go for creating the design stuff $('.scMessageBar',elmCartList).remove(); var elmCPTitle1 = $('
    ').addClass("scCartItemTitle scCartItemTitle1"); if(prodImgSrc && options.enableImage && prodImgSrc.length>0){ var prodImg = $("").attr("src",prodImgSrc).addClass("scProductImageSmall"); if(prodImg && options.enableImageTooltip){ prodImg.bind("mouseenter mousemove",function(){ showTooltip($(this)); return false; }); prodImg.bind("mouseleave",function (){ tooltip.hide(); return true; }); } elmCPTitle1.append(prodImg); } var elmCP = $('
    ').attr("id","divCartItem"+pIndex).addClass("scCartItem"); var pTitle = pName; var phtml = formatTemplate(options.cartItemTemplate, $(objProd)); var elmCPContent = $('
    ').html(phtml).attr("title",pTitle); elmCPTitle1.append(elmCPContent); var elmCPTitle2 = $('').addClass("scCartItemTitle scCartItemTitle2"); var inputQty = $('').attr("id","lblQuantity"+pIndex).attr("rel",pIndex).addClass("scTxtQuantity2"); $(inputQty).bind("change", function(e){ var newQty = $(this).val(); var prodIdx = $(this).attr("rel"); newQty = newQty - 0; if(validateNumber(newQty)){ updateCartQuantity(prodIdx,newQty); }else{ if (newQty == 0) { removeFromCart(prodIdx); } else { var productItem = elmProductSelected.children("option[rel=" + prodIdx + "]"); var pValue = $(productItem).attr("value"); var valueArray = pValue.split('|'); var pQty = valueArray[1]; $(this).val(pQty); showHighlightMessage(messageQuantityErrorUpdate); } } return true; }); var elmCPTitle3 = $('
    ').append(inputQty).addClass("scCartItemTitle scCartItemTitle3"); var elmCPTitle4 = $('').attr("id","lblTotal"+pIndex).addClass("scCartItemTitle scCartItemTitle4"); //var btRemove = $(''+labelRemove+'').attr("rel",pIndex).attr("href","#").addClass("scRemove").attr("title","Remove from Cart"); //$(btRemove).bind("click", function(e){ // var idx = $(this).attr("rel"); // removeFromCart(idx); // return false; //}); //var elmCPTitle5 = $('
    ').addClass("scCartItemTitle scCartItemTitle5"); //GMVelmCPTitle5.append(btRemove); elmCPTitle1.append(elmCPContent); //GMVelmCP.append(elmCPTitle1).append(elmCPTitle2).append(elmCPTitle3).append(elmCPTitle4).append(elmCPTitle5); elmCP.append(elmCPTitle1).append(elmCPTitle2).append(elmCPTitle3).append(elmCPTitle4); elmCartList.append(elmCP); } function removeFromCart(idx){ var pObj = products.eq(idx); var pName = $(pObj).attr(attrProductName) var productItem = elmProductSelected.children("option[rel=" + idx + "]"); var pValue = $(productItem).attr("value"); //alert(pValue); if(typeof pValue !== 'undefined'){ var removeMsg = messageConfirmRemove.replace('_PRODUCTNAME_',pName); // display default if(confirm(removeMsg)){ if($.isFunction(options.onRemove)) { // calling onRemove event; expecting a return value // will start remove if returned true and cancel remove if returned false if(!options.onRemove.call(this,$(pObj))){ return false; } } var productItem = elmProductSelected.children("option[rel=" + idx + "]"); var pValue = $(productItem).attr("value"); var valueArray = pValue.split('|'); var pQty = valueArray[1]; productItem.remove(); $("#divCartItem"+idx,elmCartList).slideUp("slow",function(){$(this).remove(); showHighlightMessage(messageItemRemoved); //Refresh the cart refreshCartValues();}); if($.isFunction(options.onRemoved)) { // calling onRemoved event; not expecting a return value options.onRemoved.call(this,$(pObj)); } } } } function updateCartQuantity(idx,qty){ var pObj = products.eq(idx); var productItem = elmProductSelected.children("option[rel=" + idx + "]"); var pPrice = $(pObj).attr(attrProductPrice); var pValue = $(productItem).attr("value"); var valueArray = pValue.split('|'); var prdId = valueArray[0]; var curQty = valueArray[1]; if($.isFunction(options.onUpdate)) { // calling onUpdate event; expecting a return value // will start Update if returned true and cancel Update if returned false if(!options.onUpdate.call(this,$(pObj),qty)){ $('#lblQuantity'+idx).val(curQty); return false; } } var newPValue = prdId + '|' + qty; $(productItem).attr("value",newPValue).attr('selected', true); var prdTotal = getMoneyFormatted(pPrice * qty); // Now go for updating the design var lblTotal = $('#lblTotal'+idx).html(prdTotal); showHighlightMessage(messageQuantityUpdated); //Refresh the cart //alert(prdId); refreshCartValues(); if($.isFunction(options.onUpdated)){ // calling onUpdated event; not expecting a return value options.onUpdated.call(this,$(pObj),qty); } } function refreshCartValues(){ var sTotal = 0; var cProductCount = 0; var cItemCount = 0; elmProductSelected.children("option").each(function(n) { var pIdx = $(this).attr("rel"); var pObj = products.eq(pIdx); var pValue = $(this).attr("value"); var valueArray = pValue.split('|'); var prdId = valueArray[0]; var pQty = valueArray[1]; var pPrice = $(pObj).attr(attrProductPrice); sTotal = sTotal + ((pPrice - 0) * (pQty - 0)); cProductCount++; cItemCount = cItemCount + (pQty-0); }); subTotal = sTotal; cartProductCount = cProductCount; cartItemCount = cItemCount; elmBottomSubtotalValue.html(getMoneyFormatted(subTotal)); cartMenu = labelCartMenuName.replace('_COUNT_',cartProductCount); cartMenuTooltip = labelCartMenuNameTooltip.replace('_PRODUCTCOUNT_',cartProductCount).replace('_ITEMCOUNT_',cartItemCount); btShowCart.html(cartMenu).attr("title",cartMenuTooltip); if(cProductCount <= 0){ showMessage(messageCartEmpty,elmCartList); }else{ $('.scMessageBar',elmCartList).remove(); } } function populateCart(){ elmProductSelected.children("option").each(function(n) { var curPValue = $(this).attr("value"); var valueArray = curPValue.split('|'); var prdId = valueArray[0]; var prdQty = valueArray[1]; if(!prdQty){ //prdQty = 1; // if product quantity is not present default to 1 prdQty = 0; // if product quantity is not present default to 1 } var objProd = jQuery.grep(products, function(n, i){return ($(n).attr(attrProductId) == prdId);}); var prodIndex = products.index(objProd[0]); var prodName = $(objProd[0]).attr(attrProductName); $(this).attr('selected', true); $(this).attr('rel', prodIndex); $(this).html(prodName); cartItemCount++; addCartItemDisplay(objProd[0],prdQty); }); // Reresh the cart refreshCartValues(); } function fillCategory(){ var catCount = 0; var catItem = $('').attr("value",'').attr('selected', true).html('All'); elmCategory.prepend(catItem); $(products).each(function(i,n){ var pCategory = $(this).attr(attrCategoryName); if(pCategory && pCategory.length>0){ var objProd = jQuery.grep(elmCategory.children('option'), function(n, i){return ($(n).val() == pCategory);}); if(objProd.length<=0){ catCount++; var catItem = $('').attr("value",pCategory).html(pCategory); elmCategory.append(catItem); } } }); if(catCount>0){ $(elmCategory).bind("change", function(e){ $(txtSearch).val(''); populateProducts(); return true; }); }else{ elmCategory.hide(); lblCategory.hide(); } } function populateProducts(searchString){ var isSearch = false; var productCount = 0; var selectedCategory = $(elmCategory).children(":selected").val(); // validate and prepare search string if(searchString){ searchString = trim(searchString); if(searchString.length>0){ isSearch = true; searchString = searchString.toLowerCase(); } } // Clear the current items on product list elmPLProducts.html(''); // Lets go for dispalying the products $(products).each(function(i,n){ var productName = $(this).attr(attrProductName); var productCategory = $(this).attr(attrCategoryName); var isValid = true; var isCategoryValid = true; if(isSearch){ if(productName.toLowerCase().indexOf(searchString) == -1) { isValid = false; }else{ isValid = true; } } // Category filter if(selectedCategory && selectedCategory.length>0){ selectedCategory = selectedCategory.toLowerCase(); if(productCategory.toLowerCase().indexOf(selectedCategory) == -1) { isCategoryValid = false; }else{ isCategoryValid = true; } } if(isValid && isCategoryValid) { productCount++; var productPrice = $(this).attr(attrProductPrice); var prodImgSrc = $(this).attr(attrProductImage); var elmProdDiv1 = $('
    ').addClass("scPDiv1"); if(prodImgSrc && options.enableImage && prodImgSrc.length>0){ var prodImg = $("").attr("src",prodImgSrc).addClass("scProductImage"); if(prodImg && options.enableImageTooltip){ prodImg.bind("mouseenter mousemove",function(){ showTooltip($(this)); return false; }); prodImg.bind("mouseleave",function (){ tooltip.hide(); return true; }); } elmProdDiv1.append(prodImg); } var elmProdDiv2 = $('
    ').addClass("scPDiv2"); // for product name, desc & price var productHtml = formatTemplate(options.productItemTemplate, $(this)); elmProdDiv2.html(productHtml); //GMV Adding var elmProdDiv3 = $('
    ').addClass("scPDiv3"); // for button & qty //var btAddToCart = $(''+labelAddToCartButton+'').attr("href","#").attr("rel",i).attr("title",labelAddToCartButton).addClass("scAddToCart"); //$(btAddToCart).bind("click", function(e){ // var idx = $(this).attr("rel"); // var qty = $(this).siblings("input").val(); // if(validateNumber(qty)){ // addToCart(idx,qty); // }else{ // //GMV $(this).siblings("input").val(1); // $(this).siblings("input").val(0); // showHighlightMessage(messageQuantityErrorAdd); // } // return false; //}); var inputQty = $('').attr("rel",i).addClass("scTxtQuantity"); //var inputQty = $('').attr("id","lblQuantity"+pIndex).attr("rel",pIndex).addClass("scTxtQuantity2"); $(inputQty).bind("change", function(e){ var newQty = $(this).val(); //var newQty = $(this).siblings("input").val(); var prodIdx = $(this).attr("rel"); //newQty = newQty - 0; if(validateNumber(newQty)){ //alert(prodIdx); addToCart(prodIdx,newQty); }else{ if (newQty == 0) { removeFromCart(prodIdx); } else { $(this).siblings("input").val(0); showHighlightMessage(messageQuantityErrorAdd); } } return false; }); //var labelQty = $('').addClass("scLabelQuantity"); //elmProdDiv3.append(labelQty).append(inputQty).append(btAddToCart); elmProdDiv3.append(inputQty); var elmProds = $('
    ').addClass("scProducts"); elmProds.append(elmProdDiv1).append(elmProdDiv2).append(elmProdDiv3); elmPLProducts.append(elmProds); } }); if(productCount <= 0){ showMessage(messageProductEmpty,elmPLProducts); } } // Display message function showMessage(msg, elm){ var elmMessage = $('
    ').addClass("scMessageBar").hide(); elmMessage.html(msg); if(elm){ elm.append(elmMessage); elmMessage.show(); } } function showHighlightMessage(msg){ msgBox2.html(msg); msgBox2.fadeIn("fast", function() { setTimeout(function() { msgBox2.fadeOut("fast"); }, 2000); }); } // Show Image tooltip function showTooltip(img) { var height = img.height(); var width = img.height(); var imgOffsetTop = img.offset().top; jQuery.log(img.offset()); jQuery.log(img.position()); jQuery.log("--------------"); tooltip.html(''); var tImage = $("").attr('src',$(img).attr('src')); tImage.height(toolMaxImageHeight); tooltip.append(tImage); var top = imgOffsetTop - height ; var left = width + 10; tooltip.css({'top':top, 'left':left}); tooltip.show("fast"); } function validateNumber(num){ var ret = false; if(num){ num = num - 0; if(num && num > 0){ ret = true; } } return ret; } // Get the money formatted for display function getMoneyFormatted(val){ return val.toFixed(2); } // Trims the blankspace function trim(s){ var l=0; var r=s.length -1; while(l < s.length && s[l] == ' ') { l++; } while(r > l && s[r] == ' ') { r-=1; } return s.substring(l, r+1); } // format the product template function formatTemplate(str, objItem){ resStr =str.split("<%="); var finalStr = ''; for(i=0;i")); if(valRef!='' || valRef!=null){ var valRep = objItem.attr(valRef); //n[valRef]; if(valRep == null || valRep == 'undefined'){ valRep = ''; } tmpStr = tmpStr.replace(valRef+'%>',valRep); finalStr += tmpStr; }else{ finalStr += tmpStr; } } return finalStr; } }); }; // Default options $.fn.smartCart.defaults = { selected: 0, // 0 = produts list, 1 = cart resultName: 'products_selected[]', enableImage: true, enableImageTooltip: true, enableSearch: true, enableCategoryFilter: true, //productItemTemplate:'<%=pname%>
    Category: <%=pcategory%>
    <%=pdesc%>
    Price: <%=pprice%>', //if ($('=pcategory').val()) //{ productItemTemplate:'<%=pname%>
    Category: <%=pcategory%>
    <%=pdesc%>
    $<%=pprice%>', //} //else //{ // productItemTemplate:'<%=pname%>
    Category: <%=pcategory%>
    $<%=pprice%>', //} cartItemTemplate:'<%=pname%>', // Events onAdd: null, // function(pObj,quantity){ return true; } onAdded: null, // function(pObj,quantity){ } onRemove: null, // function(pObj){return true;} onRemoved: null, // function(pObj){ } onUpdate: null, // function(pObj,quantity){ return true; } onUpdated: null, // function(pObj,quantity){ } onCheckout: null // function(Obj){ } }; jQuery.log = function(message) { if(window.console) { console.debug(message); } }; })(jQuery);