component select option return error 404 #412

FenX999 · 2022-06-04T10:14:30Z

FenX999
Jun 4, 2022

Hi, I need some pointers around ajax
while trying to select an option on the components I've published on the template I've got a 404 response from the JS script.
I don't have enough knowledge to identify and debug the JS script myself any pointer for this problem would be greatly appreciated.

my code so far:

app's views.py

from django.views.generic.base import TemplateView 

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

components.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

app's templates

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

unicorn templates

<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>
                {{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>

project's 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>

project's urls.py

import debug_toolbar

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin

from django.urls import path, include

urlpatterns = [
    path("unicorn/", include("django_unicorn.urls")),
    path('__debug__/', include(debug_toolbar.urls)),
    
    path('admin/', admin.site.urls),
    path('', include('home.urls')),
    path('', include('catalog.urls')),
    path('', include('navigation.urls')),
    path('', include('product.urls')),
    # path('api/', include('api.urls')),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

adamghill · 2022-06-18T12:46:34Z

adamghill
Jun 18, 2022
Maintainer

Everything that posted looks like it is correct, but I wonder if having duplicate ProductDetailView classes is causing issues. Can you try renaming one of them to see what happens?

1 reply

FenX999 Jun 26, 2022
Author

Thank you for your reply!
I tried what you suggested and renamed the class and the respected unicorn's file and it still returns 404, however, I also tried to put my get_context_data() in the app's view and got a response but the template after the POST returns an empty page which is natural since the components now don't have a context to process... following up that idea I also tried to put the context on the components but came back to a 404.
I also downgrade Django from 4.0 to 3.2 just to be sure.

I believe at the moment I should go to the hooks available in the UnicornView to force rendering the context after the data get fetched but I lack the understanding

I update this thread once I got something.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

component select option return error 404 #412

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

component select option return error 404 #412

FenX999 Jun 4, 2022

Replies: 1 comment · 1 reply

adamghill Jun 18, 2022 Maintainer

FenX999 Jun 26, 2022 Author

FenX999
Jun 4, 2022

Replies: 1 comment 1 reply

adamghill
Jun 18, 2022
Maintainer

FenX999 Jun 26, 2022
Author