https://github.com/sgcm14/tienda-virtual
Tienda Virtual con CRUD de carrito de compras
https://github.com/sgcm14/tienda-virtual
css emailjs html javascript localstorage sweetalert
Last synced: 4 months ago
JSON representation
Tienda Virtual con CRUD de carrito de compras
- Host: GitHub
- URL: https://github.com/sgcm14/tienda-virtual
- Owner: sgcm14
- Created: 2020-10-28T03:43:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-20T05:39:09.000Z (over 1 year ago)
- Last Synced: 2025-04-14T10:43:23.560Z (about 1 year ago)
- Topics: css, emailjs, html, javascript, localstorage, sweetalert
- Language: HTML
- Homepage: https://sgcm14.github.io/Tienda-Virtual/
- Size: 14 MB
- Stars: 29
- Watchers: 2
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Tienda Virtual de Mascotas (PetShop)
=============
- Este proyecto está basado en la plantilla [Carrito-Compras-JavaScript](https://github.com/erickcernarequejo/Carrito-Compras-JavaScript "Carrito-Compras-JavaScript") , lo realicé dentro del programa de 3 meses de [Asociación Hack Space Perú](https://www.hackspace.pe/ "Asociación Hack Space Perú")
- El mockup del proyecto se realizó en [Figma]([(https://www.figma.com/](https://www.figma.com/) "Figma")
- **Periodo :** Setiembre - Noviembre 2020
> Proyecto para fin de programa, se usó HTML, CSS y JS
La página web a continuación simula ser un carrito de compras, en la cuál eliges de una cierta cantidad de productos para posteriormente comprarlas.
Al hacer click en **PETSHOP** se muestra un slider de 3 imágenes, 3 productos con borde redondeado y mayor información.
> Pantalla de **PETSHOP**
Al hacer click en **Nosotros** te da una pequeña descripción.
> Pantalla de **Nosotros**
Al hacer click en **Productos** te muestra todas los productos, cuándo pones el mouse encima de cualquier producto, éste se eleva ligeramente, y al darle click en la foto del producto se abre un modal con la foto del producto.
> Pantalla de **Productos** (Cuándo pones el mouse encima de cualquier producto)
Al hacer click en el carrito que se muestra en la esquina superior derecha, se abre un submenú en donde se irán mostrando los productos que elijas.
> Pantalla de **Productos** (Cuándo haces click en el carrito de la esquina superior derecha)
Al dar click en "comprar" el producto se listará en el carrito.
> Pantalla de **Productos** (Cuándo pones el mouse encima de "comprar" en cualquier producto)
Al agregar un producto en el carrito te mostrará un mensaje de "Agregado"
> Pantalla de **Productos** (Cuándo le das click en "comprar")
Cuándo decidas que deseas quitar a un producto de tu carrito, le das click en carrito y por último en la "x" al lado del producto, te mostrará un mensaje de "eliminado"
> Pantalla de **Productos** (Cuándo das click en el carrito de la esquina superior derecha, en la "x")
Si decídes que deseas eliminar todas los productos que seleccionaste, haz click en el carrito, y por último en el botón "vaciar carrito", al hacer esto aparecerá un mensaje "Carrito vacío".
> Pantalla de **Productos** (Cuándo das click en el carrito de la esquina superior derecha, en el botón "Vaciar carrito")
Si haces click en "procesar compra" pero el carrito esta vacío, te aparecerá el mensaje "El carrito está vacío, agrega un producto".
> Pantalla de **Productos** (Cuándo das click en el carrito de la esquina superior derecha, en el botón "Procesar compra")
Cuándo tengas todas los productos seleccionados, le das click en el carrito, y por último en el botón "procesar compra", ésto te redireccionará y te mostrará la lista de los productos que seleccionaste, aquí podrás rellenar tus datos para que se envíe el total del pedido a tu correo electrónico.
> Pantalla de **Carrito** (Cuándo das click en el carrito de la esquina superior derecha, en el botón "Procesar compra")
Aquí podrás contactar en caso tener alguna pregunta al respecto.
> Pantalla de **Contacto**
**Realizado por :** Sammy Gigi Cantoral Montejo (sgcm14)
