We Keep Coding

Corousel bootstrap for products in django ecommerce website?

I am trying to do slider for my products which should be only 4 products. I took code from resourses from the internet, but I have a problem to implement it. It's not working. In the below, you can see my code. As, I mentioned, I only want it to show four products, which means first row and slider.
html
<div class="angle angle-left prev"><img src="{% static 'images/angle-left.png' %}"></div>
<div class="row owl-corousel" style="width:80%;position: relative; left:10%;">
{% for product in products %}
<div class="store col-lg-3 col-6 owl-item">
<div class="single-product">
<div class="single-product">
<div class="header-single-product">
<p style="margin-top:-10px;margin-bottom:-10px" class="code">Код: 51265</p>
{% if product in wishedProductsList %}
<i class="bi bi-heart-fill addWishlist" style="color: red" data-product="{{product.id}}" data-action="add"></i>
{% else %}
<i class="bi bi-heart addWishlist" data-product="{{product.id}}" data-action="add"></i>
{% endif %}
<i class="fa fa-balance-scale" style="margin-right:5px;"></i>
</div>
<div class="product-image">
<img style="width: 100%;height: 100%;" src="{{product.imageURL}}">
</div>
<p style="color:#617375;">В наличии</p>
<p style="color:black;">{{product.name}}</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p class="price">Цена: {{product.price}}</p>
<div class="counter">
<div class="arrow-up increase" id="arrow-up" data-product="{{product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
<div class="quantity"><input type="number" class="quantity" value="1" data-product="{{product.id}}"></div>
<div class="arrow-down increase" id="arrow-down" data-product="{{product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
</div>
<div class="product-foot"><div class="product-action-2">
<button data-product="{{product.id}}" style="width:100%;height: 50px;" data-action="add" class="btn btn-outline-secondary add-btn update-cart">В Корзину</button>
</div></div>
</div>
</div>
</div>
{% endfor %}
<div class="angle angle-right next" style="float:right;"><img src="{% static 'images/angle-right.png' %}"></div>
</div>
script
<script>
$(document).ready(function()
{
if($('.row').length)
{
var viewedSlider = $('.row');
viewedSlider.owlCarousel(
{
loop:true,
margin:30,
autoplay:true,
autoplayTimeout:6000,
nav:false,
dots:false,
responsive:
{
0:{items:1},
575:{items:2},
768:{items:3},
991:{items:4},
}
});
if($('.prev').length)
{
var prev = $('.prev');
prev.on('click', function()
{
viewedSlider.trigger('prev.owl.carousel');
});
}
if($('.next').length)
{
var next = $('.next');
next.on('click', function()
{
viewedSlider.trigger('next.owl.carousel');
});
}
}
});
</script>
However, it's showing all pictures and is not working. So, can someone tell what is the problem. If I need any specific classes that should be used can you tell me these classes in such way that doesen't affect to my design. Thanks!

How i transfer data(variables) from one html page to another page, here i am using html & django framework

here in my code i am displaying elements from a database using a loop
at the the user click buy button, i want to pass the particular product id to another page.
how i get the product id & how it passed to another page...
HTML page
{% for product in products %}
<div class="col-md-3">
<div class="card">
<img src="{{product.product_image}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{product.product_name}}</h5>
<p class="card-text">₹{{product.product_price}}</p>
<a href="{% url 'buy' %}" class="btn btn-primary">
Buy</a>
</div>
</div>
</div>
{% endfor %}

Passing id to path
{% for product in products %}
<div class="col-md-3">
<div class="card">
<img src="{{product.product_image}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{product.product_name}}</h5>
<p class="card-text">₹{{product.product_price}}</p>
<a href="{% url 'buy' product.id %}" class="btn btn-primary">
Buy</a>
</div>
</div>
</div>
{% endfor %}

How to load the defualt value in combo box and how can add product to the cart without reloading the page in django?

