[apcode language=”html”]
<div class="cart-container"> <div class="cart"> <span class="item-count">0</span> <i class="fas fa-shopping-cart"></i> </div> <div class="cart-dropdown"> <ul class="cart-items"></ul> <a href="#" class="checkout-btn">Checkout</a> </div> </div>
[/apcode]
[apcode language=”css”]
.cart-container {
position: relative;
}
.cart {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
color: #000;
font-size: 1.5rem;
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}
.cart:hover {
background-color: #000;
color: #fff;
}
.cart-dropdown {
position: absolute;
bottom: 70px;
right: 0;
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
transform: translateY(10px);
}
.cart-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.cart-items {
list-style: none;
padding: 0;
margin: 0;
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.cart-item img {
width: 40px;
height: 40px;
object-fit: cover;
margin-right: 10px;
}
.checkout-btn {
display: block;
width: 100%;
text-align: center;
padding: 10px 0;
background-color: #000;
color: #fff;
border-radius: 4px;
margin-top: 10px;
text-decoration: none;
}
.checkout-btn:hover {
background-color: #fff;
color: #000;
border: 1px solid #000;
}
[/apcode]
[apcode language=”jscript”]
const cart = document.querySelector(".cart");
const cartDropdown = document.querySelector(".cart-dropdown");
const itemCount = document.querySelector(".item-count");
const cartItems = document.querySelector(".cart-items");
let items = [];
cart.addEventListener("click", () => {
cartDropdown.classList.toggle("show");
});
function addToCart(item) {
let cartItem = items.find((itemObj) => itemObj.id === item.id);
if (cartItem) {
cartItem.quantity += 1;
} else {
items.push({ ...item, quantity: 1 });
}
updateCart();
}
function updateCart() {
let totalItems = 0;
cartItems.innerHTML = "";
items.forEach((item) => {
totalItems += item.quantity;
let cartItem = document.createElement("li");
cartItem.classList.add("cart-item");
cartItem.innerHTML = `
<img src="${item.image}" alt="${item.name}" />
<span>${ ${item.name}</span>
<span>${item.quantity} x $${item.price}</span>
`;
cartItems.appendChild(cartItem);
});
itemCount.innerText = totalItems;
}
const products = [
{
id: 1,
name: "Product 1",
price: 10.99,
image: "https://via.placeholder.com/50x50",
},
{
id: 2,
name: "Product 2",
price: 15.99,
image: "https://via.placeholder.com/50x50",
},
{
id: 3,
name: "Product 3",
price: 20.99,
image: "https://via.placeholder.com/50x50",
},
];
products.forEach((product) => {
let productCard = document.createElement("div");
productCard.classList.add("product-card");
productCard.innerHTML = <img src="${product.image}" alt="${product.name}" /> <h3>${product.name}</h3> <span>$${product.price}</span> <button class="add-to-cart-btn">Add to Cart</button> ;
let addToCartBtn = productCard.querySelector(".add-to-cart-btn");
addToCartBtn.addEventListener("click", () => {
addToCart(product);
});
document.body.appendChild(productCard);
});
[/apcode]