Проблема отображения всех цветов варианта продукта в шаблоне Django

Я работаю над Django-приложением, в котором у меня есть модель Product с отношениями «многие-ко-многим» с моделью Color. Я хочу отобразить все цвета, связанные с вариантом товара, на странице его подробного описания. Однако когда я нажимаю на определенный цвет (например, белый), на странице отображается только этот цвет, а не все доступные цвета для данного варианта товара.

Вот соответствующий код:

Модели: 

class Color(models.Model):
    code = models.CharField(max_length=7)  # Hex color code
    image = models.ImageField(upload_to='colors/')  # Image field for color representation
    product_varients = models.ManyToManyField('Product', related_name='color_variants', blank=True)

class Product(models.Model):
    pid = ShortUUIDField(length=10, max_length=100, prefix="prd", alphabet="abcdef")
    user = models.ForeignKey(CustomUser , on_delete=models.SET_NULL, null=True)
    category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, related_name="category")
    color = models.ManyToManyField(Color, blank=True)

Функция просмотра:

Код шаблона:

{% if colors %}
    {% for c in colors %}
        <div class="color__radio">
            <input type="radio" id="color_{{ c.id }}" name="color" 
                   data-image-url="{{ c.image.url }}" 
                   class="color-input" 
                   data-url="{% url 'core:product_varient_detail' c.product_varients.first.pid %}?color={{ c.coid }}">
            <label class="color__radio-label" 
                   for="color_{{ c.id }}" 
                   style="background-color: {{ c.code }};"></label>
        </div>
    {% endfor %}
{% endif %}

{% if linked_colors %}
    <h3>Linked Product Colors</h3>
    {% for c in linked_colors %}
        <div class="color__radio">
            <input type="radio" id="linked_color_{{ c.id }}" name="linked_color" 
                   data-image-url="{{ c.image.url }}" 
                   class="color-input" 
                   data-url="{% url 'core:product_varient_detail' c.product_varients.first.pid %}?color={{ c.coid }}">
            <label class="color__radio-label" 
                   for="linked_color_{{ c.id }}" 
                   style="background-color: {{ c.code }};"></label>
        </div>
    {% endfor %}
{% endif %}


The issue I'm facing is that when I click on a specific color, the page only shows that color instead of all available colors for the product variant. How can I modify my code to ensure that all colors are displayed on the product variant detail page, regardless of which color I click on?

Чтобы обеспечить отображение всех цветов для варианта товара, необходимо настроить логику, которая фильтрует товары на основе выбранного цвета. В настоящее время при нажатии на цвет происходит перенаправление на вариант товара, связанный с этим цветом, что ограничивает отображаемые цвета только теми, которые связаны с выбранным вариантом цвета.

Вот модифицированный фрагмент кода. (Вы можете добавить свою собственную логику)

def product_varient_detail_view(request, pid):  
    try:  
        product_variant = Product.objects.get(pid=pid)  
    except Product.DoesNotExist:  
        return render(request, "core/error_page.html")  

    wishlist = wishlist_model.objects.filter(user=request.user) if request.user.is_authenticated else None  
    sub_category = SubCategory.objects.all()  
    categories = Category.objects.prefetch_related('subcategories').order_by('?')[:4]  
    nav_category = Category.objects.filter(special_category=True).prefetch_related('subcategories').order_by('?')[:4]  
    
    colors = product_variant.color_variants.all()

    selected_color = None
    if request.GET.get('color'):
        color_id = request.GET.get('color')
        selected_color = Color.objects.get(pk=color_id)
    
    sizes = product_variant.size.filter(product=product_variant)  
    p_image = product_variant.p_images.filter(product=product_variant)  

    reviews = ProductReview.objects.filter(product=product_variant)  
    review_count = reviews.count()  
    average_rating = ProductReview.objects.filter(product=product_variant).aggregate(rating=Avg('rating'))  

    review_form = ProductReviewForm()  

    context = {  
        "p": product_variant,  
        "w": wishlist,  
        "p_image": p_image,  
        "sub_category": sub_category,  
        "categories": categories,  
        "nav_category": nav_category,  
        'colors': colors,  
        'selected_color': selected_color,  # Add selected color to context
        'sizes': sizes,  
        'reviews': reviews,  
        'review_count': review_count,  
        'average_rating': average_rating,  
        'review_form': review_form,  
    }  
    
    return render(request, "core/product_varient_detail.html", context)

Это измененный шаблон.

{% if colors %}
    {% for c in colors %}
        <div class="color__radio">
            <input type="radio" id="color_{{ c.id }}" name="color" 
                   data-image-url="{{ c.image.url }}" 
                   class="color-input" 
                   data-url="{% url 'core:product_varient_detail' product_variant.pid %}?color={{ c.id }}"
                   {% if selected_color and selected_color.id == c.id %}checked{% endif %}>
            <label class="color__radio-label" 
                   for="color_{{ c.id }}" 
                   style="background-color: {{ c.code }};"></label>
        </div>
    {% endfor %}
{% endif %}
Вернуться на верх