Sum string with JS in shopping mode

Question

Sum string with JS in shopping mode

Asked 6 years, 2 months ago

Viewed 101 times

0

I’m doing my first freelance, but I’m in trouble for not knowing too much about JS. http://johnsburger.com.br/wxsite31/johnsburger/ (It is still in process) When clicking buy, a modal appears, which would like checkbox etc to change the total value when selected, however, I can’t do it and I can’t find snippets that help me. Thanks in advance.

Edu, what have you tried? Enter the code of what you’ve already seen

– Ricardo Pontual

2018/07/31 at 20:11
Ricardo, I’m not able to enter the code here, but if you open the link click to buy any Burger, you will see that it pulls the modal as I did, does not pull the snack in specific value, and when it marks some check, does not change the value. I could not do javascript, so I decided to come here to try a direction to do from scratch again, because the deadline is today and I no longer know where to turn

– Edu Stadler

2018/07/31 at 20:18
Edu, it’s complicated like this. You don’t need to post ALL the page code in the question. Just the problem code, so we can understand what is being done.

– Sam

2018/07/31 at 21:04

3 answers

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by F. Versehgi • 11 points · Answer 1 · 2018-08-01T12:25:07+00:00

You must first prepare your HTML to perform the calculation.

Add a class for those who will participate in the summation
Add a value to inputs containing the value it represents in the final account
Add a class to the one that will receive the total.

After this is prepared, you can use Jquery, as I saw you are already using, to go through all inputs of the defined class and, if it is selected, add in the final account.

$(document).ready(function() {
  calcTotal();

  $('.price-variant').change(function() {
    calcTotal();
  });

});

function calcTotal() {
  var total = 0;

  $('.price-variant').each(function() {
    var isChecked = $(this).is(':checked');
    if(!!isChecked) {
      total += Number($(this).val());
    }
  });

  $('.total').text('R$ ' + total.toFixed(2));
}

I made a Plunk with the code working for you to see (I took advantage and put the code of the component below, where you add and remove some.. " additional")

https://next.plnkr.co/plunk/7Mv6RiK8W2x3g5fI

I hope you solve!

by Edu Stadler • 1 point · Answer 2 · 2018-08-01T18:15:11+00:00

I hope I’m not doing wrong asking here, because I’m having a lot of difficulties and having ease to learn asking here, I just need to understand where I apply to add or subtract in the respective buttons, to apply in the others. Let’s assume that each unit is $10.00

 (function() {
          'use strict';

          function ctrls() {
              var _this = this;

              this.counter = 0;
              this.els = {
                  decrement: document.querySelector('.ctrl-button-decrement'),
                  counter: {
                      container: document.querySelector('.ctrl-counter'),
                      num: document.querySelector('.ctrl-counter-num'),
                      input: document.querySelector('.ctrl-counter-input')
                  },
                  increment: document.querySelector('.ctrl-button-increment')
              };

              this.decrement = function() {
                  var counter = _this.getCounter();
                  var nextCounter = (_this.counter > 0) ? --counter: counter;
                  _this.setCounter(nextCounter);
              };

              this.increment = function() {
                  var counter = _this.getCounter();
                  var nextCounter = (counter < 9999999999) ? ++counter: counter;
                  _this.setCounter(nextCounter);
              };

              this.getCounter = function() {
                  return _this.counter;
              };

              this.setCounter = function(nextCounter) {
                  _this.counter = nextCounter;
              };

              this.debounce = function(callback) {
                  setTimeout(callback, 100);
              };

              this.render = function(hideClassName, visibleClassName) {
                  _this.els.counter.num.classList.add(hideClassName);

                  setTimeout(function() {
                      _this.els.counter.num.innerText = _this.getCounter();
                      _this.els.counter.input.value = _this.getCounter();
                      _this.els.counter.num.classList.add(visibleClassName);
                  },
                  100);

                  setTimeout(function() {
                      _this.els.counter.num.classList.remove(hideClassName);
                      _this.els.counter.num.classList.remove(visibleClassName);
                  },
                  200);
              };

              this.ready = function() {
                  _this.els.decrement.addEventListener('click',
                  function() {
                      _this.debounce(function() {
                          _this.decrement();
                          _this.render('is-decrement-hide', 'is-decrement-visible');
                      });
                  });

                  _this.els.increment.addEventListener('click',
                  function() {
                      _this.debounce(function() {
                          _this.increment();
                          _this.render('is-increment-hide', 'is-increment-visible');
                      });
                  });

                  _this.els.counter.input.addEventListener('input',
                  function(e) {
                      var parseValue = parseInt(e.target.value);
                      if (!isNaN(parseValue) && parseValue >= 0) {
                          _this.setCounter(parseValue);
                          _this.render();
                      }
                  });

                  _this.els.counter.input.addEventListener('focus',
                  function(e) {
                      _this.els.counter.container.classList.add('is-input');
                  });

                  _this.els.counter.input.addEventListener('blur',
                  function(e) {
                      _this.els.counter.container.classList.remove('is-input');
                      _this.render();
                  });
              };
          };

          // init
          var controls = new ctrls();
          document.addEventListener('DOMContentLoaded', controls.ready);
      })();
      function calcTotal() {
  var total = 0;

  $('.price-variant').each(function() {
    var isChecked = $(this).is(':checked');
    if(!!isChecked) {
      total += Number($(this).val());
    }
  });

  $('.price-variant-text').each(function() {
    total += Number($(this).data('unitprice')) * Number($(this).val());
  });

  $('.total').text('R$ ' + total.toFixed(2));
}

