Как посчитать сумму товара JS в корзине

Question

Всем привет, у меня есть такой блок, в корзине есть Input со span + и -. Нужно что бы при увеличении кол-во товара, сумма товара менялась. Кто сможет подсказать, как реализовать это?

HTML

<div class="basket__content-price">
    <div class="num-block skin-2 basket__price-counter">
        <div class="num-in">
          <span class="minus dis" data-change="-1"></span>
          <input type="text" class="in-num" value="1">
          <span class="plus" data-change="+1"></span>
        </div>
      </div>
    <div class="info__content-price">
        <div class="content__item-price" data-sum='2199'>2 199</div>
        <span class="main-discount">- 56%
            <span class="content__item-oldprice">4 999</span>
        </span>
    </div>
</div>

JS - для input и кнопок

 $('.num-in span').click(function () {
    var $input = $(this).parents('.num-block').find('input.in-num');
  if($(this).hasClass('minus')) {
    var count = parseFloat($input.val()) - 1;
    count = count < 1 ? 1 : count;
    if (count < 2) {
      $(this).addClass('dis');
    }
    else {
      $(this).removeClass('dis');
    }
    $input.val(count);
  }
  else {
    var count = parseFloat($input.val()) + 1
    $input.val(count);
    if (count > 1) {
      $(this).parents('.num-block').find(('.minus')).removeClass('dis');
    }
  }
  
  $input.change();
  return false;
});

Answer 1

Можно было бы сделать это более солиднее, но я просто отвечу на этот кейс :) Тут суть такая, тебе просто нужна простая математики: Берем цену и умножаем на количество, вот и все ;)

$(".num-in span").click(function () {
    var $input = $(this).parents(".num-block").find("input.in-num");
    var price = $('.content__item-oldprice').text().replace(' ', '')*(1 - .56)
    if ($(this).hasClass("minus")) {
        var count = parseFloat($input.val()) - 1;
        count = count < 1 ? 1 : count;
        if (count < 2) {
            $(this).addClass("dis");
        } else {
            $(this).removeClass("dis");
        }
        $input.val(count);
        $(".content__item-price").text(count*(+price))
    } else {
        var count = parseFloat($input.val()) + 1;
        $input.val(count);
        $(".content__item-price").text(count*(+price))
        if (count > 1) {
            $(this).parents(".num-block").find(".minus").removeClass("dis");
        }
    }

    $input.change();
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="basket__content-price">
    <div class="num-block skin-2 basket__price-counter">
        <div class="num-in">
            <span class="minus dis" data-change="-1">-</span>
            <input type="text" class="in-num" value="1">
            <span class="plus" data-change="+1">+</span>
        </div>
    </div>
    <div class="info__content-price">
        <div class="content__item-price" data-sum='2199'>2 199</div>
        <span class="main-discount">- 56%
            <span class="content__item-oldprice">4 999</span>
        </span>
    </div>
</div>

Пример конечно извращение полное, но думаю для новичка сойдет. Главное пойми суть и лучше начни с нативного javascript-а, на jQuery и т.д. время еще будет. Удачи ;)

БЛОГ НА HUSL

Как посчитать сумму товара JS в корзине

Ответы (1 шт):