php - 我在哪里可以将客户的选择保存在我的电子商务商店中，这样我就可以看到购买了什么

问题描述

我创建了一个带有电子商务商店的 html 网站。我用 javascript ofc 创建了一个购物车，但现在我想在购物车之后的子页面上创建一个结帐表单。但是如果不保存客户的选择，我就无法做到这一点，所以我知道要给他们发送什么。我如何通过单击“结帐”按钮保存他们选择的产品？它在哪里做呢？我想我应该用 php 来做，但我不确定......我的 cart.html 代码：

<!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>

我的购物车 js（本地存储）


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();

标签： phpe-commerce

php - 我在哪里可以将客户的选择保存在我的电子商务商店中，这样我就可以看到购买了什么

问题描述

解决方案

推荐阅读