djangoでダイナミックカラーボックスを追加する

Question

Djangoフレームワークを使用して単一の製品に複数のカラーオプションを管理しようとしています。 1つの商品につき1つの色を追加できますが、1つの商品に複数の色を追加することはできません。私のモデルは次のとおりで、私はそれのためのアプリ '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 %} 

単一の製品に対して複数の色を追加することができるようにする方法教えてください。色のために別のクラスを作成する必要がありますか？もしそうなら、manytomanyやforeignkeyのようにProductと関連付ける方法は？私は初心者ですので、助言してください。

Answer 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 %} 

を作成します。