En primer lugar, lógicamente, destaparemos una cerveza para festejar nuestro nuevo trabajo e importante cliente obtenido
.Luego..., ¡a programar!
Ahora bien, 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).
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 (común en todo script e-commerce). Comenzaremos con el primer producto Web Hosting para el cuál crearemos una página llamada "web-hosting.html" la cual luce de la siguiente manera:
El código de la pantalla es el siguiente:
Código PHP :
<!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 e-commerce - Web Hosting</title> <link rel="stylesheet" href="./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"> <a href="http://www.solo10.com/productos/WebHostingLinux/?safblogdephp"><img src="./imagenes/web-hosting-linux-php.png" border="0"/></a> </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</label>: puedes ordenar tranquilo, es sólo para probar el script e-commerce, no es una compra real.</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: <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/comprar-hosting.png"></div> </form> </div> </ul> </div> <div id="pie"> Desarrollado por <a href="http://www.blogdephp.com/"> BlogdePhp.com</a> con colaboración de <a href="http://www.solo10.com/?safblogdephp">Solo10.com</a> </div> <div class="MasInfo"> <label class="Negrita">Agradecimientos a empresas que hicieron posible esta demo y colaboran con el aprendizaje de php!</label> <ul><li>Solo10.com, su ayuda con imágenes e información técnica de sus productos: <a href="http://www.solo10.com/?safblogdephp">Registro de dominios</a>, <a href="http://www.solo10.com/productos/WebHostingLinux/?safblogdephp">Web hosting</a> y <a href="http://www.solo10.com/productos/ResellersLinux?safblogdephp">Web hosting para Resellers</a> <li> <li> </ul> </div> <div class="MasInfo"> <label class="Negrita">Servicios</label> <ul> <li><a href="/servicio-desarrollo-software/">Desarrollo de software a medida</a> <li><a href="/registro-de-dominios-web-hosting/">Registro de dominios y Web Hosting</a> </ul> </div> <div class="MasInfo"> <label class="Negrita">Ver más artículos sobre Php/Mysql, Wordpress, SEO (Posicionamiento en Google) y Framework CodeIgniter</label> <ul> <li> <a href="http://blogdephp.com/variables-de-session-en-php/">Variables de SESSION en php</a> <li><a href="/crea-tu-propio-blog-en-php-y-mysql/">¡Crea tu propio blog en php y mysql!</a> (no requiere uso del framework CodeIgniter) <li><a href="/tips-basicos-para-posicionar-tu-blog-wordpress-en-google//">Tips básicos para posicionar tu blog Wordpress en Google</a> <li><a href="/5-razones-para-programar-con-el-framework-php-codeigniter/">5 ventajas de programar con el framework CodeIgniter</a> <li><a href="/programacion-secuencial-vs-mvc-en-php/">Programación secuencial vs MVC en php</a> <li><a href="/personalizar-mensajes-de-error-al-idioma-del-usuario-en-codeigniter/">Personalizar mensajes de error al idioma del usuario en CodeIgniter</a> <li><a href="/evitar-problemas-al-comparar-valores-string-en-php/">Evitar problemas al comparar valores string en php</a> </ul> </div> </div> </body> </html>
Revisemos sus características técnicas más relevantes a nivel programación 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 botón 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 botón "submit", que permitirá al usuario ordenar el producto y pasar a la próxima pantalla. En nuestro caso la próxima pantalla es el script "ordenar_producto.php" la cual hemos definido al configurar el formulario (ver el 1er ítem de las consideraciones
Lo segundo que necesitaremos es crear el script ordenar_producto.php que luce de la siguiente manera:
Y su código es el siguiente:Código PHP :
<? 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 e-commerce - Web Hosting</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="./estilo.css" type="text/css" media="screen">
</head>
<body>
<?
if(isset($_POST['producto'])){ // Para evitar agregar un producto al carrito cuando el usuario sólo presionó el link "Ver cesta"
$_SESSION['productos_ordenados'][]=array(
"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 vacía</li><?
}
?>
</ul>
</div>
<div id="pie">
Desarrollado por <a href="http://www.blogdephp.com/">BlogdePhp.com</a> con colaboración de <a href="http://www.solo10.com/?safblogdephp">Solo10.com</a> </div>
<div class="MasInfo">
<label class="Negrita">Agradecimientos a empresas que hicieron posible esta demo y colaboran con el aprendizaje de php!</label>
<ul><li>Solo10.com, su ayuda con imágenes e información técnica de sus productos: <a href="http://www.solo10.com/?safblogdephp">Registro de dominios</a>, <a href="http://www.solo10.com/productos/WebHostingLinux/?safblogdephp">Web hosting</a> y <a href="http://www.solo10.com/productos/ResellersLinux?safblogdephp">Web hosting para Resellers</a>
<li>
<li>
</ul>
</div>
<div class="MasInfo">
<label class="Negrita">Servicios</label>
<ul>
<li><a href="/servicio-desarrollo-software/">Desarrollo de software a medida</a>
<li><a href="/registro-de-dominios-web-hosting/">Registro de dominios y Web Hosting</a>
</ul>
</div>
<div class="MasInfo">
<label class="Negrita">Ver más artículos sobre Php/Mysql, Wordpress, SEO (Posicionamiento en Google) y Framework CodeIgniter</label>
<ul>
<li> <a href="http://blogdephp.com/variables-de-session-en-php/">Variables de SESSION en php</a>
<li><a href="/crea-tu-propio-blog-en-php-y-mysql/">¡Crea tu propio blog en php y mysql!</a> (no requiere uso del framework CodeIgniter)
<li><a href="/tips-basicos-para-posicionar-tu-blog-wordpress-en-google//">Tips básicos para posicionar tu blog Wordpress en Google</a>
<li><a href="/5-razones-para-programar-con-el-framework-php-codeigniter/">5 ventajas de programar con el framework CodeIgniter</a>
<li><a href="/programacion-secuencial-vs-mvc-en-php/">Programación secuencial vs MVC en php</a>
<li><a href="/personalizar-mensajes-de-error-al-idioma-del-usuario-en-codeigniter/">Personalizar mensajes de error al idioma del usuario en CodeIgniter</a>
<li><a href="/evitar-problemas-al-comparar-valores-string-en-php/">Evitar problemas al comparar valores string en php</a>
</ul>
</div>
</div>
</body>
</html>
y la función 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 también se conoce como "carro de compras" o "carrito de compras" en otros países de habla hispana y la graficamos en la siguiente imágen. En inglés lo podremos encontrar también 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 más complejo, asíque ¡máxima atención!
Además 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 más sencilla y en menor tiempo).
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 programación web: las variables de SESSION php.
Entonces crearemos un array multidimensional de SESSION llamado $_SESSION['productos_ordenados']. Esto vendría a ser un conjunto de arrays los cuales, en nuestro ejemplo, tendrán 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á información de cada producto ordenado por nuestro cliente; por ejemplo si el usuario compra dos Paquetes Reseller de Web Hosting nosotros lo expresaríamos de la siguiente manera en un array:
Código PHP :
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:
Código PHP :
$_SESSION['productos_ordenados'][]=array( "producto"=> "reseller-web-hosting", "unidades"=> 2, "precio-unitario"=> 150, "subtotal"=> 300 );
Nota: En php los corchetes "[]" detrás 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 también es un array) dentro del array multidimensional "$_SESSION['productos_ordenados']".
Nota: Este artículo es orientado a personas con nivel inicial y medio en programación php.
Agradecemos a la empresa Solo10.com (nuestro supuesto cliente) por facilitarnos las imágenes y características 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 teóricos los haya dado por sobreentendido... Si te agradaría profundizar algún punto en particular, por favor ingresa un comentario y lo revisamos juntos
