Guía 24 – Comercio Electrónico

Este ejemplo lo había propuesto hace mucho tiempo, en concreto cuando publiqué cómo podíamos cambiar el diseño de la página LIST para utilizar paneles. 

Soy consciente que para disponer de un sistema completo de comercio electrónico, todavía le queda mucho al ejemplo, pero puede ser una plantilla de inicio para los que empiezan en esta actividad.

Objetivo

El ejemplo debe disponer de un sistema de gestor de tienda para poder adquirir los productos e incorporarlos a los catálogos y disponibilidades y además, debe disponer de un sistema abierto al público para la consulta de todos los productos y la realización de pedidos de los clientes que previamente se hayan registrado.

Así pues, la “solución” consta de 2 ejemplos.

Sistema interno

Este ejemplo es una aplicación genérica de PHPRunner donde se dispone de un apartado de Compras (proveedores y albaranes de entrega) y otra de Ventas (clientes y pedidos).

También dispone de un sistema de gestión de productos en donde se informa la tipificación de familia y tipo y donde se gestionan todos los datos de los productos (en la parte de descripción se mantienen las descripciones en varios idiomas).

Una característica de las 2 aplicaciones es que son multi-idioma, estando en el ejemplo en español e inglés

Este ejemplo tiene los menú en la parte superior y se gestionan dinámicamente.

A modo de ejemplo se muestra la información que dispone un producto.

Y la información que dispone un Pedido.

Tanto en la gestión de los Pedidos como en los Albaranes de recepción de mercancías se trabaja con tablas “Maestros” y “Detalles”, sincronizando en todas las operaciones los cálculos del “Maestro”.

También se contempla un pequeño workflow controlado por el estado del Pedido o Albarán y dependiendo de su estado, así se puede o no cambiar información de “Detalle”.

Para la sincronización se utiliza lo explicado en este artículo: https://fhumanes.com/blog/guias-desarrollo/guia-7-phprunner-sincronizar-actualizacion-entre-maestro-y-detalle/

Sistema Público

Uno de los aspectos principales es que hasta que no se haya identificado el “cliente” no le va a ofrecer ninguna opción de crear el “carrito de compra” y mucho menos información de los pedidos anteriores.

Este es el aspecto de la consulta de los productos sin que se haya identificado el “cliente”.

Esta es la misma consulta con el “cliente” identificado.

La parte pública se ha pensado para que también pueda funcionar desde los móviles (hoy en día los clientes acceden principalmente desde el móvil).

El botón de “Add” al carrito no aparece si el usuario no está identificado.

Puede disponer de más de una foto el producto y también, dispone de una descripción del producto (en varios idiomas) si se informa previamente en el mismo.

La página se puede trabajar bastante más en su diseño para ser atractiva, pero siempre debemos considerar que se va a consultar desde equipo de escritorio y desde el móvil.

El usuario identificado puede ver su pedido en curso y puede modificar los productos que estén registrados en él.

Cuando se pulsa el botón amarillo (Guardar y cerrar pedido), previa confirmación se cierra ese pedido y se abre otro nuevo.

Los distintos pasos del pedido, en el ejemplo, se gestionan a través de la aplicación interna.

Solución técnica

Ambas aplicaciones comparten el mismo modelo de datos.

Se utilizan los siguientes plugins que se puede descargar.

  • Switch .- Para los campos de tipo checkbox.
  • Summernote .- Para la edición de la descripción de los Productos.

En conjunto, tiene muchos detalles de programación de JavaScript y PHP, así como configuración especial del CSS de la plantilla.

Os facilito los fuentes, para que podáis instalarlo y configurarlos en vuestros equipos, y sobre todo, para que lo ajustéis a vuestras necesidades.

Para cualquier consulta, contactar conmigo a través del email: [email protected]

Blog personal

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies.