# 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
```
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 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 = `
Color: Choose a color
${variants.map((v, i) => `
${v.ColorName}
`).join('')}
`;
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!