Search code examples
javascriptjqueryadditionmultiplication

Multiply and add all values of a price with quantity in jQuery

I made a fiddle to exactly show what i need. Simply show the total price of all clicked items and their quantity. All items and their respective attributes are generated dynamically so every item has its uniqe jquery script. While they are all the same I am posting one of them. They are working fine. There is just one thing missing on the end of each script to show the total price and add them all together to one total price ID.

http://jsfiddle.net/d1kztxu8/

function incrementValue2047() {
  var value = parseInt(document.getElementById("qty2047").value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById("qty2047").value = value;
  $("#qty-counter2047").addClass("active");
  $("#qty-counter-buttons2047").addClass("active");
}

function clickup2047() {
  var el = document.getElementById("qty2047");
  el.value = Number(el.value) + 1;
  if (el.value == 10) return false;
}

function clickdown2047() {
  var el = document.getElementById("qty2047");
  if (el.value == 0) return false;
  el.value = Number(el.value) - 1;
  if (document.getElementById("qty2047").value == "0") {
    $("#qty-counter-buttons2047").removeClass("active");
    $("#qty-counter2047").removeClass("active");
    $("#menu_attr_checkbox_12_2047").prop("checked", false);
  }
}
Solution

  • You need to actually calculate and update the total.

    I added a class (order-total) to the <h2> element that holds the total value. This is the only change the the HTML that I made. I tried to keep as much of your original code intact, so that you could compare it to your own logic.

    I also converted most of the document.getElementById and .value logic to the jQuery equivalent. If you are using jQuery, it is all or nothing. Do not try to mix native selector calls with jQuery. I also generified the up/down and increment functions to accept an id.

    These could further be cleaned-up if you stored a data-attribute on the buttons that reference the elements. This will allow you to remove all the functions at the bottom that just pass in an id.

    Note: The data-price_plus value on the first item is wrong. It is set to 1.40 instead of 1.00.

    function incrementValue(id) {
  var $el = $('#qty' + id);
  var val = Number($el.val());
  val = isNaN(val) ? 0 : val;
  $el.val(val + 1);
  $('#qty-counter' + id).addClass('active');
  $('#qty-counter-buttons' + id).addClass('active');
  calculateTotal();
};

function clickUp(id) {
  var $el = $('#qty' + id);
  var val = Number($el.val());
  console.log(val);
  if (val >= 10) return false;
  $el.val(val + 1);
  calculateTotal();
}

function clickDown(id) {
  var $el = $('#qty' + id);
  var val = Number($el.val());
  if (val < 1) return false;
  $el.val(val - 1);
  if ($('#qty' + id).val() === '0') {
    $('#qty-counter-buttons' + id).removeClass('active');
    $('#qty-counter' + id).removeClass('active');
    $('#menu_attr_checkbox_12_' + id).prop('checked', false);
  }
  calculateTotal();
}

function calculateTotal() {
  var total = 0;
  $('.qty-check').each(function() {
    var count = Number($(this).find('.qty-count').val());
    var price = Number($(this).find('.price').text().replace(/[^\d\.]+/g, ''));
    total += (price * count);
  });
  $('.order-total').text(total.toFixed(2) + ' €');
}

function incrementValue2047() { incrementValue(2047) }
function incrementValue2048() { incrementValue(2048) }
function incrementValue2049() { incrementValue(2049) }

function clickup2047() { clickUp(2047) }
function clickup2048() { clickUp(2048) }
function clickup2049() { clickUp(2049) }

function clickdown2047() { clickDown(2047) }
function clickdown2048() { clickDown(2048) }
function clickdown2049() { clickDown(2049) }
    .attr-group {
  width: 400px;
  margin: 0 auto;
  display: table
}

.checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
}

.checkbox-input {
  display: none;
}

.checkbox label {
  width: 100%;
  margin: 0;
  padding-left: 30px !important;
  display: flex;
  font-weight: 300;
  height: auto;
  min-height: 30px;
  justify-content: space-between;
  align-items: center;
}

.checkbox-label:before {
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin: 0px;
  border-radius: 0.5rem;
  text-align: center;
  background: #f2f4f5;
  position: absolute;
  margin-left: -30px;
  border: 1px solid #141414;
}

