[자바스크립트] 상품 목록 가져오기

멍발윤 2023. 7. 1. 21:02

쇼핑몰 페이지를 만들 때 자바스크립트로 상품 목록을 가져오는 코드입니다.

<HTML>

<!DOCTYPE html>
<html>
<head>
  <title>상품 목록</title>
</head>
<body>
  <div id="product-list">
    <!-- 상품 목록이 여기에 동적으로 추가될 것입니다 -->
  </div>

  <script src="script.js"></script>
</body>
</html>

<JavaScript>

// 서버에서 상품 목록을 가져와서 웹 페이지에 동적으로 표시하는 함수
function displayProductList() {
  // AJAX 요청을 보내고 상품 목록을 가져옵니다.
  // 실제로는 서버의 API 엔드포인트에 요청을 보내야 합니다.
  // 여기서는 가상의 데이터를 사용합니다.
  const products = [
    { id: 1, name: '상품 1', price: 10000 },
    { id: 2, name: '상품 2', price: 20000 },
    { id: 3, name: '상품 3', price: 30000 }
  ];

  const productListDiv = document.getElementById('product-list');

  // 상품 목록을 순회하면서 각 상품을 동적으로 생성하여 웹 페이지에 추가합니다.
  products.forEach(product => {
    const productDiv = document.createElement('div');
    productDiv.innerHTML = `
      <h3>${product.name}</h3>
      <p>가격: ${product.price}원</p>
      <button onclick="addToCart(${product.id})">장바구니에 추가</button>
    `;
    productListDiv.appendChild(productDiv);
  });
}

// 장바구니에 상품을 추가하는 함수
function addToCart(productId) {
  // 상품을 장바구니에 추가하는 로직을 구현합니다.
  console.log(`상품 ID ${productId}를 장바구니에 추가했습니다.`);
}

// 페이지 로드 시 상품 목록을 표시합니다.
displayProductList();

저작자표시 (새창열림)