.quant {
  text-align: center;
}

.ctrl {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 50px;
  background-color: #fff;
  border-radius: 5px;
  font-size: 30px;
}
.ctrl-counter {
  position: relative;
  width: 60px;
  height: 100px;
  color: #333C48;
  text-align: center;
  overflow: hidden;
}
.ctrl-counter.is-input .ctrl-counter-num {
  visability: hidden;
  opacity: 0;
  -webkit-transition: opacity 100ms ease-in;
  transition: opacity 100ms ease-in;
}
.ctrl-counter.is-input .ctrl-counter-input {
  visability: visible;
  opacity: 1;
  -webkit-transition: opacity 100ms ease-in;
  transition: opacity 100ms ease-in;
}
.ctrl-counter-input {
  font-family: 'Lato', sans-serif;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
  box-shadow: none;
  outline: none;
  border: none;
  color: #333C48;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  visability: hidden;
  opacity: 0;
  -webkit-transition: opacity 100ms ease-in;
  transition: opacity 100ms ease-in;
}
.ctrl-counter-num {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 100px;
  visability: visible;
  opacity: 1;
  -webkit-transition: opacity 100ms ease-in;
  transition: opacity 100ms ease-in;
}
.ctrl-counter-num.is-increment-hide {
  opacity: 0;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-animation: increment-prev 100ms ease-in;
  animation: increment-prev 100ms ease-in;
}
.ctrl-counter-num.is-increment-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-animation: increment-next 100ms ease-out;
  animation: increment-next 100ms ease-out;
}
.ctrl-counter-num.is-decrement-hide {
  opacity: 0;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-animation: decrement-prev 100ms ease-in;
  animation: decrement-prev 100ms ease-in;
}
.ctrl-counter-num.is-decrement-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-animation: decrement-next 100ms ease-out;
  animation: decrement-next 100ms ease-out;
}
.ctrl-button {
  width: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  background-color: #4C4C4C;
  -webkit-transition: background-color 100ms ease-in;
  transition: background-color 100ms ease-in;
}
.ctrl-button:hover {
  background-color: #90a2b0;
  -webkit-transition: background-color 100ms ease-in;
  transition: background-color 100ms ease-in;
}
.ctrl-button:active {
  background-color: #778996;
  -webkit-transition: background-color 100ms ease-in;
  transition: background-color 100ms ease-in;
}
.ctrl-button-decrement {
  border-radius: 50px;
}
.ctrl-button-increment {
  border-radius: 50px;
}
@-webkit-keyframes decrement-prev {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  } @keyframes decrement-prev {
    from {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    } @-webkit-keyframes decrement-next {
      from {
        opacity: 0;
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
      }
      } @keyframes decrement-next {
        from {
          opacity: 0;
          -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
        }
        } @-webkit-keyframes increment-prev {
          from {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }
          } @keyframes increment-prev {
            from {
              opacity: 1;
              -webkit-transform: translateY(0);
              transform: translateY(0);
            }
            } @-webkit-keyframes increment-next {
              from {
                opacity: 0;
                -webkit-transform: translateY(50px);
                transform: translateY(50px);
              }
              } @keyframes increment-next {
                from {
                  opacity: 0;
                  -webkit-transform: translateY(50px);
                  transform: translateY(50px);
                }
              }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quant">
												<h4>QUANTOS IGUAIS A ESSE VOCÊ QUER?</h4>
												<div class='ctrl'>
													<div class='ctrl-button ctrl-button-decrement'>-</div>
													<div class='ctrl-counter'>
														<input class='ctrl-counter-input' maxlength='10' type='text' value='1'>
														<div class='ctrl-counter-num'>0</div>
													</div>
													<div class='ctrl-button ctrl-button-increment'>+</div>
												</div>
											</div>
                        <h1>Total: <span class="total"></span> </h1>

by Edu Stadler • 1 point · Answer 3 · 2018-07-31T21:52:30+00:00

I would like to enter the values in total, and at the same time subtract when unchecking, there are oputros check in the modal, but I believe understanding that I can solve today still.

.margincheck {
  display: block;
  padding: 13px 0 0 10px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}


/*------Check P-----------*/

.control-group {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 200px;
  height: 210px;
  margin: 10px;
}

.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 2px;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 28px;
  width: 28px;
  border: 2px solid #13A000;
  background: #ffffff;
}

