淘宝商品列表对比展示js代码

在电商平台上，商品列表的对比展示功能允许用户同时查看多个商品的详细信息，以便于做出购买决策。以下是一个简单的JavaScript代码示例，用于实现淘宝商品列表的对比展示功能。

基础概念

商品列表：展示在电商平台上的商品集合。
对比展示：允许用户选择多个商品，并在一个界面上显示它们的详细信息进行对比。

优势

提高用户体验：用户可以直观地比较不同商品的特性，快速做出选择。
增加转化率：清晰的对比有助于用户做出购买决定，从而提高转化率。

类型

横向对比：将商品的属性并列展示在同一行。
纵向对比：将商品的属性按列展示，每个商品占据一行。

应用场景

电商平台：如淘宝、京东等。
比价网站：专门用于比较不同平台或商家商品价格的网站。

示例代码

以下是一个简单的JavaScript代码示例，用于实现商品列表的对比展示功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品对比</title>
    <style>
        .product {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            width: 200px;
        }
        .comparison-table {
            border-collapse: collapse;
            width: 100%;
        }
        .comparison-table th, .comparison-table td {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>商品对比</h1>
    <div id="product-list">
        <!-- 商品列表 -->
        <div class="product" data-id="1">商品1</div>
        <div class="product" data-id="2">商品2</div>
        <div class="product" data-id="3">商品3</div>
    </div>
    <button onclick="compareProducts()">对比</button>
    <table id="comparison-table" class="comparison-table"></table>

    <script>
        const products = [
            { id: 1, name: '商品1', price: 100, brand: '品牌A' },
            { id: 2, name: '商品2', price: 150, brand: '品牌B' },
            { id: 3, name: '商品3', price: 120, brand: '品牌C' }
        ];

        function compareProducts() {
            const selectedProducts = Array.from(document.querySelectorAll('.product.selected')).map(el => parseInt(el.getAttribute('data-id')));
            if (selectedProducts.length < 2) {
                alert('请选择至少两个商品进行对比');
                return;
            }

            const comparisonTable = document.getElementById('comparison-table');
            comparisonTable.innerHTML = `
                <tr>
                    <th>属性</th>
                    ${selectedProducts.map(id => `<th>商品${id}</th>`).join('')}
                </tr>
            `;

            const firstProduct = products.find(p => p.id === selectedProducts[0]);
            Object.keys(firstProduct).forEach(key => {
                const row = `<tr>
                    <td>${key}</td>
                    ${selectedProducts.map(id => `<td>${products.find(p => p.id === id)[key]}</td>`).join('')}
                </tr>`;
                comparisonTable.innerHTML += row;
            });
        }

        document.querySelectorAll('.product').forEach(product => {
            product.addEventListener('click', () => {
                product.classList.toggle('selected');
            });
        });
    </script>
</body>
</html>