I'm facing an issue while implementing filter functionality in my e-commerce project. When I utilized AJAX to generate a filtered product list, all the products are visible but the images aren't showing up.
urls.py:
urlpatterns = [
path('', views.store, name='home'),
path('category/<slug:slug>', views.category, name='category'),
path('product-detail/<int:id>', views.product_detail, name='product_detail'),
path('cart/', views.cart, name='cart'),
path('checkout/', views.checkout, name='checkout'),
path('contact/', views.contact, name='contact'),
path('signin/', views.signin, name='signin'),
path('signup/', views.signup, name='signup'),
path('signout/', views.signout, name='signout'),
path('filter-data/', views.filter_data, name='filter_data'),
]
views.py:
def filter_data(request):
category
colors = request.GET.getlist('color[]')
sizes = request.GET.getlist('size[]')
all_products = Product.objects.all()
if len(colors) > 0:
all_products = all_products.filter(color__id__in=colors)
print("All Products: ", all_products)
if len(sizes) > 0:
all_products = all_products.filter(size__in=sizes)
ajax_template = render_to_string('ajax/product-list.html', {'products': all_products})
return JsonResponse({"data": ajax_template})
ajax code:
$.ajax({
url: '/filter-data',
data: _filterObj,
dataType: 'json',
beforeSend: function () {
$(".ajaxLoader").show();
},
success: function (res) {
console.log("This is res", res);
$("#filteredProducts").html(res.data);
$(".ajaxLoader").hide();
}
});
Category.html (This page holds all the products within the category):
<div class="col-lg-9 col-md-9">
<div class="row" id="filteredProducts">
{% for product in products %}
<div class="col-lg-4 col-md-6">
<div class="product__item">
<div class="product__item__pic set-bg" data-setbg="{% if product.image %}{{ product.image.url }}{% endif %}">
{% if product.labels == 'sale' %}
<div class="label sale">{{ product.labels }}</div>
{% elif product.labels == 'bestseller' %}
<div class="label bestseller">{{ product.labels }}</div>
{% else %}
<div class="label new">{{ product.labels }}</div>
{% endif %}
<ul class="product__hover">
<li><a href="{% if product.image %}{{ product.image.url }}{% endif %}" class="image-popup"><span class="arrow_expand"></span></a></li>
<li><a href="#"><span class="icon_heart_alt"></span></a></li>
<li><a href="#"><span class="icon_bag_alt"></span></a></li>
</ul>
</div>
<div class="product__item__text">
<h6><a href="{% url 'product_detail' product.id %}">{{ product.name }}</a></h6>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product__price">${{ product.price|floatformat:2 }}</div>
</div>
</div>
</div>
{% endfor %}
<div class="col-lg-12 text-center">
<div class="pagination__option">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#"><i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
Here's what ajax/product-list.html file looks like.
Even after successfully communicating with the backend using AJAX, the image display problem persists. Please advise if more of my code needs to be shared.
Upon filtering the products, only their details are visible while images remain hidden. Here are some examples for better understanding:
Before filtering: View from database where category is Men
After Filtering: Post-filtering size and color selection from the frontend