Пересчитать цены товара в зависимости от его количества?

Question

[Дмитрий]

Есть блок с ценами. Цена за единицу товара изменяется в зависимости от его количества.

Кол-во — Цена за ед.

• 1 шт. — 110 ₽
  
• 10 шт. — 105 ₽
  
• 20 шт. — 100 ₽
  

Есть необходимость написать поле ввода, в которое пользователь вводит количество товаров,
и всё это на лету пересчитывается и суммируется.

Собственно, вот худо-бедная реализация этого пересчёта.

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

<div data-quantity="1" data-price="115">
  <span class="quantity">1</span>
  <span class="price">115</span>
</div>

Заранее спасибо!

Answer 1

[Даниил Игоревич]

20 штук -- максимум? Больше уменьшаться цена не будет? Если так, то вам проще проверить, что ввёл пользователь, и если меньше 10, то 110р, а если больше или равно, но меньше 20, то 105р

Comments

[Дмитрий]

Не совсем так. Строчек с количеством и ценой может быть больше/меньше чем в моём примере. И значения там могут быть разные (всё из базы берётся).

Answer 2

[ThunderCat]

почему не массивы?
Тут вопрос откуда данные берутся, если из базы и передаются например через пхп - формируем массив из пар, например с такой структурой:
1[
[1],[110]
]
2[
[10],[105]
]
3[
[20],[100]
]
кодируем жсоном, присваиваем переменной в жаваскрипте и делаем жсондекод. Вуаля - у нас массив жс.
далее есть итератор массивов each. Думаю с логикой дальше справитесь.

Answer 3

[Aves]

const boundaries = {
  1: 110,
  10: 105,
  20: 100
};

const conversion = (boundaries, count) => Object
  .keys(boundaries)
  .sort((a, b) => a - b)
  .reduce((s, e) => (count >= +e ? boundaries[e] : s), null);
    
conversion(boundaries, 13); // 105