0

Tengo la funcion de un carrito de compras y a la hora de sumar los subtotales se me borra cuando actualizo la cantidad de items, tengo 1 item que viene de un json y el resto con localstorage, no logro sumar los subtotales y ponerle el porcentaje de envio para pasar a la validacion de la compra, perdon por la pregunta si es algo tonta, esotoy aprendiendo y js me esta volviendo un poco loco jaja La descipcion es corta pero intentare detallar mejor mi problema: cada item del carrito se actualiza y muestra su subtotal dependiendo de la cantidad de items que se agreguen, hasta ahi bien. PERO no logro sumar todos los subtotales, tanto los del json como los de localstorage para despues calcular los porcentajes de envio. cada vez que agrego o quito cantidad de items me muestra el total con la cantidad de ese item pero no se suma al resto En consola me da el error: cart.js:78 Uncaught TypeError: Cannot set properties of null (setting 'value') at HTMLInputElement. (cart.js:78:30)

let premium = document.getElementById('premium');
let express = document.getElementById('express');
let standard = document.getElementById('standard');

fetch(url)
.then(response => response.json())
.then(data => {
    let x = data.articles[0].unitCost;
    let y = data.articles[0].count;
    let z = x * y;

    let cartList = document.getElementById('cart');
    cartList.innerHTML += `
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">Imagen</th>
                        <th scope="col">Nombre</th>
                        <th scope="col">Costo</th>
                        <th scope="col">Cantidad</th>
                        <th scope="col">Subtotal</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="cartArt">
                        <td scope="row"><img src="${data.articles[0].image}" class="img-thumbnail" alt="Cinque Terre" width="250" height="180"></td>
                        <td scope="row" class="align-middle">${data.articles[0].name}</td>
                        <td scope="row" class="align-middle">${data.articles[0].unitCost} ${data.articles[0].currency}</td>
                        <td scope="row" class="align-middle"><input id="quantity" type="number" value="${y}" ></td>
                        <td scope="row" class="align-middle" id="subTotal">${z} ${data.articles[0].currency}</td>
                        
                    </tr>
                </tbody>  
            </table>
            
            
            `
    let itemsLS = localStorage.getItem('products');
    let parsedItems = JSON.parse(itemsLS);
    console.log(parsedItems)


    for (let i = 0; i < parsedItems.length; i++) {

        let parsedItem = parsedItems[i];
        let cartLSList = document.getElementById('cart');
        let sss = parsedItem.price * parsedItem.quantity;
        cartLSList.innerHTML += `
                  <table class="table">
                      <tbody>
                          <tr id="cartArt">
                              <td scope="row"><img src="${parsedItem.img}" class="img-thumbnail" alt="imagen" width="250" height="180"></td>
                              <td scope="row" class="align-middle">${parsedItem.name}</td>
                              <td scope="row" class="align-middle"><span class="price2">${parsedItem.price}</span> ${parsedItem.currency}</td>
                              <td scope="row" class="align-middle"><input class="amount" type="number" value="${parsedItem.quantity}" ></td>
                              <td scope="row" class="align-middle">$ <span class="totalsub">${sss}</span> ${parsedItem.currency}</td>
                              
                          </tr>
                      </tbody>   
                  </table> 
                  
              `

        let lsTotalPrice = document.querySelector('#total-payment');
        
        document.querySelectorAll(".amount").forEach((x) => x.addEventListener('input', function() {
          let totalsub = x.parentNode.parentNode.querySelector(".totalsub")
          let price = x.parentNode.parentNode.querySelector(".price2")
          totalsub.textContent = parseFloat(price.textContent) * x.value
          document.getElementById("cart-subtotal").innerHTML= `${totalsub.textContent}`;
          
          lsTotalPrice.value = parsedItems.reduce((acc, parsedItem) => acc + parsedItem.quantity * parsedItem.price, 0)

        }))
      
    }
    
    
    
    
    
    document.getElementById("quantity").addEventListener('input', function() {
        let y = quantity.value;
        let z = x * y;
        subTotal.innerHTML = `${z} ${data.articles[0].currency}`;
        
        let premiumShippment = (z/100)*15;
        let expressShippment = (z/100)*7;
        let standardShippment = (z/100)*5;

        document.getElementById("cart-subtotal").innerHTML= `${z} ${data.articles[0].currency}`;

        premium.addEventListener( 'change', function() {
            if(this.checked) {
                document.getElementById("cart-subtotal").innerHTML= `${z + premiumShippment} ${data.articles[0].currency}`;
            }
        });
        express.addEventListener( 'change', function() {
            if(this.checked) {
                document.getElementById("cart-subtotal").innerHTML= `${z + expressShippment} ${data.articles[0].currency}`;
            }
        });
        standard.addEventListener( 'change', function() {
            if(this.checked) {
                document.getElementById("cart-subtotal").innerHTML= `${z + standardShippment} ${data.articles[0].currency}`;
            }
        });
        
    });

    
})
2
  • ¿Esto es donde va el total que quieres calcular? let lsTotalPrice = document.querySelector('#total-payment');
    – masterguru
    el 28 oct. 2022 a las 0:26
  • si, ese es para solo lo del localstorage despues igualmente tengo que sumarlo al document.getElementById("cart-subtotal").innerHTML= ${z} ${data.articles[0].currency}; que es el que trae del json, si estoy en un curso y quieren que funcione a la vez con json y localstorage ye se es el problema, que el json que nos dan ya tiene un objeto pregargado en el carrito. Nos dijeron que intentaramos con ese metodo por eso intente usarlo pero para mi es mas complicado que otra cosa el 28 oct. 2022 a las 0:29

