El presente manual que se dara a conocer, se realizo con la finalidad de dar a conocer de manera detallada y sencilla la estructura deL sito web de la Tienda LuiGui, para que cualquier usuario pueda sacar el máximo provecho de el mismo. El sitio fue diseñado para que cada quien pueda, de forma interactiva, pueda visualizar y comprar productos de forma interna en el sitio.
Brindar una descripción clara y detallada sobre el funcionamiento y uso de los distintos elementos de la página web para guiar al usuario en la búsqueda de información.
Para comenzar con este manual de usuario, lo primero que mostraremos son las interfaces de cada una de las páginas del sitio. En este caso mostraremos la página principal, el home. En este home, en este home, contaremos con 4 secciones, estas son: bienvenida, valores, ubicación y un formulario de contacto. Este apartado cuenta con estas 4 secciones sin contar la barra de navegación y el pie de página o footer que se encuentran en todas las páginas.
imagen #1 - Bienvenida
imagen #2 - Sección de valores
imagen #3 - Sección de ubicación
imagen #4 - Sección de contactenos
Ahora, en esta parte del sitio, nos encontramos con diversas funcionalidades, tan solo en la parte de bienvenida encontraremos un video el cual, dando clic, se reproducirá y conoceremos a la señora Mónica Parra, la cual es la dueña del establecimiento. También encontraremos un botón con el mensaje de "Desliza", si lo oprimimos este nos dirigirá a la sección de "Nuestros valores".
En caso de que el usuario haya decidido no deslizar, podrá hacerlo manualmente, ya que en la parte inferior de la pantalla encontrará una barra de desplazamiento, la cual podrá mover con el mouse o con el dedo si se encuentra en un dispositivo móvil. Pero, en todo caso, llegará a la sección de "Nuestros valores", esta sección no tiene mucha interactividad con el usuario, tan solo tiene animaciones en las imágenes y un botón en la mitad que, al oprimir, nos dirigirá a la siguiente sección, la de "Ubícanos". En esta sección de "Ubícanos", el usuario podrá interactuar con el mapa, el cual está sacado de Google Maps, por lo que podrá arrastrar el mapa para ubicarse también. En esta parte también contamos con un pequeño apartado de detalles, en los cuales informamos dónde está la tienda, a qué hora abre, etc. Y, por último, nos encontraremos con el botón de "Contáctanos", el cual, si lo oprimimos, nos llevará a un formulario para poder enviar un mensaje a la tienda.
Ahora, si hemos decidido dirigirnos al formulario de contacto, tenemos que tener claro que en la parte izquierda nos dice para qué podemos usar ese formulario, en este caso específico el usuario no debe tener cuenta ni haber iniciado sesión. En este formulario, a través de una pequeña cantidad de datos, los usuarios pueden contactar con la tienda ya sea para realizar una consulta, queja, ayuda, etc.
El menú de navegación de este sitio puede ser de dos tipos. El primer menú es el que el usuario observa al no estar registrado o haber iniciado sesión, y el segundo es cuando el usuario ya ha iniciado sesión.
1. Menu sin iniciar sesión
2. Menu con usuario iniciado
Para poder seguir explicando la funcionalidad de este, explicaremos la opcion de menu con un usuario que haya iniciado sesión ya que es el que tiene todo el menu disponible. Empezando con este menu, en la parte izquierda tenemos el logo de la tienda, si le damos clic a este logo este nos dirigira a la parte del inicio de la pagina principal.
En el centro del menú, contamos con 4 links. El primero de ellos es un link de inicio, el cual también nos llevará a la primera parte de la página principal. El segundo link es el del Catálogo; en este podremos encontrar todos los productos disponibles que hay en la tienda. El tercer link es el de Galería; en este podremos observar imágenes de la tienda, como para exponer un poco más lo que es este negocio. Y, por último, tenemos el link del historial; esta es una de las opciones que aparece cuando el usuario está logueado, en la cual encontraremos un historial de productos que el usuario haya comprado.
Por último, en la parte derecha del menú, contamos con 3 iconos. El primero es el icono del usuario, que tendrá dos funcionalidades dependiendo de si el usuario ha iniciado sesión o no: si el usuario no se ha logueado, este icono, al darle clic, redirigirá al formulario de inicio de sesión; si el usuario ya se ha logueado, la funcionalidad del icono cambiará para redirigirlo a un perfil de usuario, en el cual podrá observar sus datos personales. El segundo icono es el de cerrar sesión; este icono solo aparece cuando el usuario ha iniciado sesión previamente; dándole clic, cerrará la sesión del usuario. Y, por último, tenemos el del carrito de compras, en el cual podremos visualizar todos los productos que hayamos metido al carrito desde el Catálogo.
Para poder tener una mayor oportunidad de utilizar el sitio, lo más recomendable es que el usuario se registre para que pueda utilizar todas las funciones del programa. Para esto, contamos con un formulario de registro en el que se solicitan datos básicos pero necesarios para el programa, como: un nombre de usuario, teléfono, correo, dirección y una contraseña. La mayoría de estos datos servirán para iniciar sesión y obtener más rápido los datos del envío del usuario. Luego de registrarnos, nos aparecerá un mensaje que dirá "Registro exitoso", luego no redirigirá al inicio de sesión y solo tendremos que colocar nuestro nombre de usuario y contraseña.
1. Formulario de registro
2. Inicio de sesión
Al hacer clic en "Olvidaste tu contraseña", aparecerá la opción para cambiar la contraseña con el correo que hayas registrado. Después de escribir el correo, recibirás un enlace para el cambio de contraseña. Al hacer clic en el enlace, pasarás a la siguiente sección, donde podrás escribir la nueva contraseña.
1. alterna del cambio de contraseña
2. Alterna del enlace del correo
3.Alterna de la nueva contraseña
En este sitio contamos con un perfil del usuario para que esta pueda visualizar sus datos de envio.
1. Perfil de usuario
Como podemos ver en la imagen, este perfil solo nos mostrará los tres datos principales para el envío: correo, teléfono y dirección. Esto, ya que más adelante los traeremos para la pasarela de pago. Este perfil también cuenta con dos botones, los cuales tienen su función principal dentro del programa.
Comenzando con el primer botón ubicado en la parte izquierda, si el usuario desea cambiar o actualizar su contraseña, lo podrá realizar sin problema desde este formulario. Claramente, y por cuestiones de seguridad, si se desea actualizar la contraseña, necesitaremos confirmar la contraseña actual que tenemos; posteriormente, escogemos nuestra nueva contraseña y la confirmamos para mayor seguridad. Una vez realizado el cambio, el sitio nos cerrará la sesión actual y nos redirigirá al inicio de sesión para confirmar que el cambio de contraseña fue exitoso.
El segundo botón, que encontramos en la parte derecha, es el de eliminar cuenta. Con este botón debemos tener más cuidado, ya que al darle clic nos mandará una alerta que nos preguntará si de verdad estamos seguros de esta decisión. Si aceptamos, la cuenta se borrará de forma permanente; esto borrará todos los datos de compras que hayamos hecho y también se eliminará toda la información que tenga el sitio del usuario.
Para acceder al apartado de comprar los productos, lo podemos hacer dirigiéndonos al enlace de "Catálogo" en el menú de navegación. Aquí lo que encontraremos serán los productos que nos ofrece la tienda, además de una serie de filtros para facilitar más la búsqueda de los productos y una paginación en la parte de abajo. Esta se organiza en 12 productos por página, y la cantidad de páginas depende de los productos que agregue el propietario de la tienda.
Ahora, si probamos darle al botón de "Comprar" de alguno de los productos que tenga unidades disponibles (si el producto no tiene unidades disponibles en el momento, el programa no dejará comprar ese producto hasta que se actualice el inventario), una vez le demos "Comprar", este nos abrirá una modal. Dicha modal tendrá la imagen del producto, el nombre, la descripción, la cantidad de unidades que vamos a llevar y el botón de "Agregar al carrito". Cabe aclarar que este botón puede cambiar dependiendo de si el usuario ya inició sesión o no; si ya ha iniciado sesión, lo dejará agregar al carrito sin problema y se cerrará la modal, y si no ha iniciado sesión, el botón lo redirigirá al login para que realice el debido proceso.
Producto de catálogo
1. Modal producto de usuario no logueado
2. Modal de producto de usuario logueado
Una vez hayamos agregado los productos que queremos comprar desde el catálogo, nos encontraremos estos productos en el carrito de compras. Este carrito tiene dos paneles: el primero lo encontramos en la parte izquierda, el cual carga cada uno de los productos que agregamos con su respectiva imagen, nombre, unidades, precio y un ícono de eliminar por si ya no queremos el producto. Esto se repetirá con todos los productos que agreguemos. El segundo panel, el de la derecha, contiene el resumen de la compra en términos monetarios. Este carrito, como cualquiera, hace automáticamente la suma de todos los productos y, a esto, también le suma el coste del domicilio. Por último, en este panel también encontramos dos botones: el primero para finalizar la compra, el cual nos llevará a la pasarela de pago, y el segundo para seguir comprando, el cual nos dirigirá de nuevo al catálogo por si se nos olvidó algún producto por comprar.
Existe otra opción de este carrito, y es cuando este se encuentra vacío. Al no tener productos el carrito, si entramos a este, lo que nos aparecerá será un mensaje que nos pedirá que agreguemos productos desde el catálogo y, debajo de este mensaje, un botón que nos redirigirá al catálogo.
Una vez que ya tengamos definidos los productos que vayamos a comprar en el carrito, podemos oprimir la opción de proceder al pago. Esto redirigirá a la pasarela de pago, en la que encontramos varios campos: algunos que tendremos que llenar y otros en los que ya contamos con nuestra información. Esta pasarela de pago, esta dividida en 3 pasos. En el primer paso nos encontraremos en el formulario de llenar nuestros datos basico, datos como nombre, apellido, numero, correo, dirección y municipio. Una vez completemos nuestros datos, nos vamos al paso 2, en este lo unico que haremos sera escoger el metodo de pago que se le facilete al usuario. Una vez con el metodo escogido, nos vamos al ultimo paso donde escanearemos el codigo QR si elegimos un banco y subiremos el comprobante de pago para finalizar la compra, si elegimos contra entrega solo debemos finalizar la compra y ya. Una vez terminado esto nos tendra que mandar a la pagina de historial para ver nuestra ultima compra.
1. Paso 1 de la pasarela
2. Paso 2 de la pasarela
3. Paso 3 de la pasarela
Una vez que tengamos el pedido de los productos, pasaremos al historial de productos, donde podremos encontrar los productos que hemos comprado. En esa sección, encontraremos la cantidad de órdenes que se han realizado, y cada orden contará con la descripción de los productos que hemos encargado. La descripción incluirá el nombre del producto, la cantidad de productos, el precio de cada uno y el total.
1. Historial de compra exitoso
Una vez hayamos realizado la compra a través de la pasarela de pago, tendremos que revisar el correo con el que nos registramos en el sitio. Esto es porque a dicho correo nos llegará una especie de factura que, a la vez, contiene los detalles de nuestro pedido. En este correo encontramos, primero, un saludo al cliente; luego, los datos de envío junto con el método de pago; seguido de ello, los productos que compramos junto con la cantidad de unidades; y, por último, el total a pagar. Con todo esto, un mensaje al final nos indica que se contactarán con nosotros para finalizar el envío, ya que la orden llegará a la tienda y ésta se encargará de hacernos llegar el pedido a nuestra dirección de envío registrada.
Como en cualquier sitio web, este también se adapta si es visto desde un celular, tablet, portátil o computador de escritorio. Está hecho para que, según las diferentes medidas de cada dispositivo, se adapte a esa pantalla. A continuación se mostrarán algunas imágenes de cómo se ve el sitio en celular, tablet y portátil en algunos sitios del programa.
1. Bienvenida desde movil
2. Catálogo desde movil
3. Carrito desde movil
1. Bienvenida desde tablet
2. Catálogo desde tablet
3. Carrito desde tablet
1. Bienvenida desde portatil
2. Catálogo desde portatil
3. Carrito desde portatil
Entrando a la última parte de este manual, tenemos el panel de administración. A este panel solo puede acceder únicamente el dueño de la tienda o cualquiera que tenga un superuser creado. Para acceder a este panel, podemos hacerlo desde la URL de nuestro navegador, escribiendo, después de la URL del sitio, y agregando /admin, y ya debería aparecer el login para entrar al panel de administrador.
Una vez hayamos iniciado sesión, nos tendremos que centrar en las tablas que dicen: Contactos, Inventarios, Pedidos, Perfiles de usuario y Productos. Todo esto, ya que aquí es donde podemos ver toda la administración del sitio.
Entrando a la tabla de Contactos, podremos encontrar los mensajes que nos dejan nuestros usuarios desde el formulario de "Contáctenos"; aquí podemos ver los datos de quien lo hizo, más el mensaje.
Luego, si vamos a la tabla de Inventario, encontraremos que aquí es donde registramos la cantidad de unidades que puede tener un producto. Al momento de crear un producto, este aparece aquí y el administrador podrá sumarle o quitarle unidades.
Ahora, entrando en la tabla de Pedidos, observamos que aquí es donde llegan todas las órdenes una vez que el usuario las finaliza en la pasarela de pago. Si damos clic al ID de cada orden, podremos obtener la información completa de los productos que llevó y a donde tiene que llegar.
Seguimos con la tabla de Perfiles de usuario; como su nombre indica, encontraremos todos los perfiles que están registrados en el sitio, junto con la información de envío de cada usuario.
Por último, pasamos a la parte del admin más dinámica. Esta es la tabla de Productos; desde aquí, el administrador del sitio podrá agregar o quitar productos como desee. En la tabla vemos los productos que, en este momento, están subidos en el sitio; sin embargo, si queremos subir un producto nuevo, lo que tenemos que hacer es darle a "Añadir producto", que aparece a la derecha de la tabla. Luego, ponemos el nombre del producto, la descripción, el precio, la categoría y subimos una imagen del producto, guardamos la información y este se sube al catálogo automáticamente. Lo único que faltaría sería subirle las unidades en la tabla de inventario.
