Как при изменении модификации и количества товара динамически пересчитывать цену?

Question

[brainexplosion]

Есть товар, у которого есть параметры. Как при изменении модификации и количества товара динамически пересчитывать цену?

Список цен представлен объектом:

{
 101: {
	'small:green': 100,
	'small:red': 150,
	'medium:green': 200,
	'medium:red': 250,
	'large:green': 300,
	'large:red': 350,
	},
 102: {
	'42:black': 100,
	'42:white': 150,
	'44:black': 200,
	'44:white': 250,
	'48:black': 300,
	'48:white': 350,
	}
}

https://codepen.io/anon/pen/XoWwyo

Answer 1

[0xD34F]

Делаете функцию полного пересчёта суммы, вызываете её при взаимодействиях пользователя с элементами внутри формы (события change, input, обработчик клика по кнопкам изменения количества). Как-то так:

<form>
  <div class="form-group">
    <label for="size">Size</label>
    <select class="form-control" id="size">
      <option>42</option>
      <option>44</option>
      <option>48</option>
    </select>
  </div>
  <div class="form-group">
    <label for="color">Color</label>
    <select class="form-control" id="color">
      <option>black</option>
      <option>white</option>
    </select>
  </div>
  <div class="form-group">
    <button type="button" data-change="-1">-</button>
    <input id="amount" type="text" value="1" min="0" max="10" />
    <button type="button" data-change="+1">+</button>
  </div>
</form>
<h4>Total Price: <strong id="total"></strong></h4>

const prices =  {
  '42:black': 100,
  '42:white': 150,
  '44:black': 200,
  '44:white': 250,
  '48:black': 300,
  '48:white': 350,
};

function recalc() {
  const size = document.querySelector('#size').value;
  const color = document.querySelector('#color').value;
  const amount = document.querySelector('#amount').value;
  const price = `${prices[`${size}:${color}`] * amount} р.`;

  document.querySelector('#total').textContent = price;
}

recalc();


const form = document.querySelector('form');
form.addEventListener('input', recalc);
form.addEventListener('click', ({ target: t }) => {
  const change = +t.dataset.change;
  if (change) {
    const input = t.closest('.form-group').querySelector('input');
    input.value = Math.max(0, input.min, Math.min(input.max, +input.value + change));
    input.dispatchEvent(new Event('input', { bubbles: true }));
  }
});

Comments

[brainexplosion]

Спасибо огромное:)