javascript - 如何解决：输入不起作用/购物车问题

Question

我第一次为在线商店创建网站，但我的购物车输出出现了一些问题。有两个主要问题，第一个是当我两次添加相同的项目时，它会在购物清单中创建另一个对象，而不是仅仅将价格翻倍并保持购物车整洁。第二个是我在购物车中添加了一个输入，以便用户可以修改他们想要多少件衣服，但价格不会随着数量的增加而更新！

很抱歉插入了整个代码，但由于我不是以英语为母语的人，所以很难解释自己，所以你可以看看你需要的任何东西！

window.onload = function () {
            var baseDeDatos = [
                {
                    id: 1,
                    nombre: 'Trim',
                    precio: 1399,
                    categoria: 'Buzo',
                    img: 'img/1.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 2,
                    nombre: 'Rainbow',
                    precio: 990,
                    categoria: 'Buzo',
                    img: 'img/2.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 3,
                    nombre: 'White',
                    precio: 948,
                    categoria: 'Buzo',
                    img: 'img/3.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 4,
                    nombre: 'Cycle',
                    precio: 550,
                    categoria: 'Buzo',
                    img: 'img/4.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 5,
                    nombre: 'Cellie',
                    precio: 590,
                    categoria: 'Buzo',
                    img: 'img/5.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 6,
                    nombre: 'Leo',
                    precio: 2890,
                    categoria: 'Buzo',
                    img: 'img/6.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 7,
                    nombre: 'Today',
                    precio: 499,
                    categoria: 'Buzo',
                    img: 'img/7.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 8,
                    nombre: 'Sky',
                    precio: 499,
                    categoria: 'Buzo',
                    img: 'img/8.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 9,
                    nombre: 'Regan',
                    precio: 590,
                    categoria: 'Buzo',
                    img: 'img/9.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 10,
                    nombre: 'Polly',
                    precio: 1399,
                    categoria: 'Remera',
                    img: 'img/10.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 11,
                    nombre: 'June',
                    precio: 799,
                    categoria: 'Remera',
                    img: 'img/11.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 12,
                    nombre: 'Amy',
                    precio: 1299,
                    categoria: 'Remera',
                    img: 'img/12.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 13,
                    nombre: 'Tai',
                    precio: 648,
                    categoria: 'Top',
                    img: 'img/13.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 14,
                    nombre: 'Judy',
                    precio: 3290,
                    categoria: 'Remera',
                    img: 'img/14.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 15,
                    nombre: 'Grey',
                    precio: 1090,
                    categoria: 'Top',
                    img: 'img/15.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                  {
                    id: 16,
                    nombre: 'Pinky',
                    precio: 1090,
                    categoria: 'Top',
                    img: 'img/16.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                  {
                    id: 17,
                    nombre: 'Line',
                    precio: 1090,
                    categoria: 'Top',
                    img: 'img/17.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                  {
                    id: 18,
                    nombre: 'Line',
                    precio: 1090,
                    categoria: 'Buzo',
                    img: 'img/18.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                }

            ]
            
            var $items = document.querySelector('#items');
            var carrito = [];
            var total = 0;
            var $carrito = document.querySelector('#carrito');
            var $total = document.querySelector('#total');
            var $unidades = document.querySelector('#unidades');
            var unidades = 0;

            function renderItems () {
                for (var info of baseDeDatos) {

                    var miNodo = document.createElement('div');
                    miNodo.classList.add('card', 'col-md-6', 'col-lg-4', 'mt-5');
                    
                    var miNodoCardBody = document.createElement('div');
                    miNodoCardBody.classList.add('card-body');

                    var miNodoTitle = document.createElement('h5');
                    miNodoTitle.classList.add('card-title');
                    miNodoTitle.textContent = info['nombre'] + ' / ' + info['categoria'];
                    
                    var miNodoImg = document.createElement('img');
                    miNodoImg.classList.add('card-text', 'img-fluid');
                    miNodoImg.src = info['img'];
                    
                    var miNodoDesc = document.createElement('p');
                    miNodoDesc.classList.add('card-text');
                    miNodoDesc.textContent = info['descripcion'];

                    var miNodoPrecio = document.createElement('h5');
                    miNodoPrecio.classList.add('card-text');
                    miNodoPrecio.textContent = '$' +info['precio'];

                    var miNodoBoton = document.createElement('button');
                    miNodoBoton.classList.add('btn', 'btn-primary');
                    miNodoBoton.textContent = 'Agregar al carrito';
                    miNodoBoton.setAttribute('marcador', info['id']);
                    miNodoBoton.addEventListener('click', anyadirCarrito);

                    miNodoCardBody.appendChild(miNodoImg);
                    miNodoCardBody.appendChild(miNodoTitle);
                    miNodoCardBody.appendChild(miNodoDesc);
                    miNodoCardBody.appendChild(miNodoPrecio);
                    miNodoCardBody.appendChild(miNodoBoton);
                    miNodo.appendChild(miNodoCardBody);
                    $items.appendChild(miNodo);
                }
            }
            function anyadirCarrito () {              
                carrito.push(this.getAttribute('marcador'))
                calcularTotal();
                renderizarCarrito();

            }

            function renderizarCarrito () {
                $carrito.textContent = '';
                carrito.forEach(function (item, indice) {
                    var miItem = baseDeDatos.filter(function(itemBaseDatos) {
                        return itemBaseDatos['id'] == item;
                    });
                    var miNodo = document.createElement('li');
                    miNodo.classList.add('list-group-item', 'text-right');
                    miNodo.textContent = `${miItem[0]['nombre']} -  $${miItem[0]['precio']}       `;
                    
                    var miNodoInput = document.createElement("INPUT");
                    miNodoInput.setAttribute("type", "number");
                    miNodoInput.setAttribute("value", "1");
                    miNodoInput.setAttribute("min", "1");
                    miNodo.appendChild(miNodoInput);
                    
                    
                    var miBoton = document.createElement('button');
                    miBoton.classList.add('btn', 'btn-danger', 'mx-5');
                    miBoton.textContent = 'X';
                    miBoton.setAttribute('posicion', indice);
                    miBoton.addEventListener('click', borrarItemCarrito);
                    miNodo.appendChild(miBoton);
                    $carrito.appendChild(miNodo);
                })
            }

            function borrarItemCarrito () {
                var posicion = this.getAttribute('posicion');
                carrito.splice(posicion, 1);
                renderizarCarrito();
                calcularTotal();
            }

            function calcularTotal () {
                total = 0;
                for (var item of carrito) {
                    var miItem = baseDeDatos.filter(function(itemBaseDatos) {
                        return itemBaseDatos['id'] == item;
                    });
                    total = total + miItem[0]['precio'];
                }
                var totalDosDecimales = total.toFixed(2);
                $total.textContent = totalDosDecimales;
            }
            renderItems();
        } 

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
@import url("https://fonts.googleapis.com/css?family=Metal+Mania");

@font-face {
    font-family: "Booter - Zero Zero";
    src: url("Fonts/Booter - Zero Zero.woff") format("woff"),
         url("Fonts/Booter - Zero Zero.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Raleway;
    color: #777;
}

body{
    background-color: #fffbed;
}

nav{
    margin-bottom: 20px;
}

main{
    text-align: center;
}

ul,
li {
    text-decoration: none;
    list-style: none;
}
#logo {
    background: url(img/LOGO.png);
    width: 145px;
    height: 20px;
    font-size: 0;
    position: fixed;
    top: 24px;
    left: 20px;
    z-index: 1100;
}

.botoncarrito{
    text-align: center;
    align-content: center;
}

.borrar:hover {
    background-color: #f8051b;
    opacity: 0.8;
    transition: 0.5s;
}

.enviar:hover {
    background-color: #009AAC;
    opacity: 0.8;
    transition: 0.5s;
}
.boton1{
    background-color: #eb7681;
}
.boton2{
    background-color: #78e5c3;
}
footer{
    background-color: #f0ffff;
    background-size: cover;
}

#tres{
    margin-top: 2em;
}

