Vous êtes sur la page 1sur 8

Tienda virtual (e-commerce) en PHP

Olvidaste tu usuario o clave?

Entrar Entrar o registrate

Foros

Blog

Tutoriales

Cursos

Videotutoriales

Comic

Publica un tutorial

Qu es Cristalab?

Tags

Ejemplos
Buscar Buscar

Contctanos

Anime

Tutoriales / Tienda virtual (e-commerce) en PHP

Tienda virtual (e-commerce) en PHP


Por Blogdephp el 27 de Abril de 2011 con 14,324 visitas PHP, MySQL y Servidor Otros tutoriales por Blogdephp.

Te puede interesar
Lector de feeds RSS en AJAX

Galera de imagenes con templates en

Este es un tutorial bsico de PHP para crear carritos de compra y tiendas virtuales en linea. Mostrar las bases prcticas para el ecommerce, sin ahondar en elementos ms complejos de seguridad y abstraccin. Supongamos que una empresa dedicada a dominios y hosting desea vender sus productos a travs de su web. La empresa investig nos encontr y encarg el proyecto de programacin de su tienda on-line de comercio electrnico en PHP. En primer lugar, lgicamente, destaparemos una cerveza para festejar nuestro nuevo trabajo e importante cliente obtenido. Luego..., a programar! La empresa cuenta con tres productos y desea que sus clientes puedan adquirir cuantas unidades deseen de cada uno de ellos. Otro punto muy importante es que sea posible comprar distintos productos dentro de un mismo pedido de compra (sin necesidad de tener que reiniciar el proceso luego de confirmar la compra).

PHP

Javascript no intrusivo, CSS y PHP

Centrar un div horizontal y verticalmente con CSS

Condicionales en CSS

Crear men HTML a partir de un .txt y Php

Generar estilos CSS con PHP

Validar formularios HTML con PHP, AJAX y JQuery

Pasar HTML a plantilla base en PHP usando Include

Interfaz grfica en HTML y CSS de la tienda


Lo primero que necesitaremos es crear una pantalla donde podamos presentar un producto, permitir al usuario seleccionar la cantidad de unidades que desea y finalmente ordenar el producto (comn en todo script e-commerce). Comenzaremos con el primer producto Web Hosting para el cul crearemos una pgina llamada "web-hosting.html" la cual luce de la siguiente manera:

Zen Coding: Escribiendo HTML y CSS como un Maestro Zen

Regresar a los tutoriales

http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/[01/11/2012 04:12:39 p.m.]

Tienda virtual (e-commerce) en PHP

El cdigo de la pantalla es el siguiente:


Cdigo :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BlogdePhp.com, demo del script para crear una tienda on-line ecommerce - Web Hosting</title> <link rel="stylesheet" href="http://blogdephp.com/script/php/ecommerce/estilo.css" type="text/css" media="screen"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="contenedor"> <div id="cabecera"> Demo script tienda on-line (e-commerce) en php: </div> <div id="cuerpo"> <div id="lateral"> <img src="./imagenes/web-hosting-linux-php.png" border="0"/> </div> <div id="principal"> <ul> <li> <label class="Negrita">Web Hosting Linux 1 Gb</label> <div id="navegacion"><a href="indice_productos.html">Productos</a> | <a href="ordenar_producto.php">Ver cesta</a> | <a href="javascript:history.back(1)">Volver</a></div> <li> 10 casillas de e-mail Pop3 <div id="nota"> <label class="Negrita">Nota 1</label>: puedes ordenar tranquilo, es slo para probar el script e-commerce, no es una compra real.<br><br> <label class="Negrita">Nota 2</label>: Esta tienda on-line podra ayudarte a mejorar la calidad de servicio que ofreces a tus clientes e incrementar las ventas en tu negocio, verdad?<br><br> Si te dedicas a otra actividad y no eres programador, puedes <a href="/instalacion-ecommerce-php-tienda-online">ingresar aqu y contratar el servicio de instalacin de la tienda</a> en tu sitio. </div> <li> 10 Gb de Transf. Mensual <li> Antispam <li> Panel de control <li> Herramienta para back-up </ul> <ul> <div id="formulario"> <form action="ordenar_producto.php" method="post"> <li> Precio: u$s 50 (anual) <input type="hidden" name="producto" value="web-hosting"> <input type="hidden" name="precio-unitario" value="50"> <li>Unidades:

http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/[01/11/2012 04:12:39 p.m.]

Tienda virtual (e-commerce) en PHP

<select name="unidades"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> </select> <li><div id="boton"><input type="image" src="./imagenes/comprarhosting.png"></div> </form> </div> </ul> </div> </div> </body> </html>

Revisemos sus caractersticas tcnicas ms relevantes a nivel programacin php: La sentencia <form action="ordenar_producto.php" method="post"> nos sirve para abrir un formulario y especificar el script php que tomar y procesar sus datos; luego que el usuario presione el botn submit. En este caso, se trata del script "ordenar_producto.php" Los dos campos ocultos "producto" y "precio unitario" que se declaran cada uno con la sentencia <input type="hidden" ... Recordemos que los campos ocultos nos sirven para configurar campos adicionales en el formulario sin que el usuario pueda ver o editar su valor en pantalla. El campo desplegable que le permitir al usuario seleccionar la cantidad de unidades que desea comprar del producto El botn "submit", que permitir al usuario ordenar el producto y pasar a la prxima pantalla. En nuestro caso la prxima pantalla es el script "ordenar_producto.php" la cual hemos definido al configurar el formulario (ver el 1er tem de las consideraciones

Script en PHP de ordenes a nuestro carrito de compras


Lo segundo que necesitaremos es crear el script ordenar_producto.php que luce de la siguiente manera:

Y su cdigo es el siguiente:
Cdigo :

<? session_start();?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BlogdePhp.com, demo del script para crear una tienda on-line ecommerce - Web Hosting</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="http://blogdephp.com/script/php/ecommerce/estilo.css" type="text/css" media="screen"> </head> <body> <? if(isset($_POST['producto'])){ // Para evitar agregar un producto al carrito cuando el usuario slo presion el link "Ver cesta" $_SESSION['productos_ordenados'][]=array(

http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/[01/11/2012 04:12:39 p.m.]

Tienda virtual (e-commerce) en PHP

"producto"=> $_POST['producto'], "unidades"=> $_POST['unidades'], "precio-unitario"=> $_POST['precio-unitario'], "subtotal"=> $_POST['precio-unitario']*$_POST['unidades'] ); } ?> <div id="contenedor"> <div id="cabecera"> Demo script tienda on-line (e-commerce) en php: </div> <div id="cuerpo"> <div id="principal_carrito"> <ul> <li> <ul class="productos_ordenados Negrita"> <li>Producto<div id="navegacion_carrito"><a href="indice_productos.html">Productos</a> | <a href="ordenar_producto.php">Ver cesta</a> | <a href="javascript:history.back(1)">Volver</a></div></li> <li>Unidades</li> <li>Precio Unitario</li> <li>Subtotal</li> </ul> </li> <? if(isset($_SESSION['productos_ordenados'])){ foreach($_SESSION['productos_ordenados'] as $producto_ordenado){ $importe_total=$importe_total+$producto_ordenado['subtotal']; ?> <li> <ul class="productos_ordenados"> <li> <?= $producto_ordenado['producto'];?> </li> <li> <?= $producto_ordenado['unidades'];?> </li> <li>u$s <?= $producto_ordenado['precio-unitario'];?> </li> <li>u$s <?= $producto_ordenado['subtotal'];?> </li> </ul> </li> <? } ?> <li> <ul class="productos_ordenados total"> <li><label class="Negrita">Total:</label></li> <li></li> <li></li> <li><label class="Negrita">u$s <?= $importe_total;?> </label></li> </ul> </li> <? } else{ ?> <li>Su cesta se encuentra vaca</li>

http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/[01/11/2012 04:12:39 p.m.]

Tienda virtual (e-commerce) en PHP

<? } ?> </ul> <div id="notacesta"> <label class="Negrita">Nota</label>: Esta tienda on-line podra ayudarte a mejorar la calidad de servicio que ofreces a tus clientes e incrementar las ventas en tu negocio, verdad?<br><br> Si te dedicas a otra actividad y no eres programador, puedes <a href="/instalacion-ecommerce-php-tienda-online">ingresar aqu y contratar el servicio de instalacin de la tienda</a> en tu sitio. </div> </div> </div> </body> </html>

