![](/img/trans.png)
[英]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.