我一直在尝试在我的电子商务中实现购物车功能。在这个购物车功能中,每当我添加一个项目时,如果它已经存在于购物车中,我们必须增加数量。一切正常,但每当我刷新浏览器或添加新项时,值就会恢复。我该如何解决这个问题。
我的前端是灰烬。js v3.4.4和后端Ruby on Rails v7.0.2.3
我用于本地存储的插件是ember localstorage插件
下面我附加了一段代码,说明如何将元素添加到购物车中
// app/service/shopping-cart.js
addItem(itemId){
const itemArray = this.itemsIds.content;
const index = itemArray.findIndex(object => object.id === itemId.id);
const itemElement = itemArray[index];
console.log(itemElement);
if(itemElement){
console.log(itemId);
const quantityOfAddedElement = parseInt(itemId.quantity) + parseInt(itemElement.quantity);
console.log(quantityOfAddedElement);
const totalPrice = parseInt(itemId.price) + parseInt(itemElement.price);
itemElement.quantity = quantityOfAddedElement;
itemElement.price = totalPrice;
console.log(quantityOfAddedElement);
}
else{
this.get('itemsIds').addObject((itemId));
}
}
// app/controller/product.js
actions:{
addToItem(model){
const id = model.id;
const title = model.title;
const quantity = this.quantity;
const images = model.images;
const price = quantity * model.price;
const dbQuantity = model.quantity;
this.shoppingCart.addItem({
id,
title,
price,
quantity,
images,
});
},
}
1条答案
按热度按时间daolsyd01#
您可以在Ember中读取和写入本地存储。js使用普通JavaScript:
此外,您应该在另一个浏览器选项卡中侦听由于更改本地存储而导致的本地存储事件,并相应地更新本地状态。
为了简化这一切,我写了ember-local-storage-decorator。它提供了一个
@localStorage
装饰器。用它装饰的类属性将反映本地存储值。它与自动跟踪集成在一起。