15i Solution

[progressive-newbie263]

note, you can add renderPaymentSummary(); in the document.querySelectorAll('.js-save-link') to make the payment cart interactive with saving new quantity of items:

document.querySelectorAll('.js-save-link') .forEach((link) => { link.addEventListener('click', () => { const productId = link.dataset.productId;

    const container = document.querySelector(`.js-cart-item-container-${productId}`);
    container.classList.remove('is-editing-quantity');
    // 14k
    const quantityInput = document.querySelector(
      `.js-quantity-input-${productId}`
    );
    const newQuantity = Number(quantityInput.value);

    if(newQuantity < 0 || newQuantity >= 1000){
      alert('Quantity must be at least 0 and less than 1000')
      return;
    }
    // Update quantity logic (replace with your implementation)
    updateQuantity(productId, newQuantity);
    // 14m
    const quantityLabel = document.querySelector(`.js-quantity-label-${productId}`);
    quantityLabel.innerHTML = newQuantity;

    updateCartQuantity();

    renderPaymentSummary();
  });
  //14n
  const quantityInput = link.closest('.cart-item-container').querySelector('.js-quantity-input-' + link.dataset.productId); 
  quantityInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      // Simulate a click on the corresponding "Save" button
      link.click();
    }
  });  

});

[AmirSz8203]

We can use calculateCartQuantity from cart.js. At first we import the function, then change the code into this:<div>Items (${calculateCartQuantity()}):</div>