Need general Help With select option implementation

[FenX999]

Hi everyone!
I coding an Ecom project and most of the product detail are on separate tables,
to get the price by feature I decided to go with a select option tag on my template.
with JS, if my understanding is correct I should go with a listener that fetches the selected option and return the given price.
but I've failed to understand how to code the logic with Unicorn.

for context, I have a little more than a year of practice with python so without examples to rely on my understanding has hit a wall.
I choose to go with Unicorn because it goes along with my goal on this project wich are:
If python can do it "learn and code"

For now, this is where I'm at:
(all the logic to get the context work and is rendered on the template but I fail to transpose it within the component and build the logic for the "listener".)

product/views.py

from django.views.generic import TemplateView

class ProductDetailView(TemplateView): 
    template_name = "product/product-detail.html"

product/unicorn/component.py

from django_unicorn.components import UnicornView, QuerySetType

from django.db.models import Q
from django.http import HttpRequest as request

from navigation.models import *
from inventory.models import *

class ProductDetailView(UnicornView):
    pslug: str = ''
    obj: QuerySetType = Product.objects.none()
    detail: QuerySetType = ProductDetail.objects.none()
    finition: QuerySetType = ProductAttributeFinition.objects.none()
    size: QuerySetType = ProductAttributeSize.objects.none()
    price: QuerySetType = ProductDetailPrice.objects.none()

    def __init__(self, *args, **kwargs):
        super().__init__(**kwargs)
        self.pslug = kwargs.get("pslug")
        self.obj = kwargs.get("obj")
        self.detail = kwargs.get("detail")
        self.finition = kwargs.get("finition")
        self.size = kwargs.get("size")
        self.price = kwargs.get("price")
    


    def mount(self):
        self.pslug = request.get_full_path().split('/')[-2]
        # print(f'product-detail cslug => {pslug}')

        self.obj = Product.objects.filter(Q(slug = pslug))
        # print(f"product detail value data: {obj.image.url}")

        self.detail = ProductDetail.objects.filter(Q(SKU__startswith=obj.SKU))
        # print(f"product detail data: {detail}")

        try:
            self.finition = ProductAttributeFinition.objects.filter(Q(SKU_id__in=detail)).distinct('name')
            
        except:
            return None
        # print(f'dfinition detail :\n {finition}')
        try:
            self.size = ProductAttributeSize.objects.filter(Q(SKU_id__in=detail)).distinct('value')
            
        except:
            return None
        # print(f'detail-size :\n {size}')
        
        self.price = ProductDetailPrice.objects.filter(Q(SKU_id__in=detail))
        # print(f'detail-price :\n {price}')

        context = {
        'obj':self.obj,
        'finition':self.finition,
        'size':self.size,
        'price':self.price,
        }
        return context

template

{% extends 'base.html' %}
{% block content %}

<h1>Product Detail Page</h1>
<div>
    {% csrf_token %}
    <img src="{{obj.image.url}}"/>
    <p><span>{{obj.name}}</span></p>
    <p><span>{{obj.description}}</span></p>
    <p>
    {% if finition|length > 1 %}
    <label for="finition-choice">Choose a</label>
        <select id="finition-choice" name="finition-choice">
            <option  value="" selected="selected">--Finition--</option>
            {% for f in finition %}
            <option
                class = "color-selector" 
                value="{{f.SKU_id}}" 
                id = "finition-value">
                {{f.name}}
            </option>
            {% endfor %}
        </select>
        <br/>
        select_finition:{{select_finition}}
    {% endif %}
    </p>
    <p>
    {% if size|length > 1 %}
    <label for="size-choice">Choose a</label>
        <select id="size-choice" name="size-choice">
            <option  value="" selected="selected">--Size--</option>
            {% for s in size %}
            <option 
                value="{{s.SKU_id}}"
                id="size-value">
                {{s.value}}
            </option>
            {% endfor %}
        </select>
    {% endif %}
    </p>
        {% for i in price %}
    <p id="Price">{{i.public_price}}</p>
    {% endfor %}
</div>
{% endblock %}

[adamghill]

Hi, I assume you are trying to make a dropdown for finition? Something like this should work. unicorn will set select_finition to the selected value in the dropdown.

{% if finition|length > 1 %}
Choose a --Finition-- 
<select unicorn:model='select_finition'>
{% for f in finition %}
<option>{{f.name}}</option>
{% endfor %}
</select>

Make sure to also include select_finition as a class attribute of ProductDetailView. Here is a basic example of select. Hopefully that helps! Let me know if you run into any other issues.

[FenX999]

thank you for your reply in the meantime I've worked my way around ClassView and with your help, I should make some progress!

[FenX999]

hello!
I've made some progress but running on some issues ( i'll open another thread)

I've made the CBV work with multi-query on multi tables ( that was the first big problem )

