Spaces:

KingNish
/

test-space

Running

App Files Files Community

Implement cart, checkout, and confirmation pages

#23

by smolSWE - opened May 19

base: refs/heads/main

←

from: refs/pr/23

Discussion Files changed

+455

-37

Files changed (4) hide show

cart.html +9 -20
checkout.html +13 -13
confirmation.html +3 -4
script.js +430 -0

cart.html CHANGED Viewed

@@ -6,6 +6,7 @@
     <title>Shopping Cart - Amazon Clone</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <nav class="bg-gray-800 p-4 text-white">
@@ -22,29 +23,17 @@
     </nav>
     <main class="container mx-auto mt-8">
-        <h1>Shopping Cart</h1>
-        <div class="grid grid-cols-1 gap-4">
-            <div class="flex items-center border border-gray-300 rounded-md p-4">
-                <img src="https://via.placeholder.com/100" alt="Product Image" class="w-24 h-24 mr-4">
-                <div>
-                    <h2 class="text-lg font-bold">Product Title</h2>
-                    <p class="text-gray-600">$99.99</p>
-                    <div class="flex items-center mt-2">
-                        <button class="bg-gray-200 px-2 py-1 rounded-md">-</button>
-                        <input type="number" value="1" class="w-16 text-center border border-gray-300 rounded-md mx-2">
-                        <button class="bg-gray-200 px-2 py-1 rounded-md">+</button>
-                        <button class="text-red-500 hover:text-red-700 ml-4">Remove</button>
-                    </div>
-                </div>
-            </div>
         </div>
         <div class="mt-8">
             <h2 class="text-xl font-bold">Order Summary</h2>
-            <p>Subtotal: $99.99</p>
-            <p>Shipping: $5.00</p>
-            <p class="font-bold">Total: $104.99</p>
-            <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Proceed to Checkout</button>
         </div>
     </main>
@@ -54,4 +43,4 @@
     <script src="script.js"></script>
 </body>
-</html>

     <title>Shopping Cart - Amazon Clone</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
     <nav class="bg-gray-800 p-4 text-white">
     </nav>
     <main class="container mx-auto mt-8">
+        <h1 class="text-2xl font-bold mb-4">Shopping Cart</h1>
+        <div id="cart-items" class="grid grid-cols-1 gap-4">
+            <!-- Cart items will be dynamically added here -->
         </div>
         <div class="mt-8">
             <h2 class="text-xl font-bold">Order Summary</h2>
+            <p>Subtotal: <span id="subtotal">$0.00</span></p>
+            <p>Shipping: <span id="shipping">$5.00</span></p>
+            <p class="font-bold">Total: <span id="total">$0.00</span></p>
+            <a href="/checkout.html" class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400 inline-block">Proceed to Checkout</a>
         </div>
     </main>
     <script src="script.js"></script>
 </body>
+</html>

checkout.html CHANGED Viewed

@@ -22,31 +22,31 @@
     </nav>
     <main class="container mx-auto mt-8">
-        <h1>Checkout</h1>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-                <h2 class="text-xl font-bold">Shipping Information</h2>
-                <form>
                     <div class="mb-4">
                         <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
-                        <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                     <div class="mb-4">
                         <label for="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
-                        <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                     <div class="mb-4">
                         <label for="payment" class="block text-gray-700 text-sm font-bold mb-2">Payment Information:</label>
-                        <input type="text" id="payment" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                 </form>
             </div>
             <div>
-                <h2 class="text-xl font-bold">Order Summary</h2>
-                <p>Subtotal: $99.99</p>
-                <p>Shipping: $5.00</p>
-                <p class="font-bold">Total: $104.99</p>
-                <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Place Order</button>
             </div>
         </div>
     </main>
@@ -57,4 +57,4 @@
     <script src="script.js"></script>
 </body>
-</html>

     </nav>
     <main class="container mx-auto mt-8">
+        <h1 class="text-2xl font-bold mb-4">Checkout</h1>
+        <div class="grid grid-cols-2 gap-8">
             <div>
