Level 102
Where is the shipping cost defined in the shown code? If you havent added it, you can add it to a hidden input.
Just be sure to calculate it again in the backend. The user might edit it
Oct 13, 2022
8
Level 1
Javascript : shipping cost
Hi, i'm currently is developing a website. The website that i develop has a create new booking, so when the admin want to create the new booking, admin must fill the name of the user, and input the item that user want, with how much quantity that user want, and shipping cost. So the total price would be
Total price = (price * quantity) + shipping cost
How can i do that??
The javascript :
calculateAndShowPrice: function (qtt) {
var itemService = this.getSelectedItemObject();
var self = this;
if (!this.isDefinedAndNotEmpty(qtt)) {
$("#inQtt").val(1);
qtt = 1;
}
itemService.getCalculatedPrice(function (totalPrice) {
self.showPrice(totalPrice);
}, function () {
var totalPrice = self.getHiddenPrice() * qtt;
self.showPrice(totalPrice);
});
}
The blade file :
<div class="guest-wrapper d-flex justify-content-between align-items-center cls-detail-item">
<div class="flex-grow-1">
<label id="lblQtt">{{ __('Quantity') }}</label>
</div>
<div class="flex-shrink-0">
<div class="input-number-group">
<span class="input"><input id="inQtt" type="number" v-model="quantity"
min="1" /></span>
</div>
</div>
</div>
<div class="guest-wrapper d-flex justify-content-between align-items-center cls-detail-item">
<div class="flex-grow-1">
<label id="lblSC">{{ __('Shipping Cost') }}</label>
</div>
<div class="flex-shrink-0">
<div class="input-number-group">
<span class="input"><input id="inpSC" type="number" v-model="quantity"
min="1" /></span>
</div>
</div>
</div>
Level 1
@Sinnbeck i didn't add it yet because i tried like this
calculateAndShowPrice: function (qtt, sc) {
var itemService = this.getSelectedItemObject();
var self = this;
if (!this.isDefinedAndNotEmpty(qtt)) {
$("#inQtt").val(1);
qtt = 1;
}
if (!this.isDefinedAndNotEmpty(sc)) {
$("#inpSC").val(1);
sc= 1;
}
itemService.getCalculatedPrice(function (totalPrice) {
self.showPrice(totalPrice);
}, function () {
var totalPrice = (self.getHiddenPrice() * qtt) + sc;
self.showPrice(totalPrice);
});
}
And it didn't work.
Level 102
Level 1
@Sinnbeck the total price didn't add with the shipping cost, still with quantity. And when i tried to replace the shipping cost from 1 to 25,000. The value didn't change. It's stuck on 45,001. So the total price is still 45,001
Level 102
@Nicho Here. I made a very simple example. https://jsfiddle.net/nbjLvt5q/
(100 * 5) + 1000
Level 1
@Sinnbeck Ok i tried to play with it(sorry) for testing. I rewrite the code like this The HTML :
<div class="guest-wrapper d-flex justify-content-between align-items-center cls-detail-item">
<div class="flex-grow-1">
<label id="lblQtt">Quantity</label>
</div>
<div class="flex-shrink-0">
<div class="input-number-group">
<span class="input"><input value="2" id="inQtt" type="number" v-model="quantity"
min="1" /></span>
</div>
</div>
</div>
<div class="guest-wrapper d-flex justify-content-between align-items-center cls-detail-item">
<div class="flex-grow-1">
<label id="lblSC">Shipping Cost</label>
</div>
<div class="flex-shrink-0">
<div class="input-number-group">
<span class="input"><input value="45000" id="inpSC" type="number" v-model="quantity"
min="1" /></span>
</div>
</div>
</div>
The javascript :
var qtt = $('#inQtt').val()
var price = 45000
var sc = $('#inpSC').val()
var totalPrice = (price * qtt) + sc;
alert(totalPrice);
Strangely the output is : 9000045000 The output should be : 135000
Level 1
@nicho Can you try this . This occurs with JS . It thinks we are asking to concatenate the variables. So we must be sure of typecasting them when it comes to arithmatic functions.
var qtt = parseInt($('#inQtt').val());
var price = 45000
var sc =parseInt( $('#inpSC').val());
var totalPrice = (price * qtt) + sc;
alert(totalPrice);
Level 1
@priyalaks I test it out and it work. Thank you sir for the help :D
Please or to participate in this conversation.