Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

probando ejemplos de Paypal y page.js #4

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 0 additions & 25 deletions README.md

This file was deleted.

9 changes: 9 additions & 0 deletions public/css/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
#categories {
display: none;
}

@media (min-width: 768px) {
#categories, #shopping-cart {
display: block;
}
}
154 changes: 154 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="js/page.js"></script>
<link rel="stylesheet" href="css/main.css">
<title>Ecomerse</title>
</head>

<body>
<header>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo center">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse">
<i class="material-icons">menu</i>
</a>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large" id="shopping-cart">
<i class="material-icons">shopping_cart</i>
</a>
<ul class="side-nav" id="mobile-demo">
<li class="lisCategorias" data-id="MPE68085">
<a href="/MPE68085">Aberturas</a>
</li>
<li class="lisCategorias" data-id="MPE1613">
<a href="/MPE1613">Baño</a>
</li>
<li class="lisCategorias" data-id="MPE1618">
<a href="/MPE1618">Cocina</a>
</li>
<li class="lisCategorias" data-id="MPE3236">
<a href="/MPE3236">Comedor</a>
</li>
<li class="lisCategorias" data-id="MPE1631">
<a href="/MPE1631">Decoración para el Hogar</a>
</li>
<li class="lisCategorias" data-id="MPE1608">
<a href="/MPE1608">Dormitorio</a>
</li>
<li class="lisCategorias" data-id="MPE68166">
<a href="/MPE68166">Escritorio</a>
</li>
<li class="lisCategorias" data-id="MPE7155">
<a href="/MPE7155">Iluminación para el Hogar</a>
</li>
<li class="lisCategorias" data-id="MPE68126">
<a href="/MPE68126">Seguridad y Vigilancia - Hogar</a>
</li>
<li class="lisCategorias" data-id="MPE1621">
<a href="/MPE1621">Terrazas y Jardín</a>
</li>
<li class="lisCategorias" data-id="MPE1902">
<a href="/MPE1902">Otros</a>
</li>
</ul>
</div>
</nav>

<ul id="slide-out" class="side-nav">
<!-- aqui van todos los productos añadidos al carrito -->
<li>
<a href="#!">
<i class="material-icons">attach_money</i>Total:
<span id="total">precio</span>
</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<div id="paypal-button"></div>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a class="subheader">pedido</a>
</li>
<li>
<a class="subheader">pedido</a>
</li>
<li>
<a class="subheader">pedido</a>
</li>
</ul>

<nav id="categories">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li class="lisCategorias" data-id="MPE68085">
<a href="/MPE68085">Aberturas</a>
</li>
<li class="lisCategorias" data-id="MPE1613">
<a href="/MPE1613">Baño</a>
</li>
<li class="lisCategorias" data-id="MPE1618">
<a href="/MPE1618">Cocina</a>
</li>
<li class="lisCategorias" data-id="MPE3236">
<a href="/MPE3236">Comedor</a>
</li>
<li class="lisCategorias" data-id="MPE1631">
<a href="/MPE1631">Decoración para el Hogar</a>
</li>
<li class="lisCategorias" data-id="MPE1608">
<a href="/MPE1608">Dormitorio</a>
</li>
<li class="lisCategorias" data-id="MPE68166">
<a href="/MPE68166">Escritorio</a>
</li>
<li class="lisCategorias" data-id="MPE7155">
<a href="/MPE7155">Iluminación para el Hogar</a>
</li>
<li class="lisCategorias" data-id="MPE68126">
<a href="/MPE68126">Seguridad y Vigilancia - Hogar</a>
</li>
<li class="lisCategorias" data-id="MPE1621">
<a href="/MPE1621">Terrazas y Jardín</a>
</li>
<li class="lisCategorias" data-id="MPE1902">
<a href="/MPE1902">Otros</a>
</li>
</ul>
</div>
</nav>
</header>

<!-- Contenedor de sección -->
<div class="container section">
<p id="test"></p>
<ul class="fatherList">

</ul>
</div>

<div class="row">

</div>

<!-- API PAYPAL -->
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="js/app.js"></script>
</body>

</html>
116 changes: 116 additions & 0 deletions public/js/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
$(document).ready(function () {

/*page('ruta', callback)*/
page('/MPE68085', user)
page('/MPE1613', user)
page('/MPE1618', user)
page('/MPE3236', user)
page('/MPE1631', user)
page('/MPE1608', user)
page('/MPE68166', user)
page('/MPE7155', user)
page('/MPE68126', user)
page('/MPE1621', user)
page('/MPE1902', user)
page('*', notFound)
page()

function user() {
document.getElementById('test').textContent = 'hola';
}

function notFound() {
document.getElementById('test').textContent = 'not found';
}

// inicializando y configurando sidebar materialize
$(".button-collapse").sideNav();
$('.button-collapse#shopping-cart').sideNav({
edge: 'right',
});

//hallando categorias que se colocaran en listas
$.ajax({
url: 'https://api.mercadolibre.com/categories/MPE1574',
success: function (data) {
var categorias = data.children_categories
console.log(categorias)
categorias.forEach(function (element) {
const li = `<li class="lisCategorias" data-id=${element.id}><a href="/${element.id}" class='categorie'>${element.name}</a></li>`
// $(".right").append(li);
$("#mobile-demo").append(li);
});

}

});

// jalando subcategorias
$.ajax({
url: 'https://api.mercadolibre.com/sites/MPE/search?category=MPE1574',
success: function (data) {
var children = data.results
console.log(children);

children.forEach(function (element) {
const div = ` <div id= ${element.category_id} class="listProductos card col s12 m3 l3" style="height: 280px; width:250px; margin:8px 9px " >
<img src="${element.thumbnail} alt="">
<p class="center-align">${element.title}</p>
<p class="center-align " style="color: blue;"> costo :${element.price} </p>
<p class="center-align">${element.category_id}</p>
</div>`
$(".row").append(div);
// $(".listProductos").hide();

})

}
});

//evento que relaciona la categoria con las subcategorias.

//$(".lisCategorias").click(function() {
// if($(".lisCategorias").attr( "data-id" )=== $(".listProductos").attr("id")){
// $( ".lisProductos" ).show()
// }
//});

// Inicia Configuración de API PayPal

paypal.Button.render({
env: 'production', // Or 'sandbox',
client: {
sandbox: 'AUbwyqI0Qv7-Jx560ktdg_rwLNaT35-a3FYA7-SdVf9i7dTbYD56hMqXC4YGQZr0RHMHOKhHlUJblkfk',
production: 'AWStTtI9jh03288Nu2oVlmmgFz-3lXcnm7Jtwj4QZ55oPw2m8cDK4vsyU_vORxwtEfjoygFEOAiM0LWO'
},
locale: 'es_ES',
commit: true, // Show a 'Pay Now' button
style: {
color: 'blue',
size: 'responsive',
shape: 'rect',
},

payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [{
amount: {
total: '1.00', // enviar precio en esta función
currency: 'USD'
}
}]
}
});
},

onAuthorize: function (data, actions) {
return actions.payment.execute().then(function (payment) {
// The payment is complete!
// You can now show a confirmation message to the customer
});
},
}, '#paypal-button');

// Termina Configuración de API PayPal
})
Loading