0

estoy intentando modificar un proyecto viejo mio, para agregarle funcionabilidad en Javascript, y estoy teniendo un problema al agregar elementos al carrito, al hacer el primer click, no muestra nada, luego de hacer el segundo agrega el primer elemento en el que hice click, y me esta sacando canas.

dejo un codepen que se ve un poco cachuzo, pero es mas que nada a modo ilustrativo para ver que me esta faltando, no estoy dando con la falla.

https://codepen.io/kamp3r/pen/eYERayN

HTML

  <header class="navigation">
        
    <a class="navigation__linkLogo" href="index.html"><img class="linkLogo__logo" src="images/vistalba.jpg" alt="logo vistalba"/></a>
    <input type="checkbox" id="botonMenu">
    <label class="navigation__responsiveIcon" for="botonMenu"><span class="responsiveIcon__icon"></span></label>
    <ul class="navigation__list">
        <li class="list__element">
          <a class="element__link" href="index.html">Inicio</a>
        </li>
        <li class="list__element">
          <a class="element__link" href="experiencias.html">Experiencias</a>
        </li>
        <li class="list__element">
          <a class="element__link" href="novedades.html">Novedades</a>
        </li>
        <li class="list__element">
          <a class="element__link element__link--active" href="tienda.html">Tienda</a>
        </li>
        <li class="list__element">
          <a class="element__link" href="contacto.html">Contacto</a>
        </li>
    </ul>
    <div class="navigation__containerIcon">
      <ul>
          <li class="submenu">
            <img class="containerIcon__icon" src="images/carrito-de-compras.png" alt="Mi Carrito"/>
            <div id="carrito">
                                        
              <table id="lista-carrito">
                  <thead>
                      <tr>
                          <th>Imagen</th>
                          <th>Nombre</th>
                          <th>Precio</th>
                          <th>Cantidad</th>
                          <th></th>
                      </tr>
                  </thead>
                  <tbody id="bodyCarrito"></tbody>
              </table>

              <a href="#" id="vaciar-carrito" class="botonVaciar">Vaciar Carrito</a>
            </div>
          </li>
      </ul>    
      
    </div>
  </header>

  <main class="shop">
    
    <div id="titles">
      <h1>Tienda</h1>
      <p>Cada uno de ellos, te enseñara un camino..</p>
    </div>  

    <div id="listadoVinos" class="shop__flex">
      <div class="flex__card">
        <div class="card__animated">
          <div class="animated__side">
            <img class="side__wineimg" src="images/botella.png" alt="Botella Cabernet Franc">
            <div class="side__wineinfo"> 
              <h2>Cabernet Franc - Vieja Cosecha</h2>
              <p>
                Compuesto por un blend de terroir, nuestro cabernet franc, pasa 12 meses de cria en roblea americano, y 6
                meses de guardado en tanque hasta su embotellado
              </p>
            </div>      
          </div>
                
          <div class="animated__bside">
            <img class="side__wineimg" src="images/botella.png" alt="Botella Cabernet Franc">
            <div class="side__wineinfo">
              <h2>Cabernet Franc - Vieja Cosecha</h2>
              <p>$400</p>
              <button class="bside__buybutton" data-id="1">Comprar</button>
            </div>
          </div>      
        </div>
      </div> 
            
      <div class="flex__card">
        <div class="card__animated">
          <div class="animated__side">
            <img class="side__wineimg" src="images/botella2.png" alt="Botella Suavignon Blanc">
            <div class="side__wineinfo"> 
              <h2>Suavignon Blanc - Navio</h2>
              <p>
                Vino joven con 6 meses de cria en vasijas de barro y madera, el mismo despierta fragancias dulces que
                recuerdan a una primavera floral
              </p>
            </div>    
          </div>

          <div class="animated__bside">
            <img class="side__wineimg" src="images/botella2.png" alt="Botella Suavignon Blanc">
            <div class="side__wineinfo">
              <h2>Suavignon Blanc - Navio</h2>
              <p>$400</p>
              <button class="bside__buybutton" data-id="2">Comprar</button>
            </div>
          </div>      
        </div>
      </div>
        
      <div class="flex__card">
        <div class="card__animated">
          <div class="animated__side">
            <img class="side__wineimg" src="images/botella3.png" alt="Botella Cabernet Suavignon">
            <div class="side__wineinfo">
              <h2>Cabernet Suavignon - Espinado</h2>
              <p>
                Con 18 meses en paso en barricas de roble frances y roble americano, nuestro cabernet suavignon destaca por
                sus notas ahumadas
              </p>
            </div>   
          </div>
          
          <div class="animated__bside">
            <img class="side__wineimg" src="images/botella3.png" alt="Botella Cabernet Suavignon">
            <div class="side__wineinfo">
              <h2>Cabernet Suavignon - Espinado</h2>
              <p>$400</p>
              <button class="bside__buybutton" data-id="3">Comprar</button>
            </div>
          </div>      
        </div>
      </div>

      <div class="flex__card">
        <div class="card__animated">
          <div class="animated__side">
            <img class="side__wineimg" src="images/botella4.png" alt="Botella Chardonnay">
            <div class="side__wineinfo">
              <h2>Chardonnay - Ornamento</h2>
              <p>
                Vino de 12 meses de cria en guatambu, el mismo posee su acidez caracteristica, pero con un toque de maderas
                que recuerdan a nuestra patagonia
              </p>
            </div>    
          </div>

          <div class="animated__bside">
            <img class="side__wineimg" src="images/botella4.png" alt="Botella Chardonnay">
            <div class="side__wineinfo">
              <h2>Chardonnay - Ornamento</h2>
              <p>$400</p>
              <button class="bside__buybutton" data-id="4">Comprar</button>
            </div>
          </div>      
        </div>
      </div>
    </div>
  </main>

