1. 理解商品多规格SKU功能
在电商网站中,商品多规格SKU功能指的是对一种商品按照不同属性进行组合的不同货品进行区分和管理。常见的商品属性包括颜色、尺寸、型号等,每个属性下又有多个可选项,因此,同一种商品就可能会有多个不同的货品。
这种功能的实现可以允许用户在购买商品时选择自己所需的产品属性组合,增强了网站的交互性和购物体验。
2. SKU功能的实现方式
2.1 数据库设计
实现商品多规格SKU功能,必须对产品属性进行分类存储。通常的做法是将商品信息和规格信息拆分成两个表。商品信息表保存商品的必填信息,如商品ID、名称、描述、价格、库存量等,规格信息表则需要存储参数名称、选项、以及商品ID组成信息。
CREATE TABLE `goods` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'SKU ID',
`name` varchar(255) NOT NULL COMMENT 'SKU 名称',
`price` decimal(10,2) NOT NULL DEFAULT '0.00' COMMENT 'SKU 价格',
`stock` int(10) unsigned NOT NULL DEFAULT '0' COMMENT 'SKU 库存量',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品主表';
CREATE TABLE `goods_attribute` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '规格ID',
`goods_id` int(11) NOT NULL COMMENT '商品ID',
`attribute_name` varchar(50) NOT NULL COMMENT '规格名称',
`attribute_value` varchar(50) NOT NULL COMMENT '规格取值',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品规格表';
2.2 数据库操作
通过PHP代码,可以通过以下步骤往数据库中添加SKU:
首先根据商品的ID在商品信息表中查询到该商品的基本信息。
根据商品ID在商品规格表中查询到该商品的规格信息。
对规格信息进行处理,生成所有的SKU信息,并分别插入到商品信息表中。
下面是向商品信息表添加SKU的代码示例:
// 获取商品信息
$sql = "SELECT * FROM `goods` WHERE `id` = {$goods_id}";
$res_good = mysqli_query($link, $sql);
$row_good = mysqli_fetch_assoc($res_good);
// 获取商品属性
$sql = "SELECT * FROM `goods_attribute` WHERE `goods_id` = {$goods_id} ORDER BY `id` ASC";
$res_attribute = mysqli_query($link, $sql);
$attribute_list = array();
while ($row_attribute = mysqli_fetch_assoc($res_attribute)) {
$attribute_list[$row_attribute['attribute_name']][] = $row_attribute['attribute_value'];
}
// 生成 SKU 数组
$sku_list = array();
sku_dfs($attribute_list, "", $sku_list);
// SKU信息插入数据库
foreach ($sku_list as $sku_item) {
$sql = "INSERT INTO `goods` (`name`, `price`, `stock`) VALUES ('{$row_good['name']}--{$sku_item}', '{$row_good['price']}', '{$row_good['stock']}')";
mysqli_query($link, $sql);
}
// DFS获取商品可选项组合
function sku_dfs($attribute_list, $sku_str, &$sku_list) {
if (empty($attribute_list)) {
$sku_list[] = $sku_str;
return;
}
$attr_key = key($attribute_list);
$attr_values = $attribute_list[$attr_key];
foreach ($attr_values as $attr_value) {
$sku_str .= "{$attr_key}={$attr_value},";
$next_attribute_list = $attribute_list;
unset($next_attribute_list[$attr_key]);
sku_dfs($next_attribute_list, $sku_str, $sku_list);
$sku_str = substr($sku_str, 0, -strlen("{$attr_key}={$attr_value},"));
}
}
3. 商品详情页的展示
在商品详情页中,应该呈现出所有SKU的组合信息,并且对每一个SKU都应该对应着唯一的货品。当用户选择一种SKU时,应该可以明确对应的货品的基本信息。
下面是一个基本的展示结构,其中使用了JS代码的动态生成,将商品ID(goods_id)作为输入参数传递:
<html>
<head>
<meta charset="UTF-8">
<title>商品详情</title>
</head>
<body>
<h3>商品名称:<?php echo $row_good['name']; ?></h3>
<p>商品价格:<?php echo $row_good['price']; ?></p>
<h4>商品规格:</h4>
<div id="sku_info"></div>
<script type="text/javascript">
// 展示SKU组合信息
function showSkuInfo(res) {
var sku_list = res.sku_list;
var html = '';
for (var i = 0; i < sku_list.length; i++) {
html += '<div class="sku">';
html += ' <h5>' + sku_list[i].sku_name + '</h5>';
html += ' <p>价格:' + sku_list[i].price + '</p>';
html += ' <p>库存:' + sku_list[i].stock + '</p>';
html += '</div>';
}
document.getElementById('sku_info').innerHTML = html;
}
// 获取商品SKU信息
function getGoodsSku(goods_id) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
showSkuInfo(JSON.parse(xhr.responseText));
}
}
xhr.open('POST', './sku.php');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('goods_id=' + goods_id);
}
// 初始化
getGoodsSku();
</script>
</body>
</html>
4. SKU选择和价格展示
选择SKU后,需要动态展示当前SKU对应的价格等详细信息。下面是一个常见的操作方式:
在商品规格表单中加入属性单选框,并且对所有属性分别进行命名,每个属性的单选框应该都有一个固定的名称,比如“color”属性对应的单选框名称应该为“color”;
使用JS监听单选框选择变化事件(onchange),并把所点击的属性值传递给后端PHP程序进行查询,获取对应的SKU信息;
PHP程序查询到对应的SKU信息后,把结果返回给前端JS,并进行SKU信息展示和价格更新;
根据选择的SKU,提交表单时要把当前SKU的ID传递给后端进行支付等操作。
5. 小结
商品多规格SKU功能是电商网站的核心功能之一。实现商品多规格SKU功能需要对数据库进行设计,编写相关的SQL语句,并使用PHP代码进行处理。在商品展示界面上,需要动态生成每个SKU的相关信息,并且监听用户的选择操作,在用户做出选择时更新商品价格等重要信息。