python - Django: How to dynamically update stock quantity when selecting a product variation? - Stack Overflow

admin管理员组

文章数量:1401491

I am working on an e-commerce project where a product has multiple variations (like different colors, sizes, etc.), and each variation has its own stock. When a user selects a variation, I want to update the displayed stock dynamically, but it is not working correctly.

Here’s my ProductStock model:

class ProductStock(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE, related_name="stocks")
    variation = models.ForeignKey(Variation, on_delete=models.CASCADE, blank=True, null=True)
    uploaded_stock_quantity = models.PositiveIntegerField(default=0)
    stock_quantity = models.PositiveIntegerField(default=0)
    reserved_stock = models.PositiveIntegerField(default=0)  # For pending orders

    def available_stock(self):
        return self.stock_quantity - self.reserved_stock

In my HTML template, I display variations as radio buttons:

{% for v in variations %}
    <div class="variation__radio">
        <input type="radio" id="variation_{{ v.id }}" name="variation" 
               onclick="updateStock(this);" value="{{ v.id }}">
        <label for="variation_{{ v.id }}">{{ v.name }}</label>
    </div>
{% endfor %}

<div class="stock-info">
    <span id="uploaded-stock">-</span> in stock, <span id="remaining-stock">-</span> left
</div>

And my JavaScript function to update stock dynamically:

function updateStock(element) {
    var variationId = element.value;
    var stockData = JSON.parse('{{ size_stock_data|safe }}');  // Pass stock data

    if (stockData[variationId]) {
        document.getElementById("uploaded-stock").textContent = stockData[variationId].uploaded_stock_quantity;
        document.getElementById("remaining-stock").textContent = stockData[variationId].stock_quantity;
    } else {
        document.getElementById("uploaded-stock").textContent = "-";
        document.getElementById("remaining-stock").textContent = "-";
    }
}

Issue

• The stock does not update when selecting a variation.
• Sometimes, it shows incorrect values or does not change at all.

I am working on an e-commerce project where a product has multiple variations (like different colors, sizes, etc.), and each variation has its own stock. When a user selects a variation, I want to update the displayed stock dynamically, but it is not working correctly.

Here’s my ProductStock model:

class ProductStock(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE, related_name="stocks")
    variation = models.ForeignKey(Variation, on_delete=models.CASCADE, blank=True, null=True)
    uploaded_stock_quantity = models.PositiveIntegerField(default=0)
    stock_quantity = models.PositiveIntegerField(default=0)
    reserved_stock = models.PositiveIntegerField(default=0)  # For pending orders

    def available_stock(self):
        return self.stock_quantity - self.reserved_stock

In my HTML template, I display variations as radio buttons:

{% for v in variations %}
    <div class="variation__radio">
        <input type="radio" id="variation_{{ v.id }}" name="variation" 
               onclick="updateStock(this);" value="{{ v.id }}">
        <label for="variation_{{ v.id }}">{{ v.name }}</label>
    </div>
{% endfor %}

<div class="stock-info">
    <span id="uploaded-stock">-</span> in stock, <span id="remaining-stock">-</span> left
</div>

And my JavaScript function to update stock dynamically:

function updateStock(element) {
    var variationId = element.value;
    var stockData = JSON.parse('{{ size_stock_data|safe }}');  // Pass stock data

    if (stockData[variationId]) {
        document.getElementById("uploaded-stock").textContent = stockData[variationId].uploaded_stock_quantity;
        document.getElementById("remaining-stock").textContent = stockData[variationId].stock_quantity;
    } else {
        document.getElementById("uploaded-stock").textContent = "-";
        document.getElementById("remaining-stock").textContent = "-";
    }
}

Issue

• The stock does not update when selecting a variation.
• Sometimes, it shows incorrect values or does not change at all.

• python
• django

Share Improve this question Follow asked Mar 23 at 6:45 Google UserGoogle User 17511 silver badge88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The issue occurs because the stock data is not being passed correctly to JavaScript, and the updateStock function does not have access to real-time stock data.

Step 1: Pass Stock Data as JSON in Django View

In my Django view, I need to fetch the product stock, convert it to a JSON object, and send it to the template.

import json

def product_variant_detail_view(request, pid):
    product = Product.objects.get(pid=pid)
    product_stocks = ProductStock.objects.filter(product=product)

    # Prepare stock data for JavaScript
    size_stock_data = {
        str(stock.variation.id): {
            'stock_quantity': stock.stock_quantity,
            'uploaded_stock_quantity': stock.uploaded_stock_quantity
        }
        for stock in product_stocks if stock.variation
    }

    context = {
        "product": product,
        "size_stock_data": json.dumps(size_stock_data),  # Convert to JSON
    }
    
    return render(request, "core/product_variant_detail.html", context)

Explanation

• I query the ProductStock model to get all stocks related to the product.
• I convert the stock data into a JSON format (size_stock_data) to be passed to JavaScript.
• This ensures that each variation has the correct stock data when accessed in the frontend.

---

Step 2: Embed Stock Data in JavaScript

In my HTML template, I include this inside the <script> tag:

<script>
    var stockData = JSON.parse('{{ size_stock_data|safe }}');
</script>

Explanation

• This makes the stock data available in JavaScript.
• stockData now contains a dictionary where each variation ID maps to its stock information.

---

Step 3: Update JavaScript to Use the Correct Data

Modify my updateStock function:

function updateStock(element) {
    var variationId = element.value;  // Get selected variation ID

    if (stockData[variationId]) {
        document.getElementById("uploaded-stock").textContent = stockData[variationId].uploaded_stock_quantity + " in stock";
        document.getElementById("remaining-stock").textContent = stockData[variationId].stock_quantity + " left";
    } else {
        document.getElementById("uploaded-stock").textContent = "0 in stock";
        document.getElementById("remaining-stock").textContent = "0 left";
    }
}

Explanation

• When a user clicks on a variation, this function is called.
• It fetches the stock data for the selected variation.
• It updates the stock display dynamically.

---

Final Outcome

Stock updates dynamically when a variation is selected.
No need for page refresh to show updated stock.
Correct values are displayed for each variation.

本文标签： pythonDjango How to dynamically update stock quantity when selecting a product variationStack Overflow