Vamos con la segunda parte de esta 5º entrega del carrito de compras en PHP, MySQL y forma de pago PayPal donde después de haber explicado un poco el tema de las sesiones y el script “producto.php” en la anterior entrega (Ver tutorial anterior), nos adentramos en el script “carro.php”, donde manejaremos la cesta de la compra del usuario que visita nuestra web. El script carro.php estará compuesto por las siguientes partes:
- Iniciar o continuar con la sesión
- Incluir archivos necesarios de la estructura de la página y conexión con la base de datos.
- Recepción de la variable $id por el método GET.
- Recepción de la variable $action por el método GET para realizar una acción u otra en nuestro script:
- Caso “add”: Añadimos un producto o cantidad de un producto a la cesta de la compra.
- Caso “remove”: Eliminamos un producto o cantidad de un producto a la cesta de la compra.
- Caso “removeProd”: Eliminamos un producto de la cesta de la compra.
- Caso “empty”: Vaciamos la cesta de la compra.
- Mostramos una tabla con los datos de la cesta: Nombre del producto, cantidad, total por producto y Total de la cesta.
- Mostrar información de los totales de la compra en productos.php
Esto es todo lo que tendrá nuestro script carro.php que aunque parezca algo complicado ya veréis como es bastante simple.
Los dos primeros puntos ya lo hemos hablado en la anterior parte del tutorial, así que no voy a volver a entrar en el tema, pero el código sería el siguiente:
[php]
session_start();
$titulo = «Carrito de Compra con Php y Mysql»;
include(«conecta.php»); //conexión con la base de datos
include(«meta_tags.php»); //definimos el título, los metas y la hojas de estilo
include(«cabecera.php»); //incluimos la cabecera
//include(«izquierda.php»);
[/php]
Para seguir con los siguientes puntos y sobre todo para aquellos que no saben como funcionan las variables GET de PHP, os voy a dar una breve explicación.
“En PHP existen 2 métodos para conectar entre una página y otra, y cuando digo conectar me refiero a pasar valores de variables entre ellas. Estos dos métodos son GET y POST. Cada uno de ellos tiene una función especifica y GET se diferencia del POST en que las variables son pasadas por URL.
¿Y esto que significa?, pues es bien sencillo, las variables pueden ser pasadas a otro script de la siguiente manera:
http://www.mipagina.com/calcula.php?variable1=2&variable2=8
Si os fijáis detrás del calcula.php hemos añadido un signo de interrogación, eso es lo que indica que vamos a empezar a definir variables. Detrás del interrogante vemos que tenemos variable1=2, variable2=8 y un signo ampersand “&”, pues bien, por cada variable que definamos tenemos que poner ese signo para que PHP entienda que definimos otra nueva.
Por tanto, si en nuestro archivo calcula.php tenemos un calculo de suma de dos importes:
[php]
$suma = $var1 + $ var2;
echo $suma;
[/php]Podemos pasarle las variables por URL como en el ejemplo, y modificando un poco el código para recoger esos valores, podremos hacer el cálculo perfectamente. Aquí os dejo la modificación:
[php]
//recogemos las variables de la URL
$var1 = $_GET[‘variable1’] ;
$var2 = $_GET[‘variable2’] ;//Sumamos los valores de las variables.
$suma = $var1 + $ var2;
echo $suma;
[/php]Con esto creo que queda claro como funciona el paso de variables por URL con GET.
Una vez sabemos pasar variables por GET y utilizarlas en nuestros scripts, sigamos con el tutorial.
Cuando hacemos clic en algún producto del archivo productos.php nos pasará una URL del siguiente estilo:
http://www.mipagina.com/productos.php?id=2&action=add
Como ya sabemos utilizar las variables GET, viendo esta URL sacamos en conclusión que se le pasan dos variables, id y action.
Tabla de contenidos
Recepción de la variables por GET
Tendremos que recepcionar dos variables como comentaba antes, id y action:
- id: Nos servirá para localizar el producto en la tabla PRODUCTOS
- action: Nos servirá para saber que acción tomar ante el producto cuya id es la pasada también por GET.
Como hemos visto antes, vamos a recoger las variables de la URL por el método GET y las asignamos a variables del propio script carro.php siempre comprobando si viene informada o no:
[php]
//comprobamos si la variable id viene informada en la URL
if (isset($_GET[‘id’]))
$id = $_GET[‘id’];
else //en caso de no estar informada, le asignamos 1.
$id = 1;
//comprobamos si la variable action viene informada en la URL
if (isset($_GET[‘action’]))
$action = $_GET[‘action’];
else
$action = «empty»; //si no viene informada, asignamos el valor «empty»
[/php]
Ya tenemos nuestras variables informadas y listas para «jugar» con ellas.
Lo primero que haremos será distinguir el comportamiento de la cesta dependiendo del valor que venga en la variable $action, cuyos valores ya hemos explicado antes (add, remove, removeProd, empty). Más adelante veremos otro valor que se le podrá pasar. Así que:
- Si es add: Aumentamos en 1 la cantidad del producto seleccionado
- Si es remove: Restamos 1 a la cantidad del producto seleccionado.
- Si es removeProd: Eliminamos el producto de la sesión carro.
- Si es empty: Eliminamos la sesión.
El código quedaría de la siguiente manera:
[php]
switch($action){
case «add»:
if(isset($_SESSION[‘carro’][$id]))
$_SESSION[‘carro’][$id]++;
else
$_SESSION[‘carro’][$id]=1;
break;
case «remove»:
if(isset($_SESSION[‘carro’][$id])){
$_SESSION[‘carro’][$id]–;
if($_SESSION[‘carro’][$id]==0)
unset($_SESSION[‘carro’][$id]);
}
break;
case «removeProd»:
if(isset($_SESSION[‘carro’][$id])){
unset($_SESSION[‘carro’][$id]);
}
break;
case «empty»:
unset($_SESSION[‘carro’]);
break;
}
[/php]
Mostrar tabla con la cesta de la compra
Una vez hemos informado nuestra variable de sesión según la acción tomada, llega la hora de mostrarle al usuario los productos que han seleccionado en la cesta de la compra y a su vez las distintas formas de interactuar con ellos, que sería:
- Aumentar cantidad de un producto
- Disminuir cantidad de un producto
- Eliminar un producto
- Volver a la lista de productos
- Finalizar la compra
Vamos a comprobar si está informada la variable de sesión ya que de lo contrario, no haría falta mostrarle una tabla al usuario, tan solo le mostraríamos un texto informando que el carro de compra está vacío. El pseudocódigo podríamos dejarlo como sigue:
- Si existe la variable de sesión:
- Inicializamos variables
- Mostramos la cabecera de la tabla
- Mostramos los productos recorriendo el array session[‘carro’]
- Consultamos la tabla de productos pasándole el ID que estamos recorriendo en ese momento.
- Mostramos los datos del producto seleccionado
- Añadimos el precio del producto al total del producto
- Añadimos el precio del producto que estamos recorriendo al total de toda la cesta de la compra.
- Mostramos enlace para volver a la lista de productos
- Mostramos un texto informando que el carro está vacío
Esto en código PHP quedaría de la siguiente manera:
[php]
if(isset($_SESSION[‘carro’])){
$totalcoste = 0;
echo «
«;
}
else
echo «El carro está vacío»;
[/php]
Con esto ya tenemos lo más importante creado, ahora solo falta darle la opción al usuario de volver a los productos para seguir comprando, que lo podemos lograr de una manera muy sencilla:
[php]
echo «
Volver a la lista de productos
«;
[/php]
Informar al usuario sobre la cantidad y el total del importe de su carro de compras
Ahora vamos a añadirle una funcionalidad para que el usuario siempre tenga a la vista la cantidad que ha ido seleccionando y el total del importe la compra, como puede verse en la mayoría de tiendas virtuales.
Para esto, nos vamos a ayudar de las variables de sesión ya que estas pueden ser transportadas de un script a otro sin ningún tipo de problemas.
Como el total del importe y la cantidad de productos van a ser tratados en el script carro.php, lo primero que haremos será modificar al código de dicho script, pero en cuanto a cálculo se refiere lo único que tendremos que sacar es el número de productos seleccionados ya que el total del importe ya es calculado en el script.
Por tanto nos tendremos que centrar en la parte del código donde suma el total y muestra las cantidades de los productos, y eso se hace dentro del bucle que recorre el array foreach($_SESSION[‘carro’] as $id => $x).
Lo que tenemos que hacer es añadir un contador de productos seleccionados, pero primero lo tenemos que inicializar a cero antes de entrar en este bucle. Por tanto justo después de inicializar el contador de importe total ponemos esto:
[php]
//Inicializamos el contador de productos seleccionados.
$xTotal = 0;
[/php]
Y para calcular la cantidad total de productos añadidos al carro, incluiremos dentro del bucle el siguiente código:
[php]
//Contador del total de productos añadidos al carro
$xTotal = $xTotal + $x;
[/php]
Pero claro, con esto no hacemos nada, ya que tendremos la cantidad de productos seleccionados y el total del importe pero la aplicación no sabe como transportarlo al script «prodcutos.php» para que se lo muestre al usuario. Asi que, tendremos que crear unas variables de sesión asignándole dichos valores. Esto se consigue con el siguiente código que lo añadiremos justo después del bucle:
[php]
//Campos que nos serviran para informar la cesta de lo que
//llevamos comprados y que se mostrará en la página PRODUCTOS.
$_SESSION[«totalcoste»] = $totalcoste;
$_SESSION[«cantidadTotal»] = $xTotal;
[/php]
Ya tenemos nuestros totales informados en variables de sesión, ahora solo queda mostrarlos para que el usuario siempre tenga constancia de la cantidad de productos y el importe total del carrito. ¿Donde mostramos esta información?. Podemos mostrarla en muchas partes de la web, pero creo conveniente mostrarlo en la parte de la cabecera a la derecha, y para esto, accedemos al archivo cabecera.php y lo añadimos.
[php]
Cantidad de Productos: | |
Total Compra: | € |
Ver cesta de la compra |
[/php]
Como veis recuperar las variables de sesión es muy fácil. En estas lineas de código podemos ver como comprobamos si tiene algún valor la variable «cantidadTotal» en caso contrario mostramos Carro Vacío. Al contrario que el «totalcoste» que como lo inicialiamos a cero y no vamos a escribir ningun caracter, es decir, solo vamos a mostrar 0 en caso de que no tenga ningun valor, no hace falta hacer la comprobación.
Pero hay un problema, si probais esto, os daréis cuenta que en el archivo carro.php tambien os va a salir la información de la cesta de la compra. Esto resulta algo redundante ya que justo en este script ya estamos mostrando una tabla con todos los productos y sus cantidades, así que volvamos al archivo cabecera.php para controlar que solo muestre la caja de información cuando nos encontremos en productos.php, y esto lo conseguimos fácilmente gracias a estas pequeñas líneas de código que añadimos justo antes de informar la cesta, un if con sus respectivas aperturas y cierres de corchetes:
[php]
//nos devuelve la página donde estamos
$a=explode(‘/’,$PHP_SELF);
$b=count($a);
$pagina = $a[$b-1];
if ($pagina == ‘productos.php’){
//aqui el codigo para mostrar la caja con los totales
}
[/php]
Ahora solo falta explicaros un último paso que creo necesario. Se trata de un enlace en la caja de información de la cesta de la compra para que el usuario pueda ver los productos elegidos (carro.php) sin necesidad de tener que añadir o eliminar un producto de su carro. Esta opción ya os la he puesto en el código de arriba, pero quiero aclararlo.
El código en concreto es este:
[html]
[/html]
Si observais le estamos pasando dos valores y uno de ellos es nuevo. Efectivamente, como estais pensando, el nuevo valor es el que contiene la variable action. Se trata de «mostrar» con la que le diremos al script carro.php que queremos ver la cesta de la compra completa.
Para lograrlo, tendremos que añadir una nueva opción en carro.php sobre los valores de «action» que acepta. Por tanto en el switch añadiremos un valor más:
[php]
//mostramos los productos añadidos a la cesta de la compra
case «mostrar»:
f(isset($_SESSION[‘carro’][$id])){
continue;
}
break;
[/php]
Con esto ya tenemos nuestro script carro.php para mostrar e interactuar con nuestro carrito de la compra. En una posterior parte del tutorial nos adentraremos en el archivo compra.php donde finalizaremos la compra de los artículos elegidos.
Una vez hemos revisado y entendemos todo el código de este script carro.php, lo mejor es que os lo descarguéis y empeceis a jugar un poco con él para ir añadiendo funciones y demás. No os olvidéis de ir comentando vuestras dudas y vuestros aportes en el código.
Aquí os dejo los archivos para que podáis probarlo en vuestra casa:
En el próximo tutorial explicaremos la parte del proceso de compra de los productos elegidos.
Guía Carrito de Compra en Php con forma de pago Paypal
- Parte 1: Introducción
- Parte 2: ¿Qué nos hace falta?
- Parte 3: Diagrama de Flujo
- Parte 4: Base de datos de un carro de compra
- Parte 5.1: Scripts necesarios para un carro de compra en PHP y MySQL
- Parte 5.2: Scripts necesarios para un carro de compra en PHP y MySQL
- Parte 6: Añadir PayPal como método de pago a nuestro carro de compra
- Parte 7: Factura y envío de e-mail al comprador
- Parte 8: Descarga de archivos
18 comentarios
Muy buen aporte! gracias!
Excelente tutorial. para cuando saldra el proximo? 🙂
Hola Roldan, el próximo tutorial quizá para esta semana no lo tenga aun, acabo de volver de vacaciones, pero para la próxima probablemente si… atento al facebook, twitter que iré dando noticias nuevas,
Esperando la parte 5.3 o la 6!
Estoy aprendiendo mucho lo que es DB y cookies!
Excelente pagina!
hola
cuando terminas con el tutorial ?
Excelente el aporte… M uchas gracias por tu tiempo…
Estos siguiendo los post… y me tope con esto:
En el archivo cart.php si tu le das un refresh despues de haber insertado alguna producto o agregado lo que sea… repite la ultima accion ya que tiene en la URL el id del producto y la accion…. osea que si agrege y luego doy refresh.. vuelvo agregar y agregar …
Y no se si tienes contemplado la opcion de que el cliente ponga la cantidad exacta de productos imaginate si quiere 30, tiene que dar 30 clicks en agregar..
Estos solo son comentairios amigo… pero en realidad muy sencillo tu tutorial y fasil de seguir.. espero que tomes en cuenta mis comentarios y esperamos la siguiente..
Saludos…
La verdad es que se pueden arreglar bastantes cosas, pero lo quise hacer lo mas sencillo posible para que la gente entendiera mas o menos como iba un carrito. Hoy mismo he venido de vacaciones y tengo que retomar el tutorial. Cuando lo termine, intentaré hacer algunas mejoras, incluso meter jQuery como me pidió otro usuario.
Saludos.
Hola!
en primer lugar darte las gracias por este excelente tutorial, está todo perfectamente explicado y muy detallado.
Tengo un problemilla,
cuando queremos que el total del carro aparezca solo en la pagina de productos para que la informacion no sea redundante, nos has dado un pequeño codigo a añadir.
Exactamente no se donde añadir este codigo:
//nos devuelve la página donde estamos
$a=explode(‘/’,$PHP_SELF);
$b=count($a);
$pagina = $a[$b-1];
if ($pagina == ‘productos.php’){
//aqui el codigo para mostrar la caja con los totales
}
y no se que lineas exactas hay que añadir en la parte donde pone «//aqui el codigo para mostrar la caja con los totales»
No tengo mucho conocimiento de php y he intentado colocarlo de varias formas pero siempre me da error indicandome que falta algun ; o »
el tema es que si yo meto los div y todo eso dentro del IF, tendria que meterlos con «ECHO» en vez de poner «» como tal, abría que modificar el codigo que había antes de añadir la sentencia if, verdad?
mi correo es: NaxomadridARROBAhotmailES
gracias por tu atención,
Saludos
hola nacho,
El código que te muestro a continuación tendrías que añadirlo donde corresponde en el archivo «cabecera.php».
Con este código podrás ver en la página productos la cantidad de productos y el total del importe, así como un enlace para volver a la cesta de compras:
[php]
?>
[/php]
Espero te sirva de ayuda.
Saludos.
Gracias por tu rápida respuesta Eduardo,
como puedo seguirte en twitter? cual es tu usuario?
saludos!
de nada nacho .. aunque no me llamo eduardo, pero me puedes seguir en twitter aquí –> @colorate http://twitter.com/colorate
saludos
lo siento por lo de Eduardo, creo que antes de responder lei ese nick en otro post y lo confundi!
saludos!
una última duda,
en el codigo que me has puesto, donde tengo que poner la sentencia para que solo se muestre el total de compra en la sección de productos y que no se muestre en la seccion de carro? porque sale en los 2 sitios y es redundante.
Saludos y gracias por tu atencion
creo que hay un error en el codigo.
$a=explode(‘/’,$PHP_SELF);
$b=count($a);
$pagina = $a[$b-1];
Esto no devuelve ningún valor,
Saludos
Pues a mi me lo devuelve perfectamente nacho, lo acabo de comprobar de nuevo 😀
Para quienes quieran pasarlo a PHP 5 y en general para quienes quieran probar el código del .rar de esta pagina, encontré estos cambios hasta el momento que no coinciden 100% con el tutorial y que se deben modificar en tu código:
NOTA use: php 5.3.8 y MySQL 5.5.16
– la query del archivo productos.php en la linea 38 es
SELECT id_producto, nombre, precio FROM productos
– en el archivo conecta.php, tiene la variable $db_name que apunta a otra Base y no a la que se indica en el capitulo 1, por lo que se debe cambiar.
– en productos.php dice echo $_SESSION[«cantidadTotal»]; pero en PHP5 debe ir por obligación antes el
if (isset($_SESSION[‘cantidadTotal’])) sino se cae. Lo mismo para echo $_SESSION[«totalcoste»] debe ir con el if (isset(…)) Esto hay que cambiarlo en 4 partes del archivo.
– la linea 52, 56 y 59 de productos.php dice $productos[‘id’] y es $productos[‘id_producto’] ya que asi esta definido en la base de datos del capitulo 1.
– la linea 53 dice $productos[‘producto’] y es $productos[‘nombre’].
– en carro.php linea 83 es id_producto y no id, lo mismo con la columna producto ya que es nombre, por lo tanto la query
(«SELECT id, producto, precio FROM productos WHERE id=$id»); queda («SELECT id_producto, nombre, precio FROM productos WHERE id_producto=$id»);
mas abajo lo mismo, dice $id = $mifila[‘id’]; y $producto = $mifila[‘producto’];
y es $id = $mifila[‘id_producto’]; y $producto = $mifila[‘nombre’];
– un punto aparte es lo de la Base de Datos, tuve que cambiar varias cosas para la versión 5.5.16:
Query de creación de tablas me quedó asi:
CREATE TABLE clientes (
id_cliente INT ( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
nombre VARCHAR( 80 ) NOT NULL ,
email VARCHAR( 100 ) NOT NULL ,
telefono VARCHAR( 50 ) NULL ,
direccion VARCHAR( 50 ) NULL ,
fec_alta DATE NOT NULL ,
UNIQUE (
email
)
) ENGINE = INNODB;
CREATE TABLE productos (
id_producto INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
nombre VARCHAR( 80 ) NOT NULL ,
descripcion VARCHAR( 250 ) NOT NULL ,
precio INT( 10 ) NOT NULL ,
foto VARCHAR( 250 ) NOT NULL ,
INDEX ( nombre )
) ENGINE = INNODB;
CREATE TABLE pedidos (
id_pedido INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
id_cliente INT( 5 ) NOT NULL ,
fec_alta DATE NOT NULL ,
INDEX ( id_cliente )
) ENGINE = MYISAM ;
CREATE TABLE det_pedidos (
id_detpedido INT( 5 ) NOT NULL AUTO_INCREMENT ,
id_pedido INT( 5 ) NOT NULL ,
id_producto INT( 5 ) NOT NULL ,
cantidad INT( 5 ) NOT NULL ,
precio INT( 5 ) NOT NULL ,
PRIMARY KEY ( id_detpedido ) ,
KEY id_pedido ( id_pedido , id_producto ) ,
KEY id_producto ( id_producto )
) ENGINE = INNODB DEFAULT CHARSET = utf8 AUTO_INCREMENT =1;
Los insert igual cambian ya que el tutorial dice:
INSERT INTO `productos` VALUES (1, ‘Diseño Web Estática’, 850.00);
pero el primero campo es autoincremental por lo que no va, así que tuve que poner en el insert los campos exactos que se insertarán:
INSERT INTO productos (nombre,descripcion,precio,foto) VALUES (‘Diseño Web Estática’, ‘blahh blah’, 850.00, ‘c:’);
Lo mismo para el resto de los inserts.
Eso es todo lo que encontré al menos para ver los productos, no he revisado el carro de compras, de todas formas excelente el tutorial.
Muchas gracias Hernaldo. No lo he probado pero confío en mis usuarios. A ver si tengo tiempo y le echo un vistazo.
Saludos.
si las lineas para conocer la pagina actual no funciona
$a=explode(‘/’,$PHP_SELF);
$b=count($a);
$pagina = $a[$b-1];
prueba con esta
$pagina = basename($_SERVER[‘PHP_SELF’]);