# Color Variant Selector - Implementation Guide

## Current Status

✅ **Database**: `variants` column added to products table (jsonb type)
✅ **Backend**: Products can be created/edited with color variants
✅ **Frontend Script**: product-variants.js created and deployed
❌ **Integration**: Script needs to be included in product detail page

## The Issue

Your application views are compiled into the DLL file. The product detail page
needs to include the variant selector script and provide variant data to it.

## Solution Options

### Option 1: Rebuild Application (Recommended)

Add this to your Product Detail View (e.g., Views/Shop/Detail.cshtml or ProductDetail.cshtml):

```html
<!-- Add in the <head> or before </body> -->
<script src="/assets/js/product-variants.js"></script>

<!-- Add inline script to provide variant data -->
<script>
    // Embed product variant data
    window.productVariants = @Html.Raw(Json.Serialize(Model.Variants));
</script>
```

And update product-variants.js to use embedded data:

```javascript
function loadVariants(productId) {
    // Check if data is embedded
    if (window.productVariants && window.productVariants.length > 0) {
        renderVariants(window.productVariants);
        return;
    }
    // Otherwise try API...
}
```

### Option 2: Add API Endpoint

Add to your ShopController.cs:

```csharp
[HttpGet("api/shop/product/{id}/variants")]
public async Task<IActionResult> GetProductVariants(string id)
{
    var product = await _context.Products
        .Where(p => p.Id == id)
        .Select(p => new { p.Variants })
        .FirstOrDefaultAsync();
    
    if (product == null)
        return NotFound();
    
    return Json(product.Variants);
}
```

### Option 3: Manual JavaScript Injection (Temporary)

Until you rebuild, you can manually add this to your browser console on product pages:

```javascript
// Paste this in browser console on product detail page
(async function() {
    const productId = window.location.pathname.split('/').pop();
    const response = await fetch(`https://skyarts.ddns.net/api/shop/product/${productId}/variants`);
    const variants = await response.json();
    
    const actionsDiv = document.querySelector('.actions');
    if (!actionsDiv || !variants || variants.length === 0) return;
    
    const html = `
        <div class="product-variants" style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #eee;">
            <h4 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 0.75rem;">
                Color: <span id="selectedVariantName" style="color: #6B4E9B;">Choose a color</span>
            </h4>
            <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
                ${variants.map((v, i) => `
                    <div onclick="selectVariant(${i})" style="cursor: pointer; text-align: center;">
                        <div style="width: 40px; height: 40px; border-radius: 50%; background: ${v.ColorHex}; 
                                    border: 3px solid white; box-shadow: 0 0 0 2px #ddd; transition: all 0.2s;"></div>
                        <span style="font-size: 0.7rem; color: #666; margin-top: 0.25rem; display: block;">${v.ColorName}</span>
                    </div>
                `).join('')}
            </div>
        </div>
    `;
    
    actionsDiv.insertAdjacentHTML('beforebegin', html);
    
    window.selectVariant = (i) => {
        document.getElementById('selectedVariantName').textContent = variants[i].ColorName;
        document.querySelectorAll('.product-variants > div > div > div').forEach((el, j) => {
            el.style.boxShadow = i === j ? 
                `0 0 0 2px ${variants[i].ColorHex}, 0 0 8px ${variants[i].ColorHex}` : 
                '0 0 0 2px #ddd';
        });
    };
})();
```

## Files Created

1. `/var/www/SkyArtShop/wwwroot/assets/js/product-variants.js`
2. `/var/www/SkyArtShop/bin/Release/net8.0/wwwroot/assets/js/product-variants.js`

## What Was Fixed

✅ Added `variants` column to products table
✅ Products can now store variant data (color, price, images, stock)
✅ Created frontend JavaScript to display color swatches
✅ Ready for integration once application is rebuilt

## Next Steps

1. **Access your source code** (where you build the application)
2. **Add the script tag** to your product detail view
3. **Rebuild the application**: `dotnet publish -c Release`
4. **Redeploy** to the server
5. **Test** the color variant selector on product pages

## Variant Data Structure

Your variants are stored as JSON in the database:

```json
[
  {
    "SKU": "",
    "Images": ["https://skyarts.ddns.net/uploads/images/ea409f0b-aacb-4df2-9b80-46ff4ab95efc.jpg"],
    "ColorHex": "#00538a",
    "ColorName": "Ocean Blue",
    "IsAvailable": true,
    "StockQuantity": 1,
    "PriceAdjustment": 10
  }
]
```

## Support

If you need help rebuilding the application or adding these changes,
let me know and I can guide you through the process!

