首页 > 解决方案 > 产品在我的购物车中的显示问题

问题描述

我尝试将 localstorage 中的所有产品显示到我的购物车页面,但只有第一个元素是正确构建的(在 localstorage 中一切正常)。我使用 javascript:

for(produit = 0; produit < produitLocalStorage.length; produit++){
        let fullCartTemplate = document.querySelector('#template_full_card');
        newNodeFullCart = document.importNode(fullCartTemplate.content, true);
        document.querySelector('#basket_container').appendChild(newNodeFullCart);
        
        document.querySelector('#name').textContent = `${produitLocalStorage[produit].name}`;
        document.querySelector('#reference').textContent = `Réf : ${produitLocalStorage[produit]._id}`;
        document.querySelector('#price').textContent = `${produitLocalStorage[produit].quantity} x ${produitLocalStorage[produit].price},00€`;
        document.querySelector('#total_price_product').textContent = `${produitLocalStorage[produit].price*produitLocalStorage[produit].quantity},00€`;
        document.querySelector('#number').setAttribute('value', `${produitLocalStorage[produit].quantity}`);
        document.querySelector('#picture_product').setAttribute('src', `${produitLocalStorage[produit].image}`);

我在 html 代码中的模板:

<template id="template_full_card">
                <div id="recapitulatif_order">
                    <div class="product_card">
                        <img id="picture_product" src="" alt="photo produit">
                        <div id="name_reference">
                            <span id="name"></span>
                            <span id="reference"></span>
                        </div>
                        <input id="number" type="number" value="" min="" max="">
                        <div id="price_trash">
                            <span id = "price"></span>
                            <span id="total_price_product"></span>
                            <span id="trash_logo">
                                <i class="far fa-trash-alt"></i>
                            </span>
                        </div>
                    </div>
                </div>
</template>

我有每个元素的结构,但没有变量的值。我尝试在课堂上更改我的身份证,但没有任何改变

标签: javascripthtmlcssproductcart

解决方案


推荐阅读