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):

<!-- 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:

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:

[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:

// 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

/var/www/SkyArtShop/wwwroot/assets/js/product-variants.js
/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

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

Variant Data Structure

Your variants are stored as JSON in the database:

[
  {
    "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!

4.9 KiB Raw Blame History