[英]How to create a shopping cart to add multiple items in it without page refresh
[英]How do I make my shopping cart items still exist even when i refresh the page?
我的购物车是用 JavaScript 制作的。 一切正常,但当我刷新页面时就不行了,那么我所需要的只是一种方法,即使我刷新页面也不会丢失它们,也可以保存这些项目。
如果可以,我可以使用localStorge
吗? 或者我应该为此使用mysql
,如果是,如何使用?
你不必查看我所有的代码,我只需要一种方法来使这件事成为可能。
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
$(".CheckOutButton").hide();
var removeBtns = document.getElementsByClassName('cartRemovingBtn')
for(var i=0; i<removeBtns.length;i++) {
var removeButton = removeBtns[i]
removeButton.addEventListener('click' , removeCartItem)
}
var addToCartBtns = document.getElementsByClassName('addToCartBtn')
for(var i=0; i<addToCartBtns.length;i++) {
var addToCartbtn = addToCartBtns[i]
addToCartbtn.addEventListener('click' , addToCartClicked)
}
}
function addToCartClicked(event) {
var btn = event.target
var shopItem = btn.parentElement
var title = shopItem.getElementsByClassName('title')[0].innerText
var price = shopItem.getElementsByClassName('price')[0].innerText
var imgSrc = shopItem.getElementsByClassName('Fortnite-Packs-Img')[0].src
addItemToCart(title, price, imgSrc)
updateCartTotal()
}
function addItemToCart(title, price, imgSrc) {
var item = document.createElement('div')
var cartItems = document.getElementsByClassName('shopping-cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('item-name')
console.log(cartItemNames)
for(var i = 0; i<cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert("This item already been added to cart.")
return
}
}
var cartItemLayout = `
<div>
<li class="itemInCart">
<img class="item-img" src="${imgSrc}" alt="item1" />
<span class="item-name">${title}</span>
<span class="item-price">${price}</span>
<span class="item-quantityword">Quantity: <span class="item-quantity item-quantityword">1</span></span>
<button class="cartRemovingBtn"><span class="cartRemovingBtntxt">X</span></button>
</li>
</div>`
item.innerHTML = cartItemLayout;
cartItems.append(item)
item.getElementsByClassName('cartRemovingBtn')[0].addEventListener('click', removeCartItem)
}
function removeCartItem(event) {
// what ever button clicked on..
var removeButtonClicked = event.target
removeButtonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function updateCartTotal() {
var shoppingCartItems = document.getElementsByClassName('shopping-cart-items')[0]
var cartItems = shoppingCartItems.getElementsByClassName('itemInCart')
var itemsCount = cartItems.length
var total = 0
for(var i=0; i<cartItems.length;i++) {
var cartItem = cartItems[i]
var itemPrice = cartItem.getElementsByClassName('item-price')[0]
var itemQty = cartItem.getElementsByClassName('item-quantity')[0]
var price = parseFloat(itemPrice.innerText.replace('$', ''))
var qty = itemQty.innerText
total = (total + (price * qty)) *100 / 100
}
document.getElementsByClassName('badge')[0].innerText = itemsCount
document.getElementsByClassName('badge')[1].innerText = itemsCount
document.getElementsByClassName('total-price')[0].innerText = '$' + total
if (total > 0) {
$(".CheckOutButton").show();
} else {
$(".CheckOutButton").hide();
}
}
您可以使用浏览器历史记录的pushState和state 。
let myCart = {};
function onLoad() {
// set cart from state after load
myCart = history.state || {};
}
function onCartChanged(updatedCart) {
// push state in history whenever cart is changed
history.pushState(updatedCart, 'cart');
}
有了上面的内容,您可以在刷新时获取当前购物车,也可以通过浏览器返回到上一个购物车。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.