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();
}
});