Stack Overflow en español Asked on March 3, 2021
¿cómo están?
Estoy haciendo un código para un pseudo-ecommerce, pero tengo varios problemas que paso a enumerar.
Les paso el codigo:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce Piledriver | Cerca de vos, siempre</title>
<script src="jsjsonElementos.js"></script>
<script defer src="jscategorias.js"></script>
<script defer src="jsadministroElementos.js"></script>
<script defer src="jscart.js"> </script>
<script defer src="jsproductosCarrito.js"></script>
<script defer src="jsbootstrap.js"></script>
<script defer src="jsbootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jsbootstrap.bundle.min.js"></script>
<script defer src="jscheckout.js"></script>
<script defer src="jsCategoryButtons.js"></script>
<link rel="stylesheet" href="cssbootstrap.css">
<!--Bootstrap Stlyesheet-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Monoton&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400&family=Xanh+Mono&display=swap" rel="stylesheet">
</head>
<body>
<div id="productos">
<div>
<header>
<h1 class="display-1 text-left font-weight-bold p-3 mb-2 bg-success text-white">PILEDRIVER</h1>
<p class="lead text-center p-3 mb-2 bg-light text-dark">
Cerca de vos, siempre. Conocé nuestros métodos de envío por la pandemia del COVID-19</p>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
</div>
<div id="ofertas">
<H1 class="">OFERTAS</H1>
</div>
<br>
<button class="btn btn-success" id="gamingButton"onclick="cargarGaming()">Ver categoria Gaming</button>
<button class="btn btn-success" id="bazarButton" onclick="cargarBazar()">Ver categoria Bazar</button>
<button class="btn btn-success" id="tvAudioButton" onclick="cargartvAudio()">Ver categoria TV Audio</button>
<p id="gamingSection"></p>
<p id="bazarSection"></p>
<p id="tvAudioSection"></p>
<hr>
<table>
<tbody id="grilladeproductos">
<!--Primer Elemento-->
<div class="card mb-3" style="max-width: 500px;max-height:335px; float:md-none;">
<div class="row no-gutters">
<div class="col-md-4">
<a href="#"><img src="sourcesimagesSartenEssen.jpg" class="card-img" alt="Sarten con Gran Durabilidad"></a>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 id="sartenEssen" class="card-title">Sarten Essen</h5>
<p class="card-text">Sarten Essen Modelo 2020 Durabilidad extrema de una marca que acompaña generaciones.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button id="productoid1" onclick="agregarProducto()" type="button" class="btn btn-outline-success">COMPRAR</button>
</div>
</div>
</div>
</div>
<!--Segundo Elemento-->
<div class="card mb-3" style="max-width:500px;height:252px; float:md-none">
<div class="row no-gutters">
<div class="col-md-4">
<a href="#"><img src="sourcesimagesMinipimer.jpg" class="card-img" alt="Minipimer Multifunción con Accesorios"></a>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 id="minipimer" class="card-title">Minipimer Multifunción con Accesorios</h5>
<p class="card-text">Minipimer de gran calidad con sus respectivos accesorios para facilitarte la cocina.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" id="productoid2" onclick="agregarProducto()" class="btn btn-outline-success">COMPRAR</button>
</div>
</div>
</div>
</div>
<!--Tercer Elemento-->
<div class="card mb-3" style="max-width: 500px;height:252px; float:md-none">
<div class="row no-gutters">
<div class="col-md-4">
<a href="#"><img src="sourcesimagesJuicer.jpg" class="card-img" alt="Philips Juicer juguera apta para todo tipo de frutas"></a>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 id="juicer" class="card-title">Philips Juicer</h5>
<p class="card-text">Philips Juicer juguera apta para todo tipo de frutas.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" id="productoid3" onclick="agregarProducto()" class="btn btn-outline-success">COMPRAR</button>
</div>
</div>
</div>
</div>
<!--Cuarto Elemento-->
<div class="card mb-3" style="max-width: 500px;height:252px; float:md-none">
<div class="row no-gutters">
<div class="col-md-4">
<a href="#"><img src="sourcesimagesVajillas.jpg" class="card-img" alt="Vajillas set completo porcelana"></a>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 id="vajillas" class="card-title">Set Vajillas x4</h5>
<p class="card-text">Vajillas set completo porcelana.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" id="productoid4" onclick="agregarProducto()" class="btn btn-outline-success">COMPRAR</button>
</div>
</div>
</div>
</div>
</div>
</table>
<div id="carrito" class="yellow center div-header">
<h6 id="itemscarrito"><i class="cart4"></i> TOTAL DE PRODUCTOS EN SU CARRITO:0</h6>
<button class="btn btn-info" onclick="muestroCheckout()"><i alt="Ver carrito">Ver Carrito</i></a>
</div>
<div id="shoppingcart" class="center div-cart hide">
<h5 >CARRITO DE COMPRAS <span><i class=""></i></span></h5>
<br>
<table class="table table-dark">
<thead class="black white-text">
<tr>
<th>PRODUCTO</th>
<th>DESCRIPCION</th>
<th class="right">IMPORTE</th>
</tr>
</thead>
<tbody id="checkout">
<!-- <tr>
<td>MINIPIMER</td>
<td class="right">15.000</td>
</tr>
<tr>
<td>JUGUERA</td>
<td class="right">12.500</td>
</tr> -->
</tbody>
</table>
<table>
<tbody class="grey lighten-4 black-text" id="totales">
<!-- <tr>
<td>SUBTOTAL</td>
<td class="right">27.500</td>
</tr>
<tr>
<td>DESCUENTO</td>
<td class="right">5.500</td>
</tr>
<tr class="blue lighten-4">
<td>TOTAL</td>
<td class="right">22.000</td>
</tr> -->
</tbody>
</table>
</div>
<br>
<button id="btnvolver" type="button" class="btn btn-warning" onclick="volverAlListadoDeProductos()"><i class="">Volver al listado de productos</i></button>
<button id="btnvolver" type="button" class="btn btn btn-success" onclick="confirmarCompra()"><i class="">Confirmar Compra</i></button>
<div class="jumbotron">
<h1 class="display-4">Hola Invitado</h1>
<p class="lead">Te invitamos a registrarte en nuestro Ecommerce para poder sacar la mayor ventaja de nuestra web.</p>
<a class="btn btn-primary btn-lg" href="#" role="button" onclick="regristate()">Registrate</a>
</div>
</body>
</html>
JS utilizados:
administroElementos
var carrito = []
var changuito = ""
let productos = document.getElementById("productos")
let grilladeproductos = document.getElementById ("grilladeproductos")
let shoppingcart = document.getElementById("shoppingcart")
let checkout = document.getElementById("checkout")
let totales = document.getElementById ("totales")
function itemsEnCarrito() {
let leyendacarrito = "TOTAL DE PRODUCTOS EN SU CARRITO: "
document.getElementById("itemscarrito").innerText = leyendacarrito + carrito.length
}
function agregarProducto(productoid) {
let existe = false
for (let i in carrito) {//el producto ya fue agregado
if(carrito [i] == productoid){
alert("No puede agregar más de una vez el mismo producto, ya que son limitados")
existe = true
break
}
}
if (existe == false) {//lo puedo agregar
carrito.push(productoid)
alert("Agregado al carrito")
itemsEnCarrito()
}
}
cart
class Carrito{
comprarProducto(e){
e.preventDefault();
if(e.target.classList.contains("agregar carrito")){
const producto = e.target.parentElement.parentElement;
this.leerDatosProducto(producto)
}
}
}
checkout
function muestroCheckout() {
if (carrito.length === 0) {
alert("Todavía no añadió ningún producto a su carrito.")
} else {
changuito = new shoppingCart(carrito, PRODUCTOS)
changuito.verCompra(checkout)
changuito.verTotales(totales)
shoppingcart.classList.remove('hide')
productos.classList.add('hide')
}
}
function volverAlListadoDeProductos() {
shoppingcart.classList.add('hide')
productos.classList.remove('hide')
}
function confirmarCompra() {
document.body.style.cursor = 'wait'
setTimeout(() => {
carrito = []
alert("Su compra finalizó con éxito")
volverAlListadoDeProductos()
itemsEnCarrito()
document.body.style.cursor = 'default'
location.reload()
}, 2500);
}
jsonElementos
let PRODUCTOS = [
{
"productoid": 1,
"nombre": "sartenEssen",
"imagen": "sources/SartenEssen.jpg",
"descripcion": "Sarten Essen Modelo 2020 Durabilidad extrema de una marca que acompaña generaciones.",
"precio": 15000
},
{
"productoid": 2,
"nombre": "minipimer",
"imagen": "sources/minipimer.jpg",
"descripcion": "Minipimer de gran calidad con sus respectivos accesorios para facilitarte la cocina.",
"precio": 9500
},
{
"productoid": 3,
"nombre": "Philips Juicer",
"imagen": "sources/Juicer.jpg",
"descripcion": "Philips Juicer juguera apta para todo tipo de frutas.",
"precio": 14000
},
{
"productoid": 4,
"nombre": "Vajillas",
"imagen": "sources/Vajillas.jpg",
"descripcion": "Vajillas set completo porcelana.",
"precio": 6000
}
]
productosCarrito
class shoppingCart {
constructor(carrito, productos) {
var subtotal = 0
this.carrito = carrito
this.productos = productos
this.verCompra = function(grillaCheckout) {
let grilla = ""
for (let i in this.carrito) { //recorro el carrito con los ítems
for (let j in this.productos) { //recorro los productos
if (this.productos[j].productoid === carrito[i]) { //armo el checkout
grilla += "<tr>" +
"<td>" + productos[j].nombre + "</td>" +
"<td>" + productos[j].descripcion + "</td>" +
"<td>$ " + productos[j].precio + "</td>" +
"</tr>"
subtotal += productos[j].precio
}
}
}
grillaCheckout.innerHTML = grilla
}
this.verTotales = function(grillaTotales) {
let grilla = "<tr><td>SUBTOTAL</td><td class='right'>$ " + this.subtotal().toFixed(0) + "</td></tr>" +
"<tr class='blue lighten-4'><td>TOTAL</td><td class='right'>$ " + this.total().toFixed(0) + "</td></tr>"
grillaTotales.innerHTML = grilla
}
this.subtotal = function() {
return subtotal
}
this.total = function() {
return Number(subtotal)
}
}
}
Desde ya quedo atento a su ayuda!
Muchas gracias!
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP