If you want to create your own shopping cart in HTM5, CSS3, and JS, you are in the right place! This is how to create a shopping cart. This also includes Payment integration from the Payment Request API!
Create a folder and put these files in it:
Put this in index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shopping Cart</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="products"> <div class="product"> <h2>Product 1</h2> <p>$10</p> <button onclick="addToCart('Product 1', 10)">Add to Cart</button> </div> <!-- Add more products as needed --> </div> <div class="cart"> <h2>Shopping Cart</h2> <ul id="cart-items"></ul> <p>Total: $<span id="cart-total">0</span></p> </div> <script src="script.js"></script> </body> </html>
Put this in style.css:
.products, .cart { margin: 20px; } .product, .cart-item { margin-bottom: 10px; }
Put this in script.js:
let cart = []; function addToCart(name, price) { const item = cart.find(product => product.name === name); if (item) { item.quantity++; } else { cart.push({ name, price, quantity: 1 }); } updateCart(); } function removeFromCart(name) { cart = cart.filter(product => product.name !== name); updateCart(); } function updateCart() { const cartItems = document.getElementById('cart-items'); const cartTotal = document.getElementById('cart-total'); cartItems.innerHTML = ''; let total = 0; cart.forEach(product => { const li = document.createElement('li'); li.textContent = `${product.name} - $${product.price} x ${product.quantity}`; const removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.onclick = () => removeFromCart(product.name); li.appendChild(removeButton); cartItems.appendChild(li); total += product.price * product.quantity; }); cartTotal.textContent = total; } const paymentRequest = new PaymentRequest( [ { supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard'], }, }, ], { total: { label: 'Total', amount: { currency: 'USD', value: '10.00' }, }, } ); paymentRequest.show().then((paymentResponse) => { // Process the payment console.log(paymentResponse); // Complete the payment paymentResponse.complete('success').then(() => { console.log('Payment completed successfully'); }); }).catch((error) => { console.error('Payment failed', error); });
let cart = [];
2 Add items to the cart
function addToCart(name, price) { const item = cart.find(product => product.name === name); if (item) { item.quantity++; } else { cart.push({ name, price, quantity: 1 }); } updateCart(); }
3 Remove items from the cart
function removeFromCart(name) { cart = cart.filter(product => product.name !== name); updateCart(); }
4 Update the cart display
function updateCart() { const cartItems = document.getElementById('cart-items'); const cartTotal = document.getElementById('cart-total'); cartItems.innerHTML = ''; let total = 0; cart.forEach(product => { const li = document.createElement('li'); li.textContent = `${product.name} - $${product.price} x ${product.quantity}`; const removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.onclick = () => removeFromCart(product.name); li.appendChild(removeButton); cartItems.appendChild(li); total += product.price * product.quantity; }); cartTotal.textContent = total; }
const paymentRequest = new PaymentRequest( [ { supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard'], }, }, ], { total: { label: 'Total', amount: { currency: 'USD', value: '10.00' }, }, } );
2 Show the Payment Request
paymentRequest.show().then((paymentResponse) => { // Process the payment console.log(paymentResponse); // Complete the payment paymentResponse.complete('success').then(() => { console.log('Payment completed successfully'); }); }).catch((error) => { console.error('Payment failed', error); });
This code manages a shopping cart by adding, removing, and updating items, and then processes a payment using the Payment Request API. If you have any more questions or need further clarification, feel free to ask in the comments!
That concludes my article about creating a shopping cart with payment integration in HTML5, CSS3, and JS! Make sure to leave a comment and a reaction and check out more of my stuff!
위 내용은 결제 통합을 통해 HTMLCSS 및 JS에서 간단한 장바구니를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!