Javascript

let total = 0;
const carrito = document.querySelector('#carrito')
const carritoBody = document.querySelector('#lista-carrito tbody');
const listaVinos = document.querySelector('.shop__flex')
let carritoArray = [];

addFunciones();

function addFunciones(){
    listaVinos.addEventListener('click', agregarVino);
}

function agregarVino(e){
    e.preventDefault();
    if(e.target.classList.contains('bside__buybutton')){
        const vinoSeleccionado = e.target.parentElement.parentElement;
        detallesVino(vinoSeleccionado);
    }
}

function detallesVino (vino){
    const infoVino = {
        imagen: vino.querySelector("img").src,
        titulo: vino.querySelector("h2").textContent,
        precio: vino.querySelector("p").textContent,
        id: vino.querySelector("button").getAttribute('data-id'),
        cantidad: 1
    };

    htmlCarrito();

    carritoArray = [...carritoArray, infoVino]
    console.log(carritoArray);      

}

function htmlCarrito(){

    limpiarHTML();

    carritoArray.forEach( vino => {
        const { imagen, precio, titulo, cantidad, id} = vino;
        const fila = document.createElement('tr');
        fila.innerHTML = `
        <td>
            <img src="${imagen}" width="50">
        </td>
        <td>
            ${titulo}
        </td>
        <td>
            ${precio}
        </td>
        <td>
            ${cantidad}
        </td>
        <td>
            <a href="#" class="borrar-curso" data-id="${id}"> X </a>
        </td>
        `;

        carritoBody.appendChild(fila);
    })
}

function limpiarHTML() {
    while(carritoBody.firstChild){
        carritoBody.removeChild(carritoBody.firstChild)
    }
}

1 respuesta 1

1

Sucede que renderizas el carrito antes de actualizar el arreglo con la información del carrito.

Intenta cambiar el orden y funcionará:

    carritoArray = [...carritoArray, infoVino]
    htmlCarrito();
2
  • Uf japsz! que pasada y que despistao, te mando un abrazo cibernetico, debo ir a dormir porque ya no entiendo ni narices lo que estoy haciendo, muchas gracias! el 28 oct. 2021 a las 18:39
  • 1
    De nada hermano, buen descanso! :D
    – Japsz
    el 28 oct. 2021 a las 18:41

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.