TransWikia.com

Ecommerce no muestra productos y no toma valores JSON

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.

  1. No carga el subtotal de los productos definidos como "productoid"
  2. No toma los datos del jsonElementos.js
  3. Al agregar más de un elemento a shoppingcart figura que no se puede agregar el mismo elemento ya que son limitados (lo cual no es la idea, eso es si agrega el mismo producto 2 veces)

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!

ajaxbootstrapfunctionjavascriptjson

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP