Add product variants API, deployment scripts, and documentation
- 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
This commit is contained in:
151
COLOR-VARIANT-SOLUTION.md
Normal file
151
COLOR-VARIANT-SOLUTION.md
Normal file
@@ -0,0 +1,151 @@
|
||||
# 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!
|
||||
|
||||
Reference in New Issue
Block a user