Устранение проблем с динамическим обновлением изображений и фильтрацией по цвету в Django Product Page

Я создал гиперссылку в html So, В product_detail_page.html:

<div class="product-color">
            <span>Color</span>
            {%  for c in colors  %}

            <div class="color-choose">
              <a href="?colorID={{c.id}}" style="display: inline-block; width: 40px; height: 40px; background-color: {{c.code}}; border-radius: 50%; border: 2px solid #FFFFFF; cursor: pointer; float: left; margin-right: 10px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);">
              </a>
            </div>
            {%  endfor  %}

          </div>

Теперь он принимает идентификатор цвета (допустим, если я нажму на красный цвет, он примет {?colorID=1} в url)

Теперь я создал представление для этого , чтобы при нажатии на цвет оно изменяло изображение товара. Итак, В views.py

def product_detail_view(request,pid):
    product=Product.objects.get(pid=pid)
    colors = Color.objects.all()
    sizes= Size.objects.all()
    p_image=product.p_images.all()
    products=Product.objects.filter(cagtegory=product.cagtegory)
    ColorID=request.GET.get('colorID')
    if ColorID:
        product=Product.objects.filter(color=ColorID)
    else:
        product=Product.objects.all()

    context={
        "p":product,
        "p_image":p_image,
        'colors': colors,
        'sizes': sizes,
        'products': products,
    }

    return render(request,"core/product_detail.html",context)

и я создал эти модели in models.py

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)
    cagtegory=models.ForeignKey(Category, on_delete=models.SET_NULL ,null=True,related_name="category")
    vendor=models.ForeignKey(Vendor, on_delete=models.SET_NULL,null=True,related_name="product")
    color=models.ManyToManyField(Color,blank=True)
    size=models.ManyToManyField(Size,blank=True)


    title=models.CharField(max_length=100,default="Apple")
    image=models.ImageField(upload_to=user_directory_path,default="product.jpg")
    description=models.TextField(null=True, blank=True,default="This is a product")

    price = models.DecimalField(max_digits=10, decimal_places=2, default=1.99)
    old_price = models.DecimalField(max_digits=10, decimal_places=2, default=2.99)

    specifications=models.TextField(null=True, blank=True)

    product_status=models.CharField(choices=STATUS, max_length=10,default="In_review")


    status=models.BooleanField(default=True)
    in_stock=models.BooleanField(default=True)
    featured=models.BooleanField(default=False)
    digital=models.BooleanField(default=False)

    sku=ShortUUIDField(length=10,max_length=100,prefix="sku",alphabet="abcdef")

    date=models.DateTimeField(auto_now_add=True)
    updated=models.DateTimeField(null=True,blank=True)

    class Meta:
        verbose_name_plural="Products"

    def product_image(self):
        return mark_safe('<img src="%s" width="50" height="50"/>'%(self.image.url))

    def __str__(self):
        return self.title
    def get_percentage(self):
        new_price=((self.old_price-self.price)/self.old_price)*100
        return new_price

class ProductImages(models.Model):
    images=models.ImageField(upload_to="product-image",default="product.jpg")
    product=models.ForeignKey(Product,related_name="p_images" ,on_delete=models.SET_NULL ,null=True)
    color = models.ForeignKey(Color, on_delete=models.CASCADE)
    date=models.DateTimeField(auto_now_add=True)

    class Meta:
        verbose_name_plural="Product Images"

Я создал эти две модели. Но она не работает, то есть не меняет цвет в соответствии с ColorID. Пожалуйста, помогите мне!!!

         <div class="color-choose">
              <div>
                <input data-image="red" type="radio" id="red" name="color" value="red" checked>
                <label for="red"><span></span></label>
              </div>
              <div>
                <input data-image="blue" type="radio" id="blue" name="color" value="blue">
                <label for="blue"><span></span></label>
              </div>
              <div>
                <input data-image="black" type="radio" id="black" name="color" value="black">
                <label for="black"><span></span></label>
              </div>
            </div>