so I'm trying to build the product page for the website I'm making for my friend's e-commerce business, and I'm trying to create my payment form for a user to pay for their order. However, I'm having a hard time trying to figure out how to pass the data of the products the user wants to order to the payment form when trying to order. Here is the html, css, and javascript if anyone is able to help.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="products.css">
<link href=":wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href=".4.2/css/all.min.css">
<title>Product Page</title>
</head>
<body>
<!-- navbar -->
<div class="navbar">
<h2 class="logo">Product Cart</h2>
<div class="menu">
<button class="menu-user"><i class="fa-solid fa-user"></i></button>
<button class="menu-cart"><i class="fa-solid fa-cart-shopping"></i><span class="cart-count">0</span></button>
</div>
</div>
<!-- container -->
<div class="container">
<!-- main -->
<div class="main">
<div class="product-wrapper">
<div class="product" data-product="1">
<img class="product-img" src="fruity.JPG" alt="macarons">
<h3 class="product-title">Fruity Peebles Flavored Macarons</h3>
<p class="product-price">$5.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product" data-product="2">
<img class="product-img" src="strawberry.JPG" alt="macarons">
<h3 class="product-title">Strawberry Macarons</h3>
<p class="product-price">$4.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product" data-product="3">
<img class="product-img" src="chocolate.JPG" alt="macarons">
<h3 class="product-title">Chocolate Macarons</h3>
<p class="product-price">$3.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product" data-product="4">
<img class="product-img" src="cpbJPG.JPG" alt="macarons">
<h3 class="product-title">Chocolate Peanut Butter Macarons</h3>
<p class="product-price">$3.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product" data-product="5">
<img class="product-img" src="jelly-macaronsJPG-1.JPG" alt="macarons">
<h3 class="product-title">Jelly Macarons</h3>
<p class="product-price">$4.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<!-- cart -->
<div class="cart">
<h3 class="cart-title">Your Cart</h3>
<div class="cart-list">
<!-- this is for list of item on the cart. We will add the structure of html in the app.js later -->
</div>
<hr class="divider">
<div class="cart-action">
<div class="cart-amount" id="total-price">
<span>Subtotal</span>
<span class="cart-amount-value">$0.00</span>
</div>
<div class="cart-amount" id="tax">
<span>Tax included (10%)</span>
<span class="cart-amount-value">$0.00</span>
</div>
<div class="cart-amount" id="final-price">
<span>Total</span>
<span class="cart-amount-value">$0.00</span>
</div>
<a href="checkout.html">
<button class="cart-btn">Checkout</button>
</a>
</div>
</div>
</div>
</body>
<script src=".6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="products.js"></script>
</html>
:root {
--redColor: #ea4d44;
--yellowColor: #ffc433;
--fontColor: #222;
--whiteColor: #fff;
--greyColor: #f5f5f5;
--darkGreyColor: #c4c4c4;
--blueColor: #03a9f4;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body {
width: 100%;
min-height: 100vh; /*Ensures the body takes the full width and height of the viewport.*/
font-family: 'Lato', sans-serif;
background-image: url('productsbackground.JPG');
background-size: cover;
}
.navbar {
display: flex; /* Creates a flex container with space between items (for navigation items and any other content).*/
width: 100%;
height: 60px;
padding: 0 3%;
justify-content: space-between;
align-items: center;
z-index: 10;
position: fixed;
top: 0; /* Fixes the navbar at the top of the page.*/
left: 0;
background-color: rgb(184, 94, 184);
}
.menu {
display: flex;
gap: 5px;
}
.menu-user, .menu-cart {
width: 50px;
height: 30px;
border: none;
border-radius: 20px;
background-color: var(--whiteColor);
color: var(--fontColor);
cursor: pointer;
}
.menu-user:hover, .menu-cart:hover {
background-color: var(--blueColor); /* effects change the background to --blueColor and text to white. */
color: var(--whiteColor);
}
.cart-count {
background-color: var(--blueColor);
border-radius: 10px; /* Rounds the corners. */
padding: 5% 10%;
margin-left: 5px;
font-size: 10px;
color: var(--whiteColor);
}
.container {
display: flex; /* Flexbox is used for layout. */
margin-top: 60px; /* Provides space to accommodate the fixed navbar. */
}
.main {
flex-grow: 1;
height: max-content;
padding: 0 3%;
margin-right: 350px;
}
.product-wrapper { /*used to display a grid of products. */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.2rem; /* Adds spacing between grid items. */
}
.product {
display: flex;
flex-direction: column;
background-color: var(--greyColor);
border-radius: 8px; /* Rounds the corners of the product card. */
padding: 10px; /* controls the space inside an element */
box-shadow: rgba(17,17,26,0.05) 0px 1px 0px, rgba(17,17,26,0.1) 0px 0px 8px;
/* Adds a light shadow for a subtle 3D effect. */
}
.product-img { /*Ensures the image fits within the box without distortion.*/
width: auto; /* makes sure the image's width adjusts automatically based on the aspect ratio and content */
height: 150px;
object-fit: contain;
object-position: center;
margin-bottom: 10px;
border-radius: 8px;
background-color: #97deff;
}
.product-title {
font-size: 16px;
}
.product-price {
font-size: 14px;
}
.add-to-cart {
background-color: rgba(184, 94, 184);
border-radius: 20px;
color: black;
font-weight: bold;
font-size: medium;
cursor: pointer;
}
.add-to-cart:hover {
background-color: var(--yellowColor);
color: var(--fontColor);
}
.cart {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
max-width: 350px;
height: calc(100% - 80px); /* allows you to perform calculations to determine the height. */
position: fixed;
top:0; /* This positions an element at the very top of its positioned container */
right: 20; /* positions the element 20px away from the right side of its positioned container */
background-color: var(--blueColor);
color: var(--whiteColor);
border-radius: 8px;
margin-top: 60px;
padding: 1%;
}
.cart-title {
letter-spacing: 1; /* controls the space between characters in a text. */
line-height: 2; /* sets the amount of space between lines of text. */
}
.cart-list {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
overflow-y: auto;
padding: 0 2% 2% 0;
color: var(--fontColor);
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 3%;
margin: 2% 0;
border-radius: 8px;
background-color: var(--greyColor);
width: 100%;
font-size: 13px;
}
.cart-item-img {
width: 35px;
height: 35px;
object-fit: contain;
object-position: center;
border-radius: 8px;
}
.cart-item-title {
min-width: 10px;
max-width: 15ch;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.cart-item-quantity {
display: flex;
align-items: center;
gap: 10px;
margin-top: 5px;
}
.change-quantity {
border: none;
background-color: var(--blueColor);
border-radius: 50%;
width: 20px;
height: 20px;
cursor: pointer;
}
.cart-item-price {
font-weight: 700;
}
.cart-item-remove {
border: none;
background-color: transparent;
color: var(--darkGreyColor);
cursor: pointer;
}
.cart-item-remove:hover {
color: var(--redColor);
}
.cart-empty {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--fontColor);
}
.cart-empty img {
width: 50%;
height: 50%;
}
.divider {
border: none;
height: 2px;
background-color: var(--greyColor);
}
.cart-action {
margin-top: 10px;
}
.cart-amount {
display: flex;
width: 100%;
justify-content: space-between;
font-size: 14px;
line-height: 1.5;
}
#final-price {
font-weight: 700;
color: var(--fontColor);
}
.cart-btn {
width: 100%;
border: none;
padding: 10px;
margin: 10px 0;
background-color: var(--redColor);
color: var(--whiteColor);
font-weight: 700;
letter-spacing: 1;
cursor: pointer;
}
.collapsed {
width: 0;
display: none;
}
.expanded {
margin-right: 0;
}
$(document).ready(function(){ // ensures the code inside the function runs only after the entire DOM (Document Object Model) has been fully loaded //
// cache jquery selector
const $menuCartElement = $('.menu-cart'); // for menu button //
const $cartItemsElement = $('.cart-list'); // for list of macarons ordered //
const $cartElement = $('.cart'); // for cart button//
const $mainElement = $('.main'); // for main content, such as product list //
let cart = []; // array for when cart is empty //
// Function to Add Product to The Cart
function addToCart(productElement) { // function to add items to cart //
const $productElement = $(productElement); // checks if product is already in cart //
const productId = $productElement.data('product'); // const that obtains data based off the product cards
const productName = $productElement.find('.product-title').text();
const productPrice = parseFloat($productElement.find('.product-price').text().replace('$',''));
const productImage = $productElement.find('.product-img').attr('src');
// his checks if an item already exists in the cart array by matching the productId. //
let existingItem = cart.find(item => item.id === productId);
if(existingItem) {
existingItem.quantity += 1; // increment quantity if item exists
}
// If the item is not found in the cart, this block is executed, and a new item is created with the productId, productName, productPrice, productImage, and a quantity of 1.//
else {
const newItem = {
id : productId,
name : productName,
price : productPrice,
image : productImage,
quantity: 1
};
// Add new item to the cart
cart.push(newItem);
}
// update cart count
updateCartCount();
// Re-render cart items
renderCartItems();
}
// Function to Update the Cart Count Displayed in the menu cart
function updateCartCount() {
const itemCount = cart.reduce((count,item) => count + item.quantity,0);
$menuCartElement.find('.cart-count').text(itemCount);
}
// Function to render the items on the cart
function renderCartItems() {
// clear the cart items container
$cartItemsElement.empty();
if (cart.length === 0) {
// display image of empty when the cart is empty
$cartItemsElement.html (`
<div class="cart-empty">
<img src="empty.svg">
<p>Your Cart is Empty</p>
</div>
`);
} else {
// iterate through the cart and display each item
$.each(cart, function(index,item){
const $cartItemElement = $('<div class="cart-item"></div>');
$cartItemElement.html(`
<img class="cart-item-img" src="${item.image}" alt="${item.name}">
<div class="cart-item-desc">
<div class="cart-item-title">${item.name}</div>
<div class="cart-item-quantity">
<button class="change-quantity" data-id="${item.id}" data-action="decrement">-</button>
${item.quantity}
<button class="change-quantity" data-id="${item.id}" data-action="increment">+</button>
</div>
</div>
<div class="cart-item-price">$${(item.price * item.quantity).toFixed(2)}</div>
<button class="cart-item-remove" data-id="${item.id}"><i class="fa solid fa-trash"></i></button>
`);
$cartItemsElement.append($cartItemElement);
})
}
// update the order summary / cart action
updateOrderSummary();
}
// Function to Update the order summary (subtotal, tax, total)
function updateOrderSummary() {
const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity,0);
const tax = subtotal * 0.10; // we assume the tax 10%
const total = subtotal + tax;
$('#total-price .cart-amount-value').text(`$${subtotal.toFixed(2)}`);
$('#tax .cart-amount-value').text(`$${tax.toFixed(2)}`);
$('#final-price .cart-amount-value').text(`$${total.toFixed(2)}`);
}
// event handler
// Event listener for Adding product to the cart
$('.add-to-cart').on('click', function(){
const productElement = $(this).closest('.product');
addToCart(productElement);
});
// Event listener for Changing The Quantity of the Cart item
$cartItemsElement.on('click', '.change-quantity', function(){
const itemId = $(this).data('id');
const action = $(this).data('action');
const item = cart.find(item => item.id === itemId);
if (action === 'increment') {
item.quantity += 1;
} else if (action === 'decrement' && item.quantity > 1) {
item.quantity -= 1;
}
updateCartCount();
renderCartItems();
});
// Event Listener for Removing the item from cart
$cartItemsElement.on('click','.cart-item-remove', function(){
const itemId = $(this).data('id');
cart = cart.filter(item => item.id !== itemId);
updateCartCount();
renderCartItems();
});
// Event Listener for toggling the cart view
$menuCartElement.on('click', function() {
$cartElement.toggleClass('collapsed');
$mainElement.toggleClass('expanded', $cartElement.hasClass('collapsed'));
});
renderCartItems(); // initial render of cart items
});