.control--radio .control__indicator {
  border-radius: 50%;
}

.control:hover input~.control__indicator,
.control input:focus~.control__indicator {
  background: #fff;
}

.control input:checked~.control__indicator {
  background: #13a000;
}

.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
  background: #13a000;
}

.control input:disabled~.control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}

.control input:checked~.control__indicator:after {
  display: block;
}

.control--checkbox .control__indicator:after {
  content: "\f00c";
  font-family: FontAwesome;
  color: #fff;
  font-size: 27px;
  position: absolute;
  border-top-style: none;
  text-align: center;
  border-right-style: none;
  left: -0.04rem;
  top: -6px;
}

.control--checkbox input:disabled~.control__indicator:after {
  border-color: #7b7b7b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="turbo">
  <h4>QUE TAL TURBINAR SEU BURGER?</h4>
  <p>Selecione os itens para acrescentar no seu burger.</p>
  <label class="control control--checkbox">
													<span class="margincheck">COM hambúrguer 150g extra + <span class="price">R$ 6,00</span></span>							
													<input type="checkbox" checked="checked"/>
													<div class="control__indicator"></div>
												</label>
  <label class="control control--checkbox">
													<span class="margincheck">COM ovo + <span class="price">R$ 2,00</span></span>
													<input type="checkbox"/>
													<div class="control__indicator"></div>
												</label>
  <label class="control control--checkbox">
													<span class="margincheck">COM cebola crispy + <span class="price">R$ 3,00</span></span>
													<input type="checkbox"/>
													<div class="control__indicator"></div>
												</label>
  <label class="control control--checkbox">
													<span class="margincheck">COM bacon crocante + <span class="price">R$ 4,00</span></span>
													<input type="checkbox"/>
													<div class="control__indicator"></div>
												</label>
  <label class="control control--checkbox">
													<span class="margincheck">COM cream cheese Philadelphia + <span class="price">R$ 6,00</span></span>
													<input type="checkbox"/>
													<div class="control__indicator"></div>
												</label>
</div>


<div class="total"> Total: R$...
  </div