2

Este seria el html del carrito el cual esta en un index.php, cabe aclarar que esta dentro de una etiqueta nav, pero solo proporcione el fragmento donde solo se encuentra el contenedor de la información.

<div class="container-cart-products hidden-cart">
  <div class="row-product hidden">
    <div class="cart-product">
      <div class="info-cart-product">
        <span class="cantidad-producto-carrito"></span>
        <p class="titulo-producto-carrito"></p>
        <span class="precio-producto-carrito"></span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-close">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </div>
  </div>

  <div class="cart-total hidden">
    <h3>Total:</h3>
    <span class="total-pagar"></span>
  </div>
  <p class="cart-empty text-center">El carrito está vacío</p>
</div>

Este seria el fragmento de código donde traigo los productos desde BD y los muestro en el mismo index.php donde esta el carrito.

<div class="container container-items">
    <h1 class="mt-5 mb-3">Productos</h1>
    
    <div class="row">
        <?php
        require_once "conexion.php";

        $consulta = "SELECT ID, nombre, precio, descripcion, foto FROM productos";
        $resultado = $conexion->query($consulta);

        if ($resultado->num_rows > 0) {
            while ($fila = $resultado->fetch_assoc()) {
                $titulo = $fila["nombre"];
                $precio = $fila["precio"];
                $descripcion = $fila["descripcion"];
                $foto = "upload/" . $fila["foto"];

                echo '<div class="col-md-4 mb-4">';
                echo '<div class="card" style="width: 18rem;">';
                echo '<img src="' . $foto . '" class="card-img-top card-image" alt="' . $titulo . '">';
                echo '<div class="card-body">';
                echo '<h5 class="card-title">' . $titulo . '</h5>';
                echo '<p class="card-text">' . $descripcion . '</p>';
                echo '<span class="price">$' . number_format($precio, 2, '.', ',') . '</span>';
                echo '<button class="btn btn-primary agregar-carrito btn-add-cart">Agregar al Carrito</button>';
                echo '</div>';
                echo '</div>';
                echo '</div>';
            }
        } else {
            echo '<p>No hay productos disponibles.</p>';
        }
        $conexion->close();
        ?>
    </div>
</div>

Este es mi index.js, donde se encuentra toda la lógica para poder llevar toda la información de los productos al carrito, el cual todavía no pude hacer que se vea la imagen en el carrito. Quizás estoy teniendo errores de lógica o algo por el estilo, pero sea lo que sea me gustaría saberlo para poder continuar con mi proyecto.

const btnCart = document.querySelector('.container-cart-icon');
const containerCartProducts = document.querySelector('.container-cart-products');

btnCart.addEventListener('click', () => {
  containerCartProducts.classList.toggle('hidden-cart');
});

const cartInfo = document.querySelector('.cart-product');
const rowProduct = document.querySelector('.row-product');
const productsList = document.querySelector('.container-items');
let allProducts = [];
const valorTotal = document.querySelector('.total-pagar');
const countProducts = document.querySelector('#contador-productos');
const cartEmpty = document.querySelector('.cart-empty');
const cartTotal = document.querySelector('.cart-total');

const formatPrice = (price) => {
  return new Intl.NumberFormat('es-AR', {
    style: 'currency',
    currency: 'ARS'
  }).format(price);
};

const showHTML = () => {
  if (!allProducts.length) {
    cartEmpty.classList.remove('hidden');
    rowProduct.classList.add('hidden');
    cartTotal.classList.add('hidden');
  } else {
    cartEmpty.classList.add('hidden');
    rowProduct.classList.remove('hidden');
    cartTotal.classList.remove('hidden');
  }

  rowProduct.innerHTML = '';

  let total = 0;
  let totalOfProducts = 0;

  allProducts.forEach(product => {
    const containerProduct = document.createElement('div');
    containerProduct.classList.add('cart-product');

    containerProduct.innerHTML = `
                <div class="info-cart-product">
                    <div class="cart-product-image">
                        <img src="${product.image}" alt="${product.title}" />
                    </div>
                    <p class="titulo-producto-carrito">${product.title}</p>
                    <span class="precio-producto-carrito">${formatPrice(product.price)}</span>
                    <div class="quantity-controls">
                        <button class="decrement-button">-</button>
                        <span class="cantidad-producto-carrito">${product.quantity}</span>
                        <button class="increment-button">+</button>
                    </div>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="icon-close"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M6 18L18 6M6 6l12 12"
                        />
                    </svg>
                </div>
            `;

    const decrementButton = containerProduct.querySelector('.decrement-button');
    const incrementButton = containerProduct.querySelector('.increment-button');
    const closeButton = containerProduct.querySelector('.icon-close');

    decrementButton.addEventListener('click', () => {
      if (product.quantity > 1) {
        product.quantity--;
        showHTML();
        saveLocal();
      }
    });

    incrementButton.addEventListener('click', () => {
      product.quantity++;
      showHTML();
      saveLocal();
    });

    closeButton.addEventListener('click', () => {
      allProducts = allProducts.filter(p => p.title !== product.title);
      showHTML();
      saveLocal();
    });

    rowProduct.append(containerProduct);

    total +=
      parseFloat(product.quantity) * parseFloat(product.price);
    totalOfProducts += product.quantity;
  });

  valorTotal.innerText = `${formatPrice(total.toFixed(2))}`;
  countProducts.innerText = totalOfProducts;
  saveLocal();
};

const saveLocal = () => {
  localStorage.setItem("carrito", JSON.stringify(allProducts));
};

const loadLocal = () => {
  const savedCart = localStorage.getItem("carrito");
  if (savedCart) {
    allProducts = JSON.parse(savedCart);
    showHTML();
  }
};

loadLocal();

rowProduct.addEventListener('click', e => {
  if (e.target.classList.contains('icon-close')) {
    const product = e.target.parentElement;
    const title = product.querySelector('p').textContent;

    allProducts = allProducts.filter(
      product => product.title !== title
    );

    showHTML();
    saveLocal();
  }
});

productsList.addEventListener('click', e => {
  if (e.target.classList.contains('btn-add-cart')) {
    const product = e.target.parentElement;

    const infoProduct = {
      quantity: 1,
      title: product.querySelector('h5').textContent,
      price: parseFloat(product.querySelector('span').textContent.replace(/[^\d.]/g, '')),
      image: product.querySelector('img').getAttribute('src'),
    };

    const exists = allProducts.some(
      product => product.title === infoProduct.title
    );

    if (exists) {
      const products = allProducts.map(product => {
        if (product.title === infoProduct.title) {
          product.quantity++;
          return product;
        } else {
          return product;
        }
      });
      allProducts = [...products];
    } else {
      allProducts = [...allProducts, infoProduct];
    }

    showHTML();
    saveLocal();
  }
});

1 respuesta 1

0

Problema solucionado, En lugar de buscar el elemento "padre" .card del botón de agregar al carrito, ahora utilizo .closest('.card') para obtener la tarjeta completa del producto, utilizando las clases correctas para cada información:

productsList.addEventListener('click', e => {
    if (e.target.classList.contains('btn-add-cart')) {
        const product = e.target.closest('.card');

        const infoProduct = {
            quantity: 1,
            title: product.querySelector('.card-title').textContent,
            price: parseFloat(product.querySelector('.price').textContent.replace(/[^\d.]/g, '')),
            image: product.querySelector('.card-img-top').getAttribute('src'),
        };
        

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.