Problem
I want to the following things but am unable to understand that how can I do the following things.
Firstly, I want that when the page is loaded the defualt values should be displayed from using the value from the combox. For example pack of 1KG is the defualt value so it's price and other values should be updated when the page is loaded.
Secondly, I want that when the product is added to the cart the page is not reloaded or refreshed and a popup is shown that the product is added to the cart.
CODE
Script
$(document).on("change", '.tranactionID', function (event) {
event.preventDefault();
//get closest outer div..
var selector = $(this).closest(".productID")
//find to get required elements..
selector.find('.id_price').text($(this).children(":selected").attr("price"));
selector.find('.price-sale').text($(this).children(":selected").attr("sale_price"));
selector.find('.id_discount').text($(this).children(":selected").attr("discount"));
let id = $(this).find("option:selected").attr('transID');
let Url = `{% url 'cart:cart_add' 0 %}`.replace(0, id);
selector.find("form").attr('action', Url);
});
HTML
{% regroup transaction by productID as ProductList %}
{% for productID in ProductList %}
<div class="col-sm-3 productID" >
<div class="product">
<a href="{% url 'main:product-detail' productID.grouper.id %}" class="img-prod"><img class="img-fluid" src={{productID.grouper.product_image.url}} alt="" height="200px">
<span class="status id_discount">%</span>
<div class="overlay"></div>
</a>
<div class="text py-3 pb-4 px-3 text-center">
<h3>{{productID.grouper}}</h3>
<div class="d-flex">
<div class="pricing">
<p class="price"><span class="mr-2 price-dc id_price">Rs. </span><span class="price-sale">Rs. </span></p>
</div>
</div>
<select class="tranactionID" id="ItemID" style="width: 250px;">
{% for val in productID.list %}
<option transID={{val.id}} price={{val.Price}} discount={{val.discount_percentage}} sale_price={{val.get_sale}} class="price_value" >{{val.AUID}} - {{val.Description}}</option>
{% endfor %}
</select>
<form id='transactionIDValue' class="d-inline" method="post">
{{cart_product_form}}
{% csrf_token %}
<input type="submit" id="Id_submit" class="btn btn-primary shadow px-5 py-2" value="Add To Cart">
<!-- <button type="submit" class="btn btn-primary shadow px-5 py-2">Add to Cart</button> -->
</form>
</div>
</div>
</div>
{% endfor %}

Sort items by price on clicking dropdown

I have a dropdown and list of property. The dropdown contains two option, Low to High and High to Low. If any user clicks on any one of the dropdown item, the properties listed should sort by its price. How can I achieve that using javascript?
property.html
<div class="col-sm-6">
<div class="pxp-sort-form form-inline float-right">
<div class="form-group">
<select class="type-regular custom-select" id="pxp-sort-results" name="price-sorting">
<option value="" selected="selected disabled">Default Sort</option>
<option class="price-sorting" value="l2h" id="l2h">Price (Lo-Hi)</option>
<option class="price-sorting" value="h2l">Price (Hi-Lo)</option>
</select>
</div>
</div>
</div>
<div class="row products-grid">
{% for item in properties.all %}
<div class="col-sm-12 col-md-6 col-xxxl-4 product">
<a href="{% pageurl item %}" class="pxp-results-card-1 rounded-lg" data-price="{{ item.price }}" data-prop="1">
<div id="property-{{item.id}}" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
{% for j in item.prop_images.all %}
{% image j.prop_img original as property_img %}
<div class="carousel-item {% if forloop.first %} active {% endif %}" style="background-image: url('{{property_img.url}}')"></div>
{% endfor %}
</div>
<span class="carousel-control-prev" data-href="#{{item.prop_name}}" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
</span>
<span class="carousel-control-next" data-href="#property-{{item.id}}" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
</span>
</div>
<div class="pxp-results-card-1-gradient"></div>
<div class="pxp-results-card-1-details" id="prop-dtls">
<div class="pxp-results-card-1-details-title">{{item.prop_name}}</div>
<div class="pxp-results-card-1-details-price price">{{item.price}}</div>
</div>
<div class="pxp-results-card-1-features">
<span>{{item.bedroom}} BD <span>|</span> {{item.bathroom}} BA <span>|</span> {{item.sqft}} SF</span>
</div>
<div class="pxp-results-card-1-save"><span class="fa fa-star-o"></span></div>
</a>
</div>
{% endfor %}
</div>
The values are coming dynamically from backend.

You can either do this with Javascript (reordering the DOM elements) or with the response you get from your server.
JS:
function reverseChildren(parent) {
for (var i = 1; i < parent.childNodes.length; i++){
parent.insertBefore(parent.childNodes[i], parent.firstChild);
}
}
You can set add an onclick JS event handler on the parent DIV of the elements to reverse all the child elements.
Source: https://stackoverflow.com/a/37860657/3345051
OR
You can send a response back from the server using the .order_by() filter method with a flag in the request to determine if it is reverse or not.
For example:
Non-reverse - Item.objects.all().order_by('price')
Reversed - Item.objects.all().order_by('-price')
class ItemView(View):
def get(self, request, *args, **kwargs):
isReversed = '-price' if request.GET['reverse'] is True else 'price'
items = Item.objects.all().order_by(isReversed)
return JsonResponse(items)

