嗨伙计们,我正在建立一个简单的电子商务网站,而不是使用Shopify,我已经制作了所有简单的前端位,但我似乎无法根据客户选择的产品数量来更新总价。
到目前为止,如果客户“添加到购物车”,那么购物车中的价格和总数将更新1,但如果他们想要选择2或更多它不起作用,我想知道如何让它工作
HTML:
<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button> //Button to add to cart
<div class="input-group plus-minus-input"> //Quantity of product
<div class="input-group-button">
<button class="button hollow circle1 btn btn-primary"
data-field="quantity" data-quantity="minus" type="button">
<i aria-hidden="true" class="fa fa-minus"></i>
</button>
</div>
<input class="input-group-field" name="quantity" type="number" value="0">
<div class="input-group-button">
<button class="button hollow circle2 btn btn-primary"
data-field="quantity" data-quantity="plus" type="button">
<i aria-hidden="true" class="fa fa-plus"></i>
</button>
</div>
</div>
<p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit"> //Quantity in cart
使用Javascript:
//Quanity animation when the user clicks + or -
jQuery(document).ready(function(){
$('[data-quantity="plus"]').click(function(e){
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$('[data-quantity="minus"]').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
});
//When the user clicks add to cart this will update the total price and the quantity in the cart
var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
$(".add-to-cart").click(function(){
currentItems++;
var totalPrice = currentItems * cartPrice;
$(".cart-badge").text(currentItems);
$(".cartPrice").text(totalPrice + " kr")
});
});
所以,我只想弄清楚当用户点击+添加更多产品时,我希望价格更新为:所以如果用户想要5个产品,它将做5 * 565等。
谢谢
当您单击“添加到购物车”时,没有任何内容正在检索当前数量,因此它始终是静态的。通过从数量输入框中检索值,您的数学运算将正常工作。
currentItems = $("input.input-group-field[name='quantity']").val();
//Quanity animation when the user clicks + or -
jQuery(document).ready(function(){
$('[data-quantity="plus"]').click(function(e){
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$('[data-quantity="minus"]').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
});
//When the user clicks add to cart this will update the total price and the quantity in the cart
var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
$(".add-to-cart").click(function(){
currentItems = $("input.input-group-field[name='quantity']").val();
var totalPrice = currentItems * cartPrice;
$(".cart-badge").text(currentItems);
$(".cartPrice").text(totalPrice + " kr")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button> //Button to add to cart
<div class="input-group plus-minus-input"> //Quantity of product
<div class="input-group-button">
<button class="button hollow circle1 btn btn-primary" data-field="quantity" data-quantity="minus" type="button">-<i aria-hidden="true" class="fa fa-minus"></i></button>
</div>
<input class="input-group-field" name="quantity" type="number" value="0">
<div class="input-group-button">
<button class="button hollow circle2 btn btn-primary" data-field="quantity" data-quantity="plus" type="button">+<i aria-hidden="true" class="fa fa-plus"></i></button>
</div>
</div>
<p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit"> //Quantity in cart