feat: add product variants and update cart functionality to support size selection

Author: Jeffcar1993

.react-router/types/+register.ts

@@ -29,4 +29,5 @@ type Params = {
   "/account/orders": {};
   "/not-found": {};
   "/verify-email": {};
+  "/chat": {};
 };

prisma/initial_data.ts

@@ -29,6 +29,19 @@ export const categories = [
   },
 ];
 
+export const productVariant = [
+  // Ejemplo para un producto Polo
+  { productTitle: "Polo React", sizes: ["small", "medium", "large"] },
+  { productTitle: "Polo JavaScript", sizes: ["small", "medium", "large"] },
+  { productTitle: "Polo Node.js", sizes: ["small", "medium", "large"] },
+  { productTitle: "Polo TypeScript", sizes: ["small", "medium", "large"] },
+  { productTitle: "Polo Backend Developer", sizes: ["small", "medium", "large"] },
+  { productTitle: "Polo Frontend Developer", sizes: ["small", "medium", "large"] },
+  { productTitle: "Polo Full-Stack Developer", sizes: ["small", "medium", "large"] },
+  { productTitle: "Polo It's A Feature", sizes: ["small", "medium", "large"] },
+  { productTitle: "Polo It Works On My Machine", sizes: ["small", "medium", "large"] },
+];
+
 export const products = [
   {
     title: "Polo React",

prisma/migrations/20250819202839_add_product_variants/migration.sql

@@ -0,0 +1,11 @@
+-- CreateTable
+CREATE TABLE "ProductVariants" (
+    "id" SERIAL NOT NULL,
+    "productId" INTEGER NOT NULL,
+    "size" TEXT NOT NULL,
+
+    CONSTRAINT "ProductVariant_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "ProductVariants" ADD CONSTRAINT "ProductVariant_productId_fkey" FOREIGN KEY ("productId") REFERENCES "products"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20250820012221_sync_cartitem_cartid/migration.sql

@@ -0,0 +1,56 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `cart_id` on the `cart_items` table. All the data in the column will be lost.
+  - You are about to drop the column `product_id` on the `cart_items` table. All the data in the column will be lost.
+  - You are about to drop the `ProductVariants` table. If the table is not empty, all the data it contains will be lost.
+  - A unique constraint covering the columns `[cartId,productId]` on the table `cart_items` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `cartId` to the `cart_items` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `productId` to the `cart_items` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "ProductVariants" DROP CONSTRAINT "ProductVariant_productId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "cart_items" DROP CONSTRAINT "cart_items_cart_id_fkey";
+
+-- DropForeignKey
+ALTER TABLE "cart_items" DROP CONSTRAINT "cart_items_product_id_fkey";
+
+-- DropIndex
+DROP INDEX "cart_items_cart_id_product_id_key";
+
+-- AlterTable
+ALTER TABLE "cart_items" DROP COLUMN "cart_id",
+DROP COLUMN "product_id",
+ADD COLUMN     "cartId" INTEGER NOT NULL,
+ADD COLUMN     "productId" INTEGER NOT NULL,
+ADD COLUMN     "productVariantId" INTEGER;
+
+-- DropTable
+DROP TABLE "ProductVariants";
+
+-- CreateTable
+CREATE TABLE "ProductVariant" (
+    "id" SERIAL NOT NULL,
+    "productId" INTEGER NOT NULL,
+    "size" TEXT NOT NULL,
+
+    CONSTRAINT "ProductVariant_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "cart_items_cartId_productId_key" ON "cart_items"("cartId", "productId");
+
+-- AddForeignKey
+ALTER TABLE "ProductVariant" ADD CONSTRAINT "ProductVariant_productId_fkey" FOREIGN KEY ("productId") REFERENCES "products"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "cart_items" ADD CONSTRAINT "cart_items_cartId_fkey" FOREIGN KEY ("cartId") REFERENCES "carts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "cart_items" ADD CONSTRAINT "cart_items_productId_fkey" FOREIGN KEY ("productId") REFERENCES "products"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "cart_items" ADD CONSTRAINT "cart_items_productVariantId_fkey" FOREIGN KEY ("productVariantId") REFERENCES "ProductVariant"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/schema.prisma

@@ -51,17 +51,18 @@ model Category {
 }
 
 model Product {
-  id          Int      @id @default(autoincrement())
+  id          Int              @id @default(autoincrement())
   title       String
-  imgSrc      String   @map("img_src")
+  imgSrc      String           @map("img_src")
   alt         String?
-  price       Decimal  @db.Decimal(10, 2)
+  price       Decimal          @db.Decimal(10, 2)
   description String?
-  categoryId  Int?     @map("category_id")
-  isOnSale    Boolean  @default(false) @map("is_on_sale")
+  categoryId  Int?             @map("category_id")
+  isOnSale    Boolean          @default(false) @map("is_on_sale")
   features    String[]
-  createdAt   DateTime @default(now()) @map("created_at") @db.Timestamp(0)
-  updatedAt   DateTime @default(now()) @map("updated_at") @db.Timestamp(0)
+  createdAt   DateTime         @default(now()) @map("created_at") @db.Timestamp(0)
+  updatedAt   DateTime         @default(now()) @map("updated_at") @db.Timestamp(0)
+  variants    ProductVariant[]
 
   category   Category?   @relation(fields: [categoryId], references: [id], onDelete: SetNull)
   cartItems  CartItem[]
@@ -70,6 +71,15 @@ model Product {
   @@map("products")
 }
 
+model ProductVariant {
+  id        Int     @id @default(autoincrement())
+  product   Product @relation(fields: [productId], references: [id])
+  productId Int
+  size      String // 'small', 'medium', 'large'
+
+  cartItems CartItem[] @relation("CartItemToProductVariant")
+}
+
 model Cart {
   id            Int      @id @default(autoincrement())
   sessionCartId String   @unique @default(dbgenerated("gen_random_uuid()")) @map("session_cart_id") @db.Uuid
@@ -84,15 +94,17 @@ model Cart {
 }
 
 model CartItem {
-  id        Int      @id @default(autoincrement())
-  cartId    Int      @map("cart_id")
-  productId Int      @map("product_id")
-  quantity  Int
-  createdAt DateTime @default(now()) @map("created_at") @db.Timestamp(0)
-  updatedAt DateTime @default(now()) @map("updated_at") @db.Timestamp(0)
-
-  cart    Cart    @relation(fields: [cartId], references: [id], onDelete: Cascade)
-  product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
+  id               Int      @id @default(autoincrement())
+  cartId           Int
+  productId        Int
+  productVariantId Int?
+  quantity         Int
+  createdAt        DateTime @default(now()) @map("created_at") @db.Timestamp(0)
+  updatedAt        DateTime @default(now()) @map("updated_at") @db.Timestamp(0)
+
+  cart           Cart            @relation(fields: [cartId], references: [id], onDelete: Cascade)
+  product        Product         @relation(fields: [productId], references: [id], onDelete: Cascade)
+  productVariant ProductVariant? @relation("CartItemToProductVariant", fields: [productVariantId], references: [id])
 
   @@unique([cartId, productId], name: "unique_cart_item")
   @@map("cart_items")

prisma/seed.ts

@@ -3,16 +3,49 @@ import { PrismaClient } from "../generated/prisma/client";
 
 const prisma = new PrismaClient();
 
+// Define las tallas para los productos tipo "Polo"
+const poloSizes = ["small", "medium", "large"] as const;
+
 async function seedDb() {
+  // Limpia las tablas para evitar duplicados
+  await prisma.productVariant.deleteMany();
+  await prisma.product.deleteMany();
+  await prisma.category.deleteMany();
+
+  // Inserta categorías
   await prisma.category.createMany({
     data: categories,
   });
   console.log("1. Categories successfully inserted");
 
+  // Inserta productos
   await prisma.product.createMany({
     data: products,
   });
   console.log("2. Products successfully inserted");
+
+  // Obtiene los productos tipo "Polo" para agregar variantes
+  const polosCategory = await prisma.category.findUnique({
+    where: { slug: "polos" },
+  });
+
+  if (polosCategory) {
+    const polos = await prisma.product.findMany({
+      where: { categoryId: polosCategory.id },
+    });
+
+    for (const polo of polos) {
+      for (const size of poloSizes) {
+        await prisma.productVariant.create({
+          data: {
+            productId: polo.id,
+            size,
+          },
+        });
+      }
+    }
+    console.log("3. Polo variants successfully inserted");
+  }
 }
 
 seedDb()
@@ -22,4 +55,4 @@ seedDb()
   .finally(async () => {
     console.log("--- Database seeded successfully. ---");
     await prisma.$disconnect();
-  });
+  });

src/lib/cart.ts

@@ -19,14 +19,16 @@ export async function addToCart(
   userId: number | undefined,
   sessionCartId: string | undefined,
   productId: Product["id"],
-  quantity: number = 1
+  quantity: number = 1,
+  productVariantId?: number
 ) {
   try {
     const updatedCart = await alterQuantityCartItem(
       userId,
       sessionCartId,
       productId,
-      quantity
+      quantity,
+      productVariantId
     );
     return updatedCart;
   } catch (error) {

src/models/cart.model.ts

@@ -33,6 +33,7 @@ export type CartProductInfo = Pick<
 export type CartItemWithProduct = {
   product: CartProductInfo;
   quantity: number;
+  productVariantId: number | null;
 };
 
 // Tipo para el carrito con items y productos incluidos

src/models/product.model.ts

@@ -2,4 +2,9 @@ import type { Product as PrismaProduct } from "@/../generated/prisma/client";
 
 export type Product = Omit<PrismaProduct, "price"> & {
   price: number;
+  variants?: ProductVariant[];
 };
+export interface ProductVariant {
+  id: number;
+  size: "small" | "medium" | "large";
+}

src/routes/cart/add-item/index.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "react-router";
-
+import { prisma } from "@/db/prisma";
 import { addToCart } from "@/lib/cart";
 import { getSession } from "@/session.server";
 
@@ -9,12 +9,32 @@ export async function action({ request }: Route.ActionArgs) {
   const formData = await request.formData();
   const productId = Number(formData.get("productId"));
   const quantity = Number(formData.get("quantity")) || 1;
+  const size = formData.get("size") as string | undefined;
   const redirectTo = formData.get("redirectTo") as string | null;
   const session = await getSession(request.headers.get("Cookie"));
   const sessionCartId = session.get("sessionCartId");
   const userId = session.get("userId");
 
-  await addToCart(userId, sessionCartId, productId, quantity);
+  let productVariantId: number | undefined = undefined;
+
+  // Si hay talla, busca el variant correspondiente
+  if (size) {
+    const variant = await prisma.productVariant.findFirst({
+      where: {
+        productId,
+        size,
+      },
+    });
+    if (!variant) {
+      return new Response(
+  JSON.stringify({ error: "No se encontró la variante seleccionada." }),
+  { status: 400, headers: { "Content-Type": "application/json" } }
+);
+    }
+    productVariantId = variant.id;
+  }
+
+  await addToCart(userId, sessionCartId, productId, quantity, productVariantId);
 
   return redirect(redirectTo || "/cart");
-}
+}