+7 495 989-45-50
16.08.2013 Разработки

Форматирование цены на JS

В битрикс-е есть замечательная PHP-функция CurrencyFormat(), объявленная в модуле currency (Валюты).
Данной функции вы отправляете число (стоимость), а она возвращает вам стоимость отформатированную в соответствии с правилами, указанными в настройках валют, то есть обрежет нужное кол-во десятичных знаков, отделит нужным символом тысячные разряды и добавит приписку "руб." например.

Как-то раз, работая с корзиной мы столкнулись с задачей форматировать цены ява-скриптом. Если подумать отвлеченно, сложно придумать задачу, где PHP-шной фунции форматирования не достаточно, но все таки такая задача появилась и выглядела она так:
В корзие при изменении количества нужно пересчитывать суммы заказа в реальном времени. С одной стороны все просто - после изменения количества товара посылаем ajax-запрос и получаем уже пересчитанные суммы, но задача была осложнена следующим:

  • Нужно пересчитать суммы максимально быстро, то есть ещё до возвращения ответа на ajax-запрос.
  • Нужно пересчитывать суммы с эффектом бегущих цифр, то есть как на вокзале - быстро меняющиеся циферки плавно добегают до нужного значения.

ТоварКол-воЦена
Брелок BMW1 200 руб.
Итого: 2 400 руб.

Если у нас функция преобразования числа в отформатированную строку есть только на стороне PHP, то быстро меняющуюся строку мы ниак не сделаем. Пришлось писать js-функцию форматирования. С помощью регулярных выражений и нескольких условий это делается не сложно - готовых решений много.

function XFormatPrice(_number) 
{
	var decimal=0;
	var separator=' ';
	var decpoint = '.';
	var format_string = '# руб.';

	var r=parseFloat(_number)

	var exp10=Math.pow(10,decimal);// приводим к правильному множителю
	r=Math.round(r*exp10)/exp10;// округляем до необходимого числа знаков после запятой

	rr=Number(r).toFixed(decimal).toString().split('.');

	b=rr[0].replace(/(\d{1,3}(?=(\d{3})+(?:\.\d|\b)))/g,"\$1"+separator);

	r=(rr[1]?b+ decpoint +rr[1]:b);
	return format_string.replace('#', r);
}
Но возникает одна проблема. Если настройки шаблона форматирования цен изменятся пользователем в админке... В таком случае JS-функция об этом никак не узнает. Выход был следующим - мы добавляем в наш скрипт (на нужную страницу), или в init.php (если страниц где данная функция используется будет много) следующий код:
<?include_once $_SERVER["DOCUMENT_ROOT"]."/XFormatPrice.php";?>
и кладем скрипт XFormatPrice.php (скачать можно тут) в корень сайта, после чего у нас в заголовке страници появляется JS-функция XFormatPrice() с нужными настройками, которую уже можно использовать.

Данный скрипт собирает нам функцию XFormatPrice() которая форматирует цены в соответствии с настройками модуля "Валюты". Если модуля валюты на сайте не оказалось, то функция все равно будет работать, используя стандартные параметры форматирования (по умолчанию).

Таким образом мы можем использовать в JavaScript-е - XFormatPrice(10500); - передавая функции число, мы получаем отформатированное значение. - "10 500.00 руб." в данном случае.


Автор: om-sv
Баннеры Мобильные приложения