Plugin định dạng tiền cho website bán hàng - Money Format Plugin

Lướt một vòng trên group mình thấy có nhiều người đang làm một website bán hàng, thống kê,... nôm na là liên quan đến những con số, tiền tệ nhưng không biết làm sao để định dạng những con số đó cho đẹp hơn. Ví dụ: khi khách nhập số 10000000 nhưng nhìn thế có vẻ không được đẹp lắm, hơi khó đọc có khi còn nhầm lẫn đúng không nào. Bây giờ mình sẽ hướng dẫn các bạn làm sao đưa con số 10000000 về dạng 10,000,000 nhé. Nó thực tế rất đơn giản thôi, nhưng mình thấy nhiều người đã tham khảo trên mạng nhưng đều không được hoặc không ưng ý, mình có thử lên mạng tìm 1 source xem như thế nào nhưng hầu như đều dính một lỗi chung ( cái lỗi này không phù hợp với tiền Việt Nam thôi nhé, còn USD thì không sao ), lỗi đó kiểu như thế này ví dụ ta nhập 10000000 thì nó sẽ hiện là 10000000.00 hoặc 10,000,000.00 nhìn là thấy khó chịu rồi 😆

Sau đây mình (BaoTrongIT) sẽ hướng dẫn cho các bạn cài đặt nhé, vì đây là bài hướng dẫn chung cho tất cả các nền tảng như Blogspot, Wordpress,... Nếu các bạn nào không biết làm thì có thể inbox qua cho mình hoặc có thể comments xuống dưới nhé. Bài hướng dẫn này mình sử dụng jQuery nhé.

Cài đặt Plugin

Kiểm tra xem có jQuery chưa nhé

Nếu có rồi thì các bạn không cần phải thêm nữa nhé, còn chưa thì bạn thêm đoạn này vào trước thẻ </body> nhé.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

Thêm đoạn Js Format Money này nữa

<script src="https://cdn.baotrongit.com/Money-Format-Plugin/money_format.js"></script>

Giá trị cố định

Giá trị cố định ở đây mình muốn nói đó là khi bạn có 1 giá trị hiển thị ngoài màn hình cố định không cho người dùng thay đổi, ví dụ: Giá đôi giày là 100000, nhưng bạn muốn hiển thị nó là 100,000. Đơn giản dễ hiểu hơn nữa là không nhận 1 giá trị input nào nhé.

Ví dụ bằng ảnh mình lấy demo của Shopee

40.000 là giá trị không thay đổi nhé

Với trường hợp này bạn làm như sau bạn cho giá trị đó vào value="gia_tri_hien_thi" và thêm class cho nó class="money" nếu trong theme đã có class trùng thì các bạn thay đổi class của nó trong đoạn Javascript và HTML đi nhé. 

Hoặc bạn có thể đặt vào 1 thẻ span có nội dung như sau:

<span class="money well">10000</span>

Sau đó các bạn thêm 1 đoạn Js để gọi hàm cho Format tiền đi nhé:

<script type="text/javascript">
		$('.money').simpleMoneyFormat();
	</script>

Giá trị Input

Chắc giá trị Input các bạn không lạ lẫm gì nữa đúng không, nếu chưa biết mình sẽ giải thích nhé. Ví dụ bạn muốn tạo 1 ô cho người dùng nhập số lượng gì đó, kiểu như là số tiền muốn rút, số lượng sản phẩm muốn mua chẳng hạn,... khi tạo ô xong thì ta nhập ví dụ 10000 chẳng hạn nhưng muốn nó hiển thị ngay là 10,000 thì ta phải dùng cách này nhé.

Đầu tiên các bạn code HTML bằng thẻ Input như thế này ( các bạn có thể biến tấu như thế nào thì tuỳ nhé )

<input placeholder="Nhập giá trị" type="text" class="money form-control" value="">

Sau đó các bạn lại thêm 1 đoạn js nhỏ để gọi hàm Format như trên nữa là xong nhé.

Demo Money Format Plugin

Demo