基于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