+                <h2 class="text-xl font-bold mb-2">Shipping Information</h2>
+                <form id="checkout-form">
                     <div class="mb-4">
                         <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
+                        <input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                     <div class="mb-4">
                         <label for="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
+                        <input type="text" id="address" name="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
                     <div class="mb-4">
                         <label for="payment" class="block text-gray-700 text-sm font-bold mb-2">Payment Information:</label>
+                        <input type="text" id="payment" name="payment" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
+                    <button type="submit" class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Place Order</button>
                 </form>
             </div>
             <div>
+                <h2 class="text-xl font-bold mb-2">Order Summary</h2>
+                <p>Subtotal: <span id="subtotal">$0.00</span></p>
+                <p>Shipping: <span id="shipping">$5.00</span></p>
+                <p class="font-bold">Total: <span id="total">$0.00</span></p>
             </div>
         </div>
     </main>
     <script src="script.js"></script>
 </body>
+</html>

confirmation.html CHANGED Viewed

@@ -22,10 +22,9 @@
     </nav>
     <main class="container mx-auto mt-8">
-        <h1>Order Confirmation</h1>
         <p>Thank you for your order!</p>
-        <p>Your order has been placed and will be shipped soon.</p>
-        <p>Order ID: #1234567890</p>
     </main>
     <footer class="bg-gray-800 p-4 text-white text-center mt-8">
@@ -34,4 +33,4 @@
     <script src="script.js"></script>
 </body>
-</html>

     </nav>
     <main class="container mx-auto mt-8">
+        <h1 class="text-2xl font-bold mb-4">Order Confirmation</h1>
         <p>Thank you for your order!</p>
+        <p>Your order ID is: <span id="order-id"></span></p>
     </main>
     <footer class="bg-gray-800 p-4 text-white text-center mt-8">
     <script src="script.js"></script>
 </body>
+</html>

script.js CHANGED Viewed

	@@ -0,0 +1,430 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Function to get cart items from local storage
