制作购物车时发出

Question

所以我正在编写购物车项目，但遇到了问题。

我想在 cart.html 中显示存储在本地存储中的数据的详细信息。运行代码时，程序无法找到 .name 或 data.js 中的任何内容，并返回未定义或异步图像，而不是实际图像或名称

如果没有搜索功能，在控制台中我可以看到购物车中的物品及其所有详细信息例如：id、名称、desc 等等...

我希望程序以这样的方式运行：“如果”购物车有数据，则显示内容，“否则”说购物车是空的，并且按钮显示“返回主页”。

if 和 else 函数都运行良好，唯一的问题是显示内容

如果您能提供更正和正确的指导，我将不胜感激，提前致谢！

cart.html 的一部分

<div id="label" class="text-center"></div>


      <div id="shopping-cart" class="shopping-cart"></div>


    </body>
    <script src="src/data.js"></script>
    <script src="src/cart.js"></script>
</html>

cart.js

let label = document.getElementById('label');
let shoppingCart = document.getElementById('shopping-cart');


let basket = JSON.parse(localStorage.getItem("data")) || [];


let calculation = () => {
    let cartIcon = document.getElementById("cartAmount");
    cartIcon.innerHTML = basket.map((x) => x.item).reduce((x, y) => x + y, 0);
};

calculation();


let generateCartItems = () => {

    if (basket.length !== 0) {
        return (shoppingCart.innerHTML = basket
            .map((x) => {
                console.log(x);
                let {
                    id,
                    item
                } = x;
                let search = shopItemsData.find((y) => y.id === id) || {};
                return 
            <div class="cart-item">
                <h2>${itemName} has been added</h2>
            </div>
            ;
            })
            .join(''));
    } else {
        shoppingCart.innerHTML = ;
        label.innerHTML = 
        <h2>Cart is EMPTY!</h2><br>
        <a href="index.html">
        <button type="button" class="btn btn-danger">Back to Home!</button>
        </a>
        ;
    }
};

generateCartItems();

数据.js

let shopItemsData = [
    {
        id: "1",
        name: "Silver Wash",
        price: 499,
        desc: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
        img: "images/silver.jpg"
    },
    {
        id: "2",
        name: "Gold Wash",
        price: 999,
        desc: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
        img: "images/gold1.jpg"
    }];

现在在index.html中，我已经用值对卡片进行了编程，并为.js文件制作了单独的data.js，index.html的示例如下所示：

<div class="shop" id="shop">

        <div id=product-id-1 class="card mb-3">
          <div class="row g-0">
            <div class="col-md-4">
              <img src="images/silver.jpg" class="img-fluid rounded-start" alt="...">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">Silver Wash</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.
                  This content is a little bit longer.
                </p>
                <br>
                <button type="button" onclick="add(1)" class="btn btn-primary">@499 | Add to cart</button>
              </div>
            </div>
          </div>
        </div>
</div>

Answer 1

如果你不使用任何库，这部分

                return 
            <div class="cart-item">
                <h2>${itemName} has been added</h2>
            </div>
            ;

必须抛出错误

Uncaught SyntaxError: Unexpected token '<'

你应该像这样用反引号括起来

return `<div class="cart-item">
<h2>${itemName} has been added</h2>
</div>`