Este proyecto es un simulador de un carrito de compras muy básico y funciona con MYSQL, te muestra una lista de productos disponibles, seleccionas el producto, ingresas la cantidad que quieras y presionas el botón agregar. En el carrito puedes eliminar cualquier producto seleccionado, limpiar por completo o pagar.
¿Cómo funciona?
Seleccionamos un producto, ingresamos una cantidad y presionamos agregar.
Si un producto seleccionado ya se encuentra en el carrito este aumentará la cantidad y no se duplicará en otra fila.
Podemos eliminar cualquier producto del carrito.
También limpiar por completo.
El botón pagar solo muestra un mensaje, pero puedes agregar un formulario donde pagará por los productos.
¿Cómo iniciar?
Necesitamos una carpeta img con diferentes imágenes.
Creamos los archivos clase.php, index.php y style.css.
Creamos la base de datos vaicarrito1 y la tabla productos.
CREATE TABLE `productos` ( `id` int(11) NOT NULL, `img` text NOT NULL, `cod` varchar(50) NOT NULL, `nom` varchar(50) NOT NULL, `pre` double(10,2) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; INSERT INTO `productos` (`id`, `img`, `cod`, `nom`, `pre`) VALUES (1, 'img/mesa.png', 'KDFI1', 'Mesa', 12.00), (3, 'img/radio.png', 'P4KU1L', 'Radio', 32.00), (4, 'img/silla.png', 'KFJD31', 'Silla', 3.00), (5, 'img/sofa.png', 'ASDKQ1', 'Sofa', 10.00), (6, 'img/tv.png', 'OQMKEM4', 'Televisor', 41.00), (7, 'img/microondas.png', 'AAS2DGE', 'Microondas', 32.00); ALTER TABLE `productos` ADD PRIMARY KEY (`id`), ADD UNIQUE KEY `cod` (`cod`); ALTER TABLE `productos` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8
continuamos con los códigos de cada hoja.
<?php class DBControl { private $conn; function __construct() { $this->conn = $this->conectarDB(); } function conectarDB() { $conn = mysqli_connect("localhost","root","","vaicarrito1"); return $conn; } function vaiquery($query) { $resultado = mysqli_query($this->conn,$query); while($fila=mysqli_fetch_assoc($resultado)) { $obtener_resultado[] = $fila; } if(!empty($obtener_resultado)) { return $obtener_resultado; } } function nfilas($query) { $resultado = mysqli_query($this->conn,$query); $totalfilas = mysqli_num_rows($resultado); return $totalfilas; } } ?>
index.php
<?php session_start(); require_once("clase.php"); $usar_db = new DBControl(); if(!empty($_GET["accion"])) { switch($_GET["accion"]) { case "agregar": if(!empty($_POST["txtcantidad"])) { $codproducto = $usar_db->vaiQuery("SELECT * FROM productos WHERE cod='" . $_GET["cod"] . "'"); $items_array = array($codproducto[0]["cod"]=>array( 'vai_nom' =>$codproducto[0]["nom"], 'vai_cod' =>$codproducto[0]["cod"], 'txtcantidad' =>$_POST["txtcantidad"], 'vai_pre' =>$codproducto[0]["pre"], 'vai_img' =>$codproducto[0]["img"] )); if(!empty($_SESSION["items_carrito"])) { if(in_array($codproducto[0]["cod"], array_keys($_SESSION["items_carrito"]))) { foreach($_SESSION["items_carrito"] as $i => $j) { if($codproducto[0]["cod"] == $i) { if(empty($_SESSION["items_carrito"][$i]["txtcantidad"])) { $_SESSION["items_carrito"][$i]["txtcantidad"] = 0; } $_SESSION["items_carrito"][$i]["txtcantidad"] += $_POST["txtcantidad"]; } } } else { $_SESSION["items_carrito"] = array_merge($_SESSION["items_carrito"],$items_array); } } else { $_SESSION["items_carrito"] = $items_array; } } break; case "eliminar": if(!empty($_SESSION["items_carrito"])) { foreach($_SESSION["items_carrito"] as $i => $j) { if($_GET["eliminarcode"] == $i) { unset($_SESSION["items_carrito"][$i]); } if(empty($_SESSION["items_carrito"])) { unset($_SESSION["items_carrito"]); } } } break; case "vacio": unset($_SESSION["items_carrito"]); break; case "pagar": echo "<script> alert('Gracias por su compra - VaidrollTeam');window.location= 'index.php' </script>"; unset($_SESSION["items_carrito"]); break; } } ?> <html> <meta charset="UTF-8"> <head> <title>VaidrollTeam</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div align="center"><h1>VaidrollTeam - Carrito de compras</h1></div> <div> <div><h2>Lista de productos a comprar.</h2></div> <?php if(isset($_SESSION["items_carrito"])) { $totcantidad = 0; $totprecio = 0; ?> <table> <tr> <th style="width:30%">Descripción</th> <th style="width:10%">Código</th> <th style="width:10%">Cantidad</th> <th style="width:10%">Precio x unidad</th> <th style="width:10%">Precio</th> <th style="width:10%"><a href="index.php?accion=vacio">Limpiar</a></th> </tr> <?php foreach ($_SESSION["items_carrito"] as $item){ $item_price = $item["txtcantidad"]*$item["vai_pre"]; ?> <tr> <td><img src="<?php echo $item["vai_img"]; ?>" class="imagen_peque" /><?php echo $item["vai_nom"]; ?></td> <td><?php echo $item["vai_cod"]; ?></td> <td><?php echo $item["txtcantidad"]; ?></td> <td><?php echo "$ ".$item["vai_pre"]; ?></td> <td><?php echo "$ ". number_format($item_price,2); ?></td> <td><a href="index.php?accion=eliminar&eliminarcode=<?php echo $item["vai_cod"]; ?>">Eliminar</a></td> </tr> <?php $totcantidad += $item["txtcantidad"]; $totprecio += ($item["vai_pre"]*$item["txtcantidad"]); } ?> <tr style="background-color:#f3f3f3"> <td colspan="2"><b>Total de productos:</b></td> <td><b><?php echo $totcantidad; ?></b></td> <td colspan="2"><strong><?php echo "$ ".number_format($totprecio, 2); ?></strong></td> <td><a href="index.php?accion=pagar">Pagar</a></td> </tr> </table> <?php } else { ?> <div align="center"><h3>¡El carrito esta vacío!</h3></div> <?php } ?> </div> <div> <div><h2>Productos</h2></div> <div class="contenedor_general"> <?php $productos_array = $usar_db->vaiquery("SELECT * FROM productos ORDER BY id ASC"); if (!empty($productos_array)) { foreach($productos_array as $i=>$k) { ?> <div class="contenedor_productos"> <form method="POST" action="index.php?accion=agregar&cod= <?php echo $productos_array[$i]["cod"]; ?>"> <div><img src="<?php echo $productos_array[$i]["img"]; ?>"></div> <div> <div style="padding-top:20px;font-size:18px;"><?php echo $productos_array[$i]["nom"]; ?></div> <div style="padding-top:10px;font-size:20px;"><?php echo "$".$productos_array[$i]["pre"]; ?></div> <div><input type="text" name="txtcantidad" value="1" size="2" /><input type="submit" value="Agregar" /> </div> </div> </form> </div> <?php } } ?> </div> </body> </html>
style.css
*
{
font-family: sans-serif;
}
body {
background: linear-gradient(to bottom, #3380B5, white) no-repeat center top;
margin:0;
padding:0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
table
{
text-align:center;
width: 80%;
border-collapse: collapse;
border: 1px solid black;
margin:50px auto;
background: white;
}
th
{
background: steelblue;
height: 40px;
font-weight: lighter;
text-shadow: 0 1px 0 #38678f;
color: white;
border: 1px solid #38678f;
box-shadow: inset 0px 1px 2px #568ebd;
transition: all 0.2s;
font-size: 18px;
}
tr
{
border-bottom: 1px solid #cccccc;
width:100%;
}
td
{
border: 1px solid #cccccc;
padding: 10px;
transition: all 0.2s;
font-size: 14px;
text-align:center;
}
h2
{
margin-left:30px;
}
img
{
width:150px;
height:150px;
}
a,input[type="submit"],button
{
font-size: 14px;
text-align:center;
width: 100px;
display: inline-block;
background-color:#FABD44;
padding: 6px 10px;
border-radius:5px;
text-decoration: none;
color:black;
border:1px solid black;
cursor:pointer;
}
hr
{
width:96%;
}
.contenedor_productos {
float: left;
background: white;
position: relative;
margin:1%;
border: 4px solid black;
border-radius:5px;
text-align:center;
padding:20px 40px;
margin-bottom:4%;
}
.contenedor_general
{
width:80%;
text-align:center;
margin:0 auto;
}
.imagen_peque {
width: 50px;
height: 50px;
border-radius: 30%;
border: #E0E0E0 1px solid;
padding: 5px;
vertical-align: middle;
margin-right: 14px;
}
input[type="text"]
{
width: 50px;
height: 30px;
font-size:18px;
margin-right:10px;
margin-top:5px;
}
Listo.
Posibles errores.
Error.
No me muestra la imagen.
Solución.
En la columna img de la base de datos debes de guardar la ruta exacta de la imagen, en este caso las imágenes del proyecto están en la carpeta img y asegúrate de escribir el nombre completo.
Error.
Al agregar un producto al carrito de compras este se duplica o no se puede eliminar.
Solución.
En la base de datos fíjate la columna cod debe de ser único y el dato ingresado debe de ser letras y números, mientras que el id se autoincrementa.
Tutoriales recomendados
 |  |
