我有这个购物车代码,其中包含带有一堆附加食品的食物。如果选择了插件,则将其数组形式的名称和值添加到按钮的数据属性中。
点击购物车中的按钮后,产品及其附加组件便被添加到浏览器的localStorage中。
但是我想使用displayCart()
函数以及父产品将addons(object array)输出到html,但是我没有那么幸运。
这是代码::
// ************************************************
// Shopping Cart API
// ************************************************
var shoppingCart = (function() {
// =============================
// Private methods and propeties
// =============================
cart = [];
// Constructor
function Item(name, price, count, addons, id) {
this.name = name;
this.price = price;
this.count = count;
this.addons = addons;
this.id = id;
}
// Save cart
function saveCart() {
localStorage.setItem('shoppingCart', JSON.stringify(cart));
}
// Load cart
function loadCart() {
cart = JSON.parse(localStorage.getItem('shoppingCart'));
}
if (localStorage.getItem("shoppingCart") != null) {
loadCart();
}
// =============================
// Public methods and propeties
// =============================
var obj = {};
// Add to cart
obj.addItemToCart = function(name, price, count, addons, id) {
for(var item in cart) {
if(cart[item].name === name) {
cart[item].count ++;
saveCart();
return;
}
}
var item = new Item(name, price, count, addons, id);
cart.push(item);
saveCart();
}
// Set count from item
obj.setCountForItem = function(name, count) {
for(var i in cart) {
if (cart[i].name === name) {
cart[i].count = count;
break;
}
}
};
// Remove item from cart
obj.removeItemFromCart = function(name) {
for(var item in cart) {
if(cart[item].name === name) {
cart[item].count --;
if(cart[item].count === 0) {
cart.splice(item, 1);
}
break;
}
}
saveCart();
}
// Remove all items from cart
obj.removeItemFromCartAll = function(name) {
for(var item in cart) {
if(cart[item].name === name) {
cart.splice(item, 1);
break;
}
}
saveCart();
}
// Clear cart
obj.clearCart = function() {
cart = [];
saveCart();
}
// Count cart
obj.totalCount = function() {
var cartArray = shoppingCart.listCart();
var totalCount = cartArray.length;
return totalCount;
}
// Total cart
obj.totalCart = function() {
var totalCart = 0;
for(var item in cart) {
totalCart += cart[item].price * cart[item].count;
}
return Number(totalCart.toFixed(2));
}
// List cart
obj.listCart = function() {
var cartCopy = [];
for(i in cart) {
item = cart[i];
itemCopy = {};
for(p in item) {
itemCopy[p] = item[p];
}
itemCopy.total = Number(item.price * item.count).toFixed(2);
cartCopy.push(itemCopy)
}
return cartCopy;
}
// cart : Array
// Item : Object/Class
// addItemToCart : Function
// removeItemFromCart : Function
// removeItemFromCartAll : Function
// clearCart : Function
// countCart : Function
// totalCart : Function
// listCart : Function
// saveCart : Function
// loadCart : Function
return obj;
})();
// *****************************************
// Triggers / Events
// *****************************************
// Add item
$('.add-to-cart').click(function(event) {
event.preventDefault();
var name = $(this).data('name');
var addons = $(this).data('addons');
var price = Number($(this).data('id'));
var id = Number($(this).data('price'));
var count = Number($(this).data('count'));
shoppingCart.addItemToCart(name, price, count, addons, id);
displayCart();
iconCart();
});
// Clear items
$('.clear-cart').click(function() {
shoppingCart.clearCart();
displayCart();
var list = document.getElementsByClassName("tinker");
for(var i = list.length - 1; 0 <= i; i--) {
if(list[i] && list[i].parentElement) {
list[i].parentElement.removeChild(list[i]);
}
}
});
function displayCart() {
var cartArray = shoppingCart.listCart();
var shipping = 120;
var output = "";
for(var i in cartArray) {
output += "<tr>"
+ "<td>" + cartArray[i].name + "</td>"
+ "<td>(" + cartArray[i].price + ")</td>"
+ "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
+ "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
+ "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>"
+ "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
+ " = "
+ "<td>" + cartArray[i].total + "</td>"
+ "</tr>";
}
$('.show-cart').html(output);
$('.PandD').html(shipping);
$('.total-cart').html(shoppingCart.totalCart() + shipping);
$('.total-count').html(shoppingCart.totalCount());
}
//create badge
function iconCart() {
var cartArray = shoppingCart.listCart();
var output = "";
for(var a in cartArray) {
output = "<badge class='badge badge-danger tinker' id='tinker' data-name=" + cartArray[a].name + ">"+ cartArray[a].count +"</badge>"
if ($('.added-to-cart[data-name="' + cartArray[a].name + '" ]')) {
$('.added-to-cart[data-name="' + cartArray[a].name + '" ]').html(output);
}
}
}
// Delete item button
$('.show-cart').on("click", ".delete-item", function(event) {
var name = $(this).data('name')
shoppingCart.removeItemFromCartAll(name);
displayCart();
iconCart();
if ($('#tinker[data-name="' + name + '" ]')) {
var badge = $('#tinker[data-name="' + name + '" ]');
$(badge).remove();
}
})
// -1
$('.show-cart').on("click", ".minus-item", function(event) {
var name = $(this).data('name')
shoppingCart.removeItemFromCart(name);
displayCart();
iconCart();
})
// +1
$('.show-cart').on("click", ".plus-item", function(event) {
var name = $(this).data('name')
shoppingCart.addItemToCart(name);
displayCart();
iconCart();
})
// Item count input
$('.show-cart').on("change", ".item-count", function(event) {
var name = $(this).data('name');
var count = Number($(this).val());
shoppingCart.setCountForItem(name, count);
displayCart();
iconCart();
});
displayCart();
iconCart();
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="row">
<div class="col">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Bread</h4>
<p class="card-text">Price: $0.5</p>
<div id="CheckBoxList">
<label><input type="checkbox" id='game0' value="1" name="Ketchup" data-d="b" data-in="num">Ketchup</label>
<label><input type="checkbox" id='game1' value="2" name="Mustard" data-d="b" data-in="num">Mustard</label>
<label><input type="checkbox" id='game2' value="3" name="Sardine" data-d="b" data-in="num">Sardine</label>
<label><input type="checkbox" id='game3' value="4" name="Fried Eggs" data-d="b" data-in="num">Fried Eggs</label>
<label><input type="checkbox" id='game4' value="5" name="Honey" data-d="b" data-in="num">Honey</label>
</div>
<h2>Orange Juice</h2>
<div id="RadioButtonList">
<label><input type="radio" id='pad' value="6" data-d="b" name="Orange Juice" data-in="num">Small Cup</label>
<label><input type="radio" id='pad1' value="7" data-d="b" name="Orange Juice" data-in="num">Medium Cup</label>
<label><input type="radio" id='pad2' value="8" data-d="b" name="Orange Juice" data-in="num">Big Cup</label>
</div>
<code id="demo"></code>
total cost<input type="text" id="totalcost" value="">
<button id="add-to-cart" data-id='1' data-name="Bread" data-addons="addons" data-addons-price="0" data-price="0.5" data-count="1" class="add-to-cart btn btn-primary">Add to cart</button>
</div>
</div>
</div>
</div>
到目前为止,我已经可以使用功能displayCart()
输出父产品。但我希望附加组件具有自己的Row?
这些天,是React,Angular和Vue。
我是从您现在使用Knockout的地方开始的,早在那些库/框架问世之前。我仍然认为这是从您的位置到现在流行的成熟框架的良好垫脚石。
我建议进行淘汰赛在线演示/教程here。大约需要30分钟,它将改变您对这个问题的看法。
您正在解决错误的问题。这个问题已经通过使用它的库解决了很多次。您目前的问题是您不了解它们或如何使用它们。
Knockout不需要像Angular和React一样花几周的时间来学习或配置。您可以花一些时间研究淘汰赛,从而解决这个问题,不仅是解决现在的问题,而且还解决此类问题。
即使到现在,当我必须构建前端时,也要花几天的时间才能恢复使用最流行(且快速发展)的前端框架中的最新功能。但是Knockout仍然很简单,并且非常接近您的迫在眉睫的问题,我相信您可以在通过在线互动教程后将其视为解决方案-而不是另一个更大的问题,如学习React。
可能稍后再来。