Somos una tienda virtual de remeras nerd de primera calidad. Podés ver el proyecto levantado en https://geekers-reactjs-coderhouse.web.app/
Es importante mantener la estructura de la carga de productos para un correcto funcionamiento. Dejamos el siguiente diagrama a modo de ejemplo.
graph LR
A[Item/Producto] --> B(categoryId/string)
A[Item/Producto] --> C(featured/boolean)
A[Item/Producto] --> D(details/map)
A[Item/Producto] --> E(image/string)
A[Item/Producto] --> F(name/string)
A[Item/Producto] --> G(price/number)
D --> H(large/medium/small)
H --> I(white/gray/black/yellow/aqua/red)
I --> J(image/string)
I --> K(stock/number)
Tip: En la carpeta utils hay un archivo para configurar nuevos productos desde la aplicación sin tener que acceder a Firebase "manualmente".
Las categorías se cargan desde la colección categories. Actualmente tenemos 2 categorías (propiedad categoryId del producto) y una tercera (featured) que es una propiedad aparte que comparten todos los items y se expresa en valores booleanos.
Tip: Se podrían seguir agregando nuevas categorías. Por ej. "Niños".
Para poder agregar productos al carrito, primero se debe elegir el talle y el color para que habilite el stock correspondiente a esa combinación.
Al agregarle las propiedades size y color a cada elemento del carrito nos permite una validación más (aparte del id) para no repetir el mismo ítem pero que a su vez si la misma remera en el mismo talle es seleccionada en 2 colores distintos, la aplicación tome 2 ítems por separado y así luego poder hacer el control de stock correspondiente.
El stock es individual para cada combinación de producto. O sea: Remera --> Unisex ó Mujer --> Talle --> Color --> Stock.
Hasta no estar realizado el commit del stock en el checkout, el botón de agregar productos sigue tomando el valor del stock actual que figura en Firebase. Sin embargo en el checkout no agrega más que el stock disponible y aclara al usuario que ese es el número máximo de ese ítem. Remera --> Unisex ó Mujer --> Talle --> Color --> Stock.