Табличные значения, управляемые Javascript - PullRequest
Новая
       7

Табличные значения, управляемые Javascript

0 голосов
/ 12 сентября 2018

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

Вот ДЕМО на JSFiddle

Таблица, которую необходимо динамически обновлять по мере того, как пользователи увеличивают или уменьшают количество продукта с помощью кнопок - или +: 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div id="pricing-summary">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Qty.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Unit Price</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Discount</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Total</div>
  </div>
  <div class="clearfix pt8"></div>
  <div id="pricing-breakdown">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$quantity</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">4.35</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$0.40</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$3.95</div>
  </div>
</div>

В рамках реализации мне нужно иметь возможность контролировать 2 разные переменные:

  1. Цена за единицу ($ 4,35)
  2. процент скидки (10% = (цена за единицу товара x скидка))

Управление этими двумя переменными позволит генерировать Дисконтированную стоимость (3,95 долл. США), Дисконт (0,43 долл. США) и Итого (Количество Х Дисконтная стоимость).

Буду признателен за помощь в решении этой проблемы.

1 Ответ

0 голосов
/ 12 сентября 2018

Я обновил копию вашей демоверсии скрипки. Пожалуйста, посмотрите, соответствует ли это вашему требованию: http://jsfiddle.net/m4n8xe3r/75/

Решение ниже: 

$(document).ready(function() {

  var quantitiy = 0;
    var unitPrice = 4.35;
  var discount = 0.1;

    var updatePriceTable = (quantity) => {
    totalPrice =  Number(quantity * unitPrice).toFixed(2);
    totalDiscount = Number(totalPrice * discount).toFixed(2);
    finalPrice = Number(totalPrice - totalDiscount).toFixed(2);
    $('#totalQuantityElem').text(quantity);
    $('#totalPriceElem').text(totalPrice);
    $('#totaldiscountElem').text(totalDiscount);
    $('#finalPriceElem').text(finalPrice);
    $('#totalPriceHeaderElem').text(totalPrice);
    $('#finalPriceHeaderElem').text(finalPrice);
  }


  $('.quantity-right-plus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) + 1;
        $('#quantity').val(quantity);
        updatePriceTable(quantity);
  });

  $('.quantity-left-minus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) - 1;
    if (quantity > 0) {
      $('#quantity').val(quantity);
      updatePriceTable(quantity);
    }  
  });

});
...