Php seButtons=document.querySelectorAll（'.increase'）； 设currentQuantity=0； 让currentProduct=''； 让cartItems=localStorage.getItem（'productsInCart'）； cartItems=JSON.parse（cartItems）； for（设i=0；i{ 控制台日志（cartItems）； currentQuantity=递减按钮[i]。parentElement.querySelector（'span'）。textContent； 控制台日志（当前数量）； currentProduct=decreaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector（'span'）.textContent.toLocaleLowerCase（）.replace（//g'，）.trim（）； console.log（currentProduct）； if（cartItems[currentProduct].Invott>1）{ cartItems[currentProduct].Invot-=1； CartNumber（cartItems[当前产品]，“减少”）； 总成本（cartItems[当前产品]，“减少”）； localStorage.setItem（'productsInCart'，JSON.stringify（cartItems））； displayCart（）； } }); 递增按钮[i].addEventListener（'click'，（）=>{ 控制台日志（cartItems）； currentQuantity=increaseButtons[i].parentElement.querySelector（'span'）.textContent； 控制台日志（当前数量）； currentProduct=increaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector（'span'）.textContent.toLocaleLowerCase（）.replace（//g'，）.trim（）； console.log（currentProduct）； cartItems[currentProduct].Invot+=1； CartNumber（cartItems[currentProduct]）； 总成本（cartItems[当前产品]）； localStorage.setItem（'productsInCart'，JSON.stringify（cartItems））； displayCart（）； }); } } 函数deleteButtons（）{ 让deleteButtons=document.querySelectorAll（'.product-ion-icon'）； 让productNumbers=localStorage.getItem（'cartNumbers'）； 让cartCost=localStorage.getItem（“totalCost”）； 让cartItems=localStorage.getItem（'productsInCart'）； cartItems=JSON.parse（cartItems）； 让productName； 控制台日志（cartItems）； for（设i=0；i{ productName=deleteButtons[i].parentElement.textContent.toLocaleLowerCase（）.replace（//g'，）.trim（）； localStorage.setItem（'CartNumber'，ProductNumber-cartItems[productName].Invott）； localStorage.setItem（'totalCost'，cartCost-（cartItems[productName].price*cartItems[productName].Invott））； 删除cartItems[productName]； localStorage.setItem（'productsInCart'，JSON.stringify（cartItems））； displayCart（）； onLoadCartNumber（）； }) } } onLoadCartNumber（）； displayCart（）；
老实说，这不是提问的最佳形式，但我会尽力回答。一般来说，这取决于你到底需要做什么。如果您只需要html/css/javascript站点，它不会永久保存数据，那么您可以通过http方法发送产品（POST或GET，这取决于代码的外观）。另一方面，如果你想让它永久化，你需要PHP和一些数据库Php seButtons=document.querySelectorAll（'.increase'）； 设currentQuantity=0； 让currentProduct=''； 让cartItems=localStorage.getItem（'productsInCart'）； cartItems=JSON.parse（cartItems）； for（设i=0；i{ 控制台日志（cartItems）； currentQuantity=递减按钮[i]。parentElement.querySelector（'span'）。textContent； 控制台日志（当前数量）； currentProduct=decreaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector（'span'）.textContent.toLocaleLowerCase（）.replace（//g'，）.trim（）； console.log（currentProduct）； if（cartItems[currentProduct].Invott>1）{ cartItems[currentProduct].Invot-=1； CartNumber（cartItems[当前产品]，“减少”）； 总成本（cartItems[当前产品]，“减少”）； localStorage.setItem（'productsInCart'，JSON.stringify（cartItems））； displayCart（）； } }); 递增按钮[i].addEventListener（'click'，（）=>{ 控制台日志（cartItems）； currentQuantity=increaseButtons[i].parentElement.querySelector（'span'）.textContent； 控制台日志（当前数量）； currentProduct=increaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector（'span'）.textContent.toLocaleLowerCase（）.replace（//g'，）.trim（）； console.log（currentProduct）； cartItems[currentProduct].Invot+=1； CartNumber（cartItems[currentProduct]）； 总成本（cartItems[当前产品]）； localStorage.setItem（'productsInCart'，JSON.stringify（cartItems））； displayCart（）； }); } } 函数deleteButtons（）{ 让deleteButtons=document.querySelectorAll（'.product-ion-icon'）； 让productNumbers=localStorage.getItem（'cartNumbers'）； 让cartCost=localStorage.getItem（“totalCost”）； 让cartItems=localStorage.getItem（'productsInCart'）； cartItems=JSON.parse（cartItems）； 让productName； 控制台日志（cartItems）； for（设i=0；i{ productName=deleteButtons[i].parentElement.textContent.toLocaleLowerCase（）.replace（//g'，）.trim（）； localStorage.setItem（'CartNumber'，ProductNumber-cartItems[productName].Invott）； localStorage.setItem（'totalCost'，cartCost-（cartItems[productName].price*cartItems[productName].Invott））； 删除cartItems[productName]； localStorage.setItem（'productsInCart'，JSON.stringify（cartItems））； displayCart（）； onLoadCartNumber（）； }) } } onLoadCartNumber（）； displayCart（）；,php,e-commerce,Php,E Commerce,老实说，这不是提问的最佳形式，但我会尽力回答。一般来说，这取决于你到底需要做什么。如果您只需要html/css/javascript站点，它不会永久保存数据，那么您可以通过http方法发送产品（POST或GET，这取决于代码的外观）。另一方面，如果你想让它永久化，你需要PHP和一些数据库 请发布您的代码，然后我可以更精确地帮助您。如果您使用localstorage，只要您打开浏览器，就可以在任何地方使用它。我相信这将是满足您需求的最简单方法。您可以在此处阅读更多：。我希望这对你有帮助。但是我怎样
请发布您的代码，然后我可以更精确地帮助您。如果您使用localstorage，只要您打开浏览器，就可以在任何地方使用它。我相信这将是满足您需求的最简单方法。您可以在此处阅读更多：。我希望这对你有帮助。但是我怎样才能知道我的客户点的是什么？我怎样才能看到他们的本地存储？使用Javascript时，它只能在客户端站点上工作。如果您作为站点管理员或类似人员，希望在客户端位于其他地方的设备上看到它，则必须进一步扩展此项目。是的，在这种情况下，最好使用php之类的后端语言，或者使用node使javascript在后端可用。我在youtube上找到了一个用php和mysql制作购物车的教程：），但我不知道如何将产品添加到数据库中。。。我需要点击什么。这是yt的视频。他在1:40使用php我的管理员你知道，这是一个完全不同的问题。请将其作为新的PHP代码进行询问，因为在要求满足此网站规则之前，您至少需要尝试这样做。否则，你的问题将不足以精确地回答它们。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Caroline | Homemade Candles</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% DOMOWYCH ŚWIECZEK | Gwarancja komfortu</p>
</div>
<div class="emailugory">
<a href="mailto:#">E-mail:xxx</a>
<a href="tel:#">Numer telefonu:xxx-xxx-xxx</a>
</div>
</div>
<nav class="yolo">
<ul id="MenuItems">
<li class="logo"><a href="index.html"><img src="logooficjalne.png" class="carolinepng"></a></li>
<li><a href="onas.html">O nas</a></li>
<li><a href="swieceswiateczne.html">Świece świąteczne</a></li>
<li><a href="naturalneswiecezpachowe.html">Naturalne świece zapachowe</a></li>
<li><a href="szklo.html">Świece zapachowe w szkle</a></li>
<li><a href="#.html">Zapachy</a>
<ul>
<li><a href="owocowe.html">Owocowe</a></li>
<li><a href="słodkie.html">Słodkie</a></li>
<li><a href="eleganckie.html">Eleganckie</a></li>
<li><a href="kwiatowe.html">Kwiatowe</a></li>
<li><a href="świąteczne.html">Świąteczne</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li class="cart"> <a href="cart.html"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </a> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">"
</div>
</div>
<div class="products-container">
<div class="product-header">
<h5 class="product-title">Produkt</h5>
<h5 class="price">Cena</h5>
<h5 class="quantity">Ilość</h5>
<h5 class="total">Razem</h5>
</div>
<div class="products">
</div>
</div>
<h1 class="metodadostawy">Metoda dostawy</h1>
<!----- footer ----->
<footer>
<div class="column">
<ul class="footer-links-main">
<li><a href="onas.html">O nas</a></li>
<li><a href="produkty.html">Produkty</a></li>
<li><a href="polityka.html">Regulamin</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
<div class="footer-sm">
<div class="column2">
<h3 class="kontakth3">Kontakt</h3>
<p class="kontaktp">Adres e-mail:xxx</p>
<p class="kontaktp">Numer telefonu:xxx</p>
</div>
</div>
</footer>
<!---- js for toggle menu--->
<script>
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
function menutoggle(){
if (MenuItems.style.maxHeight == "0px")
{
MenuItems.style.maxHeight = "200px";
}
else
{
MenuItems.style.maxHeight = "0px";
}
}
</script>
<script src="main.js"></script>
<script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>
</body>
</html>
let carts = document.querySelectorAll('.add-cart');
let products = [
{
name: "Świeczka o zapachu truskawki",
tag: "truskawka",
price: 20,
inCart: 0,
},
{
name: "Świeczka o zapachu wanilii",
tag: "wanilia",
price: 20,
inCart: 0,
},
{
name: "Świeczka o zapachu kawy",
tag: 'kawa',
price: 20,
inCart: 0,
},
{
name: "Świeczka o zapachu kupy",
tag: 'kupa',
price:20,
inCart: 0.
},
{
name: "Świeczka o zapachu borówki",
tag: "borówka",
price: 20,
inCart: 0,
},
{
name: "Świeczka o zapachu borówki",
tag: "borówka",
price: 20,
inCart: 0,
}
];
for(let i=0; i< carts.length; i++) {
carts[i].addEventListener('click', () => {
cartNumbers(products[i]);
totalCost(products[i]);
});
}
function onLoadCartNumbers() {
let productNumbers = localStorage.getItem('cartNumbers');
if( productNumbers ) {
document.querySelector('.cart span').textContent = productNumbers;
}
}
function cartNumbers(product, action) {
let productNumbers = localStorage.getItem('cartNumbers');
productNumbers = parseInt(productNumbers);
if( action ) {
localStorage.setItem("cartNumbers", productNumbers - 1);
document.querySelector('.cart span').textContent = productNumbers - 1;
console.log("action running");
} else if( productNumbers ) {
localStorage.setItem("cartNumbers", productNumbers + 1);
document.querySelector('.cart span').textContent = productNumbers + 1;
} else {
localStorage.setItem("cartNumbers", 1);
document.querySelector('.cart span').textContent = 1;
}
setItems(product);
}
function setItems(product) {
// let productNumbers = localStorage.getItem('cartNumbers');
// productNumbers = parseInt(productNumbers);
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
if(cartItems != null) {
let currentProduct = product.tag;
if( cartItems[currentProduct] == undefined ) {
cartItems = {
...cartItems,
[currentProduct]: product
}
}
cartItems[currentProduct].inCart += 1;
} else {
product.inCart = 1;
cartItems = {
[product.tag]: product
};
}
localStorage.setItem('productsInCart', JSON.stringify(cartItems));
}
function totalCost( product, action ) {
let cart = localStorage.getItem("totalCost");
if( action) {
cart = parseInt(cart);
localStorage.setItem("totalCost", cart - product.price);
} else if(cart != null) {
cart = parseInt(cart);
localStorage.setItem("totalCost", cart + product.price);
} else {
localStorage.setItem("totalCost", product.price);
}
}
function displayCart() {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
let cart = localStorage.getItem("totalCost");
cart = parseInt(cart);
let productContainer = document.querySelector('.products');
if( cartItems && productContainer ) {
productContainer.innerHTML = '';
Object.values(cartItems).map( (item, index) => {
productContainer.innerHTML +=
`<div class="product"><ion-icon name="close-circle-outline"></ion-icon><img src="${item.tag}.png" />
<span class="sm-hide">${item.name}</span>
</div>
<div class="price sm-hide">${item.price},00zł</div>
<div class="quantity">
<ion-icon class="decrease" name="arrow-back-circle-outline"></ion-icon>
<span>${item.inCart}</span>
<ion-icon class="increase" name="arrow-forward-circle-outline"></ion-icon>
</div>
<div class="total">${item.inCart * item.price},00zł</div>`;
});
productContainer.innerHTML += `
<div class="basketTotalContainer">
<h4 class="basketTotalTitle">Razem w koszu</h4>
<h4 class="basketTotal">${cart},00zł</h4>
</div>`
deleteButtons();
manageQuantity();
}
}
function manageQuantity() {
let decreaseButtons = document.querySelectorAll('.decrease');
let increaseButtons = document.querySelectorAll('.increase');
let currentQuantity = 0;
let currentProduct = '';
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
for(let i=0; i < increaseButtons.length; i++) {
decreaseButtons[i].addEventListener('click', () => {
console.log(cartItems);
currentQuantity = decreaseButtons[i].parentElement.querySelector('span').textContent;
console.log(currentQuantity);
currentProduct = decreaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLocaleLowerCase().replace(/ /g,'').trim();
console.log(currentProduct);
if( cartItems[currentProduct].inCart > 1 ) {
cartItems[currentProduct].inCart -= 1;
cartNumbers(cartItems[currentProduct], "decrease");
totalCost(cartItems[currentProduct], "decrease");
localStorage.setItem('productsInCart', JSON.stringify(cartItems));
displayCart();
}
});
increaseButtons[i].addEventListener('click', () => {
console.log(cartItems);
currentQuantity = increaseButtons[i].parentElement.querySelector('span').textContent;
console.log(currentQuantity);
currentProduct = increaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLocaleLowerCase().replace(/ /g,'').trim();
console.log(currentProduct);
cartItems[currentProduct].inCart += 1;
cartNumbers(cartItems[currentProduct]);
totalCost(cartItems[currentProduct]);
localStorage.setItem('productsInCart', JSON.stringify(cartItems));
displayCart();
});
}
}
function deleteButtons() {
let deleteButtons = document.querySelectorAll('.product ion-icon');
let productNumbers = localStorage.getItem('cartNumbers');
let cartCost = localStorage.getItem("totalCost");
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
let productName;
console.log(cartItems);
for(let i=0; i < deleteButtons.length; i++) {
deleteButtons[i].addEventListener('click', () => {
productName = deleteButtons[i].parentElement.textContent.toLocaleLowerCase().replace(/ /g,'').trim();
localStorage.setItem('cartNumbers', productNumbers - cartItems[productName].inCart);
localStorage.setItem('totalCost', cartCost - ( cartItems[productName].price * cartItems[productName].inCart));
delete cartItems[productName];
localStorage.setItem('productsInCart', JSON.stringify(cartItems));
displayCart();
onLoadCartNumbers();
})
}
}
onLoadCartNumbers();
displayCart();