Scribd
Upload
8 views1 page

JavaScript Shopping Cart Example

The document contains a JavaScript code snippet for an e-commerce product display and cart functionality. It defines an array of products, allows users to add items to a cart, and displays the cart contents in a modal. The checkout feature is mentioned but not implemented, and the total price of items in the cart can be alerted to the user.

Uploaded by

cy069234
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views1 page

JavaScript Shopping Cart Example

The document contains a JavaScript code snippet for an e-commerce product display and cart functionality. It defines an array of products, allows users to add items to a cart, and displays the cart contents in a modal. The checkout feature is mentioned but not implemented, and the total price of items in the cart can be alerted to the user.

Uploaded by

cy069234
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

const products = [

{ id: 1, name: 'Shirt', price: 20 },


{ id: 2, name: 'Pants', price: 30 },
{ id: 3, name: 'Shoes', price: 50 }
];

let cart = [];

function renderProducts() {
const container = [Link]('products');
[Link] = '';
[Link](product => {
const div = [Link]('div');
[Link] = 'product';
[Link] = `
<h3>${[Link]}</h3>
<p>$${[Link]}</p>
<button onclick="addToCart(${[Link]})">Add to Cart</button>
`;
[Link](div);
});
}

function addToCart(id) {
const product = [Link](p => [Link] === id);
[Link](product);
updateCartDisplay();
}

function updateCartDisplay() {
[Link]('cart').textContent = `Cart: ${[Link]} items`;
}

[Link]('cart').addEventListener('click', () => {
const modal = [Link]('cart-modal');
const items = [Link]('cart-items');
[Link] = [Link](item => `<li>${[Link]} -
$${[Link]}</li>`).join('');
[Link] = 'block';
});

[Link]('close-cart').addEventListener('click', () => {
[Link]('cart-modal').[Link] = 'none';
});

[Link]('checkout').addEventListener('click', () => {
alert('Checkout not implemented. Total: $' + [Link]((sum, item) => sum +
[Link], 0));
});

renderProducts();

You might also like