Postingan lainnya
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>