如何将购物车SKU数组转换为含标题、图片、价格的产品信息

嘿，我看了你的代码，问题核心很明确：你当前往购物车添加的只是产品的SKU和分类ID，没有存储标题、图片、价格这些需要展示的完整产品信息。咱们一步步调整代码就能解决：

1. 调整添加到购物车的逻辑，存储完整产品信息 #

现在你的prepareAddToCart函数里，只把sku和categoryId存进了购物车。咱们需要根据这两个值，从products对象里找到对应的完整产品数据，再添加到购物车：

function prepareAddToCart(){
    $('.add-to-cart').click(function(){
        const sku = $(this).attr("sku");
        const categoryId = $(this).attr("category-id");
        // 从products里找到对应分类下的对应产品
        const matchedProduct = products[categoryId].find(item => item.sku == sku);
        // 把完整产品对象添加到购物车（可以额外加个数量属性，默认1）
        const cartItem = {
            ...matchedProduct,
            quantity: 1 // 新增数量属性，方便后续修改数量
        };
        cart.push(cartItem);
        alert("Produsul dumneavoastra a fost adaugat in cos!");
        console.log("Cosul: ", cart);
        // 添加后立即更新购物车显示
        drawCartProducts(cart);
    })
}

2. 修改drawCartProducts函数，渲染产品详情 #

现在购物车里的每个item都有完整的产品数据了，咱们可以修改渲染逻辑，展示标题、图片、价格这些内容：

function drawCartProducts(cart){
    const cartProductsElement = document.getElementById("cart-products");
    cartProductsElement.innerHTML = "";
    // 如果购物车为空，显示提示
    if(cart.length === 0){
        cartProductsElement.innerHTML = "<li>Cosul este gol</li>";
        return;
    }
    for (let i = 0; i < cart.length; i++) {
        const cartItem = cart[i];
        const li = document.createElement("li");
        li.className = "cart-item";
        // 构建包含图片、标题、价格的HTML结构
        li.innerHTML = `
            <img src="${cartItem.imageSource}" alt="${cartItem.title}" style="width: 80px; height: auto;">
            <div class="cart-item-details">
                <h4>${cartItem.title}</h4>
                <p>Pret: ${cartItem.price} RON</p>
                <p>SKU: ${cartItem.sku}</p>
                <p>Categorie: ${Object.keys(products).find(key => products[key].some(p => p.sku == cartItem.sku))}</p>
            </div>
        `;
        cartProductsElement.appendChild(li);
    }
}

3. 完整修改后的代码 #

把所有调整整合后的完整代码如下：

var products = { 
    tricouri: [ 
        { 
            title: "Tricou athletic cu imprimeu", 
            sizes: ["M", "L", "XL"], 
            imageSource: "assets/img/tricou1.jpg", 
            price: 109.99, 
            sku: 1 
        }, 
        { 
            title: "Tricou slim fit de bumbac organic", 
            sizes: ["M", "L", "XL"], 
            imageSource: "assets/img/tricou2.jpg", 
            price: 200, 
            sku: 2 
        }
    ] 
};
var cart = [];

function drawCartProducts(cart){
    const cartProductsElement = document.getElementById("cart-products");
    cartProductsElement.innerHTML = "";
    if(cart.length === 0){
        cartProductsElement.innerHTML = "<li>Cosul este gol</li>";
        return;
    }
    for (let i = 0; i < cart.length; i++) {
        const cartItem = cart[i];
        const li = document.createElement("li");
        li.className = "cart-item";
        li.innerHTML = `
            <img src="${cartItem.imageSource}" alt="${cartItem.title}" style="width: 80px; height: auto;">
            <div class="cart-item-details">
                <h4>${cartItem.title}</h4>
                <p>Pret: ${cartItem.price} RON</p>
                <p>SKU: ${cartItem.sku}</p>
                <p>Categorie: ${Object.keys(products).find(key => products[key].some(p => p.sku == cartItem.sku))}</p>
            </div>
        `;
        cartProductsElement.appendChild(li);
    }
}

$(".categ a").click(function() {
    currentCategory = $(this).attr("cat-id");
    console.log("CATEGORIA CURENTA: ", currentCategory);
    drawProducts(currentCategory);
    prepareAddToCart();
});

function prepareAddToCart(){
    $('.add-to-cart').click(function(){
        const sku = $(this).attr("sku");
        const categoryId = $(this).attr("category-id");
        const matchedProduct = products[categoryId].find(item => item.sku == sku);
        const cartItem = {
            ...matchedProduct,
            quantity: 1
        };
        cart.push(cartItem);
        alert("Produsul dumneavoastra a fost adaugat in cos!");
        console.log("Cosul: ", cart);
        drawCartProducts(cart);
    })
}

prepareAddToCart();
var cartState = false;

额外提示 #

• 我给购物车item加了quantity属性，你后续可以扩展修改数量、计算总价的功能
• 图片的样式我加了简单的内联样式，你可以根据自己的CSS需求调整
• 分类名称是通过反向查找products对象的key得到的，如果你觉得麻烦，可以在添加到购物车时直接把categoryId存为分类名称

内容的提问来源于stack exchange，提问作者Balint Alex