我第一次为网上商店创建一个网站，但是我的购物车输出出现了一些问题。存在两个主要问题，第一个问题是，当我两次添加相同的商品时，它会在购物清单中创建另一个对象，而不是仅仅使价格加倍并使购物车保持整洁。第二个是我在购物车中添加了一个输入，以便用户可以修改他们想要的衣服数量，但是价格不会随着数量的增加而更新！
很抱歉插入整个代码，但是由于我不是英语为母语的人，所以很难解释自己，因此您可以看看所需的内容！
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>$</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>
答案 0 :(得分：0)
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>$</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>