被电子商务项目购物车困住的菜鸟

Question

对于 TL;博士或努力理解这里的图表。

简化我的问题：我有一个主页，其中有一些要添加到购物车的商品，我已将这些商品添加到购物车，当我转到购物车页面时，我想在购物车页面上看到这些添加到购物车的商品（提供了 HTML 代码）下面），仅此而已。

目前由于我的代码无法运行而陷入困境并感到压力，我遇到的问题是我想将本地存储中的选定产品发送到将图像放置在图像列中的购物车，依此类推名称、描述和数量等。但我遇到了 100 个死胡同，我觉得我尝试的越多，对项目造成的损害就越大。

我知道我可以简单地废弃我目前拥有的 HTML 和 CSS，然后使用 javascript 重新开始，只使用 ${item.tag} 等，但我想在我废弃整个事情之前看看它是否可以正常工作。

我已经设法按照教程编写了用于收集数据以选择产品并将其保存到购物篮的代码，但现在我正在尝试将数据传输到购物车页面以进行结账。

 let carts = document.querySelectorAll('.add-cart'); let products = [ { name: 'product 1', description: 'test', tag: 'citizenwatch', price: 5, inCart: 0 }, { name: 'Camera Lense', description: 'test', tag: 'cameralense', price: 10, inCart: 0 }, { name: 'Shoes & Tie', description: 'test', tag: 'shoesandtie', price: 15, inCart: 0 } ]; for (let i=0; i < carts.length; i++) { carts[i].addEventListener('click', () => { cartNumbers(products[i]); totalCost(products[i]) }) } function onLoadCartNumbers() { let productNumbers = localStorage.getItem('cartNumbers'); if (productNumbers) { document.querySelector('.c-cart-toggler-wrapper span').textContent = productNumbers; } } function cartNumbers(product) { let productNumbers = localStorage.getItem('cartNumbers'); productNumbers = parseInt(productNumbers); if( productNumbers ) { localStorage.setItem('cartNumbers', productNumbers + 1); document.querySelector('.c-cart-toggler-wrapper span').textContent = productNumbers + 1; } else { localStorage.setItem('cartNumbers', 1); document.querySelector('.c-cart-toggler-wrapper span').textContent = 1; } setItems(product); } function setItems(product) { let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); console.log("My cartItems are", cartItems); if(cartItems != null) { if(cartItems[product.tag] == undefined) { cartItems = { ...cartItems, [product.tag]: product } } cartItems[product.tag].inCart += 1; } else { product.inCart = 1; cartItems = { [product.tag]: product } } localStorage.setItem("productsInCart", JSON.stringify (cartItems)); } function totalCost(product) { //console.log("The product price is", product.price); let cartCost = localStorage.getItem('totalCost'); console.log("my cartcost is", cartCost); console.log(typeof cartCost ); if(cartCost != null) { cartCost = parseInt(cartCost); localStorage.setItem("totalCost", cartCost + product.price); } else { localStorage.setItem("totalCost", product.price); } } onLoadCartNumbers();

 .c-shop-cart-page-1 > .c-cart-table-title, .c-shop-cart-page-1 > .c-cart-table-row { border-bottom: 1px solid; border-color: rgba(135, 151, 174, 0.15); } .c-shop-cart-page-1 > .c-cart-table-row { padding: 15px 0; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-item-title { margin: 0 15px 20px 15px; padding: 10px; border: 2px solid; float: left; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-image { position: relative; clear: both; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-image > img { width: 65%; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-desc h3 { margin-top: 0; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-remove > .c-cart-remove-desktop { line-height: 1em; font-size: 24px; } .c-shop-cart-page-1 > .c-cart-buttons { margin-top: 20px; clear: both; } .c-shop-cart-page-1 > .c-cart-buttons > a { display: inline-block; } .c-shop-cart-page-1 > .c-cart-buttons > .c-cart-float-l { float: left; } .c-shop-cart-page-1 > .c-cart-buttons > .c-cart-float-r { float: right; } .c-shop-cart-page-1 .c-cart-subtotal-border { border-bottom: 1px solid; border-color: rgba(135, 151, 174, 0.15); } .c-shop-cart-page-1 .c-cart-sub-title, .c-shop-cart-page-1 .c-cart-remove-mobile, .c-shop-cart-page-1 .c-cart-item-title { display: none; } @media (max-width: 991px) { /* 991px */ .c-shop-cart-page-1 .c-cart-table-title, .c-shop-cart-page-1 .c-cart-remove-desktop { display: none; } .c-shop-cart-page-1 .c-cart-sub-title, .c-shop-cart-page-1 .c-cart-remove-mobile { display: block; } .c-shop-cart-page-1 > .c-cart-table-row { box-shadow: 0px 4px 4px -4px #ccc; border: none; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-item-title { margin-top: 10px; display: block; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-item-title.c-cart-item-first { margin-top: 0; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-ref, .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-qty, .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-price, .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-total { margin: 20px 0; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-remove { text-align: center; margin: 20px 0; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-remove > .c-cart-remove-mobile { display: inline-block; } } @media (max-width: 767px) { /* 767px */ .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-image > img { width: 100%; } .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-ref, .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-price, .c-shop-cart-page-1 > .c-cart-table-row > .c-cart-remove { clear: both; } } @media (max-width: 480px) { /* 480px */ .c-shop-cart-page-1 > .c-cart-buttons > a { display: block; margin-bottom: 20px; } .c-shop-cart-page-1 > .c-cart-buttons > a:last-child { margin: 0; } .c-shop-cart-page-1 > .c-cart-buttons > .c-cart-float-l { float: none; } .c-shop-cart-page-1 > .c-cart-buttons > .c-cart-float-r { float: none; } }

 <div class="c-content-box c-size-lg"> <div class="container"> <div class="c-shop-cart-page-1"> <div class="row c-cart-table-title"> <div class="col-md-2 c-cart-image"> <h3 class="c-font-uppercase c-font-bold c-font-16 c-font-grey-2">Image</h3> </div> <div class="col-md-4 c-cart-desc"> <h3 class="c-font-uppercase c-font-bold c-font-16 c-font-grey-2">Description</h3> </div> <div class="col-md-1 c-cart-ref"> <h3 class="c-font-uppercase c-font-bold c-font-16 c-font-grey-2">SKU</h3> </div> <div class="col-md-1 c-cart-qty"> <h3 class="c-font-uppercase c-font-bold c-font-16 c-font-grey-2">Qty</h3> </div> <div class="col-md-2 c-cart-price"> <h3 class="c-font-uppercase c-font-bold c-font-16 c-font-grey-2">Unit Price</h3> </div> <div class="col-md-1 c-cart-total"> <h3 class="c-font-uppercase c-font-bold c-font-16 c-font-grey-2">Total</h3> </div> <div class="col-md-1 c-cart-remove"></div> </div> <!-- BEGIN: SHOPPING CART ITEM ROW --> <div class="row c-cart-table-row"> <h2 class="c-font-uppercase c-font-bold c-theme-bg c-font-white c-cart-item-title c-cart-item-first">Item 1</h2> <div class="col-md-2 col-sm-3 col-xs-5 c-cart-image"> <img src="../../assets/base/img/content/shop2/24.jpg"/> </div> <div class="col-md-4 col-sm-9 col-xs-7 c-cart-desc"> <h3><a href="shop-product-details-2.html" class="c-font-bold c-theme-link c-font-22 c-font-dark">Winter Jacket</a></h3> <p>Color: Blue</p> <p>Size: S</p> </div> <div class="col-md-1 col-sm-3 col-xs-6 c-cart-ref"> <p class="c-cart-sub-title c-theme-font c-font-uppercase c-font-bold">SKU</p> <p>120715</p> </div> <div class="col-md-1 col-sm-3 col-xs-6 c-cart-qty"> <p class="c-cart-sub-title c-theme-font c-font-uppercase c-font-bold">QTY</p> <div class="c-input-group c-spinner"> <input type="text" class="form-control c-item-1" value="1"> <div class="c-input-group-btn-vertical"> <button class="btn btn-default" type="button" data_input="c-item-1" data-maximum="10"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default" type="button" data_input="c-item-1"><i class="fa fa-caret-down"></i></button> </div> </div> </div> <div class="col-md-2 col-sm-3 col-xs-6 c-cart-price"> <p class="c-cart-sub-title c-theme-font c-font-uppercase c-font-bold">Unit Price</p> <p class="c-cart-price c-font-bold">$147.00</p> </div> <div class="col-md-1 col-sm-3 col-xs-6 c-cart-total"> <p class="c-cart-sub-title c-theme-font c-font-uppercase c-font-bold">Total</p> <p class="c-cart-price c-font-bold">$147.00</p> </div> <div class="col-md-1 col-sm-12 c-cart-remove"> <a href="#" class="c-theme-link c-cart-remove-desktop">×</a> <a href="#" class="c-cart-remove-mobile btn c-btn c-btn-md c-btn-square c-btn-red c-btn-border-1x c-font-uppercase">Remove item from Cart</a> </div> </div> <!-- END: SHOPPING CART ITEM ROW --> <!-- BEGIN: SHOPPING CART ITEM ROW --> <div class="row c-cart-table-row"> <h2 class="c-font-uppercase c-font-bold c-theme-bg c-font-white c-cart-item-title">Item 2</h2> <div class="col-md-2 col-sm-3 col-xs-5 c-cart-image"> <img src="../../assets/base/img/content/shop2/12.jpg"/> </div> <div class="col-md-4 col-sm-9 col-xs-7 c-cart-desc"> <h3><a href="shop-product-details.html" class="c-font-bold c-theme-link c-font-22 c-font-dark">Comfortable Sports Wear Set</a></h3> <p>Color: Grey</p> <p>Size: S</p> </div> <div class="col-md-1 col-sm-3 col-xs-6 c-cart-ref"> <p class="c-cart-sub-title c-theme-font c-font-uppercase c-font-bold">SKU</p> <p>160815</p> </div> <div class="col-md-1 col-sm-3 col-xs-6 c-cart-qty"> <p class="c-cart-sub-title c-theme-font c-font-uppercase c-font-bold">QTY</p> <div class="c-input-group c-spinner"> <input type="text" class="form-control c-item-2" value="1"> <div class="c-input-group-btn-vertical"> <button class="btn btn-default" type="button" data_input="c-item-2" data-maximum="10"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default" type="button" data_input="c-item-2"><i class="fa fa-caret-down"></i></button> </div> </div> </div> <div class="col-md-2 col-sm-3 col-xs-6 c-cart-price"> <p class="c-cart-sub-title c-theme-font c-font-uppercase c-font-bold">Unit Price</p> <p class="c-cart-price c-font-bold">$99.00</p> </div> <div class="col-md-1 col-sm-3 col-xs-6 c-cart-total"> <p class="c-cart-sub-title c-theme-font c-font-uppercase c-font-bold">Total</p> <p class="c-cart-price c-font-bold">$99.00</p> </div> <div class="col-md-1 col-sm-12 c-cart-remove"> <a href="#" class="c-theme-link c-cart-remove-desktop">×</a> <a href="#" class="c-cart-remove-mobile btn c-btn c-btn-md c-btn-square c-btn-red c-btn-border-1x c-font-uppercase">Remove item from Cart</a> </div> </div> <!-- END: SHOPPING CART ITEM ROW --> <!-- BEGIN: SUBTOTAL ITEM ROW --> <div class="row"> <div class="c-cart-subtotal-row c-margin-t-20"> <div class="col-md-2 col-md-offset-9 col-sm-6 col-xs-6 c-cart-subtotal-border"> <h3 class="c-font-uppercase c-font-bold c-right c-font-16 c-font-grey-2">Subtotal</h3> </div> <div class="col-md-1 col-sm-6 col-xs-6 c-cart-subtotal-border"> <h3 class="c-font-bold c-font-16">$246.00</h3> </div> </div> </div> <!-- END: SUBTOTAL ITEM ROW --> <!-- BEGIN: SUBTOTAL ITEM ROW --> <div class="row"> <div class="c-cart-subtotal-row"> <div class="col-md-2 col-md-offset-9 col-sm-6 col-xs-6 c-cart-subtotal-border"> <h3 class="c-font-uppercase c-font-bold c-right c-font-16 c-font-grey-2">Shipping Fee</h3> </div> <div class="col-md-1 col-sm-6 col-xs-6 c-cart-subtotal-border"> <h3 class="c-font-bold c-font-16">$15.00</h3> </div> </div> </div> <!-- END: SUBTOTAL ITEM ROW --> <!-- BEGIN: SUBTOTAL ITEM ROW --> <div class="row"> <div class="c-cart-subtotal-row"> <div class="col-md-2 col-md-offset-9 col-sm-6 col-xs-6 c-cart-subtotal-border"> <h3 class="c-font-uppercase c-font-bold c-right c-font-16 c-font-grey-2">Grand Total</h3> </div> <div class="col-md-1 col-sm-6 col-xs-6 c-cart-subtotal-border"> <h3 class="c-font-bold c-font-16">$261.00</h3> </div> </div> </div> <!-- END: SUBTOTAL ITEM ROW --> <div class="c-cart-buttons"> <a href="#" class="btn c-btn btn-lg c-btn-red c-btn-square c-font-white c-font-bold c-font-uppercase c-cart-float-l">Continue Shopping</a> <a href="#" class="btn c-btn btn-lg c-theme-btn c-btn-square c-font-white c-font-bold c-font-uppercase c-cart-float-r">Checkout</a> </div> </div> </div> --> </div><!-- END: CONTENT/SHOPS/SHOP-CART-1 -->

编辑：这是评论中提到的卡片切换器代码。

 <li class="c-cart-toggler-wrapper"> <a href="#" class="c-btn-icon c-cart-toggler"><i class="icon-handbag c-cart-icon"></i> <span class="c-cart-number c-theme-bg">0</span></a> </li>

Answer 1

代码看起来一切正常 - 除了您可以使用 HTML <table>及其子标签而不是复杂的 div 设置创建一个表。

您正在运行document.querySelector('.c-cart-toggler-wrapper span').textContent = productNumbers + 1; 更改 HTML 节点中的内容，但您在此处发布的 HTML 或 CSS 中没有任何带有.c-cart-toggler-wrapper类的标记，因此您的脚本将失败。

到目前为止，我对您的代码的理解是否正确？