SilverLABS/littleshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Add Price field to variant collection editor

Browse Source 
Added Price override input field to the JavaScript variant collection editor on the product Edit page.

**Changes:**
- Added Price input field (with £ symbol) in variant details section
- Updated serialization to save Price to VariantsJson
- Excluded Price from variant label generation
- Updated button text: "Price, Stock & Weight Details"

**Location:**
Product Edit > Variants Collection > Toggle Details > Price Override

Now variant prices can be set through BOTH methods:
1. Individual variant management (CreateVariant/EditVariant)
2. Bulk variant collection editor (product Edit page)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
SysAdmin 2025-10-03 18:45:13 +01:00
parent d9efababa6
commit 8385612bcd
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
LittleShop/wwwroot/js/product-variants.js
View File

@ -331,7 +331,7 @@ class ProductVariantsManager {
}).join(''); }).join('');
const variantLabel = Object.entries(variantData) const variantLabel = Object.entries(variantData)
.filter(([k, v]) => v !== null && k !== 'Label' && k !== 'StockQty' && k !== 'Weight' && k !== 'WeightUnit') .filter(([k, v]) => v !== null && k !== 'Label' && k !== 'Price' && k !== 'StockQty' && k !== 'Weight' && k !== 'WeightUnit')
.map(([k, v]) => v) .map(([k, v]) => v)
.join(' / '); .join(' / ');
@ -369,12 +369,21 @@ class ProductVariantsManager {
<div class="mt-2"> <div class="mt-2">
<button type="button" class="btn btn-sm btn-outline-secondary toggle-variant-details" data-row="${index}"> <button type="button" class="btn btn-sm btn-outline-secondary toggle-variant-details" data-row="${index}">
<i class="fas fa-chevron-down"></i> Stock & Weight Details <i class="fas fa-chevron-down"></i> Price, Stock & Weight Details
</button> </button>
</div> </div>
<div class="variant-details-section mt-2" data-row="${index}" style="display: none;"> <div class="variant-details-section mt-2" data-row="${index}" style="display: none;">
<div class="row"> <div class="row">
<div class="col-md-4 mb-2">
<label class="form-label small">Price Override <small class="text-muted">(optional)</small></label>
<div class="input-group input-group-sm">
<span class="input-group-text">£</span>
<input type="number" step="0.01" min="0.01" class="form-control form-control-sm variant-price"
data-row="${index}" value="${variantData.Price || ''}" placeholder="Override price" />
</div>
<small class="form-text text-muted">Leave blank to use product price</small>
</div>
<div class="col-md-4 mb-2"> <div class="col-md-4 mb-2">
<label class="form-label small">Stock Quantity <small class="text-muted">(optional)</small></label> <label class="form-label small">Stock Quantity <small class="text-muted">(optional)</small></label>
<input type="number" min="0" class="form-control form-control-sm variant-stock" <input type="number" min="0" class="form-control form-control-sm variant-stock"
@ -475,6 +484,12 @@ class ProductVariantsManager {
hasValues = true; hasValues = true;
} }
const priceInput = row.querySelector('.variant-price');
if (priceInput && priceInput.value.trim()) {
variantData['Price'] = parseFloat(priceInput.value.trim());
hasValues = true;
}
const stockInput = row.querySelector('.variant-stock'); const stockInput = row.querySelector('.variant-stock');
if (stockInput && stockInput.value.trim()) { if (stockInput && stockInput.value.trim()) {
variantData['StockQty'] = parseInt(stockInput.value.trim()); variantData['StockQty'] = parseInt(stockInput.value.trim());