PHP
PHP
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

En este tutorial vamos a crear un carrito de compras con jQuery. En este tutorial vimos como crear la clase carrito, y en este otro ya vimos como añadirle paypal mediante IPN o de forma más sencilla, es el turno de procesar nuestro carrito de compras haciendo uso de la mejor libreria javascript(para mi) que existe, jQuery, de esta forma podremos hacer peticiones ajax y añadir, eliminar o actualizar nuestro carrito sin necesidad de refrescar la página.

Este será el aspecto de nuestro carrito una vez finalizado.

Carrito de compras con ajax jQuery
Carrito de compras con ajax jQuery


Así que haremos uso de nuestra clase carrito y de jQuery, para el css haremos uso del framework foundation que es muy sencillo de utilizar para estos casos y da mucho juego.

Lo único que necesitamos es el archivo de la clase carrito dentro de un proyecto, y en la raíz del proyecto colocar la siguiente carpeta que contiene los css foundation.

Descargar archivos css

Con eso tenemos toda la configuración necesaria, ahora nos quedará crear la página que contiene el html, a la que vamos a llamar ajax.php, la creamos y dentro colocamos el siguiente código.

Aquí como vemos llamamos a los archivos css y js que necesitamos, creamos unos arrays para crear productos ficticios, así evitamos duplicar código y un detalle importante, tenemos el siguiente elemento.

Ahora no aparece nada, es más, no se vé, pero aquí será donde carguemos los productos de nuestro carrito, si hay productos se mostrarán y se darán las opciones de añadir más, eliminarlos o de eliminar todo el carrito, en otro caso tendremos un mensaje conforme el carrito está vacío.

Para que esto sea posible nos falta crear varios archivos php, cada uno de ellos para una cosa, tendremos los archivos content_cart.php, destroy.php, remove_product.php e insert.php, queda claro para que es cada uno, así que empecemos por el primero e iremos en ese orden, así que creamos una carpeta que llamaremos process_cart y dentro creamos todos los archivos, primero abrimos el archivo content_cart y añadimos el siguiente código.

Como vemos es sencillo, simplemente comprobamos si es una petición ajax, y si es así retornamos un json con los datos del carrito, el precio total y el número de artículos total y la respuesta será ok, esto servirá para saber si todo a ido bien después con jQuery.

Ahora abrimos el archivo destroy.php y lo mismo.

Creo que no merece explicación, muy sencillo.

Ahora abrimos el archivo remove_product.php y lo mismo.

En este archivo recibimos una variable post llamada unique_id, que como ya sabemos es el identificador único de cada producto, a continuación llamamos al método remove_producto de la clase carrito pasando el identificador del producto, de esta forma, si todo ha salido bien ese producto habrá sido eliminado y la respuesta será ok, en otro caso será error.

Finalmente abrimos el archivo insert.php y dentro colocamos lo siguiente.

Simplemente añadimos un nuevo producto a nuestro carrito, que como podemos ver es procesado vía post y devolvemos ok si todo ha ido bien.

Ahora ya tenemos listos todos los archivos que reciben peticiones ajax desde nuestro archivo functions.js, así que creamos una nueva carpeta en la raíz del proyecto y dentro el archivo functions.js, a continuación añadimos el siguiente código.

Si nos fijamos, tenemos una función para cada funcionalidad del carrito, y todo está bien explicado en cada sección del código, aparte de que es bastante sencillo de seguir, hacemos peticiones ajax, post y get, recibimos objetos json y actuamos en consecuencia de esas respuestas, al iniciar la página llenamos la tabla con el contenido del carrito si existe y a partir de ahí podemos ir añadiendo, eliminando y jugando con las opciones del carrito.

Y eso es todo, espero que te sea de ayuda para ir conociendo un poco más jQuery, que hoy en día es algo necesario, por no decir obligatorio, y gracias por suscribirte al blog, con ésto estás ayudando a que sea posible darle continuidad.