.btn-primary {
    color: white;
    background-color: #f25656;
    border: none;
    border-radius: .3em;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #5f4141;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>HUSH</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="estilos.css">
    <script src="java.js"></script>
    
</head>

<body>
  
   <header class="container fixed-top ">
        <h1 id="logo">HUSH - Indumentaria</h1>
        <div class="row">
            <nav class="col navbar fixed-top navbar-expand-md navbar-light bg-light ">
                <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#barra" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="barra">
                    <ul class="navbar-nav text-center mx-auto px-1">
                        <li class="nav-item">
                            <a class="nav-link" href="#uno" data-ancla="true" data-tiempo="800" data-freno="60">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#dos" data-ancla="true" data-tiempo="800" data-freno="60">Productos</a>
                        </li>
        
                        <li class="nav-item">
                              <a class="nav-link" href="#tres" data-ancla="true" data-tiempo="800" data-freno="60">Contacto</a>
                        </li>
                      
                    </ul>
                </div>
            </nav>
        </div>
    </header>
    <section id="dos">
       <div  class="container">
        <div class="row">
            <main id="items" class="col-sm-12 row pt-5 "></main>
            <aside class=" pl-5 pt-5">
                <h2>Carrito</h2>
                <ul id="carrito" class="list-group"></ul>
                <hr>
                <p class="text-right">Total: <span id="total"></span>&dollar;</p>
            </aside>
        </div>
        </div>
        
        <div class="botoncarrito"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll-1">Confirmar compra</button></div>

<!-- Modal: modalPoll -->
<div class="modal fade right" id="modalPoll-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <p class="heading lead">Confirmá tu compra
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" class="white-text">×</span>
        </button>
      </div>

      <!--Body-->
      <div class="modal-body">
        <div class="text-center">
          <i class="far fa-file-alt fa-4x mb-3 animated rotateIn"></i>
          <p>
            <strong>¡Gracias por confiar en nuestra tienda!</strong>
          </p>
          <p>Completá estos datos y te contactaremos para concretar tu compra de
            <strong></strong> productos.
          </p>
        </div>

        <hr>

        <!-- Radio -->
        <p class="text-center">
          <strong>Metodo de Pago</strong>
        </p>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked>
          <label class="form-check-label" for="radio-179">Tarjeta de Crédito</label>
        </div>

        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2">
          <label class="form-check-label" for="radio-279">MercadoPago</label>
        </div>

        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3">
          <label class="form-check-label" for="radio-379">Pagofácil / Rapipago</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4">
          <label class="form-check-label" for="radio-479">Depósito bancario</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5">
          <label class="form-check-label" for="radio-579">Efectivo al retirar</label>
        </div>
        <!-- Radio -->

        <p class="text-center">
          <strong>Ingresa tu mail para que podamos contactarte:</strong>
        </p>
        <!--Basic textarea-->
        <div class="md-form">
          <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea>
        </div>

      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Enviar
          <i class="fa fa-paper-plane ml-1"></i>
        </a>
        <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancelar</a>
      </div>
    </div>
  </div>
</div>
<!-- Modal: modalPoll -->

   
    </section>
   <section id="tres" class="container">
         <div class="row">
             <div class="col-md-6 pb-3 my-auto mx-auto">
             <h2 class="text-center">Seguinos en nuestras redes</h2>
                  <div class="row pl-2 d-flex justify-content-center align-items-center mr-5">
                    <div class="col-2 pr-2">
                        <ul>
                            <li>
                                <a href="https://es-la.facebook.com/" target="_blank">
                                    <img src="img/fb.png" alt="Facebook">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-2  pr-2">
                        <ul>
                            <li>
                                <a href="https://twitter.com/?lang=es/" target="_blank">
                                    <img src="img/tw.png" alt="Twitter">
                                </a>
                            </li>
                        </ul>
                    </div>
                      
                    <div class="col-2  pr-2">
                        <ul>
                            <li>
                                <a href="https://www.instagram.com/?hl=es-la" target="_blank">
                                    <img src="img/ig.png" alt="Instagram">
                                </a>
                            </li>
                        </ul>
                    </div>
               
           </div>
            </div>
        
    </section>
    
     <footer class="opacity p-3 text-center" >
        
       <p class="bold"> Diseño y Programación web - DMM3A - 2019</p>
        
    </footer>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/animaScroll.js"></script>
    <script src="js/marcaBoton.js"></script>
    <script src="js/header02.js"></script>
    <script>
        $('.nav-item').on('click', function() {
            $(".navbar-collapse").collapse("hide");
        })
    </script>
</body>
</html>

标签： javascriptjqueryhtmlarraysshopping-cart

Answer 1

window.onload = function () {
        var addedItems = {}
            var baseDeDatos = [
                {
                    id: 1,
                    nombre: 'Trim',
                    precio: 1399,
                    categoria: 'Buzo',
                    img: 'img/1.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 2,
                    nombre: 'Rainbow',
                    precio: 990,
                    categoria: 'Buzo',
                    img: 'img/2.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 3,
                    nombre: 'White',
                    precio: 948,
                    categoria: 'Buzo',
                    img: 'img/3.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 4,
                    nombre: 'Cycle',
                    precio: 550,
                    categoria: 'Buzo',
                    img: 'img/4.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 5,
                    nombre: 'Cellie',
                    precio: 590,
                    categoria: 'Buzo',
                    img: 'img/5.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 6,
                    nombre: 'Leo',
                    precio: 2890,
                    categoria: 'Buzo',
                    img: 'img/6.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 7,
                    nombre: 'Today',
                    precio: 499,
                    categoria: 'Buzo',
                    img: 'img/7.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 8,
                    nombre: 'Sky',
                    precio: 499,
                    categoria: 'Buzo',
                    img: 'img/8.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 9,
                    nombre: 'Regan',
                    precio: 590,
                    categoria: 'Buzo',
                    img: 'img/9.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 10,
                    nombre: 'Polly',
                    precio: 1399,
                    categoria: 'Remera',
                    img: 'img/10.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 11,
                    nombre: 'June',
                    precio: 799,
                    categoria: 'Remera',
                    img: 'img/11.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 12,
                    nombre: 'Amy',
                    precio: 1299,
                    categoria: 'Remera',
                    img: 'img/12.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 13,
                    nombre: 'Tai',
                    precio: 648,
                    categoria: 'Top',
                    img: 'img/13.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 14,
                    nombre: 'Judy',
                    precio: 3290,
                    categoria: 'Remera',
                    img: 'img/14.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                {
                    id: 15,
                    nombre: 'Grey',
                    precio: 1090,
                    categoria: 'Top',
                    img: 'img/15.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                  {
                    id: 16,
                    nombre: 'Pinky',
                    precio: 1090,
                    categoria: 'Top',
                    img: 'img/16.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                  {
                    id: 17,
                    nombre: 'Line',
                    precio: 1090,
                    categoria: 'Top',
                    img: 'img/17.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                },
                  {
                    id: 18,
                    nombre: 'Line',
                    precio: 1090,
                    categoria: 'Buzo',
                    img: 'img/18.jpg',
                    descripcion: 'Buzo con diseño colorblock neon.'
                }

            ]
            
            var $items = document.querySelector('#items');
            var carrito = [];
            var total = 0;
            var $carrito = document.querySelector('#carrito');
            var $total = document.querySelector('#total');
            var $unidades = document.querySelector('#unidades');
            var unidades = 0;

            function renderItems () {
                for (var info of baseDeDatos) {

                    var miNodo = document.createElement('div');
                    miNodo.classList.add('card', 'col-md-6', 'col-lg-4', 'mt-5');
                    
                    var miNodoCardBody = document.createElement('div');
                    miNodoCardBody.classList.add('card-body');

                    var miNodoTitle = document.createElement('h5');
                    miNodoTitle.classList.add('card-title');
                    miNodoTitle.textContent = info['nombre'] + ' / ' + info['categoria'];
                    
                    var miNodoImg = document.createElement('img');
                    miNodoImg.classList.add('card-text', 'img-fluid');
                    miNodoImg.src = info['img'];
                    
                    var miNodoDesc = document.createElement('p');
                    miNodoDesc.classList.add('card-text');
                    miNodoDesc.textContent = info['descripcion'];

                    var miNodoPrecio = document.createElement('h5');
                    miNodoPrecio.classList.add('card-text');
                    miNodoPrecio.textContent = '$' +info['precio'];

                    var miNodoBoton = document.createElement('button');
                    miNodoBoton.classList.add('btn', 'btn-primary');
                    miNodoBoton.textContent = 'Agregar al carrito';
                    miNodoBoton.setAttribute('marcador', info['id']);
                    miNodoBoton.addEventListener('click', anyadirCarrito);

                    miNodoCardBody.appendChild(miNodoImg);
                    miNodoCardBody.appendChild(miNodoTitle);
                    miNodoCardBody.appendChild(miNodoDesc);
                    miNodoCardBody.appendChild(miNodoPrecio);
                    miNodoCardBody.appendChild(miNodoBoton);
                    miNodo.appendChild(miNodoCardBody);
                    $items.appendChild(miNodo);
                }
            }
           function anyadirCarrito () {
  var marcador = parseInt(this.getAttribute('marcador'));
  let index = carrito.findIndex(item => item.marcador == marcador );
  if(index > -1) {
    carrito[index].count += 1;
  } else {
     carrito.push({marcador: marcador, count: 1});
  }
             
  
  calcularTotal();
  renderizarCarrito();

  }

            function renderizarCarrito () {
              $carrito.textContent = '';
      carrito.forEach(function (item, indice) {
          var miItem = baseDeDatos.filter(function(itemBaseDatos) {
              return itemBaseDatos['id'] == item.marcador;
          });
          var element = addedItems[miItem[0].nombre.toLowerCase()];
          if(element) {
             var inputElement = element.children[0];
             inputElement.value = item.count;     
             $carrito.appendChild(element);        
          } else {
          var miNodo = document.createElement('li');
          miNodo.setAttribute('id', miItem[0].nombre.toLowerCase())
          miNodo.classList.add('list-group-item', 'text-right');
          miNodo.textContent = `${miItem[0]['nombre']} -  $${miItem[0]['precio']}       `;
          
          var miNodoInput = document.createElement("INPUT");
          miNodoInput.setAttribute("type", "number");
          miNodoInput.setAttribute("value", "1");
          miNodoInput.setAttribute("marcador", item.marcador+'');
          miNodoInput.setAttribute("min", "1");
          miNodoInput.onchange = function(data) {
            var targetElement = data.target;
            var marcador = targetElement.getAttribute('marcador');
            var index = carrito.findIndex(item => item.marcador == marcador);
            carrito[index].count = parseInt(targetElement.value);
            calcularTotal(); 
          }
          miNodo.appendChild(miNodoInput);
          
          
          var miBoton = document.createElement('button');
          miBoton.classList.add('btn', 'btn-danger', 'mx-5');
          miBoton.textContent = 'X';
          miBoton.setAttribute('posicion', indice);
          miBoton.addEventListener('click', borrarItemCarrito);
          miNodo.appendChild(miBoton);
          addedItems[miItem[0]['nombre'].toLowerCase()] = miNodo;
          $carrito.appendChild(miNodo);
          }
          
      })
            }

            function borrarItemCarrito () {
                var posicion = this.getAttribute('posicion');
                carrito.splice(posicion, 1);
                renderizarCarrito();
                calcularTotal();
            }

            function calcularTotal () {
                total = 0;
                for (var item of carrito) {
                    var miItem = baseDeDatos.filter(function(itemBaseDatos) {
                        return itemBaseDatos['id'] == item.marcador;
                    });
                    total = total + miItem[0]['precio'] * item.count ;
                }
                var totalDosDecimales = total.toFixed(2);
                $total.textContent = totalDosDecimales;
            }
            renderItems();
        }

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
@import url("https://fonts.googleapis.com/css?family=Metal+Mania");

@font-face {
    font-family: "Booter - Zero Zero";
    src: url("Fonts/Booter - Zero Zero.woff") format("woff"),
         url("Fonts/Booter - Zero Zero.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Raleway;
    color: #777;
}

body{
    background-color: #fffbed;
}

nav{
    margin-bottom: 20px;
}

main{
    text-align: center;
}

ul,
li {
    text-decoration: none;
    list-style: none;
}
#logo {
    background: url(img/LOGO.png);
    width: 145px;
    height: 20px;
    font-size: 0;
    position: fixed;
    top: 24px;
    left: 20px;
    z-index: 1100;
}

.botoncarrito{
    text-align: center;
    align-content: center;
}

.borrar:hover {
    background-color: #f8051b;
    opacity: 0.8;
    transition: 0.5s;
}

.enviar:hover {
    background-color: #009AAC;
    opacity: 0.8;
    transition: 0.5s;
}
.boton1{
    background-color: #eb7681;
}
.boton2{
    background-color: #78e5c3;
}
footer{
    background-color: #f0ffff;
    background-size: cover;
}

#tres{
    margin-top: 2em;
}

.btn-primary {
    color: white;
    background-color: #f25656;
    border: none;
    border-radius: .3em;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #5f4141;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>HUSH</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="estilos.css">
    <script src="java.js"></script>
    
</head>

<body>
  
   <header class="container fixed-top ">
        <h1 id="logo">HUSH - Indumentaria</h1>
        <div class="row">
            <nav class="col navbar fixed-top navbar-expand-md navbar-light bg-light ">
                <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#barra" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="barra">
                    <ul class="navbar-nav text-center mx-auto px-1">
                        <li class="nav-item">
                            <a class="nav-link" href="#uno" data-ancla="true" data-tiempo="800" data-freno="60">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#dos" data-ancla="true" data-tiempo="800" data-freno="60">Productos</a>
                        </li>
        
                        <li class="nav-item">
                              <a class="nav-link" href="#tres" data-ancla="true" data-tiempo="800" data-freno="60">Contacto</a>
                        </li>
                      
                    </ul>
                </div>
            </nav>
        </div>
    </header>
    <section id="dos">
       <div  class="container">
        <div class="row">
            <main id="items" class="col-sm-12 row pt-5 "></main>
            <aside class=" pl-5 pt-5">
                <h2>Carrito</h2>
                <ul id="carrito" class="list-group"></ul>
                <hr>
                <p class="text-right">Total: <span id="total"></span>&dollar;</p>
            </aside>
        </div>
        </div>
        
        <div class="botoncarrito"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll-1">Confirmar compra</button></div>

<!-- Modal: modalPoll -->
<div class="modal fade right" id="modalPoll-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <p class="heading lead">Confirmá tu compra
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" class="white-text">×</span>
        </button>
      </div>

      <!--Body-->
      <div class="modal-body">
        <div class="text-center">
          <i class="far fa-file-alt fa-4x mb-3 animated rotateIn"></i>
          <p>
            <strong>¡Gracias por confiar en nuestra tienda!</strong>
          </p>
          <p>Completá estos datos y te contactaremos para concretar tu compra de
            <strong></strong> productos.
          </p>
        </div>

        <hr>

        <!-- Radio -->
        <p class="text-center">
          <strong>Metodo de Pago</strong>
        </p>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked>
          <label class="form-check-label" for="radio-179">Tarjeta de Crédito</label>
        </div>

        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2">
          <label class="form-check-label" for="radio-279">MercadoPago</label>
        </div>

        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3">
          <label class="form-check-label" for="radio-379">Pagofácil / Rapipago</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4">
          <label class="form-check-label" for="radio-479">Depósito bancario</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5">
          <label class="form-check-label" for="radio-579">Efectivo al retirar</label>
        </div>
        <!-- Radio -->

        <p class="text-center">
          <strong>Ingresa tu mail para que podamos contactarte:</strong>
        </p>
        <!--Basic textarea-->
        <div class="md-form">
          <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea>
        </div>

      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Enviar
          <i class="fa fa-paper-plane ml-1"></i>
        </a>
        <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancelar</a>
      </div>
    </div>
  </div>
</div>
<!-- Modal: modalPoll -->

   
    </section>
   <section id="tres" class="container">
         <div class="row">
             <div class="col-md-6 pb-3 my-auto mx-auto">
             <h2 class="text-center">Seguinos en nuestras redes</h2>
                  <div class="row pl-2 d-flex justify-content-center align-items-center mr-5">
                    <div class="col-2 pr-2">
                        <ul>
                            <li>
                                <a href="https://es-la.facebook.com/" target="_blank">
                                    <img src="img/fb.png" alt="Facebook">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-2  pr-2">
                        <ul>
                            <li>
                                <a href="https://twitter.com/?lang=es/" target="_blank">
                                    <img src="img/tw.png" alt="Twitter">
                                </a>
                            </li>
                        </ul>
                    </div>
                      
                    <div class="col-2  pr-2">
                        <ul>
                            <li>
                                <a href="https://www.instagram.com/?hl=es-la" target="_blank">
                                    <img src="img/ig.png" alt="Instagram">
                                </a>
                            </li>
                        </ul>
                    </div>
               
           </div>
            </div>
        
    </section>
    
     <footer class="opacity p-3 text-center" >
        
       <p class="bold"> Diseño y Programación web - DMM3A - 2019</p>
        
    </footer>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/animaScroll.js"></script>
    <script src="js/marcaBoton.js"></script>
    <script src="js/header02.js"></script>
    <script>
        $('.nav-item').on('click', function() {
            $(".navbar-collapse").collapse("hide");
        })
    </script>
</body>
</html>