如何实现将选中的商品尺码加入购物车功能？

1. 前端添加尺码选择控件 #

在商品展示页面（比如products.php），给每个商品添加尺码选择组件，并用表单包裹添加购物车的操作，确保尺码参数能传递到后端。示例代码：

<!-- 单个商品的添加购物车区域 -->
<div class="product-item">
  <h3><?php echo $row['productName']; ?></h3>
  <!-- 尺码选择下拉框 -->
  <select name="size" required>
    <option value="">请选择尺码</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
  </select>
  <!-- 表单提交到购物车处理脚本 -->
  <form method="GET" action="cart.php">
    <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
    <input type="hidden" name="action" value="add">
    <button type="submit">加入购物车</button>
  </form>
</div>

也可以用单选按钮替代下拉框，核心是确保选中的尺码能作为参数传递给后端。

2. 修改后端PHP购物车代码 #

2.1 接收并处理尺码参数 #

更新你的购物车处理代码，新增尺码参数的接收、验证逻辑，并调整购物车存储结构，确保同商品不同尺码作为独立条目：

<?php
session_start();
error_reporting(0);
include 'connections.php';
if(isset($_GET['action']) && $_GET['action']=="add"){
    $id=intval($_GET['id']);
    // 接收尺码参数
    $size = isset($_GET['size']) ? trim($_GET['size']) : '';
    
    // 验证尺码是否选择
    if(empty($size)){
        echo "<script>alert('请选择尺码')</script>";
        echo "<script type='text/javascript'> document.location ='products.php'; </script>";
        exit;
    }
        
    // 用「商品ID_尺码」作为购物车条目的唯一标识，避免同商品不同尺码混淆
    $cartKey = $id . '_' . $size;
    
    if(isset($_SESSION['cart'][$cartKey])){
        // 已有该尺码商品，数量+1
        $_SESSION['cart'][$cartKey]['quantity']++;
        
    }else{
        $sql_p="SELECT * FROM products WHERE id={$id}";
        $query_p=mysqli_query($con,$sql_p);
        if(mysqli_num_rows($query_p)!=0){
            $row_p=mysqli_fetch_array($query_p);
           
            $_SESSION['cart'][$cartKey]=array(
                "product_id" => $row_p['id'],
                "size" => $size,
                "quantity" => 1, 
                "price" => $row_p['productPrice'],
                "product_name" => $row_p['productName'] // 可选，方便购物车展示
            );
        }else{
            echo "<script>alert('商品ID无效')</script>";
            echo "<script type='text/javascript'> document.location ='products.php'; </script>";
            exit;
        }
    }
    echo "<script>alert('商品已添加到购物车')</script>";
    echo "<script type='text/javascript'> document.location ='products.php'; </script>";
}
?>

2.2 核心逻辑说明 #

• 用商品ID_尺码作为session购物车的键，确保同商品不同尺码被视为独立条目。
• 在购物车数组中新增size字段，方便后续展示购物车时显示尺码信息。
• 新增尺码非空验证，防止用户未选尺码就提交。

3. 购物车展示页面适配 #

展示购物车内容时，读取每个条目的size字段并显示，示例代码片段：

<!-- 购物车展示区域 -->
<?php if(!empty($_SESSION['cart'])): ?>
<table>
  <tr>
    <th>商品名称</th>
    <th>尺码</th>
    <th>单价</th>
    <th>数量</th>
    <th>小计</th>
  </tr>
  <?php foreach($_SESSION['cart'] as $item): ?>
  <tr>
    <td><?php echo $item['product_name']; ?></td>
    <td><?php echo $item['size']; ?></td>
    <td><?php echo $item['price']; ?></td>
    <td><?php echo $item['quantity']; ?></td>
    <td><?php echo $item['price'] * $item['quantity']; ?></td>
  </tr>
  <?php endforeach; ?>
</table>
<?php else: ?>
<p>购物车为空</p>
<?php endif; ?>

4. 进阶优化（可选） #

• 动态尺码加载：如果不同商品有不同尺码，建议新增product_sizes关联表，前端从数据库动态拉取对应商品的可选尺码，避免硬编码。
• 安全优化：使用预处理语句替代直接拼接SQL，防止SQL注入风险；将表单提交方式改为POST，避免参数暴露在URL中。
• 库存校验：添加尺码对应的库存校验，防止用户添加超出库存的商品。

内容的提问来源于stack exchange，提问作者Joshua Espina Magos