Организация цен на TOMTOP

Решил написать статью, которая поможет Вам адекватно и понятно воспринимать цены, выставленные в магазине TOMTOP. Примеры будут приведены для цен в рублях. Естественно, сайт мы поменять не можем, но можем воспользоваться надстройкой для Google Chrome, которая позволит нашему JavaScript обработать страницу магазина. Итак, все по порядку.

Расширение для Google Chrome

Ставим расширение для Google Chrome Custom JavaScript for websites. Расширение позволит нам писать собственный скрипт для страниц. Прелесть расширения в том, что оно умеет подключать jQuery, который сильно упростит нам жизнь.

Анализ страниц магазина

Если мы зайдем на страницу категории товаров, то увидим список продукции. У каждого товара есть цена, которая представлена в виде "руб.1611.59". Да, совсем не приятное представление. Мозг начинает напрягаться и пытаться отделить валюту от суммы. Более того, мы так же пытаемся понять разрядность суммы. Согласитесь, со всеми точками и полным отсутствием пробелов приходится потратить время и распознать, что стоимость товара "1 611.59 руб.". Намного приятнее представление. Есть люди, которым так же интересна цена в валюте магазина. Нет, мы не полезем на сайт ЦБР, что бы узнать текущий курс. Проанализировав код элемента, можно увидеть следующий тег:
В нем мы увидим атрибут usvalue, значение которого - это цена в валюте магазина. Более того, мы увидим имя CSS класса productPrice, с которым мы будем работать. Давайте проанализируем еще элемент цены, если мы откроем детальное описание товара.
Тут мы видим тот же атрибут usvalue с ценой в валюте документа. Так же мы видим идентификатор элемента detailPrice, который так же позволит нам определить элемент с ценой.

Алгоритм скрипта

Для начала опишу алгоритм. Поскольку мы хотим упростить жизнь программиста, то воспользуемся библиотекой jQuery. Для каждого элемента с CSS классом productPrice или идентификатором detailPrice мы будем брать значение цены в рублях, разбивать ее по точке и склеивать, как нам надо, а на новой строке в скобках будем писать цену в валюте магазина. Для этих двух элементов мы сделаем две ветки, поскольку данные в этих элементах разные.

Собственно, код

Сразу скажу, что у этого магазина есть поддомен ru.tomtop.com, для которого так же нужно скопировать этот скрипт.

function splitInt(input){
    output = input;
    intPart = input;
    len = intPart.length;
    th = len - 3;
    output = intPart.substr(-3);
    if(len > 0){
        output = intPart.substr(0, th) + " " + output;
    }
    return output;
}
$( document ).ready(function() {
 $(".productPrice").each(function( index ){
  htmlVal = $(this).html();
  usval = $(this).attr("usvalue");
  vals = htmlVal.split(".");
  vals[1] = splitInt(vals[1]);
 
  usvals = usval.split(".");
  usvals[0] = splitInt(usvals[0]);
 
  rurStr = vals[1] + "." + vals[2] + " " + vals[0];
  usStr = "$" + usvals[0] + "." + usvals[1];
  $(this).html(rurStr + "
(" + usStr + ")");
 });
 $("#detailPrice").each(function(index){
  htmlVal = $(this).html();
  usval = $(this).attr("usvalue");
  vals = htmlVal.split(".");
  vals[0] = splitInt(vals[0]);
 
  usvals = usval.split(".");
  usvals[0] = splitInt(usvals[0]);
 
  rurStr = vals[0] + "." + vals[1];
  usvals[0] = splitInt(usvals[0]);
  usStr = "$" + usvals[0] + "." + usvals[1];
  $(this).html(rurStr + "
(" + usStr + ")");
 });
});