I'm doing my first freelance, but I'm having trouble because I do not know much about JS. link (Still in process) when I click on buy, a modal appears, which I would like the checkboxes to change the total value to be selected, however I can not do this and I can not find snippets to help me. Thanks in advance.
Add string with JS in shopping mode [closed]
0
asked by anonymous 31.07.2018 / 22:06
3 answers
1
You need to prepare your HTML before doing the calculation.
After this is done, you can use Jquery, as I saw it already using, to go through all the inputs of the defined class and, if it is selected, add to 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 it and put the code of the component below, where you add and remove some "additional")
I hope it solves!
01.08.2018 / 14:25
0
I would like to insert the values in the total, and at the same time subtract when unchecking, there are oputros check in the modal, but I believe that understanding this I can solve it still today.
.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><divclass="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
31.07.2018 / 23:52
0
I hope I'm not doing wrong by asking here, because I'm having a lot of difficulties and being able to learn by asking here, I only 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><divclass="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>
01.08.2018 / 20:15