22.-Área de edición de carrito de compra de nuestro ecommerce 2da part en PHP
Vamo a seguir programando nuestra area de edición de carrito de compra de nuestro ecommerce. Vamos a colocar los botones sumar y restar cantidad de productos en nuestro carrito de compra y por ultimo agregaremos el botón borrar que ara precisamente eso borrar ese producto de nuestro carrito de compra.
Codigo: https://github.com/programadornovato/ecommerce/commit/93dcd0b705033413e389a16d2e400d1aed742bfe
admin/js/ecommerce.js
$(document).ready(function () {
$.ajax({
type: "post",
url: "ajax/leerCarrito.php",
dataType: "json",
success: function (response) {
llenaCarrito(response);
}
});
$.ajax({
type: "post",
url: "ajax/leerCarrito.php",
dataType: "json",
success: function (response) {
llenarTablaCarrito(response);
}
});
function llenarTablaCarrito(response){
$("#tablaCarrito tbody").text("");
var TOTAL=0;
response.forEach(element => {
var precio=parseFloat(element['precio']);
var totalProd=element['cantidad']*precio;
TOTAL=TOTAL+totalProd;
$("#tablaCarrito tbody").append(
`
<tr>
<td><img src="${element['web_path']}" class="img-size-50"/></td>
<td>${element['nombre']}</td>
<td>
${element['cantidad']}
<button type="button" class="btn-xs btn-primary mas"
data-id="${element['id']}"
data-tipo="mas"
>+</button>
<button type="button" class="btn-xs btn-danger menos"
data-id="${element['id']}"
data-tipo="menos"
>-</button>
</td>
<td>$${precio.toFixed(2)}</td>
<td>$${totalProd.toFixed(2)}</td>
<td><i class="fa fa-trash text-danger borrarProducto" data-id="${element['id']}" ></i></td>
<tr>
`
);
});
$("#tablaCarrito tbody").append(
`
<tr>
<td colspan="4" class="text-right"><strong>Total:</strong></td>
<td>$${TOTAL.toFixed(2)}</td>
<td></td>
<tr>
`
);
}
$(document).on("click",".mas,.menos",function(e){
e.preventDefault();
var id=$(this).data('id');
var tipo=$(this).data('tipo');
$.ajax({
type: "post",
url: "ajax/cambiaCantidadProductos.php",
data: {"id":id,"tipo":tipo},
dataType: "json",
success: function (response) {
llenarTablaCarrito(response);
llenaCarrito(response);
}
});
});
$(document).on("click",".borrarProducto",function(e){
e.preventDefault();
var id=$(this).data('id');
$.ajax({
type: "post",
url: "ajax/borrarProductoCarrito.php",
data: {"id":id},
dataType: "json",
success: function (response) {
llenarTablaCarrito(response);
llenaCarrito(response);
}
});
});
$("#agregarCarrito").click(function (e) {
e.preventDefault();
var id=$(this).data('id');
var nombre=$(this).data('nombre');
var web_path=$(this).data('web_path');
var cantidad=$("#cantidadProducto").val();
var precio=$(this).data('precio');
$.ajax({
type: "post",
url: "ajax/agregarCarrito.php",
data: {"id":id,"nombre":nombre,"web_path":web_path,"cantidad":cantidad,"precio":precio},
dataType: "json",
success: function (response) {
llenaCarrito(response);
$("#badgeProducto").hide(500).show(500).hide(500).show(500).hide(500).show(500);
$("#iconoCarrito").click();
}
});
});
function llenaCarrito(response){
var cantidad=Object.keys(response).length;
if(cantidad>0){
$("#badgeProducto").text(cantidad);
}else{
$("#badgeProducto").text("");
}
$("#listaCarrito").text("");
response.forEach(element => {
$("#listaCarrito").append(
`
<a href="index.php?modulo=detalleproducto&id=${element['id']}" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="${element['web_path']}" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
${element['nombre']}
<span class="float-right text-sm text-primary"><i class="fas fa-eye"></i></span>
</h3>
<p class="text-sm">Cantidad ${element['cantidad']}</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
`
);
});
$("#listaCarrito").append(
`
<a href="index.php?modulo=carrito" class="dropdown-item dropdown-footer text-primary">
Ver carrito
<i class="fa fa-cart-plus"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer text-danger" id="borrarCarrito">
Borrar carrito
<i class="fa fa-trash"></i>
</a>
`
);
}
$(document).on("click","#borrarCarrito",function(e){
e.preventDefault();
$.ajax({
type: "post",
url: "ajax/borrarCarrito.php",
dataType: "json",
success: function (response) {
llenaCarrito(response);
}
});
});
});
ajax/borrarProductoCarrito.php
<?php
$productos=unserialize($_COOKIE['productos']);
foreach ($productos as $key => $value) {
if($_REQUEST['id']==$value['id']){
unset($productos[$key]);
}
}
$productos=array_values($productos);
setcookie("productos",serialize($productos));
echo json_encode($productos);
?>
ajax/cambiaCantidadProductos.php
<?php
$productos=unserialize($_COOKIE['productos']);
foreach ($productos as $key => $value) {
if($_REQUEST['id']==$value['id']){
if($_REQUEST['tipo']=="mas")
$productos[$key]['cantidad']++;
else
$productos[$key]['cantidad']--;
}
}
setcookie("productos",serialize($productos));
echo json_encode($productos);
?>
🎦Curso de PHP🐘 y MySql🐬: https://www.youtube.com/playlist?list=PLCTD_CpMeEKS2Dvb-WNrAuDAXObB8GzJ0
🎦[Curso] Laravel Tutorial en Español: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQcVcM4u4qddLYRE37S_0XS
🎦Curso]Ajax con Jquery de 0 a 100 🌇: https://www.youtube.com/watch?v=52yI0xiB73A&list=PLCTD_CpMeEKSYJ1J15M8PknOMwOpeqsXz
🎦Mysql configurar una replicación maestro – esclavo 🐬: https://www.youtube.com/watch?v=RY-EdBOJWEs
🎦[Curso] Visual Studio Code 🆚 de 0 a 100: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQbdlT8efsS-veXuvYZ1UWn
🎦[Curso] Bootstrap de 0 a 100 🌈: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT
🎦[Curso] HTML y CSS de 0 a 100 🌐: https://www.youtube.com/playlist?list=PLCTD_CpMeEKS1SmufBGPOV1mjNfCiLwek
🎦 Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQhRiJx7Wv3pM3rYvT9_CS9 .
Codigos en gdrive: https://drive.google.com/file/d/1QW8ExkL8eS7nQ5HTDvUuSkkGJMSmecGV/view?usp=sharing
Gracias por apoyar este canal: https://www.patreon.com/programadornovato?fan_landing=true
🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/
<<Anterior tutorial Siguiente tutorial >>
