[feat] implemented product variants

src/pages/partials/card-modal.astro

@@ -15,12 +15,12 @@ export const partial = true;
 export const prerender = false;
 
 const searchParams = Astro.url.searchParams;
-const productId = Number(searchParams.get('productId')) || 0;
+const cardId = Number(searchParams.get('cardId')) || 0;
 
 
 // query the database for the card with the given productId and return the card data as json
 const card = await db.query.cards.findFirst({
-    where: { productId: Number(productId) },
+    where: { cardId: Number(cardId) },
     with: {
         prices: true,
         set: true,
@@ -29,7 +29,8 @@ const card = await db.query.cards.findFirst({
 
 const nearMint = await db.query.skus.findFirst({
     where: {
-        productId: Number(productId),
+        productId: card?.productId || 0,
+        variant: card?.variant || "",
     }
 });
 

src/pages/partials/cards.astro

@@ -52,7 +52,7 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
         <div class="inventory-button position-relative float-end shadow-filter text-center d-none">
             <div class="inventory-label pt-2">+/-</div>
         </div>
-        <div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
+        <div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
             <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
         </div>
         <div class="row row-cols-5 gx-1 price-row mb-2">
@@ -75,6 +75,7 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
             <div class="text-secondary">{card.number}</div>
             <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
         </div>
+        <div>{card.variant}</div>
     </div>
 ))}
 {start + 20 < totalHits &&