Soy un desarrollador principiante y creé un sitio web de comercio electrónico (usando html css y JavaScript (sin marco)
Me quedé en Agregar productos en el carrito de compras porque JavaScript y estos son mi Código: 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>$20.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>$25.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%; }Muchas gracias.
Intento encontrar la función para agregar productos al carrito de compras
también tengo que usar JavaScript sin marco
¿Cuál es el propósito de var addToCartButtons = document.getElementsByClassName('btn1') , varquantityInputs var quantityInputs = document.getElementsByClassName('btn1') y var removeCartItemButtons = document.getElementsByClassName('btn1') ? La consulta es la misma y, por lo tanto, siempre devolverá elementos idénticos.
Su enfoque es bueno, solo agregue las clases correctas a sus elementos y consultas. Asegúrese de que la estructura HTML sea uniforme. Los metadatos sobre su tarjeta se pueden almacenar en localStorage, por ejemplo. Puede obtener información sobre cómo trabajar con localStorage aquí . Por cierto, puede usar una sintaxis más nueva como bucles forof o palabra clave const para hacer que su código sea más legible.
(() => { 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>$20.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>$25.00</p> <button type="button" data-target="2" class="btn btn--add_to_cart">add to cart</button> </div>