Membuat format rupiah di js

Sy sudah cari di google tapi iplementasinya yang belum paham. Jadi ceritanya saya membuat keranjang belanja dgn menggunakan plugin jQuery.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">&times;</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);
avatar Ahmad554

Ditanyakan oleh @Ahmad554

52 Kontribusi 19 Poin

Login untuk menanggapi


Jawaban

Bisa pakai Numeral.js atau Intl.NumberFormat.

new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(123456.789);
// hasil: Rp 123.456,79

Contoh pakai Intl.NumberFormat di code-nya, ini hanya untuk view saja - value-nya tetap di-numberic.
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>');
	});

avatar soeleman

Dijawab oleh @soeleman

74 Kontribusi 85 Poin

Login untuk menanggapi


// ES6 Javascript

const formatRupiah = (money) => {
   return new Intl.NumberFormat('id-ID',
     { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }
   ).format(money);
}

console.log(formatRupiah(15000));

hasilnya : Rp 15.000
avatar asruldev

Dijawab oleh @asruldev

14 Kontribusi 6 Poin

Login untuk menanggapi


Makasih responnya teman2, akan sy coba semua :D
avatar Ahmad554

Dijawab oleh @Ahmad554

52 Kontribusi 19 Poin

Login untuk menanggapi


Login untuk gabung berdiskusi