¿Cómo construir un carrito de compras de comercio electrónico basado en JavaScript?
19/03/2024
•
5
min
La construcción de un carrito de compras de comercio electrónico basado en JavaScript implica varios pasos, y aunque puede ser personalizado en gran medida, el proceso básico sigue siendo en gran parte el mismo. Necesitas crear una lista de productos, añadir un botón para añadir un producto al carrito, crear un carrito, y manejar la suma total de productos en el carrito.
Antes de comenzar, por favor recuerda que esta es una versión simplificada de un carrito de compras en JavaScript. Para una funcionalidad completa como el inicio de sesión del usuario, el procesamiento de pagos, el envío de pedidos, etc., se requeriría una tecnología de backend o una plataforma de comercio electrónico con todas las funciones.
HTML:
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
En el HTML, crea algunos productos con un emparejamiento de clave-valor:
<!DOCTYPE html>
<html>
<head>
<title>Carrito de Compras JavaScript</title>
</head>
<body>
<section id="products">
<h2>Productos Disponibles</h2>
<div>
<p id="product1">Baloncesto <button id="1">$10</button></p>
<p id="product2">Fútbol <button id="2">$15</button></p>
<p id="product3">Béisbol <button id="3">$7</button></p>
</div>
<section id="cart">
<h2>Tu Carrito</h2>
<div id="cartItems">No hay artículos en el carrito</div>
<h3>Total: <span id="total">$0</span></h3>
</section>
</section>
<script src="script.js"></script>
</body>
</html>
JavaScript:
En tu archivo JavaScript, establece algunas variables para gestionar tus productos, carrito, suma total y botones:
var products = {
'Baloncesto': {'price':10, 'qty':0},
'Fútbol': {'price':15, 'qty':0},
'Béisbol': {'price':7, 'qty':0}
};
var cart = {};
var total = 0;
document.getElementById('1').onclick = function(){addToCart('Baloncesto')};
document.getElementById('2').onclick = function(){addToCart('Fútbol')};
document.getElementById('3').onclick = function(){addToCart('Béisbol')};
Crea una función para añadir artículos al carrito:
function addToCart(productName){
// primero, comprobar si el producto ya existe en el carrito
if(productName in cart) {
cart[productName]++;
} else {
cart[productName]=1;
}
// contar cantidad
products[productName]['qty']++;
// aumentar suma total
total += products[productName]['price'];
document.getElementById('total').innerText = "$" + total;
document.getElementById('cartItems').innerText = JSON.stringify(cart);
}
Ahora, si haces clic en el botón de cualquier producto, se añadirá al carrito, se actualizará el precio total, y el contenido del carrito mostrará los productos junto con su cantidad.
Para una funcionalidad más avanzada como eliminar elementos del carrito, cambiar las cantidades o implementar un sistema de pago, serían necesarias más modificaciones en JavaScript. Este código es simplemente una demostración de la funcionalidad básica de un sistema de carrito de compras basado en JavaScript.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.