Tienda en línea de equipamiento para nadadores. AquaticStore permite explorar gafas, trajes de competición e implementos de entrenamiento, agregarlos al carrito y consultar la compra por WhatsApp.
- Navegación de productos: Catálogo organizado por categorías con ordenamiento por precio.
- Carrito de compras: Agregar, eliminar y vaciar productos con confirmaciones claras.
- Persistencia local: El carrito se guarda en
localStorageentre sesiones. - Consulta por WhatsApp: Envío del pedido formateado al número configurado.
- HTML5 para la estructura de la página web.
- CSS3 para el diseño y la presentación.
- JavaScript para la interactividad y la lógica del carrito de compras.
- Toastify.js y SweetAlert2 para notificaciones y confirmaciones.
- Local Storage para almacenar de manera persistente el contenido del carrito.
- Clona este repositorio en tu máquina local:
git clone https://github.com/alejoarte/AquaticStore.git
- Navega al directorio del proyecto:
cd AquaticStore - (Opcional) Copia
js/config.example.jsajs/config.jsy configura tu número de WhatsApp.
- Abre el archivo
index.htmlen tu navegador web preferido. - Navega por los productos disponibles y agrega los que desees al carrito.
- Revisa el carrito en
cart.html, elimina productos o vacíalo si es necesario. - Consulta la compra por WhatsApp desde el carrito.
├── img/ # Imágenes de productos
├── js/
│ ├── cart.js # Lógica del carrito
│ ├── config.example.js # Plantilla de configuración
│ ├── currency.js # Formato de precios
│ ├── main.js # Catálogo y agregar al carrito
│ ├── menu.js # Menú móvil
│ ├── notifications.js # Toasts y diálogos de confirmación
│ └── products.json # Datos del catálogo
├── styles/
│ └── style.css # Estilos globales
├── cart.html # Página del carrito
├── index.html # Página principal
└── README.md
- Se tiene integrado un chat que permite interactuar con los clientes sin que ellos tengan que salir de la pagina web
- Nota: Se necesita para esto un inbox que este integrado con esta entrada.