+    function getCartItems() {
+        const cartItems = localStorage.getItem('cart');
+        return cartItems ? JSON.parse(cartItems) : [];
+    }
+    // Function to set cart items in local storage
+    function setCartItems(cartItems) {
+        localStorage.setItem('cart', JSON.stringify(cartItems));
+    }
+    // Function to add an item to the cart
+    function addToCart(productId, quantity) {
+        const cartItems = getCartItems();
+        const existingItem = cartItems.find(item => item.productId === productId);
+        if (existingItem) {
+            existingItem.quantity += quantity;
+        } else {
+            cartItems.push({ productId, quantity });
+        }
+        setCartItems(cartItems);
+        updateCartUI();
+    }
+    // Function to update item quantity in the cart
+    function updateQuantity(productId, quantity) {
+        const cartItems = getCartItems();
+        const itemIndex = cartItems.findIndex(item => item.productId === productId);
+        if (itemIndex !== -1) {
+            cartItems[itemIndex].quantity = quantity;
+            if (cartItems[itemIndex].quantity <= 0) {
+                cartItems.splice(itemIndex, 1); // Remove item if quantity is 0 or less
+            }
+            setCartItems(cartItems);
+            updateCartUI();
+        }
+    }
+    // Function to remove an item from the cart
+    function removeItem(productId) {
+        const cartItems = getCartItems();
+        const itemIndex = cartItems.findIndex(item => item.productId === productId);
+        if (itemIndex !== -1) {
+            cartItems.splice(itemIndex, 1);
+            setCartItems(cartItems);
+            updateCartUI();
+        }
+    }
+    // Function to calculate cart totals
+    function calculateTotals() {
+        const cartItems = getCartItems();
+        let subtotal = 0;
+        // Dummy product prices (replace with actual product data)
+        const productPrices = {
+            "1": 20.00,
+            "2": 30.00,
+            "3": 40.00
+        };
+        cartItems.forEach(item => {
+            const productId = item.productId;
+            const quantity = item.quantity;
+            const price = productPrices[productId] || 0; // Get price from productPrices, default to 0
+            subtotal += price * quantity;
+        });
+        const shipping = 5.00;
+        const total = subtotal + shipping;
+        return { subtotal, shipping, total };
+    }
+    // Function to display cart items in cart.html
+    function displayCartItems() {
+        const cartItems = getCartItems();
+        const cartItemsContainer = document.getElementById('cart-items');
+        if (cartItemsContainer) {
+            cartItemsContainer.innerHTML = ''; // Clear existing items
+            cartItems.forEach(item => {
+                // Dummy product data (replace with actual product data)
+                const productId = item.productId;
+                const product = {
+                    id: productId,
+                    title: `Product ${productId}`,
+                    price: 20.00,
+                    image: `https://via.placeholder.com/100`
+                };
+                const cartItemDiv = document.createElement('div');
+                cartItemDiv.classList.add('flex', 'items-center', 'border', 'border-gray-300', 'rounded-md', 'p-4');
+                cartItemDiv.innerHTML = `
+                    <img src="${product.image}" alt="Product Image" class="w-24 h-24 mr-4">
+                    <div>
+                        <h2 class="text-lg font-bold">${product.title}</h2>
+                        <p class="text-gray-600">$${product.price.toFixed(2)}</p>
+                        <div class="flex items-center mt-2">
+                            <button class="bg-gray-200 px-2 py-1 rounded-md decrease-quantity" data-product-id="${product.id}">-</button>
+                            <input type="number" value="${item.quantity}" class="w-16 text-center border border-gray-300 rounded-md mx-2 quantity-input" data-product-id="${product.id}">
+                            <button class="bg-gray-200 px-2 py-1 rounded-md increase-quantity" data-product-id="${product.id}">+</button>
+                            <button class="text-red-500 hover:text-red-700 ml-4 remove-item" data-product-id="${product.id}">Remove</button>
+                        </div>
+                    </div>
+                `;
+                cartItemsContainer.appendChild(cartItemDiv);
+            });
+            // Add event listeners to quantity buttons and remove buttons
+            const decreaseButtons = document.querySelectorAll('.decrease-quantity');
+            decreaseButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const productId = this.dataset.productId;
+                    const quantityInput = this.parentNode.querySelector('.quantity-input');
+                    let quantity = parseInt(quantityInput.value);
+                    quantity = Math.max(1, quantity - 1); // Ensure quantity is not less than 1
+                    quantityInput.value = quantity;
+                    updateQuantity(productId, quantity);
+                });
+            });
+            const increaseButtons = document.querySelectorAll('.increase-quantity');
+            increaseButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const productId = this.dataset.productId;
+                    const quantityInput = this.parentNode.querySelector('.quantity-input');
+                    let quantity = parseInt(quantityInput.value);
+                    quantity++;
+                    quantityInput.value = quantity;
+                    updateQuantity(productId, quantity);
+                });
+            });
+            const removeButtons = document.querySelectorAll('.remove-item');
+            removeButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const productId = this.dataset.productId;
+                    removeItem(productId);
+                });
+            });
+        }
+    }
+    // Function to update the order summary in cart.html and checkout.html
+    function updateOrderSummary() {
+        const { subtotal, shipping, total } = calculateTotals();
+        const subtotalElements = document.querySelectorAll('#subtotal');
+        subtotalElements.forEach(element => element.textContent = `$${subtotal.toFixed(2)}`);
+        const shippingElements = document.querySelectorAll('#shipping');
+        shippingElements.forEach(element => element.textContent = `$${shipping.toFixed(2)}`);
+        const totalElements = document.querySelectorAll('#total');
+        totalElements.forEach(element => element.textContent = `$${total.toFixed(2)}`);
+    }
+    // Function to handle checkout
+    function handleCheckout() {
+        const checkoutForm = document.getElementById('checkout-form');
+        if (checkoutForm) {
+            checkoutForm.addEventListener('submit', function(event) {
+                event.preventDefault(); // Prevent form submission
+                // Simulate order processing
+                const orderId = Math.floor(Math.random() * 1000000);
+                // Store order ID in local storage
+                localStorage.setItem('orderId', orderId);
+                // Clear the cart
+                setCartItems([]);
+                // Redirect to confirmation page
+                window.location.href = '/confirmation.html';
+            });
+        }
+    }
+    // Function to display order confirmation details
+    function displayOrderConfirmation() {
+        const orderId = localStorage.getItem('orderId');
+        const orderIdElement = document.getElementById('order-id');
+        if (orderIdElement) {
+            orderIdElement.textContent = orderId;
+        }
+    }
+    // Initialize the cart page
+    if (window.location.pathname === '/cart.html') {
+        displayCartItems();
+        updateOrderSummary();
+    }
+    // Initialize the checkout page
+    if (window.location.pathname === '/checkout.html') {
+        updateOrderSummary();
+        handleCheckout();
+    }
+    // Initialize the confirmation page
+    if (window.location.pathname === '/confirmation.html') {
+        displayOrderConfirmation();
+    }
+});
+    // Function to get cart items from local storage
+    function getCartItems() {
+        const cartItems = localStorage.getItem('cart');
+        return cartItems ? JSON.parse(cartItems) : [];
+    }
+    // Function to set cart items in local storage
+    function setCartItems(cartItems) {
+        localStorage.setItem('cart', JSON.stringify(cartItems));
+    }
+    // Function to add an item to the cart
+    function addToCart(productId, quantity) {
+        const cartItems = getCartItems();
+        const existingItem = cartItems.find(item => item.productId === productId);
+        if (existingItem) {
+            existingItem.quantity += quantity;
+        } else {
+            cartItems.push({ productId, quantity });
+        }
+        setCartItems(cartItems);
+        updateCartUI();
+    }
+    // Function to update item quantity in the cart
+    function updateQuantity(productId, quantity) {
+        const cartItems = getCartItems();
+        const itemIndex = cartItems.findIndex(item => item.productId === productId);
+        if (itemIndex !== -1) {
+            cartItems[itemIndex].quantity = quantity;
+            if (cartItems[itemIndex].quantity <= 0) {
+                cartItems.splice(itemIndex, 1); // Remove item if quantity is 0 or less
+            }
+            setCartItems(cartItems);
+            updateCartUI();
+        }
+    }
+    // Function to remove an item from the cart
+    function removeItem(productId) {
+        const cartItems = getCartItems();
+        const itemIndex = cartItems.findIndex(item => item.productId === productId);
+        if (itemIndex !== -1) {
+            cartItems.splice(itemIndex, 1);
+            setCartItems(cartItems);
+            updateCartUI();
+        }
+    }
+    // Function to calculate cart totals
+    function calculateTotals() {
+        const cartItems = getCartItems();
+        let subtotal = 0;
+        // Dummy product prices (replace with actual product data)
+        const productPrices = {
+            "1": 20.00,
+            "2": 30.00,
+            "3": 40.00
+        };
+        cartItems.forEach(item => {
+            const productId = item.productId;
+            const quantity = item.quantity;
+            const price = productPrices[productId] || 0; // Get price from productPrices, default to 0
+            subtotal += price * quantity;
+        });
+        const shipping = 5.00;
+        const total = subtotal + shipping;
+        return { subtotal, shipping, total };
+    }
+    // Function to display cart items in cart.html
+    function displayCartItems() {
+        const cartItems = getCartItems();
+        const cartItemsContainer = document.getElementById('cart-items');
+        if (cartItemsContainer) {
+            cartItemsContainer.innerHTML = ''; // Clear existing items
+            cartItems.forEach(item => {
+                // Dummy product data (replace with actual product data)
+                const productId = item.productId;
+                const product = {
+                    id: productId,
+                    title: `Product ${productId}`,
+                    price: 20.00,
+                    image: `https://via.placeholder.com/100`
+                };
+                const cartItemDiv = document.createElement('div');
+                cartItemDiv.classList.add('flex', 'items-center', 'border', 'border-gray-300', 'rounded-md', 'p-4');
+                cartItemDiv.innerHTML = `
+                    <img src="${product.image}" alt="Product Image" class="w-24 h-24 mr-4">
+                    <div>
+                        <h2 class="text-lg font-bold">${product.title}</h2>
+                        <p class="text-gray-600">$${product.price.toFixed(2)}</p>
+                        <div class="flex items-center mt-2">
+                            <button class="bg-gray-200 px-2 py-1 rounded-md decrease-quantity" data-product-id="${product.id}">-</button>
+                            <input type="number" value="${item.quantity}" class="w-16 text-center border border-gray-300 rounded-md mx-2 quantity-input" data-product-id="${product.id}">
+                            <button class="bg-gray-200 px-2 py-1 rounded-md increase-quantity" data-product-id="${product.id}">+</button>
+                            <button class="text-red-500 hover:text-red-700 ml-4 remove-item" data-product-id="${product.id}">Remove</button>
+                        </div>
+                    </div>
+                `;
+                cartItemsContainer.appendChild(cartItemDiv);
+            });
+            // Add event listeners to quantity buttons and remove buttons
+            const decreaseButtons = document.querySelectorAll('.decrease-quantity');
+            decreaseButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const productId = this.dataset.productId;
+                    const quantityInput = this.parentNode.querySelector('.quantity-input');
+                    let quantity = parseInt(quantityInput.value);
+                    quantity = Math.max(1, quantity - 1); // Ensure quantity is not less than 1
+                    quantityInput.value = quantity;
+                    updateQuantity(productId, quantity);
+                });
+            });
+            const increaseButtons = document.querySelectorAll('.increase-quantity');
+            increaseButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const productId = this.dataset.productId;
+                    const quantityInput = this.parentNode.querySelector('.quantity-input');
+                    let quantity = parseInt(quantityInput.value);
+                    quantity++;
+                    quantityInput.value = quantity;
+                    updateQuantity(productId, quantity);
+                });
+            });
+            const removeButtons = document.querySelectorAll('.remove-item');
+            removeButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const productId = this.dataset.productId;
+                    removeItem(productId);
+                });
+            });
+        }
+    }
+    // Function to update the order summary in cart.html and checkout.html
+    function updateOrderSummary() {
+        const { subtotal, shipping, total } = calculateTotals();
+        const subtotalElements = document.querySelectorAll('#subtotal');
+        subtotalElements.forEach(element => element.textContent = `$${subtotal.toFixed(2)}`);
+        const shippingElements = document.querySelectorAll('#shipping');
+        shippingElements.forEach(element => element.textContent = `$${shipping.toFixed(2)}`);
+        const totalElements = document.querySelectorAll('#total');
+        totalElements.forEach(element => element.textContent = `$${total.toFixed(2)}`);
+    }
+    // Function to handle checkout
+    function handleCheckout() {
+        const checkoutForm = document.getElementById('checkout-form');
+        if (checkoutForm) {
+            checkoutForm.addEventListener('submit', function(event) {
+                event.preventDefault(); // Prevent form submission
+                // Simulate order processing
+                const orderId = Math.floor(Math.random() * 1000000);
+                // Store order ID in local storage
+                localStorage.setItem('orderId', orderId);
+                // Clear the cart
+                setCartItems([]);
+                // Redirect to confirmation page
+                window.location.href = '/confirmation.html';
+            });
+        }
+    }
+    // Function to display order confirmation details
+    function displayOrderConfirmation() {
+        const orderId = localStorage.getItem('orderId');
+        const orderIdElement = document.getElementById('order-id');
+        if (orderIdElement) {
+            orderIdElement.textContent = orderId;
+        }
+    }
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize the cart page
+    if (window.location.pathname === '/cart.html') {
+        displayCartItems();
+        updateOrderSummary();
+    }
+    // Initialize the checkout page
+    if (window.location.pathname === '/checkout.html') {
+        updateOrderSummary();
+        handleCheckout();
+    }
+    // Initialize the confirmation page
+    if (window.location.pathname === '/confirmation.html') {
+        displayOrderConfirmation();
+    }
+});