Django-filter ModelMultipleChoiceFilter with Preview

I'm honing my django skills by writing my own e-commerce web application from scratch and I want to let users see a preview for the product colors in the color filters.

Here is what I currently have, which works perfectly:

enter image description here

What I'm trying to achieve is this:

enter image description here

My filters.py file:

import django_filters

from .models import Product,ProductColor



class ProductFilter(django_filters.FilterSet):
    title = django_filters.CharFilter(lookup_expr='iexact')

    price_sale = django_filters.NumberFilter()
    price_regular= django_filters.NumberFilter()
    
    release_year = django_filters.NumberFilter(field_name='date_added', lookup_expr='year')
    
    release_year__gt = django_filters.NumberFilter(field_name='date_added', lookup_expr='year__gt')
    release_year__lt = django_filters.NumberFilter(field_name='date_added', lookup_expr='year__lt')

    chogoyo = ProductColor.objects.all()



    def colors(request):
        
        return ProductColor.objects.all()


    product_color = django_filters.filters.ModelMultipleChoiceFilter(queryset=colors)

    class Meta:
        model = Product
        fields = ['price_sale','price_regular', 'date_added','product_color']

What would be the best approach to accomplish this?

Thank you in advance.

Back to Top