Добавление динамических цветных коробок с django

Я пытаюсь управлять несколькими цветовыми вариантами для одного продукта с помощью Django framework. Я могу добавить один цвет на продукт, но не могу добавить несколько для одного продукта. Моя модель следующая, и я использую приложение «django_colorfield» для него.

from django.db import models
from colorfield.fields import ColorField

class Product(models.Model):
    title = models.CharField(max_length=120)
    description = models.TextField(blank=True, null=True)
    image = models.ImageField(upload_to='products/')
    color = ColorField(default='#FF0000')
    price = models.DecimalField(decimal_places=2, max_digits=20)
    active = models.BooleanField(default=True)

    def __unicode__(self):
        return self.title

В моем детальном представлении я использую его как это в шаблоне, чтобы получить цветные круги:

{% extends 'base.html' %}
{% block body %}
<div class="container">
        <h1>{{ object.title }}</h1>
        <hr />
        <p>{{ object.description }}</p>
        <img src="{{ object.image.url }}"/>
        <div class="color" style="color: {{ object.color }}; background-color: {{ object.color }}; cursor:pointer; margin: 0; width: 15px; height: 15px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;">.</div>
        <h4>{{ object.price }}</h4>
</div>
{% endblock body %}

Пожалуйста посоветуйте как мочь добавить множественные цветы для одиночного продукта. Нужно ли создавать отдельный класс для color. Если да, то как связать его с продуктом, например, с помощью manytomany или foreignkey? Я новичок, поэтому, пожалуйста, посоветуйте.

1 ответ

  1. Создание модели color_product

    class color_product(models.Model):
        product = models.ForeignKey(Product, on_delete=models.CASCADE)
        color = ColorField(default='#FF0000')
    

    В шаблонах

    {% extends 'base.html' %}
    {% block body %}
    <div class="container">
            <h1>{{ object.title }}</h1>
            <hr />
            <p>{{ object.description }}</p>
            <img src="{{ object.image.url }}"/>
    
            {% if object.color_product_set.all %}
                {% for c in object.color_product_set.all %}
                    <div class="color" style="color: {{ c.color }}; background-color: {{ c.color }}; cursor:pointer; margin: 0; width: 15px; height: 15px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;">.</div>
                {% endfor %}
            {% endif %}
    
            <h4>{{ object.price }}</h4>
    </div>
    {% endblock body %}