校园项目：自定义PC电商平台CSV集成与购物车功能求助

1. CSV数据关联分类页面按钮 #

核心思路 #

先通过JavaScript读取并解析CSV文件为结构化的商品对象数组，再根据分类按钮的标识筛选对应商品，将筛选结果传递到分类页面进行渲染。

实现步骤与代码 #

第一步：解析CSV数据

使用fetch读取CSV文件，将文本内容转换为商品对象数组（针对带逗号的字段，用正则解析更鲁棒）：

// 鲁棒的CSV行解析函数，处理带引号的字段
function parseCSVRow(row) {
  const regex = /(?:^|,)(?:"([^"]*)"|([^",]*))/g;
  const values = [];
  let match;
  while ((match = regex.exec(row)) !== null) {
    values.push(match[1] || match[2] || '');
  }
  return values;
}

// 加载并解析所有商品数据
async function loadProducts() {
  try {
    const response = await fetch('products.csv');
    const csvText = await response.text();
    const rows = csvText.split('\n').filter(row => row.trim() !== '');
    const headers = parseCSVRow(rows[0]).map(h => h.trim());
    
    return rows.slice(1).map(row => {
      const values = parseCSVRow(row).map(v => v.trim());
      return headers.reduce((product, header, index) => {
        product[header] = values[index];
        return product;
      }, {});
    });
  } catch (err) {
    console.error('加载CSV失败:', err);
    return [];
  }
}

第二步：关联分类按钮与商品数据

给页面上的分类按钮（需添加data-category属性标记分类）绑定点击事件，筛选对应分类的商品并传递到分类页面：

// 首页/分类入口页面的JS
document.addEventListener('DOMContentLoaded', async () => {
  const products = await loadProducts();
  const categoryButtons = document.querySelectorAll('.category-btn');

  categoryButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const targetCategory = btn.dataset.category;
      const filteredProducts = products.filter(p => p.category === targetCategory);
      
      // 将筛选结果存入localStorage，供分类页面读取
      localStorage.setItem('currentCategoryProducts', JSON.stringify(filteredProducts));
      // 跳转到分类页面
      window.location.href = `category.html?category=${targetCategory}`;
    });
  });
});

第三步：分类页面渲染商品

在分类页面读取存储的商品数据，动态生成商品卡片：

// 分类页面的JS
document.addEventListener('DOMContentLoaded', async () => {
  const products = JSON.parse(localStorage.getItem('currentCategoryProducts')) || [];
  const productContainer = document.getElementById('product-container');

  products.forEach(product => {
    const card = document.createElement('div');
    card.className = 'product-card';
    card.innerHTML = `
      <h3>${product.name}</h3>
      <p>价格：¥${product.price}</p>
      <button class="add-to-cart" data-id="${product.id}">加入购物车</button>
    `;
    productContainer.appendChild(card);
  });

  // 清除localStorage中的临时数据（可选）
  localStorage.removeItem('currentCategoryProducts');
});

2. 商品加入购物车与总价计算功能 #

核心思路 #

使用localStorage存储购物车数据（无需后端的轻量方案），通过事件监听处理商品的增减操作，实时计算并更新总价。

实现步骤与代码 #

第一步：加入购物车功能

给商品卡片的「加入购物车」按钮绑定点击事件，将商品添加到购物车（已存在则增加数量）：

// 全局监听加入购物车按钮（可放在分类页面或全局JS文件）
document.addEventListener('click', async (e) => {
  if (!e.target.classList.contains('add-to-cart')) return;

  const productId = e.target.dataset.id;
  // 重新加载商品数据（或从分类页面的products变量获取）
  const products = await loadProducts();
  const targetProduct = products.find(p => p.id === productId);
  if (!targetProduct) return;

  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  const existingItem = cart.find(item => item.id === productId);

  if (existingItem) {
    existingItem.quantity++;
  } else {
    cart.push({ ...targetProduct, quantity: 1 });
  }

  localStorage.setItem('cart', JSON.stringify(cart));
  updateCartDisplay(); // 更新购物车UI
});

第二步：购物车UI与总价计算

编写函数实时更新购物车内容、计算并展示总价，同时处理商品数量的增减：

// 更新购物车显示与总价
function updateCartDisplay() {
  const cart = JSON.parse(localStorage.getItem('cart')) || [];
  const cartContainer = document.getElementById('cart-container');
  const totalPriceEl = document.getElementById('total-price');

  // 清空现有内容
  cartContainer.innerHTML = '';
  let total = 0;

  cart.forEach(item => {
    const itemTotal = parseFloat(item.price) * item.quantity;
    total += itemTotal;

    const cartItem = document.createElement('div');
    cartItem.className = 'cart-item';
    cartItem.innerHTML = `
      <span>${item.name} × ${item.quantity}</span>
      <span>¥${itemTotal.toFixed(2)}</span>
      <button class="qty-btn qty-minus" data-id="${item.id}">-</button>
      <button class="qty-btn qty-plus" data-id="${item.id}">+</button>
    `;
    cartContainer.appendChild(cartItem);
  });

  // 渲染总价
  totalPriceEl.textContent = `总价：¥${total.toFixed(2)}`;
  // 绑定数量增减按钮事件
  bindQtyButtons();
}

// 绑定购物车商品数量增减事件
function bindQtyButtons() {
  const minusBtns = document.querySelectorAll('.qty-minus');
  const plusBtns = document.querySelectorAll('.qty-plus');

  minusBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const productId = btn.dataset.id;
      let cart = JSON.parse(localStorage.getItem('cart')) || [];
      const itemIndex = cart.findIndex(item => item.id === productId);
      
      if (itemIndex === -1) return;
      if (cart[itemIndex].quantity > 1) {
        cart[itemIndex].quantity--;
      } else {
        cart.splice(itemIndex, 1);
      }
      
      localStorage.setItem('cart', JSON.stringify(cart));
      updateCartDisplay();
    });
  });

  plusBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const productId = btn.dataset.id;
      let cart = JSON.parse(localStorage.getItem('cart')) || [];
      const existingItem = cart.find(item => item.id === productId);
      
      if (existingItem) {
        existingItem.quantity++;
        localStorage.setItem('cart', JSON.stringify(cart));
        updateCartDisplay();
      }
    });
  });
}

// 页面加载时初始化购物车显示
document.addEventListener('DOMContentLoaded', () => {
  updateCartDisplay();
});

注意事项 #

• 确保CSV文件的列名与代码中使用的属性名一致（比如id、name、category、price）
• 如果需要支持更复杂的商品属性，可扩展CSV的列并对应修改解析逻辑
• localStorage存储的数据是字符串类型，需用JSON.stringify和JSON.parse进行转换

内容的提问来源于stack exchange，提问作者ctr927