y la funcin de ste script ser: 1. Tomar los datos del formulario 2. Actualizar la cesta de compra de nuestro cliente (en la cesta de compra tenemos almacenados todos los productos ordenados por nuestro cliente) 3. Mostrar la cesta de compra en pantalla; para que el cliente pueda revisar los productos ordenados y el precio total que lleva acumulado

Nota: cesta de compra tambin se conoce como "carro de compras" o "carrito de compras" en otros pases de habla hispana y la graficamos en la siguiente imgen. En ingls lo podremos encontrar tambin como shopping cart.

Repasemos cada una de sus funciones:

1. Tomar los datos del formulario

Para tomar los datos del formulario utilizamos la variable $_POST['campo'] donde 'campo' es el nombre del dato previamente definido en el formulario. Por ejemplo, el nombre del campo desplegable es "unidades" (definido por el atributo "name" de la etiqueta "input"). Para tomar su valor en php, lo hacemos con la sentencia: $_POST['unidades']. El mismo tratamiento aplica a los campos ocultos.

2. Actualizar la cesta de compra de nuestro cliente

Aqu viene posiblemente el paso ms complejo, as que mxima atencin! Adems de ingresar el producto actual en la cesta de compra, debemos tener un mecanismo para recordar los productos previamente ordenados por nuestro cliente. De esta manera, nuestro cliente puede continuar observando otros productos de la tienda, agregarlos en su cesta y confirmar su pedido de compra por nica vez (sin necesidad de tener que confirmar el pedido por cada producto que va agregando a la cesta). Nota: este punto es muy importante desde el punto de vista de usabilidad del sistema (permitir al usuario hacer sus operaciones de manera ms sencilla y en menor tiempo).

http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/[01/11/2012 04:12:39 p.m.]

Tienda virtual (e-commerce) en PHP

Para recordar los productos previamente ordenados por el usuario, por ejemplo un paquete reseller de web hosting ordenado hace 5 minutos, utilizaremos un concepto muy importante en programacin web: las variables de SESSION php. Entonces crearemos un array multidimensional de SESSION llamado $_SESSION['productos_ordenados']. Esto vendra a ser un conjunto de arrays los cuales, en nuestro ejemplo, tendrn la misma estructura (misma cantidad y nombres de campos). Cada array, que forma parte del array multidimensional "$_SESSION['productos_ordenados']", ser conformado por cuatro campos: producto, unidades, precio-unitario y subtotal. Y guardar informacin de cada producto ordenado por nuestro cliente; por ejemplo si el usuario compra dos Paquetes Reseller de Web Hosting nosotros lo expresaramos de la siguiente manera en un array:
Cdigo :

array( "producto"=> "reseller-web-hosting", "unidades"=> 2, "precio-unitario"=> 150, "subtotal"=> 300 );

Pero recordemos que ste array, tiene que estar dentro del array multidimensional; para que ste producto forme parte de los productos ordenados por el cliente en nuestro e-commerce. Agregamos el array dentro del array multidimensional mediante la siguiente sentencia:
Cdigo :

$_SESSION['productos_ordenados'][]=array( "producto"=> "reseller-web-hosting", "unidades"=> 2, "precio-unitario"=> 150, "subtotal"=> 300 );

Nota: En php los corchetes "[]" detrs del nombre del array se utiliza para agregar un nuevo elemento dentro del array. En nuestro caso, con la sentencia "$_SESSION['productos_ordenados']=array ...", estamos agregando un nuevo elemento (que tambin es un array) dentro del array multidimensional "$_SESSION['productos_ordenados']".

Agradecemos a la empresa Solo10.com (nuestro supuesto cliente) por facilitarnos las imgenes y caractersticas de sus productos Registro de dominios, Web hosting y Web hosting para Resellers. Desarrollar en php es parte de mi vida cotidiana, es posible que algunos conceptos tericos los haya dado por sobreentendido... Si te agradara profundizar algn punto en particular, por favor ingresa un comentario y lo revisamos juntos Ver demo del script Tienda Virtual (e-commerce) en php

