I’m working on adding product variations to my website. However, I’m encountering a problem where the drop-down menu is showing product names instead of sizes. My application already filters products by categories, but I need to ensure that the product sizes are displayed correctly on the product detail page.

models.py

from django.db import models
from category.models import Category
from django.urls import reverse

class Product (models.Model):
    product_name = models.CharField(max_length=100,unique=True)
    slug  = models.SlugField(max_length=100,unique=True)
    description = models.CharField(max_length=1000,unique=True)
    price = models.IntegerField()
    images = models.ImageField(upload_to='photos/products')
    stock = models.IntegerField()
    is_avilable = models.BooleanField(default=True)
    category = models.ForeignKey(Category,on_delete=models.CASCADE)
    created_date = models.DateTimeField(auto_now=True)
    modified_date = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.product_name
    
    def get_url(self):
        return reverse('product_detail',args=[self.category.slug, self.slug])



class VariationManager(models.Manager):
    def colors(self):
        return super(VariationManager, self).filter(variation_category='color', is_active=True)

    def sizes(self):
        return super(VariationManager, self).filter(variation_category='size', is_active=True)




variation_category_choice = (
    ('color', 'color'),
    ('size', 'size'),
)


class Variation(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    variation_category  = models.CharField(max_length=20, choices= variation_category_choice)
    variation_value = models.CharField(max_length=100)
    is_active = models.BooleanField(default=True)
    created_date =models.DateTimeField(auto_now=True)

    objects = VariationManager()

    def __str__(self):
        return self.variation_value

product-details.html

{% extends "base.html" %}
{% load static %}


{%block content%}


<section class="section-content padding-y bg">
<div class="container">

<!-- ============================ COMPONENT 1 ================================= -->
<div class="card">
    <div class="row no-gutters">
        <aside class="col-md-6">
<article class="gallery-wrap"> 
    <div class="img-big-wrap">
       <a href="#"><img src="{{ single_product.images.url }}"></a>
    </div> <!-- img-big-wrap.// -->
    
</article> <!-- gallery-wrap .end// -->
        </aside>
        <main class="col-md-6 border-left">



<form action="{% url 'add_cart' single_product.id %}" method="GET"> 

      
    <article class="content-body">

    <h2 class="title">{{single_product.product_name}}</h2>

    <div class="mb-3"> 
        <var class="price h4">{{single_product.price}} BDT</var> 
    </div> 

    <p>{{single_product.description}}</p>


    <hr>
        <div class="row">
            <div class="item-option-select">

                <h6>Choose Color</h6>

                <select name="color" class="form-control" required>
                    <option value="" disabled selected>Select</option>

                    {% for i in single_product.variation_set.all %}
                    <option value="{{ i.variation_value  }}">{{ i.variation_value  }}</option>

                    {% endfor %}
                
                </select>
            </div>

        </div> <!-- row.// -->
        <div class="row">
            <div class="item-option-select">
                <h6>Select Size</h6>
                    <select name="size" class="form-control">
                            <option value="" disabled selected>Select</option>

                    {% if single_product.variation_set.all %}
                        {% for i in single_product.variation_set.all %}
                            <option value="{{ i.variation_value | lower }}">{{ i.variation_value | capfirst }}</option>
                        {% endfor %}
                    {%endif%}
                    </select>
            </div>
        </div> <!-- row.// -->
        
        <hr>



        {% if single_product.stock <= 0 %}
            <h5>Out of stock </h5>
            
        {% else %}
            {% if in_cart%}
                <a class="btn  btn-success"> <span class="text"> Added to Cart</span> <i class="fas fa-check"></i>  </a>
                <a href="{% url 'cart'%}" class="btn  btn-outline-primary"> <span class="text">View Cart</span> <i class="fas fa-eye"></i>  </a>

            {% else %}
                <button type="submit" class="btn  btn-primary"> <span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>  </button>
            {% endif %}
        {% endif %}

    </article> <!-- product-info-aside .// -->
</form>     
        </main> <!-- col.// -->
    </div> <!-- row.// -->
</div> <!-- card.// -->
<!-- ============================ COMPONENT 1 END .// ================================= -->

<br>

<div class="row">
            <div class="col-md-9">

    <header class="section-heading">
        <h3>Customer Reviews </h3>  
        
    </header>

    <article class="box mb-3">
        <div class="icontext w-100">
            <img src="./images/avatars/avatar1.jpg" class="img-xs icon rounded-circle">
            <div class="text">
                <span class="date text-muted float-md-right">24.04.2020 </span>  
                <h6 class="mb-1">Mike John </h6>
                
            </div>
        </div> <!-- icontext.// -->
        <div class="mt-3">
            <p>
                Dummy comment Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip
            </p>    
        </div>
    </article>

    
<!-- ========================= SECTION CONTENT END// ========================= -->

</body>
</html>
    </div> <!-- col.// -->
</div> <!-- row.// -->


</div> <!-- container .//  -->
</section>


{% endblock %}

project

soluations please