The below code worked perfectly as I wanted.
$(document).on("change", ".price-sorting", function() {
var sortingMethod = $(this).val();
if(sortingMethod == 'l2h')
{
sortProductsPriceAscending();
}
else if(sortingMethod == 'h2l')
{
sortProductsPriceDescending();
}
});
function sortProductsPriceAscending()
{
var products = $('.product');
products.sort(function(a, b){
return $(a).data("price") - $(b).data("price")});
$(".products-grid").html(products);
}
function sortProductsPriceDescending()
{
var products = $('.product');
products.sort(function(a, b){ return $(b).data("price") - $(a).data("price")});
$(".products-grid").html(products);
}
HTML code
<div class="col-sm-6">
<div class="pxp-sort-form form-inline float-right">
<div class="form-group">
<select class="type-regular custom-select price-sorting" id="pxp-sort-results">
<option value="" selected="selected disabled">Default Sort</option>
<option value="l2h" id="l2h">Price (Lo-Hi)</option>
<option value="h2l">Price (Hi-Lo)</option>
</select>
</div>
<div class="form-group d-flex">
<a role="button" class="pxp-map-toggle"><span class="fa fa-map-o"></span></a>
</div>
</div>
</div>
<div class="row products-grid">
{% for item in properties.all %}
<div class="col-sm-12 col-md-6 col-xxxl-4 product" data-price="{{ item.price }}">
<a href="{% pageurl item %}" class="pxp-results-card-1 rounded-lg" data-prop="1">
<div id="property-{{item.id}}" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
{% for j in item.prop_images.all %}
{% image j.prop_img original as property_img %}
<div class="carousel-item {% if forloop.first %} active {% endif %}" style="background-image: url('{{property_img.url}}')"></div>
{% endfor %}
</div>
<span class="carousel-control-prev" data-href="#{{item.prop_name}}" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
</span>
<span class="carousel-control-next" data-href="#property-{{item.id}}" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
</span>
</div>
<div class="pxp-results-card-1-gradient"></div>
<div class="pxp-results-card-1-details" id="prop-dtls">
<div class="pxp-results-card-1-details-title">{{item.prop_name}}</div>
<div class="pxp-results-card-1-details-price price">&#8377 {{item.price}}</div>
</div>
<div class="pxp-results-card-1-features">
<span>{{item.bedroom}} BD <span>|</span> {{item.bathroom}} BA <span>|</span> {{item.sqft}} SF</span>
</div>
<div class="pxp-results-card-1-save"><span class="fa fa-star-o"></span></div>
</a>
</div>
{% endfor %}
</div>

Django modal display based on the class id list

I would like to allow the modal to be displayed on the basis of the id set from the database. Having different fruit/vegetables displayed in the container divided into tiles, I put their id in the id field of the class.
In other words, pressing a button in the overlay class for a particular fruit displays a single modal with the rest of the information.
HTML CODE:
{% block body_block %}
<div class="container-fruits">
<div class="row">
{% for t in thumb %}
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">
{% thumbnail t.image "255x189" crop="center" as im %}
<div class="hovereffect">
<img class="img-responsive" src="{{ im.url }}" alt="Card image cap">
<div class="overlay">
<h2>{{ t.name }}</h2>
<a id="{{ t.id }}" class="info" data-target="#{{ t.id }}" href="#">show details</a>
</div>
</div>
{% endthumbnail %}
</div>
{% endfor %}
</div>
</div>
{% for t in thumb %}
<div id="{{ t.id }}" class="fruitsModal" tabindex="-1" style="display: none">
<div class="modal-dialog modal-lg ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title">{{ t.name }} information</h2>
</div>
<div class="modal-body">
<h2 class="modal-body-text">{{ t.description }}</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
<script src="{% static 'javascript/fruits.js' %}"></script>
{% endblock %}
Javascript/Jquery
$(document).ready(function () {
$('.info').click(function (e) {
$(".fruitsModal").fadeIn('slow');
var image = $(e.relatedTarget).attr('src');
var text = $(e.relatedTarget).attr('t.name');
$(".img-responsive").attr("src", image);
$(".modal-body").attr("modal-body-text", text);
console.log('hello bind');
});
$(".btn-default").click(function () {
$(".fruitsModal").fadeOut('slow');
});
});

To open the modal targeted by a specific ID, you just need to know the ID and
Remove the id id="{{ t.id }}" from your a tag
Rename your target data-target="#modal-{{ t.id }}" to make it a little better to avoid multiple identical ids.
<a data-toggle="modal" class="info" data-target="#modal-{{ t.id }}"....
Finally rename the id of your modals, like the target above
<div id="modal-{{ t.id }}" class="fruitsModal" tabindex="-1" style="display: none">
The tag a becomes:
<a class="info" data-target="#modal-{{ t.id }}" href="#">show details</a>
And the modal:
<div id="modal-{{ t.id }}" class="fruitsModal" tabindex="-1" style="display: none">
<div class="modal-dialog modal-lg ">
1st Option:
If you need to let bootstrap do everything for you, means when you click on a without your script, the modal will show up.
Just add the data-toggle attribute to your a tag, and add the same value of data-target to href.
<a data-toggle="modal" href="#modal-{{ t.id }}" data-target="#modal-{{ t.id }}"
In that case, the data-target="" is not really needed
2nd option:
As you want to do some stuff before showing the modal, this fits your need.
When triggering the a tag with click event, is js, you just need to show the concerned modal
$('.info').click(function (e) {
$(".fruitsModal").fadeIn('slow');
var image = $(e.relatedTarget).attr('src');
var text = $(e.relatedTarget).attr('t.name');
$(".img-responsive").attr("src", image);
$(".modal-body").attr("modal-body-text", text);
console.log('hello bind');
// # retrieve the target modal: data-target="#modal-{{ t.id }}"
var t_modal = $("this").data('target');
$(t_modal).show(); // this is because you have style={display:none}
$(t_modal).modal('show');
});