Hi everyone
I am creating a web store with Django and bootstrap and within it i want to create a page to compare products
actually what i want to do is to have a HTML page and within it i want to compare 4 product at the same time. i designed that page as follow
good_compare.html
{% extends '_base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}مقایسه کالا{% endblock title %}
{% block content %}
{% if messages %}
{% for message in messages %}
{% if message.tags == "success" %}
<div class="alert alert-success d-flex align-items-center" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
{{ message }}
</div>
{% else %}
{% if message.tags == "error" %}
<div class="alert alert-danger d-flex align-items-center" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
{{ message }}
</div>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
<h4 align="center"> مقایسه کالا </h4>
<div class="container text-right">
<div class="row">
<div class="col-md-auto">
<div class="sticky-top">
<div class="card" style="width: 18rem;">
<img src="{% static object.image %}" class="card-img-top"
alt="عکس محصول" height="250" width="200">
<div class="card-body">
<h5 class="card-title">{{object.subbranch3.sb3_desc}}</h5>
<p class="card-text">قیمت:{{object.price}}ریال</p>
<p class="card-text"></p>
<a href="{% url 'goods_list' pk=object.pk %}"
class="btn btn-primary stretched-link">مشاهده جزئیات</a>
</div>
</div>
</div>
<div>
<div class="card" style="width: 18rem;">
{% for att in object.attributes.all %}
<div class="card card-body">
<div class="row row-col-2">
<div class="col">
<P>{{att.attribute.attribute_name}}</P>
</div>
<div class="col">
<P>{{att.value}}</P>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="col-md-auto">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#searchModal">
افزودن کالا
</button>
<!-- Modal -->
<div class="modal fade" id="searchModal" tabindex="-1" data-bs-backdrop="static"
aria-labelledby="searchModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="searchModalLabel">جستجوی کالا</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<form method="post">{% csrf_token %}
{{compare_form|crispy}}
<a type="button" class="btn btn-primary"
href="{% url 'compare_search' pk=object.pk %}">جستجو</a>
<br>
<br>
<div class="row">
{% for good in related_goods %}
<div class="col-md-auto">
<div class="card" style="width: 13rem; height: 13rem">
<img src="{% static good.image %}" class="card-img-top"
alt="عکس محصول" height="100" width="50">
<div class="card-body">
<p class="card-title">{{good.subbranch3.sb3_desc}}</p>
<p class="card-text">قیمت:{{good.price}}ریال</p>
<p class="card-text"></p>
<a href="{% url 'goods_list' pk=good.pk %}"
class="btn btn-primary stretched-link btn-sm">مشاهده جزئیات</a>
</div>
</div>
<br>
</div>
{% endfor %}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
{% if good_to_compare %}
<div class="row">
<div class="col-md-auot">
<div class="card" style="width: 13rem; height: 13rem">
<img src="{% static good_to_compare.image %}" class="card-img-top"
alt="عکس محصول" height="100" width="50">
<div class="card-body">
<p class="card-title">{{good_to_compare.subbranch3.sb3_desc}}</p>
<p class="card-text">قیمت:{{good_to_compare.price}}ریال</p>
<p class="card-text"></p>
<a href="{% url 'good_compare' pk=good_to_compare.pk %}"
class="btn btn-primary stretched-link btn-sm">مشاهده جزئیات
</a>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock content %}
in this page:
first: after a customer finds a product he/she click a button for comparing this product with other related ones (products of the same branch and subbranch) and redirected to ‘good_compare.html’
second : when customers clicks افزودن کالا i mean below button
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#searchModal">
افزودن کالا
</button>
a modol will show so customer can select another related product (related products displays in that modal and a search box is also designed for finding products ) to add to compare list
what i want to have is after customer select that product it adds as a column beside previous prodcuct to good_compare page and i do not know how to implement it
any help would be appriciated
here is view.py
class GoodCompareView(DetailView):
model = Good
template_name = 'good_compare.html'
def get_queryset(self):
pk = self.kwargs.get(self.pk_url_kwarg)
related_objects = Good.objects.filter(id=pk).values(
'mainbranch', 'subbranch1', 'subbranch2')
query = Good.objects.filter(mainbranch=related_objects[0]['mainbranch'],
subbranch1=related_objects[0]['subbranch1'],
subbranch2=related_objects[0]['subbranch2'])
return query
def get_context_data(self, **kwargs):
context = super().get_context_data()
context['compare_form'] = GoodCompareForm
context['related_goods'] = self.get_queryset()
return context
@staticmethod
def compare_search_modal(request):
if request.POST.get('search_box'):
compare_search_ph = request.POST.get('search_box')
good_to_compare = Good.objects.filter(
id=SubBranch3.objects.filter(sb3_desc=compare_search_ph)
)
print(good_to_compare)
if good_to_compare:
context = {
'good_to_compare': good_to_compare
}
return render(request, 'good_compare.html', context=context)
else:
messages.error(request, 'کالایی با این مشخصات یافت نشد')
print('we are here')
return HttpResponseRedirect(reverse('good_compare', kwargs={'pk': request.kwargs['pk']}))
and urls.py
urlpatterns = [
path('about/', AboutPageView.as_view(), name='about'),
path('?/', GoodsSearchView.as_view(), name='gsview'),
path('?/<int:pk>/', GoodsListView.as_view(), name='goods_list'),
path('?/<int:g_id>/wish_list/<int:c_id>/', add_to_wishlist, name='add_to_wishlist'),
path('?/<int:g_id>/buy_basket/', add_to_buybasket, name='add_to_buybasket'),
path('?/<str:from_link>&&<int:search_phrase>', GoodsSearchView.as_view(), name='branch_filter'),
path('?/<int:pk>/edit_comment/<int:cpk>/', CommentUpdate.as_view(), name='edit_comment'),
path('?/<int:pk>/delete_comment/<int:cpk>/', CommentDelete.as_view(), name='delete_comment'),
path('?/<int:pk>/vote_comment/<int:cpk>', VoteComment.as_view(), name='comment_votes'),
path('?/<int:pk>/good_compare', GoodCompareView.as_view(), name='good_compare'),
path('?/<int:pk>/good_compare', GoodCompareView.compare_search_modal, name='compare_search'),
]