Scribd
Upload
11 views

Script

This document defines functions to add products to an online shopping cart, update the receipt, remove products, and print the final receipt. When an "Add to Cart" button is clicked, the corresponding product is added to an array and the receipt is updated. A checkout button triggers printing of the receipt to a new window with the selected products and total. Cancel buttons allow removing items from the receipt.

Uploaded by

pogiisha
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

Script

This document defines functions to add products to an online shopping cart, update the receipt, remove products, and print the final receipt. When an "Add to Cart" button is clicked, the corresponding product is added to an array and the receipt is updated. A checkout button triggers printing of the receipt to a new window with the selected products and total. Cancel buttons allow removing items from the receipt.

Uploaded by

pogiisha
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

document.

addEventListener("DOMContentLoaded", function() {
const addToCartButtons = document.querySelectorAll(".add-to-cart-button");
const receiptContent = document.getElementById("receipt-content");
const checkoutButton = document.getElementById("checkout-button");
const selectedProducts = [];

addToCartButtons.forEach(addToCartButton => {
addProductToCart(addToCartButton);
});

checkoutButton.addEventListener("click", function() {
printReceipt();
});

function addProductToCart(addToCartButton) {
addToCartButton.addEventListener("click", function() {
const productName = this.getAttribute("data-product");
const productPrice = parseFloat(this.getAttribute("data-price"));

// Check if the product is already in the cart


const existingProduct = selectedProducts.find(product => product.name
=== productName);

if (existingProduct) {
existingProduct.quantity += 1;
} else {
selectedProducts.push({ name: productName, price: productPrice,
quantity: 1 });
}

updateReceipt();
});
}

function updateReceipt() {
let total = 0;
receiptContent.innerHTML = "";

selectedProducts.forEach(product => {
total += product.price * product.quantity;

// Display the quantity indicator if quantity is greater than 1


const quantityIndicator = product.quantity > 1 ? `(x$
{product.quantity})` : "";

receiptContent.innerHTML += `
<div class="receipt-item">
<span class="product-info">${product.name} $
{quantityIndicator}:</span>
<span class="product-info" style="text-align: right;">₱$
{(product.price * product.quantity).toFixed(2)}</span>
<button class="cancel-button" data-product="$
{product.name}">Cancel</button>
</div>
`;
});

receiptContent.innerHTML += `
<div class="receipt-total">
<span class="total-label">Total:</span>
<span class="total-value" style="text-align: right;">₱$
{total.toFixed(2)}</span>
</div>
`;

// Add event listeners for cancel buttons


const cancelButtons = document.querySelectorAll(".cancel-button");
cancelButtons.forEach(cancelButton => {
cancelButton.addEventListener("click", function() {
const productName = this.getAttribute("data-product");
removeProductFromReceipt(productName);
});
});
}

function removeProductFromReceipt(productName) {
const index = selectedProducts.findIndex(product => product.name ===
productName);
if (index !== -1) {
const product = selectedProducts[index];
if (product.quantity > 1) {
product.quantity -= 1;
} else {
selectedProducts.splice(index, 1);
}
updateReceipt();
}
}

function printReceipt() {
const receiptWindow = window.open("", "_blank");

const receiptHTML = `
<html>
<head>
<title>Order Receipt</title>
<style>
/* Add your receipt styling here */
body {
font-family: Arial, sans-serif;
}
.receipt {
border: 2px solid #333;
padding: 20px;
max-width: 400px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.receipt-header {
font-size: 24px;
text-align: center;
margin-bottom: 10px;
}
.receipt-subheader{
font-size: 24px:
text-align: center;
margin-bottom: 10px;
}
.receipt-item {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.product-info {
flex: 2;
text-align: left;
}
.total-label {
flex: 2;
text-align: left;
font-weight: bold;
}
.total-value {
flex: 1;
text-align: right;
font-weight: bold;
}
.receipt-total {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-weight: bold;
}
.receipt-footer {
font-size: 12px;
margin-top: 20px;
text-align: center;
}
/* Hide cancel buttons in the receipt */
.receipt-item .cancel-button {
display: none;
}
</style>
</head>
<body>
<div class="receipt">
<div class="receipt-header">
<h1>"Meat & Seafood Express"</h1>
</div>
<div class="receipt-subheader">
<h3>Order Receipt</h3>
</div>
<div class="receipt-items">
${receiptContent.innerHTML}
</div>
<div class="receipt-footer">
Thank you for choosing Meat & Seafood Express!
</div>
</div>
</body>
</html>
`;

receiptWindow.document.open();
receiptWindow.document.write(receiptHTML);
receiptWindow.document.close();
}
});

You might also like