js实现商品展示页

实现商品展示页的 JavaScript 核心功能

基础 HTML 结构

<div id="product-container" class="product-grid"></div>

CSS 基础样式

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

数据获取与渲染

// 模拟商品数据
const products = [
  {
    id: 1,
    name: '无线蓝牙耳机',
    price: 299,
    image: 'https://example.com/headphones.jpg',
    description: '高保真音质，30小时续航'
  },
  // 更多商品数据...
];

function renderProducts() {
  const container = document.getElementById('product-container');

  products.forEach(product => {
    const productCard = document.createElement('div');
    productCard.className = 'product-card';
    productCard.innerHTML = `
      <img src="${product.image}" alt="${product.name}" class="product-image">
      <div class="product-info">
        <h3>${product.name}</h3>
        <p>${product.description}</p>
        <p class="price">¥${product.price}</p>
        <button class="add-to-cart" data-id="${product.id}">加入购物车</button>
      </div>
    `;
    container.appendChild(productCard);
  });
}

// 页面加载时渲染商品
document.addEventListener('DOMContentLoaded', renderProducts);

购物车功能实现

const cart = [];

function addToCart(productId) {
  const product = products.find(p => p.id === productId);
  if (product) {
    cart.push(product);
    updateCartCount();
  }
}

function updateCartCount() {
  const cartCount = document.getElementById('cart-count');
  if (cartCount) {
    cartCount.textContent = cart.length;
  }
}

// 事件委托处理加入购物车按钮
document.getElementById('product-container').addEventListener('click', (e) => {
  if (e.target.classList.contains('add-to-cart')) {
    const productId = parseInt(e.target.getAttribute('data-id'));
    addToCart(productId);
  }
});

筛选与排序功能

function sortProducts(criteria) {
  switch(criteria) {
    case 'price-asc':
      products.sort((a, b) => a.price - b.price);
      break;
    case 'price-desc':
      products.sort((a, b) => b.price - a.price);
      break;
    case 'name':
      products.sort((a, b) => a.name.localeCompare(b.name));
      break;
  }
  refreshProductDisplay();
}

function filterProducts(category) {
  // 实际项目中这里应该是API请求或过滤现有数据
  refreshProductDisplay();
}

function refreshProductDisplay() {
  const container = document.getElementById('product-container');
  container.innerHTML = '';
  renderProducts();
}

实际项目增强建议

1. 使用Fetch API或Axios从后端获取真实商品数据

   async function fetchProducts() {
   try {
    const response = await fetch('/api/products');
    const data = await response.json();
    products = data;
    renderProducts();
   } catch (error) {
    console.error('获取商品失败:', error);
   }
   }

2. 实现分页加载

   
   let currentPage = 1;
   const productsPerPage = 12;

function loadMoreProducts() { currentPage++; fetch(/api/products?page=${currentPage}) .then(response => response.json()) .then(newProducts => { products.push(...newProducts); renderProducts(); }); }

3. 添加商品详情模态框
```javascript
function showProductDetails(productId) {
  const product = products.find(p => p.id === productId);
  if (product) {
    // 创建并显示模态框
    const modal = document.createElement('div');
    modal.className = 'product-modal';
    modal.innerHTML = `
      <div class="modal-content">
        <span class="close">&times;</span>
        <img src="${product.image}" alt="${product.name}">
        <h2>${product.name}</h2>
        <p class="price">¥${product.price}</p>
        <p>${product.description}</p>
        <button class="add-to-cart" data-id="${product.id}">加入购物车</button>
      </div>
    `;
    document.body.appendChild(modal);

    modal.querySelector('.close').addEventListener('click', () => {
      modal.remove();
    });
  }
}

1. 响应式设计增强

   @media (max-width: 768px) {
   .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
   }