Rastam

Бывает такая ситуация, когда вам нужно добавить на сайт список цен на товары, цена на которые должна оперативно меняться вместе с курсом доллара, но должна показываться в какой-то другой валюте, например в рублях.

Я напишу о том, как сделать это с помощью JavaScript. Конечно, у этого способа есть недостатки, но зато он самый простой. Вы узнаете, как округлить число до сотен в javascript с помощью функции round, и увидите очередное применение цикла for.

Сначала - краткая суть работы - как это будет достигнуто:

1. Получение курса.

2. Операция конвертации - умножение цены в долларах на его курс относительно рубля.

3. Вывод результата конвертации.

Итак, создадим таблицу. В ней будет указана некая средняя цена. Если у пользователя отключен javascript, или есть проблема на стороне сервера курса валют, то будет выводится она. В ином случае будут производится вычисления. Каждой ячейке с ценой должен быть присвоен определенный id. Я использовал id вида price1,price2,price3...

<table>

<tr>

<td style="text-align: left"><b>Товар</b>

</td>

<td><b>Цена (в рублях)</b></td>

</tr>

<tr>

<td style="text-align: left">Чехол

</td>

<td id="price1">290</td>

</tr>

<tr>

<td style="text-align: left">Аккумулятор

</td>

<td id="price2">2999</td>

</tr>

<tr>

<td style="text-align: left">Смартфон

</td>

<td id="price3">5999</td>

</tr>

</table>

Курс валют легче всего брать с сервиса cbr-xml-daily.ru

Создадим 2 переменных - для курса и массива цен. Также создадим функцию, которая получает текущий курс и записывает в переменную (не забудьте подключить библиотеку):

<script>

var USDrate = 55;

var list = [];

function CBR_XML_Daily_Ru(rates) {

var USDrate = rates.Valute.USD.Value;

}

</script>

<script src="https://cbr-xml-daily.ru/daily_jsonp.js"></script>

Перейдем к формированию списка цен. Цены будут вставлены в переменные вручную:

list[1] = 5;

list[2] = 50;

list[3] = 100;

Это цена в долларах. Но как перевести её в доллары? Просто умножим. Цены будут неровными, поэтому я решил округлять их до сотен, а затем вычитать 10 ради красивой цены с девятками.

list[1] = (Math.round((5*USDrate)/100)*100)-10;

Пояснения - метод round объекта Math округляет число до ближайшего целого. Так так нам нужно округлить до сотен, то сначала делим цену в рублях на 100, а затем умножаем опять на 100. Из получившейся суммы вычитаем 10 ради цен типа 15990. Конечно, такое округление может не иметь смысла при других ценах. Подбирайте интервал внимательно.

Побробнее о Math.round: https://developer.mozilla.org/ru/docs/Web/JavaScript/Referen...

Заполняем массив:

list[1] = (Math.round((5*USDrate)/100)*100)-10;

list[2] = (Math.round((50*USDrate)/100)*100)-10;

list[3] = (Math.round((100*USDrate)/100)*100)-10;

Для встраивания цен будем использовать свойство innerHTML (это свойство, а не функция/метод).

document.getElementById("price1").innerHTML = list[1];

getElementById используется для определения элемента (id чувствителен к регистру).

Так как innerHTML свойство, а не функция, то мы должны для присваивания использовать знак равно: innerHTML = "текст"

В принципе, на этом урок можно и закончить, можно просто вставлять id и переменные или текст вручную, но давайте используем преимущества циклов.

Узнаем длину массива автоматически с помощью свойства length:

var array_length = list.length; //количество строк

Создадим цикл:

for (var i = 1; i < array_length; i++) {

document.getElementById("price"+i).innerHTML = list[i]; //вставляем элементы массива

}

Подробнее о for: https://developer.mozilla.org/ru/docs/Web/JavaScript/Referen...

На этом все. Способ не идеальный, но самое главное - он работает, и сделать такой скрипт можно за пару минут.

Живая демка: https://masterprintspb.ru/kupit-originalnye-kartridzhi/

Итоговый код: https://paste.ofcode.org/36vXS2HsQfzGqMaGgGChxbH

Привет всем. Статья написана простым языком и будет понятна всем.

В ней я расскажу, как сделать прайс-лист с поиском на javascript.

Недавно нужно было добавить на сайт очень длинный прайс-лист на услуги по заправке картриджей. Моделей много. Кто-то может сказать, что пусть юзеры нажимают ctrl+f, но это любят делать не все, тем более кто-то может захотеть посмотреть весь не конкретный предмет, а какую-то часть. Слишком навороченный скрипт решил не делать. Хорошим решением стала javascript библиотека list.js (http://listjs.com/). Преимущество в том, что можно создавать списки на голом html - нужно добавить несколько строк кода,  и все. Если в браузере отключен java-script, список будет нормально показываться, просто фильтрация работать  не будет. Поясню для не знающих - некоторые решения предполагают формирование контента с помощью javascript, и при отключенных скриптах пользователя ожидала бы пустая страница.

Туториал очень простой, хватит умения пользоваться ctrl+c и ctrl+v.

Итак, что надо сделать:

1. Создаем div с определенным классом, например:

<div id="list">

</div>

2. В него вставляем поле для ввода и кнопку (кнопку необязательно):

<input class="search" placeholder="Поиск" />

<button class="sort" data-sort="name">

Сортировка по алфавиту

</button>

3. Добавляем саму таблицу (thead не обязательно, но желательно - поясню ниже), нужно добавить какой-нибудь класс элементу:

<table>

<thead>

<tr>

<th>Товар</th>

<th>Цена</th>

</tr>

</thead>

<tbody class="list">

<tr>

<td class="name">Хлеб</td>

<td class="price">30</td>

</tr>

<tr>

<td class="name">Сахар</td>

<td class="price">40</td>

</tr>

</tbody>

</table>

Ниже добавляем ссылку на библиотеку и сам код (файл скрипта должен лежать в одной папке с html файлом, либо можно подключить через cdn - http://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min...):

<script src="list.js"></script>

<script>

var options = {

valueNames: [ 'name', 'price' ] //должны совпадать с классами элементов td

};

var itemList = new List('list', options);//первое значение должно совпадать с именем класса элемента tbody

</script>

Пояснения в комментариях выше  (// в javascript означает однострочный комментарий)

Сохраняем.

Теперь при вводе в текстовое поле будут выводится только те строки таблицы, в которых содержится содержимое ввода (строки из thead не учитываются).

<button class="sort" data-sort="name"> // data-sort - тут задаем столбец, по которому при нажатии произведется сортировка по алфавиту.

Все. Мы создали скрипт для поиска по прайс-листу меньше чем за 5 минут.

Ссылка на скачивание библиотеки: http://listjs.com/overview/download/

"Живая" демка: https://masterprintspb.ru/prices/ (пролистните немного вниз или вот: https://masterprintspb.ru/prices/#zapravka )

Как видите, несмотря на несколько сотен позиций, фильтрация производится мгновенно, библиотека быстро работает и не конфликтует с jquery.

Но все-таки, есть просьба посмотреть и сказать свое мнение. Если у вас есть замечания, или заметили техническую проблему - пишите в комментах.

Это мой первый пост на эту тематику, как вам?

Код из поста: https://paste.ofcode.org/33sWJTpNBYbjWdMn99LdyBr