如何在没有js框架的情况下将产品添加到购物车

Question

我是初级开发者，我制作了电子商务网站（使用 html css 和 JavaScript（无框架）

我卡在了将产品添加到购物车中，因为 JavaScript 这些是我的代码： HTML:

<div class="small-container">
    <div class="row">
    <div class="col-4">
    <img src="images/20 ps4.png" alt=""/></a>
    <h4>20 Playstation Store(PSN)</h4>
    <p>.00</p>
    <button type="button" class="btn1" ><h3 class="text-btn">add to cart</h3></button>
    </div>

    <!--2-->
    <div class="col-4">
    <img src="images/25 ps4.png" alt="" />
    <h4>25 Playstation Store(PSN)</h4>
    <p>.00</p>
    <button type="button" class="btn1" onclick="window.location.href='cart.html'"><h3 class="text-btn">add to cart</h3></button>
    </div>

JavaScript:

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn1')
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    var quantityInputs = document.getElementsByClassName('btn1')
    for (var i = 0; i < quantityInputs.length; i++) {
        var input = quantityInputs[i]
        input.addEventListener('change', quantityChanged)
    }

    var addToCartButtons = document.getElementsByClassName('btn1')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }

    document.getElementsByClassName('btn1')[0].addEventListener('click', purchaseClicked)
}

Css :

.row {
margin-top: 50px;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}

.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}

.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
  
.col-4 img {
width: 100%;
}

非常感谢。

我尝试寻找将产品项目添加到购物车的功能

我还必须在没有框架的情况下使用JavaScript

Answer 1

var addToCartButtons = document.getElementsByClassName('btn1')、var quantityInputs = document.getElementsByClassName('btn1') 和 var removeCartItemButtons = document.getElementsByClassName('btn1') 的目的是什么？查询是相同的，因此总是 return 个相同的元素。

您的方法很好，只需将正确的类添加到您的元素和查询中即可。务必使 HTML 结构统一。例如，关于您的卡的元数据可以存储在 localStorage 中。您可以了解如何使用 localStorage here。顺便说一句，您可以使用更新的语法，例如 forof 循环或 const 关键字来使您的代码更具可读性。

(() => {
  const addToCardButtons = document.querySelectorAll('.btn--add_to_cart');
  for (const btn of addToCardButtons) {
    const identifier = btn.dataset.target;

    btn.addEventListener('click', () => addToCart(identifier))
  }

  const addToCart = (id) => {
    console.log(id);
    // handle 'add to cart' functionality
  }

  // other functionalities can follow the same structure
})()

<div class="small-container">
  <div class="row">
    <div class="col-4">
      <img src="images/20 ps4.png" alt="" /></a>
      <h4>20 Playstation Store(PSN)</h4>
      <p>.00</p>
      <button type="button" data-target="1" class="btn btn--add_to_cart">add to cart</button>
    </div>

    <!--2-->
    <div class="col-4">
      <img src="images/25 ps4.png" alt="" />
      <h4>25 Playstation Store(PSN)</h4>
      <p>.00</p>
      <button type="button" data-target="2" class="btn btn--add_to_cart">add to cart</button>
    </div>

如何在没有js框架的情况下将产品添加到购物车

how to add Add products on shopping cart without js framework

html

javascript

css

e-commerce