http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/[01/11/2012 04:12:39 p.m.]

Tienda virtual (e-commerce) en PHP


Twittea
like http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/ AVrb24E6

Me gusta

A ti y a 3 personas ms os gusta esto.A 3 personas les gusta esto.

css html negocios php

Envia un comentario (6)

Formulario de email Flash/PHP enviado en HTML

Introduccin a HTML5

Exportar de PHP a Excel y dar formato a celdas

Por Freddie el 05 de Mayo de 2011

Tu tutorial ya est en portada. Agregu los detalles de que es un tuto de introduccin bsica. Porque, slo para aclarar, nadie debera hacer carritos de compra de esta manera en produccin. Hay que usar bases de datos, sistemas de seguridad, abstraccin del HTML fuera de PHP, etc. Pero es una buena forma de entrar al lenguaje.

Por Sarlit el 05 de Mayo de 2011

Genial el tuto, me estoy dedicando a testearlo todo lo que puedo y ms y a hacerle modificaciones mil y una para asegurarme de entender bien que hace cada cosa... Pero, podra alguien decirme como abarcar todo el tema de la seguridad? Es extremadamente complicado o podra sacarlo en unos meses? Sabis de algn sitio bueno donde pueda aprender bien del tema? La verdad es que estoy verde en ese tema...

Por Blogdephp el 05 de Mayo de 2011

Hola Freddy, muchas gracias por la publicacin del tuto. Muy buenas tus aclaraciones y la presentacin que le has dado. Y si, me encuentro trabajando en nuevas funcionalidades de ste script, por ejemplo el registro de los pedidos de compra sobre una base de datos Mysql... Muy pronto estarn listas estas nuevas publicaciones Un saludo.-

Por EDGAR MORA el 30 de Mayo de 2011

http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/[01/11/2012 04:12:39 p.m.]

Tienda virtual (e-commerce) en PHP

EN QUE PARTE DEL SCRIPT SE DEBE COLOCAR EL ARRAY?

Por Blogdephp el 04 de Junio de 2011

Hola Edgar! El array nos sirve para tener guardado en memoria el listado de productos ordenados por nuestro cliente en nuestra tienda on-line e-commerce. Los utilizamos en el archivo ordenar_producto.php para dos cosas muy importantes: 1. Tomar cada producto ordenado por el cliente e imprimir su info en pantalla. Ver sentencia: "foreach($_SESSION['productos_ordenados'] as $producto_ordenado){ ......." 2. Cuando el cliente ordena un nuevo producto, lo agregamos en el array. Ver sentencia: "$_SESSION['productos_ordenados'][]=array( "producto"=> $_POST['producto'], "unidades"=> $_POST['unidades'], "precio-unitario"=> $_POST['precio-unitario'], "subtotal"=> $_POST['precio-unitario']*$_POST['unidades'] ); }" Pronto estar disponible una actualizacin del script Si continuas con dudas, por favor escribe y lo vemos juntos. un saludo!

Por Pipe el 25 de Noviembre de 2011

que buen tutorial , me gustaria saber si se podria adaptar a un foro para que en vez de dinero se pudiera cambiar por un sistema de puntos que tengo en mi foro, gracias.

Publica tu comentario
Tu nombre: S respetuoso. S detallado. Tu comentario: No escribas con mayusculas ni como si fuera un SMS. Insultos, trolls y spammers son siempre eliminados. [b]negrita[/b] [img]http://url/imagen.jpg[/img] [url=direccion]tu enlace[/url] Publicar Publicar

o puedes...
Ests registrado en Cristalab y quieres publicar tu URL y avatar? Inicia sesin

No ests registrado an pero quieres hacerlo antes de publicar tu comentario? Registrate

Blog

Foros

Tutoriales

Tutoriales de Flash

Ejemplos .fla

Anime

Videotutoriales

Cursos

Curso de Flash

Curso de HTML

Tags

http://www.cristalab.com/tutoriales/tienda-virtual-e-commerce-en-php-c97238l/[01/11/2012 04:12:39 p.m.]

Vous aimerez peut-être aussi