js仿淘宝添加sku代码

基础概念

SKU（Stock Keeping Unit）是库存保有单位，是一种产品分配的唯一的数字或字母数字代码，用于在整条供应链上跟踪产品的库存，按产品和类别衡量销售额。

在电商网站如淘宝中，SKU通常用于表示商品的属性组合，例如颜色、尺寸等。用户可以根据这些属性选择不同的商品变体。

类型

简单SKU：仅包含基本信息，如产品ID。
复合SKU：包含多个属性，如颜色、尺寸、材质等。

应用场景

电商平台：展示商品的不同变体。
库存管理系统：跟踪和管理商品库存。
订单处理系统：根据SKU快速匹配和处理订单。

示例代码

以下是一个简单的JavaScript示例，用于模拟淘宝添加SKU的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SKU选择器</title>
    <style>
        .sku-container {
            display: flex;
            flex-wrap: wrap;
        }
        .sku-item {
            margin: 5px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .sku-item.selected {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <div id="sku-selector" class="sku-container">
        <!-- SKU选项将通过JavaScript动态生成 -->
    </div>
    <script>
        const skuData = [
            { id: 1, name: '红色', price: 100 },
            { id: 2, name: '蓝色', price: 110 },
            { id: 3, name: '小号', price: 0 },
            { id: 4, name: '中号', price: 0 },
            { id: 5, name: '大号', price: 0 }
        ];

        const skuSelector = document.getElementById('sku-selector');

        function renderSKUs() {
            skuSelector.innerHTML = '';
            skuData.forEach(sku => {
                const skuItem = document.createElement('div');
                skuItem.classList.add('sku-item');
                skuItem.textContent = `${sku.name} - ￥${sku.price}`;
                skuItem.addEventListener('click', () => selectSKU(sku));
                skuSelector.appendChild(skuItem);
            });
        }

        function selectSKU(sku) {
            const selectedSKUs = Array.from(skuSelector.children).filter(item => item.classList.contains('selected'));
            if (selectedSKUs.length > 0 && selectedSKUs[selectedSKUs.length - 1].dataset.id === sku.id.toString()) {
                selectedSKUs[selectedSKUs.length - 1].classList.remove('selected');
            } else {
                skuItem.classList.add('selected');
            }
        }

        renderSKUs();
    </script>
</body>
</html>