You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

基于Session的多规格商品购物车开发问题求助

解决方案:动态更新选中尺寸的SKU、库存及隐藏输入框

看起来你的核心问题是:当用户选择不同商品尺寸时,无法动态更新对应的SKU、库存信息到隐藏输入框,导致加入购物车时拿到的是默认值而非选中尺寸的属性。下面是一步步的修复方案:

1. 优化尺寸选择模块的HTML结构

首先,我们把每个尺寸对应的价格、SKU、库存都通过data-*属性存储在单选框上,这样JavaScript可以直接从选中的单选框获取所有需要的信息,避免依赖容易冲突的ID:

<div class="sc-item <?=$itemDisable;?>">
  <input type="radio" name="variatie_maat" value="<?=$order_list['maat'];?>" 
         data-price="<?=$order_list['prijs'];?>" 
         data-sku="<?=$order_list['SKU'];?>" 
         data-quantity="<?=$order_list['aantal'];?>"
         onclick="updateProductDetails(this)" 
         id="<?=$order_list['maat'];?>-maat" <?=$disableValue;?>>
  <label for="<?=$order_list['maat'];?>-maat"><?=$order_list['maat'];?></label>
</div>

这里移除了原来的隐藏价格输入框,因为data-price已经足够传递价格信息,同时避免了价格重复时ID冲突的问题。

2. 修正隐藏输入框的ID与命名

给SKU和库存的隐藏输入框添加ID,方便JavaScript定位;同时修正库存输入框的name属性,确保和add_to_cart.php里的取值对应:

<input type="hidden" name="productPrijs" id="newPrice" value="" />
<input type="hidden" name="SKU" id="hiddenSKU" value="" /> <!-- 添加ID用于JS修改 -->
<input type="hidden" name="aantal" id="hiddenQuantity" value="" /> <!-- 把name改为aantal,对应add_to_cart里的$_POST['aantal'] -->
<input type="hidden" name="naam" value="<?=$row['title'];?>" />
<input type="hidden" name="product_id" value="<?=$_GET['id'];?>" />
<input type="hidden" name="image" value="<?=$row['image_1'];?>" />

3. 重写JavaScript函数实现动态更新

替换原来的myFunction,改为从选中的单选框读取所有属性,同步更新页面显示和隐藏输入框:

<script>
function updateProductDetails(radio) {
  // 从单选框的data属性提取尺寸对应的信息
  const selectedPrice = radio.dataset.price;
  const selectedSKU = radio.dataset.sku;
  const selectedStock = radio.dataset.quantity;

  // 更新价格显示与隐藏输入框
  document.getElementById("price").innerHTML = "€ " + selectedPrice;
  document.getElementById("newPrice").value = selectedPrice;

  // 更新库存显示(根据库存数量判断是否缺货)
  const stockDisplayText = selectedStock > 0 
    ? "Beschikbaarheid: <span>Op voorraad</span>" 
    : "Beschikbaarheid: <span>Uitverkocht</span>";
  document.getElementById("quantity").innerHTML = stockDisplayText;
  // 更新库存隐藏输入框
  document.getElementById("hiddenQuantity").value = selectedStock;

  // 更新SKU显示与隐藏输入框
  document.getElementById("SKU").innerHTML = "SKU: " + selectedSKU;
  document.getElementById("hiddenSKU").value = selectedSKU;
}

// 页面加载完成后,自动初始化默认选中的尺寸信息
window.addEventListener('DOMContentLoaded', function() {
  const defaultRadio = document.querySelector('input[name="variatie_maat"]:checked') 
    || document.querySelector('input[name="variatie_maat"]');
  if (defaultRadio) {
    updateProductDetails(defaultRadio);
  }
});
</script>

4. 修复add_to_cart.php中的参数匹配问题

原来的代码中,判断购物车重复商品时,尺寸参数的取值有误,同时确保库存参数对应正确:

<?php
//ADD TO CART
if (isset($_POST["add_to_cart"])) {
  $index = false;
  if(!isset($_SESSION["shopping_cart"])) {
    $index = false;
  } else {
    foreach ($_SESSION["shopping_cart"] as $key => $value) {
      // 修正:尺寸参数从$_POST['variatie_maat']获取(对应单选框的name)
      if($value["item_id"] == $_GET["id"] && $value['item_size'] == $_POST['variatie_maat']) {
        $index = $key;
        break;
      }
    }
  }
  if($index !== false) {
    $_SESSION["shopping_cart"][$index]['item_quantity']++;
  } else {
    $_SESSION['shopping_cart'][] = array(
      'item_id' => $_GET['id'],
      'item_name' => $_POST['naam'],
      'item_price' => $_POST['productPrijs'],
      'item_image' => $_POST['image'],
      'item_size' => $_POST['variatie_maat'],
      'item_quantity' => $_POST['aantal'], // 对应隐藏输入框的name="aantal"
      'item_sku' => $_POST["SKU"], // 对应隐藏输入框的name="SKU"
    );
    header('Location: https://' . $CONFIG::get_templatesettings('WEB_ROOT') . '/winkelwagen?toegevoegd=1');
    exit;
  }
}
//REMOVE FROM CART
if(isset($_GET['action'])){
  if($_GET['action'] == 'delete'){
    foreach($_SESSION['shopping_cart'] as $key => $value){
      if($value['item_id'] == $_GET['id']){
        unset($_SESSION['shopping_cart'][$key]);
        header('Location: https://' . $CONFIG::get_templatesettings('WEB_ROOT') . '/winkelwagen?verwijderd=1');
        exit;
      }
    }
  }
}
?>

为什么这样修改?

  • data-*属性存储尺寸属性,比单独的隐藏输入框更简洁,也避免了ID冲突问题
  • 统一的JavaScript函数一次性处理所有属性更新,确保显示和隐藏输入框同步
  • 修复了add_to_cart.php中参数不匹配的问题,保证加入购物车时拿到的是选中尺寸的正确SKU、库存等信息

内容的提问来源于stack exchange,提问作者Diego Ronca

火山引擎 最新活动