with the help of the github repo for the django-unicorn website I've built some understanding of how to get the components module and templates right for a django app ( https://github.com/adamghill/django-unicorn.com )

now everything loads fine I've got the templates right and the component loads fine too ( as far as I can tell )

my code so far :

├── e_shop
│ ├── asgi.py
│ ├── init.py
│ ├── pycache
│ │ ├── init.cpython-38.pyc
│ │ ├── settings.cpython-38.pyc
│ │ ├── urls.cpython-38.pyc
│ │ ├── views.cpython-38.pyc
│ │ └── wsgi.cpython-38.pyc
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── manage.py
├── product
│ ├── admin.py
│ ├── apps.py
│ ├── components
│ │ ├── init.py
│ │ ├── product_detail.py
│ │ └── pycache
│ │ ├── init.cpython-38.pyc
│ │ └── product_detail.cpython-38.pyc
│ ├── init.py
│ ├── migrations
│ │ ├── init.py
│ │ └── pycache
│ │ └── init.cpython-38.pyc
│ ├── models.py
│ ├── pycache
│ │ ├── admin.cpython-38.pyc
│ │ ├── apps.cpython-38.pyc
│ │ ├── init.cpython-38.pyc
│ │ ├── models.cpython-38.pyc
│ │ ├── urls.cpython-38.pyc
│ │ └── views.cpython-38.pyc
│ ├── templates
│ │ ├── product
│ │ │ └── product_detail.html
│ │ └── unicorn
│ │ └── product_detail.html
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── README.MD
├── requirements.txt

product/views.py

from django.views.generic.base import TemplateView 

class ProductDetailView(TemplateView):
   template_name = 'product/product_detail.html'

product/components/product_detail.py

from django_unicorn.components import UnicornView
from django.http.request import HttpRequest as request 
from django.db.models import Q
from django.shortcuts import get_object_or_404, get_list_or_404

from navigation.models import *
from inventory.models import *

class ProductDetailView(UnicornView):
    
    selected_finition= ""
    selected_size= ""
    
    def get_context_data(self, *args, **kwargs):
        context = super(ProductDetailView, self).get_context_data(**kwargs)
        #grab the slug in path to instantiate query with 
        obj = get_object_or_404(Product, slug = self.request.get_full_path().split('/')[-2])

        #print(f"product detail value data: {type(obj)}")

        detail = get_list_or_404(ProductDetail, SKU__startswith=obj.SKU)
        #print(f"product detail data: {detail}")
        context['obj'] = obj
        try:
            context['finition'] = ProductAttributeFinition.objects.filter(Q(SKU_id__in=detail)).distinct('name')

        except:
            return context['finition']
        #print(f"dfinition detail :\n {context['finition']}")
        try:
            context['size'] = ProductAttributeSize.objects.filter(Q(SKU_id__in=detail)).distinct('value')

        except :
            return context['size']
        #print(f"detail-size :\n {context['size']}")

        context['price'] = ProductDetailPrice.objects.filter(Q(SKU_id__in=detail))
        #print(f"detail-price :\n {context['price']}")

        return context

base.html

<!DOCTYPE html>
{% load static %}
{% load unicorn %}
<html lang="en">
<head>
    {% unicorn_scripts %} 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% comment %} google fonts {% endcomment %}
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;1,300&display=swap" rel="stylesheet">
    
    <!-- <link rel="stylesheet" href="{ url static css/style.css }"> -->
    <title>Document</title>
</head>
<body>
    {% csrf_token %}
    <section>
    </section>
    <section>
        {% block content %}
        {% endblock %}
    </section>
</body>
</html>

templates/product/product_detail.html

{% extends 'base.html' %}
{% load unicorn %}
{% block content %}
{% unicorn 'product_detail' %}
{% endblock %}

templates/unicorn/product_detail.html

<div>
    <h1>Product Detail Page unicorn</h1>
    <img src="{{obj.image.url}}"/>
    <p><span>{{obj.name}}</span></p>
    <p><span>{{obj.description}}</span></p>
    <p>
    {% if finition|length > 1 %}
    <label for="finition">Choose a</label>
        <select unicorn:model = "selected_finition">
            <option  value="" selected="selected">--Finition--</option>
            {% for f in finition %}
            <option
                value="{{f.SKU_id}}" 
                id = "finition-value">
                {{f.name}}
            </option>
            {% endfor %}
        </select>
    {% endif %}
    </p>
    <p>
    {% if size|length > 1 %}
    <label for="size-choice">Choose a</label>
        <select unicorn:model = "selected_size" name="select_size">
            <option  value="" selected="selected">--Size--</option>
            {% for s in size %}
            <option 
                value="{{s.SKU_id}}"
                id="size-value">
                {{s.value}}
            </option>
            {% endfor %}
        </select>
    {% endif %}
    </p>
    <p>{{selected_price}}</p>
</div>