Kristen Hercules
4a8efe17bb
- Add Node.js variant-api server with PostgreSQL integration - Add new utility scripts for system verification and website status - Update CI/CD workflow configuration - Add color variant solution documentation - Add product variants JavaScript support - Update gitignore for new build artifacts
152 lines
4.9 KiB
Markdown
152 lines
4.9 KiB
Markdown
# 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!
|
|
|