Problem Description:
I’m working on a Django project where a product can have multiple size variants, and each size has its own stock quantity. I want to display the stock information dynamically when a user selects a size using JavaScript.
However, the stock information is not updating as expected. It always shows undefined in stock or Only undefined left, even though I can see the correct stock data in the browser console.
Models:
class Size(models.Model):
name = models.CharField(max_length=50)
class Product(models.Model):
title = models.CharField(max_length=255)
class ProductStock(models.Model):
product = models.ForeignKey(Product, on_delete=models.CASCADE, related_name="stocks")
size = models.ForeignKey(Size, on_delete=models.CASCADE, blank=True, null=True)
uploded_stock_quantity = models.PositiveIntegerField(default=0)
stock_quantity = models.PositiveIntegerField(default=0)
reserved_stock = models.PositiveIntegerField(default=0)
def available_stock(self):
return self.stock_quantity - self.reserved_stock
Views:
from django.shortcuts import render, get_object_or_404
def product_detail_view(request, pid):
product = get_object_or_404(Product, pid=pid)
sizes = product.size.filter(product=product)
product_stocks = ProductStock.objects.filter(product=product)
size_stock_data = {
str(stock.size.id): {
'stock_quantity': stock.stock_quantity,
'uploaded_stock_quantity': stock.uploded_stock_quantity
}
for stock in product_stocks
}
return render(request, 'core/product_detail.html', {
'product': product,
'sizes': sizes,
'size_stock_data': size_stock_data
})
Template:
{{ size_stock_data|safe|json_script:"size-stock-data" }}
<div class="u-s-m-b-15">
<div class="pd-detail__inline">
<span class="pd-detail__stock" id="uploaded-stock">-</span>
<span class="pd-detail__left" id="remaining-stock">-</span>
</div>
</div>
{% if sizes %}
<div class="u-s-m-b-15">
<span class="pd-detail__label u-s-m-b-8">Size:</span>
<div class="pd-detail__size">
{% for s in sizes %}
<div class="size__radio">
<input type="radio" id="size_{{ s.id }}" name="size" value="{{ s.id }}" onclick="updateStock(this)" {% if forloop.first %}checked{% endif %}>
<label class="size__radio-label" for="size_{{ s.id }}">{{ s.name }}</label>
</div>
{% endfor %}
</div>
</div>
{% endif %}
JavaScript:
function updateStock(element) {
const sizeId = element.value;
const stockDataElement = document.getElementById('size-stock-data');
if (!stockDataElement) {
console.error("Stock data not found!");
return;
}
try {
const stockData = JSON.parse(stockDataElement.textContent);
console.log("Parsed Stock Data:", stockData);
console.log("Selected Size ID:", sizeId);
if (stockData[sizeId]) {
const uploadedStock = stockData[sizeId].uploaded_stock_quantity;
const stockQuantity = stockData[sizeId].stock_quantity;
document.getElementById('uploaded-stock').innerText = `${uploadedStock} in stock`;
document.getElementById('remaining-stock').innerText = `Only ${stockQuantity} left`;
} else {
console.error("No stock data available for size:", sizeId);
}
} catch (error) {
console.error("Error parsing stock data:", error);
}
}
// Trigger for initially selected size
document.addEventListener('DOMContentLoaded', function() {
const checkedSize = document.querySelector('input[name="size"]:checked');
if (checkedSize) {
updateStock(checkedSize);
}
});
Issue Faced:
undefined in stock or Only undefined left- The stock data is visible in the console using
console.log, but the values are not reflected in the HTML.
- No JavaScript errors in the console.
What I Tried:
- Confirmed
size_stock_data is correctly passed to the template.
- Verified
json_script using console.log(document.getElementById('size-stock-data').textContent).
- Confirmed HTML IDs are correct and not duplicated.
- Ensured the size IDs are properly rendered.
Expected Result:
- When a size is selected, it should update the stock details with the correct values like
100 in stock and Only 98 left.
How can I fix this issue? Any suggestions are appreciated!
