Berikut isi file jQuery.mycart.js nya (kodenya sangat panjang, maaf)(function ($) { "use strict"; var OptionManager = (function () { var objToReturn = {}; var defaultOptions = { classCartIcon: 'my-cart-icon', classCartBadge: 'my-cart-badge', classProductQuantity: 'my-product-quantity', classProductRemove: 'my-product-remove', classCheckoutCart: 'my-cart-checkout', affixCartIcon: true, showCheckoutModal: true, clickOnAddToCart: function($addTocart) { }, clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) { }, checkoutCart: function(products, totalPrice, totalQuantity) { }, getDiscountPrice: function(products, totalPrice, totalQuantity) { return null; } }; var getOptions = function (customOptions) { var options = $.extend({}, defaultOptions); if (typeof customOptions === 'object') { $.extend(options, customOptions); } return options; } objToReturn.getOptions = getOptions; return objToReturn; }()); var ProductManager = (function(){ var objToReturn = {}; /* PRIVATE */ localStorage.products = localStorage.products ? localStorage.products : ""; var getIndexOfProduct = function(id){ var productIndex = -1; var products = getAllProducts(); $.each(products, function(index, value){ if(value.id == id){ productIndex = index; return; } }); return productIndex; } var setAllProducts = function(products){ localStorage.products = JSON.stringify(products); } var addProduct = function(id, name, summary, price, quantity, image) { var products = getAllProducts(); products.push({ id: id, name: name, summary: summary, price: price, quantity: quantity, image: image }); setAllProducts(products); } /* PUBLIC */ var getAllProducts = function(){ try { var products = JSON.parse(localStorage.products); return products; } catch (e) { return []; } } var updatePoduct = function(id, quantity) { var productIndex = getIndexOfProduct(id); if(productIndex < 0){ return false; } var products = getAllProducts(); products[productIndex].quantity = typeof quantity === "undefined" ? products[productIndex].quantity * 1 + 1 : quantity; setAllProducts(products); return true; } var setProduct = function(id, name, summary, price, quantity, image) { if(typeof id === "undefined"){ console.error("id required") return false; } if(typeof name === "undefined"){ console.error("name required") return false; } if(typeof image === "undefined"){ console.error("image required") return false; } if(!$.isNumeric(price)){ console.error("price is not a number") return false; } if(!$.isNumeric(quantity)) { console.error("quantity is not a number"); return false; } summary = typeof summary === "undefined" ? "" : summary; if(!updatePoduct(id)){ addProduct(id, name, summary, price, quantity, image); } } var clearProduct = function(){ setAllProducts([]); } var removeProduct = function(id){ var products = getAllProducts(); products = $.grep(products, function(value, index) { return value.id != id; }); setAllProducts(products); } var getTotalQuantity = function(){ var total = 0; var products = getAllProducts(); $.each(products, function(index, value){ total += value.quantity * 1; }); return total; } var getTotalPrice = function(){ var products = getAllProducts(); var total = 0; $.each(products, function(index, value){ total += value.quantity * value.price; }); return total; } objToReturn.getAllProducts = getAllProducts; objToReturn.updatePoduct = updatePoduct; objToReturn.setProduct = setProduct; objToReturn.clearProduct = clearProduct; objToReturn.removeProduct = removeProduct; objToReturn.getTotalQuantity = getTotalQuantity; objToReturn.getTotalPrice = getTotalPrice; return objToReturn; }()); var loadMyCartEvent = function(userOptions){ var options = OptionManager.getOptions(userOptions); var $cartIcon = $("." + options.classCartIcon); var $cartBadge = $("." + options.classCartBadge); var classProductQuantity = options.classProductQuantity; var classProductRemove = options.classProductRemove; var classCheckoutCart = options.classCheckoutCart; var idCartModal = 'my-cart-modal'; var idCartTable = 'my-cart-table'; var idGrandTotal = 'my-cart-grand-total'; var idEmptyCartMessage = 'my-cart-empty-message'; var idDiscountPrice = 'my-cart-discount-price'; var classProductTotal = 'my-product-total'; var classAffixMyCartIcon = 'my-cart-icon-affix'; $cartBadge.text(ProductManager.getTotalQuantity()); if(!$("#" + idCartModal).length) { $('body').append( '
' + '
' + '
' + '
' + '×' + '
My Cart
' + '' + '' + '' + '
' + 'Close' + '
' + 'Your cart is empty
' ); var discountPrice = options.getDiscountPrice(products, ProductManager.getTotalPrice(), ProductManager.getTotalQuantity()); if(products.length && discountPrice !== null) { $cartTable.append( '' + '' + 'Total (including discount)' + '' + '' + 'Rp. ' + '' + '' ); } showGrandTotal(); showDiscountPrice(); } var showModal = function(){ drawTable(); $("#" + idCartModal).modal('show'); } var updateCart = function(){ $.each($("." + classProductQuantity), function(){ var id = $(this).closest("tr").data("id"); ProductManager.updatePoduct(id, $(this).val()); }); } var showGrandTotal = function(){ $("#" + idGrandTotal).text("Rp. " + ProductManager.getTotalPrice()); } var showDiscountPrice = function(){ $("#" + idDiscountPrice).text("Rp. " + options.getDiscountPrice(ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity())); } /* EVENT */ if(options.affixCartIcon) { var cartIconBottom = $cartIcon.offset().top * 1 + $cartIcon.css("height").match(/\d+/) * 1; var cartIconPosition = $cartIcon.css('position'); $(window).scroll(function () { if ($(window).scrollTop() >= cartIconBottom) { $cartIcon.css('position', 'fixed').css('z-index', '999').addClass(classAffixMyCartIcon); } else { $cartIcon.css('position', cartIconPosition).css('background-color', 'inherit').removeClass(classAffixMyCartIcon); } }); } $cartIcon.click(function(){ options.showCheckoutModal ? showModal() : options.clickOnCartIcon($cartIcon, ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity()); }); $(document).on("input", "." + classProductQuantity, function () { var price = $(this).closest("tr").data("price"); var id = $(this).closest("tr").data("id"); var quantity = $(this).val(); $(this).parent("td").next("." + classProductTotal).text("Rp. " + price * quantity); ProductManager.updatePoduct(id, quantity); $cartBadge.text(ProductManager.getTotalQuantity()); showGrandTotal(); showDiscountPrice(); }); $(document).on('keypress', "." + classProductQuantity, function(evt){ if(evt.keyCode == 38 || evt.keyCode == 40){ return ; } evt.preventDefault(); }); $(document).on('click', "." + classProductRemove, function(){ var $tr = $(this).closest("tr"); var id = $tr.data("id"); $tr.hide(500, function(){ ProductManager.removeProduct(id); drawTable(); $cartBadge.text(ProductManager.getTotalQuantity()); }); }); $("." + classCheckoutCart).click(function(){ var products = ProductManager.getAllProducts(); if(!products.length) { $("#" + idEmptyCartMessage).fadeTo('fast', 0.5).fadeTo('fast', 1.0); return ; } updateCart(); options.checkoutCart(ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity()); ProductManager.clearProduct(); $cartBadge.text(ProductManager.getTotalQuantity()); $("#" + idCartModal).modal("hide"); }); } var MyCart = function (target, userOptions) { /* PRIVATE */ var $target = $(target); var options = OptionManager.getOptions(userOptions); var $cartIcon = $("." + options.classCartIcon); var $cartBadge = $("." + options.classCartBadge); /* EVENT */ $target.click(function(){ options.clickOnAddToCart($target); var id = $target.data('id'); var name = $target.data('name'); var summary = $target.data('summary'); var price = $target.data('price'); var quantity = $target.data('quantity'); var image = $target.data('image'); ProductManager.setProduct(id, name, summary, price, quantity, image); $cartBadge.text(ProductManager.getTotalQuantity()); }); } $.fn.myCart = function (userOptions) { loadMyCartEvent(userOptions); return $.each(this, function () { new MyCart(this, userOptions); }); }})(jQuery);