>  기사  >  웹 프론트엔드  >  결제 통합을 통해 HTMLCSS 및 JS에서 간단한 장바구니를 만드는 방법

결제 통합을 통해 HTMLCSS 및 JS에서 간단한 장바구니를 만드는 방법

DDD
DDD원래의
2024-09-19 08:15:40617검색

How to create a simple shopping cart in HTMLCSSand JS with Payment integration

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!

1. Create the files

Create a folder and put these files in it:

  • index.html
  • style.css
  • script.js

2. Add HTML

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>

3. Add CSS

Put this in style.css:

.products, .cart {
    margin: 20px;
}
.product, .cart-item {
    margin-bottom: 10px;
}

4. Add Javascript

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);
});

5. Explaining the JS file

1. Shopping cart functionality

  1. Initialize the cart
let cart = [];
  • cart: An empty array to store items added to the 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();
}
  • addToCart(name, price): Function to add items to the cart.
  • cart.find(product => product.name === name): Searches for an item in the cart by name.
  • if(item): If an item is found, it increments the quantity.
  • else: If the item is not found, it adds a new item to the cart with the specified name, price, and a quantity of 1.
  • updateCart(): Calls the updateCart function to refresh the cart display.

3 Remove items from the cart

function removeFromCart(name) {
    cart = cart.filter(product => product.name !== name);
    updateCart();
}
  • removeFromCart(name): Function to remove items from the cart.
  • cart.filter(product => product.name !== name): Filters out the item with the specified name from the cart.
  • updateCart(): Calls the updateCart function to refresh the cart display.

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;
}
  • updateCart(): Function that updates the cart display.
  • cartItems: Gets the HTML element with the ID cart-items.
  • cartTotal: Gets the HTML element with the ID cart-total.
  • cartItems.innerHTML = '': Clears the current cart items display.
  • let total = 0: Initializes the total amount to 0.
  • cart.forEach(product => { ... }): Iterates over each product in the cart.
  • document.createElement('li'): Creates a new list item element.
  • li.textContent = ${product.name} - $${product.price} x ${product.quantity}: Sets the text content of the list item.
  • document.createElement(‘button’): Creates a new button element.
  • removeButton.textContent = 'Remove': Sets the text content of the button.
  • removeButton.onclick = () => removeFromCart(product.name): Sets the button’s click event to call removeFromCart.
  • li.appendChild(removeButton): Adds the button to the list item.
  • cartItems.appendChild(li): Adds the list item to the cart items display.
  • total += product.price * product.quantity: Adds the product's total price to the total amount.
  • cartTotal.textContent = total: Updates the total amount display.

Payment Request API

  1. Create a Payment Request object
const paymentRequest = new PaymentRequest(
  [
    {
      supportedMethods: 'basic-card',
      data: {
        supportedNetworks: ['visa', 'mastercard'],
      },
    },
  ],
  {
    total: {
      label: 'Total',
      amount: { currency: 'USD', value: '10.00' },
    },
  }
);
  • PaymentRequest: Creates a new payment request.
  • supportedMethods: Specifies the payment methods supported (e.g., ‘basic-card’).
  • data: Contains additional information about the payment method, such as supported networks.
  • total: Represents the total amount to be charged.

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);
});
  • show(): Displays the payment interface to the user.
  • then((paymentResponse) => { ... }): If the user approves the payment, this promise resolves with a paymentResponse object.
  • paymentResponse: Contains the user’s payment details.
  • console.log(paymentResponse): Logs the payment response for processing.
  • catch((error) => { ... }): If the payment fails or is canceled, this promise catches the error and logs it.

Summary

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!

Conclusion

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.