Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Membuat format rupiah di js
Sy sudah cari di google tapi iplementasinya yang belum paham. Jadi ceritanya saya membuat keranjang belanja dgn menggunakan plugin j Query.mycart. Nah di demo plugin tersebut menggunakan format dollar, sy bingung untuk merubahnya ke rupiah bagaimana. Mohon bantuannya, terima kasih
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( '<div class="modal fade" id="' + idCartModal + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">' + '<div class="modal-dialog" role="document">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>' + '<h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-shopping-cart"></span> My Cart</h4>' + '</div>' + '<div class="modal-body">' + '<table class="table table-hover table-responsive" id="' + idCartTable + '"></table>' + '</div>' + '<div class="modal-footer">' + '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' + '</div>' + '</div>' + '</div>' + '</div>' ); } var drawTable = function(){ var $cartTable = $("#" + idCartTable); $cartTable.empty(); var products = ProductManager.getAllProducts(); $.each(products, function(){ var total = this.quantity * this.price; $cartTable.append( '<tr title="' + this.summary + '" data-id="' + this.id + '" data-price="' + this.price + '">' + '<td class="text-center" style="width: 30px;"><img width="30px" height="30px" src="' + this.image + '"/></td>' + '<td>' + this.name + '</td>' + '<td title="Unit Price">Rp. ' + this.price + '</td>' + '<td title="Quantity"><input type="number" min="1" style="width: 70px;" class="' + classProductQuantity + '" value="' + this.quantity + '"/></td>' + '<td title="Total" class="' + classProductTotal + '">Rp. ' + total + '</td>' + '<td title="Remove from Cart" class="text-center" style="width: 30px;">X</td>' + '</tr>' ); }); $cartTable.append(products.length ? '<tr>' + '<td></td>' + '<td><strong>Total</strong></td>' + '<td></td>' + '<td></td>' + '<td><strong id="' + idGrandTotal + '">Rp. </strong></td>' + '<td></td>' + '</tr>' : '<div class="alert alert-danger" role="alert" id="' + idEmptyCartMessage + '">Your cart is empty</div>' ); var discountPrice = options.getDiscountPrice(products, ProductManager.getTotalPrice(), ProductManager.getTotalQuantity()); if(products.length && discountPrice !== null) { $cartTable.append( '<tr style="color: red">' + '<td></td>' + '<td><strong>Total (including discount)</strong></td>' + '<td></td>' + '<td></td>' + '<td><strong id="' + idDiscountPrice + '">Rp. </strong></td>' + '<td></td>' + '</tr>' ); } 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);
3 Jawaban:
<div>Bisa pakai <a href="https://numeraljs.com/">Numeral.js</a> atau <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat">Intl.NumberFormat</a>.<br><br></div><pre>new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(123456.789); // hasil: Rp 123.456,79</pre><div><br>Contoh pakai Intl.NumberFormat di code-nya, ini hanya untuk view saja - value-nya tetap di-numberic.</div><pre>var drawTable = function() { var $cartTable = $("#" + idCartTable); $cartTable.empty(); var products = ProductManager.getAllProducts(); $.each(products, function() { var total = this.quantity * this.price; // $cartTable.append('<tr title="' + this.summary + '" data-id="' + this.id + '" data-price="' + this.price + '">' + '<td class="text-center" style="width: 30px;"><img width="30px" height="30px" src="' + this.image + '"/></td>' + '<td>' + this.name + '</td>' + '<td title="Unit Price">Rp. ' + this.price + '</td>' + '<td title="Quantity"><input type="number" min="1" style="width: 70px;" class="' + classProductQuantity + '" value="' + this.quantity + '"/></td>' + '<td title="Total" class="' + classProductTotal + '">Rp. ' + total + '</td>' + '<td title="Remove from Cart" class="text-center" style="width: 30px;">X</td>' + '</tr>'); $cartTable.append('<tr title="' + this.summary + '" data-id="' + this.id + '" data-price="' + new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(this.price) + '">' + '<td class="text-center" style="width: 30px;"><img width="30px" height="30px" src="' + this.image + '"/></td>' + '<td>' + this.name + '</td>' + '<td title="Unit Price">Rp. ' + this.price + '</td>' + '<td title="Quantity"><input type="number" min="1" style="width: 70px;" class="' + classProductQuantity + '" value="' + this.quantity + '"/></td>' + '<td title="Total" class="' + classProductTotal + '">Rp. ' + total + '</td>' + '<td title="Remove from Cart" class="text-center" style="width: 30px;">X</td>' + '</tr>'); });</pre><div><br></div>
<pre>// ES6 Javascript
const formatRupiah = (money) => { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 } ).format(money); }</pre><div><br></div><pre>console.log(formatRupiah(15000));</pre><div><br>hasilnya : Rp 15.000</div>
<div>Makasih responnya teman2, akan sy coba semua :D</div>