Scribd Logo
Upload

Welcome to Scribd!

  • Script

    Uploaded by

    pogiisha
    6 views4 pages
    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.

    Original Description:

    Original Title

    script (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    6 views4 pages

    Script

    Uploaded by

    pogiisha
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 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