1 respuesta 1

0

Creo que te has liado un poco.

Donde pone esto:

for (let i = 0; i < parsedItems.length; i++) {

        let parsedItem = parsedItems[i];
        let cartLSList = document.getElementById('cart');
        let sss = parsedItem.price * parsedItem.quantity;
        cartLSList.innerHTML += `
                  <table class="table">
                      <tbody>
                          <tr id="cartArt">
                              <td scope="row"><img src="${parsedItem.img}" class="img-thumbnail" alt="imagen" width="250" height="180"></td>
                              <td scope="row" class="align-middle">${parsedItem.name}</td>
                              <td scope="row" class="align-middle"><span class="price2">${parsedItem.price}</span> ${parsedItem.currency}</td>
                              <td scope="row" class="align-middle"><input class="amount" type="number" value="${parsedItem.quantity}" ></td>
                              <td scope="row" class="align-middle">$ <span class="totalsub">${sss}</span> ${parsedItem.currency}</td>
                              
                          </tr>
                      </tbody>   
                  </table> 
                  
              `

        let lsTotalPrice = document.querySelector('#total-payment');
        
        document.querySelectorAll(".amount").forEach((x) => x.addEventListener('input', function() {
          let totalsub = x.parentNode.parentNode.querySelector(".totalsub")
          let price = x.parentNode.parentNode.querySelector(".price2")
          totalsub.textContent = parseFloat(price.textContent) * x.value
          document.getElementById("cart-subtotal").innerHTML= `${totalsub.textContent}`;
          
          lsTotalPrice.value = parsedItems.reduce((acc, parsedItem) => acc + parsedItem.quantity * parsedItem.price, 0)

        }))
    }

