Tema popular si los hay, ¿cierto? 🙂
Muchos clientes se acercan a cualquier desarrollador con la idea de agregar a su sitio un «carrito de compras» pero, cuando indagamos un poco más vemos que el tema no es tan simple.
Por ejemplo: ¿sirve de algo el carrito de compras sin la posisbilidad de realizar el pago al final?
Pero bueno, para no hacer un post enorme, comencemos por la parte del carrito propiamente dicho y dejemos el tema de los pagos para otro.
Qué puede hacerse con un carrito de compras
El carrito de compras es un espacio donde un visitante puede llevar registro de los productos que desea comprar.
Desde el punto de vista técnico/funcional, debe ser posible:
- Ingresar productos
- Quitar productos
- Ver los productos existentes
- Confirmar la compra
Para poder ingresar productos al carrito será necesario visualizar cuáles son los productos disponibles en la tienda.
Qué se necesita para armar un carrito de compras
La implementación de todo el mecanismo de administración del carrito requerirá de:
- Algún tipo de base de datos que contenga el catálogo de productos
- Una aplicación que permita al visitante:
- Ver ese catálogo
- Ver los detalles de cada producto
- Agregar productos a su carrito
- Ver los contenidos de su carrito
- Eliminar productos del carrito
- Confirmar su compra
- Una pasarela de pagos para completar la transacción
Por simplicidad imaginemos que tenemos una primera página tipo catalog.php:
<?php
$dsn = require_once 'db.php';
$pdo = new PDO($dsn);
?>
<table>
<thead>
<tr>
<th>SKU</th>
<th>Nombre</th>
<th>Precio</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM products";
foreach ($pdo->query($sql, PDO::FETCH_ASSOC) as $product ) {
?>
<tr>
<td><a href="product_details?product_id=<?php echo $product['id'];?>"><?php echo $product['sku']; ?></a></td>
<td><?php echo $product['name']; ?></td>
<td><?php echo $product['price']; ?></td>
<td><button onclick="window.location.href='add_to_cart.php?product_id=<?php echo $product['id']; ?>'">Agregar al carrito</button></td>
</tr>
<?php
}?>
</tbody>
</table>
Estoy dejando de lado unos cuantos detalles para no complicar el ejemplo: como ser categorías de productos, cantidad a agregar en cada interacción, etc…
Continuemos por el archivo add_to_cart.php.
Aquí es donde reside la clave de la cuestión: el carrito debe acompañar al visitante durante toda su estadía en el sitio.
Precisamente, la idea del carrito es permitir que la compra se vaya armando conforme el usuario va descubriendo los productos.
De modo que necesitaremos un medio de almacenamiento que persista durante la navegación.
A estos efectos php pone a nuestra disposición el arreglo $_SESSION.
Es ahí donde vamos a almacenar los productos seleccionados por el visitante:
<?php
$product_id = $_GET['product_id'];
session_start();
if (!array_key_exists('products', $_SESSION) {
$_SESSION['products'] = [];
}
$_SESSION['products'][$product_id] = array_key_exists($product_id, $_SESSION['products']) ? $_SESSION['products'][$product_id] + 1 : 1;
header('Location: catalog.php');
De este modo guardamos los ids de los productos seleccionados y su cantidad.
No es necesario guardar más que los ids de producto ya que con eso será suficiente para recuperar toda la información a la hora de mostrar el carrito o confirmar la compra.
Pensemos en un archivo tipo show_cart.php:
<?php
session_start();
$ids = implode( ', ', array_keys($_SESSION['products']));
$sql = "SELECT * FROM products WHERE id IN ($ids);"
?>
<table>
<thead>
<tr>
<th>SKU</th>
<th>Nombre</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Subtotal</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php
$total = 0;
foreach ($pdo->query($sql, PDO::FETCH_ASSOC) as $product ) {
$quantity = $_SESSION['products'][$product['id']];
$subtotal = $quantity * $product['price'];
$total += $subtotal;
?>
<tr>
<td><a href="product_details?product_id=<?php echo $product['id'];?>"><?php echo $product['sku']; ?></a></td>
<td><?php echo $product['name']; ?></td>
<td><?php echo $product['price']; ?></td>
<td><?php echo $quantity; ?></td>
<td><?php echo $subtotal; ?></td>
<td><button onclick="window.location.href='remove_from_cart.php?product_id=<?php echo $product['id']; ?>'">Quitar del carrito</button></td>
</tr>
<?php
}?>
</tbody>
</table>
<p>Total: <?php echo $total;?></p>
Queda por completar los archivos de ver el detalle del producto y remover del carrito pero creo que con lo que viste hasta aquí no deberías tener problemas para armarlos.
Un detalle que haría más amena la experiencia para el usuario sería utilizar AJAX para meter y sacar productos del carrito.
Y, por supuesto, deberás tener un enlace para realizar el pago.
