'Displaying variation.title (size option) in admin panel that were chosen by the user in HTML Template

In my project, there is a product.html page where the user can choose variations of the item and choose it. I don't know how to send the variant chosen by the user from a template (product.html) to admin panel.

models.py

Here is the models for OrderItem is where I want to send the value of a chosen size. Also, there is a Variation class for creating variants of the product.

class OrderItem(models.Model):
    product = models.ForeignKey(Product, on_delete=models.SET_NULL, null=True)
    order = models.ForeignKey(Order, on_delete=models.SET_NULL, null=True)
    quantity = models.IntegerField(default=0, null=True, blank=True)
    date_added = models.DateTimeField(auto_now_add=True)
    size = models.ForeignKey(Variation, on_delete=models.CASCADE, null=True, default=Variation.title)
    @property
    def get_total(self):
        total = self.product.price * self.quantity
        return total

    def __str__(self):
        return self.product.name

class Variation(models.Model):
    title = models.CharField(max_length=50)
    category = models.CharField(max_length=120, choices=VAR_CATEGORIES, default='size')
    price = models.DecimalField(null=True, blank=True, decimal_places=2, max_digits=100)
    product = models.ForeignKey(Product, on_delete=models.CASCADE)

    objects = VariationManager

    def __str__(self):
        return self.title

product.html

Here is the page for product detail for a chosen category. My drop down with sizes is here.

{% extends "store/main.html" %}



{% block content %}
{% load static %}

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title>undefined</title>
        <meta name="generator" content="Google Web Designer 14.0.4.1108">
        <style type="text/css" id="gwd-text-style">
            p {
                margin: 0px;
            }

            h1 {
                margin: 0px;
            }

            h2 {
                margin: 0px;
            }

            h3 {
                margin: 0px;
            }
        </style>
        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
            }

            body {
                background-color: transparent;
                transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform-style: preserve-3d;
            }

            .gwd-p-1gch {
                position: absolute;
                left: 170px;
                top: 150px;
                transform-origin: 50% 50% 0px;
                width: 608px;
                height: 754px;
            }

            .gwd-p-mo95 {
                position: absolute;
                width: 287.5px;
                height: 159px;
                left: 1069px;
                top: 176px;
            }

            .gwd-p-uzyv {
                position: absolute;
                top: 363px;
                width: 195px;
                height: 64px;
                left: 547px;
                transform-style: preserve-3d;
                transform: translate3d(568px, 36px, 0px) rotateZ(0.0363239deg);
            }
        </style>
    </head>

    <h3 class="htmlNoPages">
        <h2>{{ product.name }}

        </h2>
        <p class="gwd-p-1gch">
            <img data-image="black" src="{{ product.imageURL }}"
                 width="400"
                 height="500">
        </p>

        <p class="gwd-p-mo95">

            {{ product.description }}
        <div class="col-sm-4 pull-right">




                <!-- Product Configuration -->

</div>
    <div>
        <h1 style="padding-left:920px; padding-top: 400px;  font-family:sans-serif; ">
            <button data-product="{{ product.id }}" data-action="add"
                    class="btn btn-outline-secondary add-btn update-cart">ADD TO CART
            </button>
                              {% if product.variation_set.all %}
                  <select class="form-control" name="size">
                      {% for products in product.variation_set.all %}
                        <option value="{{ products }}">{{ products }}</option>
                      {% endfor %}
                  </select>
              {% endif %}


        </h1>


        </div>

        <p class="gwd-p-uzyv">
        <h1 style="padding-left:920px; padding-top: 20px; font-family:sans-serif; ">£ {{ product.price }}</h1>


        </p>

        </h3>
    </div>
    </html>


{% endblock %}

Full Code:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Displaying variation.title (size option) in admin panel that were chosen by the user in HTML Template

Sources

Related Questions