How to display a ForeignKey as RadioSelect options from DetailView in Django?

Question

I'm learning how to program in python/django and I've challenged myself to build an ecommerce site for a printing business. The general idea follows:

Once the customer chooses a product, he will have to select from a set of options(Size, Frame-Border Width, Material) in order to customize his product. Something worth mentioning is that each option has characteristics that distinguish it from the others. For example: Each size has a width and a height wich are attributes not required for a Material. Then he will upload an image (but I ain't there yet) and the store will process his order.

Therefore, I've chosen to design the models.py as follow (simplified):

class Product(models.Model):
    title = models.CharField(max_length = 150)
    slug = models.SlugField(max_length = 150)
    base_price = models.DecimalField(max_digits = 12, decimal_places = 2, default=0.00)

    class Meta:
        verbose_name = ('Product')
        verbose_name_plural = ('Products')

    #Methods. There is a method for each option.
    def get_materials(self):
        materials = self.materials.all()
        return materials

#There is a model for each option. Each model has a ForeignKey to Product.
class Material(models.Model):
    product = models.ForeignKey(Product, verbose_name = "Product", related_name="materials")
    name = models.CharField(max_length = 150)
    code = models.SlugField(max_length=150)
    price_per_meter = models.DecimalField(max_digits = 12, decimal_places = 2, blank = True, default = 0.00)
    created_at = models.DateTimeField(auto_now_add = True)

    class Meta:
        ordering = ["-created_at"]
        verbose_name_plural = "Materials"

To simplify things I'm using DetailView. So in my catalogue.urls.py:

from django.conf.urls import patterns, include, url
from django.views.generic import DetailView
from catalogue.models import Product

urlpatterns = patterns('',
    url(r'^(?P<pk>\d+)/$', DetailView.as_view(
        model = Product,
        template_name = "detail.html"
        )),
)

So, here is the question finally:

How can I customize my DetailView so that in the UI each option displays as RadioSelect?

Similar questions have been posted, but they are more related to forms: i.e. how to display a ForeignKey as a RadioSelect in a form.

My current approach uses the following detail.html

{% extends "base.html" %}

{% block content %}

<h1>{{ product.title }}</h1>

<h2>Please select one of the following:</h2>
<p>{{ product.get_materials }}</p>
<p>{{ product.get_sizes }}</p>
<p>{{ product.get_border_width }}</p>
<p>{{ product.get_border_color }}</p>

{% endblock %}

That renders the following: I added some random data to the db

Please select one of the following:

[<Material: Material 1>, <Material: Material 2>]

[<Size: Size 1>, <Size: Size 2>]

[<BorderWidth: Border 1>, <BorderWidth: Border 2>]

[<BorderColor: Color 1>, <BorderColor: Color 1>]

Any help/pin-pointing in the right direction will be appreciated.

Answer 1

In short, a DetailView is for displaying data. Given that you're asking the user questions ("Which materials?", "Which sizes?" etc.), you'll almost certainly really do want to use forms. This is what forms are designed for!

In order for the following to work, I suggest you reverse how your ForeignKeys are defined; I assume you want the same material used in multiple products, not the other way 'round! Add a field like material = models.ForeignKey(Material, related_name='products') to your Product, and delete the product field from Material etc.

Using forms might end up being pretty easy in your situation. Check out the "Creating forms from models" documentation, and try something like the following:

# urls.py
from django.views.generic import CreateView

urlpatterns = patterns('', ...
    url(r'^(?P<pk>\d+)/$', CreateView.as_view(
        model = Product,
        template_name = "add_product.html"
    )),
)

This would get you the default Select widget -- the "Creating forms from models" documentaiton (above) has information on customising the widget used to draw form fields. You would need to create a new form (inheriting from ModelForm) and point your view at that form:

# forms.py
from django import forms

from catalogue.models import Product

class ProductForm(forms.ModelForms):
    class Meta:
        model = Product 
        widgets = {
            'material': forms.RadioSelect()
            ...
        }

# urls.py

from catalogue.forms import ProductForm

# add the following parameter to your call to as_view():
...
    'form_class': ProductForm