.checkbox-input:checked+.checkbox-label:before {
  content: "\2713";
  font-size: 18px;
  color: #fff;
  background: #515D67;
  border-color: #515D67;
}

.qty-count {
  min-width: 25px;
  max-width: 25px;
  min-height: 25px;
  max-height: 25px;
  border-radius: 1rem;
  line-height: 15px;
  text-align: center;
  font-size: 1.2rem;
  padding: 0 !important;
  margin-right: 1rem;
}

.qty-check label {
  padding-left: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start;
}

.qty-check .name {
  padding-right: 90px;
}

.qty-check label:before {
  display: none !important;
}

.qty-check .checkbox-input:checked+.checkbox-label .qty-count {
  background: #515D67 !important;
  color: #fff !important;
}

.qty-counter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: none;
}

.qty-counter.active {
  display: block;
}

.counter-buttons {
  position: absolute;
  right: 50px;
  min-width: 50px;
  z-index: 4;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #dee2e5;
  display: none;
  overflow: hidden;
}

.counter-buttons.active {
  display: flex;
}

.counter-buttons a {
  min-width: 30px;
  height: 20px;
  font-size: 1.8rem;
  line-height: 20px;
  text-align: center;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.counter-buttons a:hover {
  background: #f2f4f5;
}

.price {
  margin-left: auto
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="attr-group">
  <!-- Item #2047 ~ CocaCola ~ 1.00 € -->
  <div class="checkbox qty-check">
    <span class="qty-counter" data-amount="1.40" id="qty-counter2047" onclick="incrementValue2047()"></span>
    <span id="qty-counter-buttons2047" class="counter-buttons">
      <a onclick="clickup2047()">+</a><a onclick="clickdown2047()">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2047" id="menu_attr_checkbox_12_2047" class="checkbox-input menu_attribute_sum" data-price_plus="1.4" form="addedBasketFormOptions">
    <label for="menu_attr_checkbox_12_2047" class="checkbox-label" onclick="incrementValue2047()">
      <input type="text" value="0" name="menu_attribute_qty[2047]" id="qty2047" class="qty-count">
      <span class="name mr-auto">CocaCola</span>
      <span class="price ml-auto">1.00 €</span>
    </label>
  </div>
  <!-- Item #2048 ~ Fanta ~ 1.40 € -->
  <div class="checkbox qty-check">
    <span class="qty-counter" data-amount="1.40" id="qty-counter2048" onclick="incrementValue2048()"></span>
    <span id="qty-counter-buttons2048" class="counter-buttons">
      <a onclick="clickup2048()">+</a><a onclick="clickdown2048()">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2048" id="menu_attr_checkbox_12_2048" class="checkbox-input menu_attribute_sum" data-price_plus="1.4" form="addedBasketFormOptions">
    <label for="menu_attr_checkbox_12_2048" class="checkbox-label" onclick="incrementValue2048()">
      <input type="text" value="0" name="menu_attribute_qty[2048]" id="qty2048" class="qty-count">
      <span class="name mr-auto">Fanta</span>
      <span class="price ml-auto">1.40 €</span>
    </label>
  </div>
  <!-- Item #2049 ~ Mythos ~ 1.40 € -->
  <div class="checkbox qty-check">
    <span class="qty-counter" data-amount="1.40" id="qty-counter2049" onclick="incrementValue2049()"></span>
    <span id="qty-counter-buttons2049" class="counter-buttons">
      <a onclick="clickup2049()">+</a><a onclick="clickdown2049()">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2049" id="menu_attr_checkbox_12_2049" class="checkbox-input menu_attribute_sum" data-price_plus="1.4" form="addedBasketFormOptions">
    <label for="menu_attr_checkbox_12_2049" class="checkbox-label" onclick="incrementValue2049()">
      <input type="text" value="0" name="menu_attribute_qty[2049]" id="qty2049" class="qty-count">
      <span class="name mr-auto">Mythos</span>
      <span class="price ml-auto">1.40 €</span>
    </label>
  </div>
  <!-- Total -->
  <div style="display:flex;width:100%; justify-content:space-between">
    <h2>Total</h2>
    <h2 class="order-total" style:margin-left:auto;>0 €</h2>
  </div>
</div>