pon esto:


  let parsedItem = parsedItems[i];
  let cartLSList = document.getElementById('cart');
  let sss = parsedItem.price * parsedItem.quantity;
  cartLSList.innerHTML += `
            <table class="table" border="1">
                <tbody>
                    <tr id="cartArt">
                        <td scope="row"><img src="${parsedItem.img}" class="img-thumbnail" alt="imagen" width="250" height="180"></td>
                        <td scope="row" class="align-middle">${parsedItem.name}</td>
                        <td scope="row" class="align-middle"><span class="price2">${parsedItem.price}</span> ${parsedItem.currency}</td>
                        <td scope="row" class="align-middle"><input class="amount" type="number" value="${parsedItem.quantity}" ></td>
                        <td scope="row" class="align-middle">$ <span class="totalsub">${sss}</span> ${parsedItem.currency}</td>
                        
                    </tr>
                </tbody>   
            </table> 
        `
  document.querySelectorAll(".amount").forEach((x) => x.addEventListener('input', function() {
    let totalsub = x.parentNode.parentNode.querySelector(".totalsub")
    let price = x.parentNode.parentNode.querySelector(".price2")
    totalsub.textContent = parseFloat(price.textContent) * x.value
    recalcularTotal()
  }))
}

recalcularTotal()

function recalcularTotal() {
  let sum = 0;
  document.querySelectorAll(".amount").forEach((x) => {
    let totalsub = x.parentNode.parentNode.querySelector(".totalsub")
    sum = sum + parseFloat(totalsub.textContent)
  })
  document.getElementById('total-payment').textContent = sum

}

Explicación

Creamos un función independiente que denominamos recalcularTotal() que nos va a calcular el total, y siguiendo la misma técnica que ya se estaba usando antes recorremos todos los elementos con la clase .totalsub y le vamos sumando su valor en una nueva variable denominada sum que hemos inicializado antes del bucle con valor 0.

Una vez salimos del bucle, aun dentro de la función, asignamos el valor de sum al contenido del elemento con id total-payment, que es un elemento <span>, por lo tanto usamos la propiedad textContent de dicho elemento para la asignación.

Todo esto que acabo de explicar se corresponde con este cacho de código:

function recalcularTotal() {
  let sum = 0;
  document.querySelectorAll(".amount").forEach((x) => {
    let totalsub = x.parentNode.parentNode.querySelector(".totalsub")
    sum = sum + parseFloat(totalsub.textContent)
  })
  document.getElementById('total-payment').textContent = sum
}

Luego, para que nos aparezca ese total durante la carga, lanzamos la función tal cual (en este caso la he puesto unas líneas antes de la declaración de la función, pero también se puede poner después, tanto da mientras esté disponible durante la carga del documento).

Y por último, para que actue cada vez que se modifica alguna cantidad, también la ponemos dentro del addEventListener('input' anterior, y de ese modo cualquier cambio en la cantidad se verá reflejado tanto en su subtotal, como ya hacia, como en el total final representado por el elemento total-payment simultáneamente.

5
  • Me da este error ` cart.js:86 Uncaught TypeError: Cannot set properties of null (setting 'textContent') at recalcularTotal (cart.js:86:62) at HTMLInputElement.<anonymous> (cart.js:73:13)` el 28 oct. 2022 a las 1:01
  • Ah, no sabia que total-payment era un input, pensaba que era un <span>. No se para que lo quieres en un input pues es un dato que se calcula solo y los inputs son para modificar datos, no para mostrarlos. Si aún así lo quieres en el input cambia esto: document.getElementById('total-payment').textContent = sum por esto: document.getElementById('total-payment').value = sum.
    – masterguru
    el 28 oct. 2022 a las 1:10
  • Si acaso muestra el HTML de ese elemento con id total-payment en la pregunta, para que quede claro que es, pues pensaba que con mis anteriores explicaciones de la otra pregunta lo habias puesto en un <span> como te indiqué que hicieras.
    – masterguru
    el 28 oct. 2022 a las 1:12
  • Sesoluciono como tu dijiste poniendo un span en lugar de un input mil gracias y disculpa las molestias ahora con una suma normal de variables calculo la suma de los items de localstorage y json y lo agrego a ese span, mil gracias nuevamente el 28 oct. 2022 a las 1:20
  • Ale, ya he puesto la explicación. Recuerda marcarla como aceptada si te sirve. Saludos!
    – masterguru
    el 28 oct. 2022 a las 1:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.