0

Estoy haciendo un página que simule un carrito de compras. Hasta ahora lo que llevo es una función que trae los elementos del localStorage y los coloca en un elemento HTML, además de una función que agrega la cantidad de elementos que hay en el localStorage a un span para mostrar cuantos productos hay en el carrito. El problema esta a la hora en que quiero eliminar los elementos que estan en el carrito, utilizo una función que emplee el método splice para eliminar los elementos del array y cargo el nuevo array al localStorage, sin embargo, solo me deja eliminar un producto y para poder eliminar otro tengo que recargar la página, lo mismo pasa con el span de los elementos del carrito, se actualiza hasta que recargo la página. Agradecería mucho su ayuda.

Cargar y mostrar los elementos del localStorage

const contenedor=document.querySelector("#hola")
const elementInCart=JSON.parse(localStorage.getItem("unidades-dentales"));
console.log(contenedor);
console.log(elementInCart);

const loadItems=()=>{
    contenedor.innerHTML="";
    elementInCart.forEach(elemento => {
    const cartContainer=document.createElement("div");
    cartContainer.classList.add("product_item");
    console.log(elemento.image);
    cartContainer.innerHTML=`
    <div class="item_container">
        <img src=${elemento.image} alt="">
        <div class="item_title">
            <h2>${elemento.name}</h2>
        </div>
        <div class="item_element">
                <p>Cantidad</p>
                <span>${elemento.quantity}</span>
            </div>
            <div class="item_element">
                <p>Precio</p>
                <span>${elemento.price}</span>
            </div>
            <svg class="delate-button" width="30" height="30" id="${elemento.id}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4zm2 2h6V4H9zM6.074 8l.857 12H17.07l.857-12zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1" fill="#0D0D0D"/></svg>  
        </div>
    ` ;
    contenedor.append(cartContainer)
})
}

loadItems();

span elementos en carrito

const addCounter=()=>{
    let newCounter=elementInCart.reduce((acc,unidad)=> acc + unidad.quantity,0);
    counter.innerText=newCounter;
}
const counter=document.querySelector("#counter");
let counterInCart;
const elementInCartLs=JSON.parse(localStorage.getItem("unidades-dentales"));
console.log(elementInCartLs);
if(elementInCartLs){
 counterInCart= elementInCartLs;
 addCounter();
}else{
    counterInCart=[];
}

eliminar y cargar productos al carrito

    const delateItem=()=>{
    const delateBtn=document.querySelectorAll(".delate-button");
    console.log(delateBtn)
    delateBtn.forEach(btn=>{
        btn.addEventListener("click",quitItem);
    })
}
const quitItem=(e)=>{
    const btnId=e.currentTarget.id;
    const itemDelated=elementInCart.findIndex(elemento=>elemento.id===btnId);
    elementInCart.splice(itemDelated,1);
    localStorage.setItem("unidades-dentales",JSON.stringify(elementInCart));
    loadItems();
}

delateItem();

1 respuesta 1

1

El problema que estás experimentando se debe a que la función delateItem se ejecuta solo una vez al cargar la página. Cuando eliminas un elemento, los eventos de click en los botones de eliminación no se vuelven a registrar, por lo que solo puedes eliminar un producto antes de recargar la página.

Para solucionar esto, necesitas recargar los eventos de click en los botones de eliminación cada vez que se elimina un producto. Puedes hacer esto actualizando la función quitItem para que vuelva a ejecutar delateItem después de eliminar un producto.

Aquí te dejo el código actualizado:

// ... (código anterior)

const quitItem = (e) => {
  const btnId = e.currentTarget.id;
  const itemDelated = elementInCart.findIndex(elemento => elemento.id === btnId);
  elementInCart.splice(itemDelated, 1);
  localStorage.setItem("unidades-dentales", JSON.stringify(elementInCart));

  // Actualiza el contador
  addCounter();

  // Recarga los eventos de eliminación
  delateItem();

  // Actualiza la vista del carrito
  loadItems();
};

const delateItem = () => {
  const delateBtn = document.querySelectorAll(".delate-button");
  delateBtn.forEach(btn => {
    btn.addEventListener("click", quitItem);
  });
};

// Llama a delateItem al cargar la página
delateItem();

// ... (código posterior)

Explicación de los cambios:

Recargar los eventos de eliminación: Se agregó una llamada a delateItem dentro de quitItem, lo que asegura que los eventos de click se registren nuevamente después de eliminar un elemento.

Actualizar el contador: Se agregó una llamada a addCounter dentro de quitItem para actualizar el contador de elementos en el carrito inmediatamente después de la eliminación.

Con estos cambios, el carrito de compras debería funcionar correctamente sin necesidad de recargar la página. Cada vez que elimines un producto, el contador se actualizará, los eventos de click en los botones de eliminación se registrarán y la vista del carrito se actualizará para reflejar los cambios.

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.