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 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 %}

How to hide and show button after page reload

I am learning jQuery and I have issues on how to hide and show a button during page reload. I tried my code below, it hides and shows the button on click, but when the page loads, the button changes back to former state. This is what I've tried:
Template:
<span class="load-requests-sections"> <!-- Load page if request sent in Ajax -->
<!-- Main -->
<main>
<!-- Container -->
<div class="container-fluid" id="suggested-people-cont" style="position:relative;top:170px;padding-bottom:100px;">
<!-- Row Grid Container -->
<div class="row d-flex justify-content-center">
<div class="col-lg-6 col-md-9 col-12">
{% if following %}
<h6 class="suggested-people-header mb-3" style="font-weight:500;">Following {{ following.count|human_format }}</h6>
{% endif %}
<div class="card news-card mb-2" id="suggested-people-card" style="width:700px;padding:13px;box-shadow:none;">
{% for data in profile_and_button_status %}
<!-- Copy and paste for another post below -->
<div class="row mb-3">
{% if data.0.to_user.profile.profile_pic %}
<a href="{% url 'site:profile-view' data.0.to_user.username %}">
<img src="{{ data.0.to_user.profile.profile_pic.url }}" class="rounded-circle avatar-img ml-4" height="50" width="50" style="border:none;padding:0px;position:relative;top:-1px;object-fit: cover;">
</a>
{% endif %}
<div class="suggestionfrndnamemutual-cont mt-1 ml-3">
<p class="dark-grey-text text-lowercase font-weight-bold">
<a href="{% url 'site:profile-view' data.0.to_user.username %}"><span class="suggestionfrnd-username username dark-grey-text text-truncate" style="">
{{ data.0.to_user.username }}</span></a>
</p>
<p class="card-text" style="position:relative;top:0px;">
<span class="suggestionfrnd-mutual text-muted" style="font-size:13px;">New to Pixmate</span>
</p>
</div>
{% if not data.0.to_user == request.user %}
<div class="mt-2" style="position:absolute;right:30px;">
{% if data.1 == 'not_friend' %}
<a href="{% url 'site:send_friend_request' data.0.to_user.id %}" class="friend-request">
<button type="button" class="btn btn-primary btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Follow</span>
</button>
</a>
{% elif data.1 == 'cancel_request_sent' %}
<a href="{% url 'site:cancel_friend_request' data.0.to_user.id %}" class="friend-request">
<button type="button" class="btn btn-amber btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Cancel</span>
</button>
</a>
{% elif data.1 == 'follow_back_request' %}
<!-- CLICK ON THIS BUTTON TO HIDE AND SHOW THE BELOW BUTTON -->
<a href="{% url 'site:accept_friend_request' data.0.to_user.id %}" class="friend-request followback-btn">
<button type="button" class="btn btn-primary btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Follow Back</span>
</button>
</a>
<!-- SHOW THIS BUTTON AFTER PAGE RELOAD -->
<a href="{% url 'site:remove_friend' data.0.to_user.id %}" class="friend-request following-btn" style="display:none;">
<button type="button" class="btn btn-sm btn-block border waves-effect text-capitalize font-weight-bold dark-grey-text p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Following</span>
</button>
</a>
{% endif %}
</div>
{% endif %}
</div>
<!-- Row Grid -->
{% empty %}
{% if owner_of_the_following %}
<div class="container text-center image-post mt-0">
<!-- <img src="{{ '/static/' }}images/photo-camera-img.png" class="mb-3" width="60" height="60"> -->
<p class="dark-grey-text" style="font-size: 28px;">People you're Following</p>
<p class="dark-grey-text">When you follow someone, it will show here.</p>
<a href="{% url 'site:people-suggested' %}" class="btn btn-primary btn-md waves-effect mx-auto my-4" style="box-shadow:none;border-radius:30px;">
<strong>Find People to Follow</strong></a>
</div>
{% else %}
<div class="container text-center image-post mt-0">
<p class="dark-grey-text"><strong>No users</strong></p>
</div>
{% endif %}
{% endfor %}
</div>
<!-- Card -->
</div>
<!-- Column Grid -->
</div>
<!-- Row Grid Container -->
</div>
<!-- Container -->
</main>
<!-- Main -->
</span>
Jquery:
//SEND FRIEND REQUESTS WITHOUT PAGE RELOAD THIS WORKED
$('.load-requests-sections').on('click', '.friend-request', function(event){
event.preventDefault();
var page = $(this).attr('href');
$('.load-requests-sections').load(page);
});
//HIDE AND SHOW BUTTON AFTER PAGE RELOAD RETURN BACK TO OLD STATE WHEN PAGE RELOAD
$('.followback-btn').on('click', function(event){
event.preventDefault();
$('.followback-btn').hide();
$('.following-btn').show();
})
I also tried using localstorage, to show the hidden button after the page reloads, but the old button clicked is still shown. How do I hide the old button after a page reload.
$(document).ready(function(){
var $hidden = $('.following-btn');
if (localStorage.getItem('show')) {
$hidden.show();
$('.followback-btn').hide();
}
$('.followback-btn').on('click', function() {
localStorage.setItem('show', true);
window.location.reload(false);
});
})

There seems to be a problem in how you test if the .followback-btn was pressed.
In your second jQuery example, try replacing this line:
localStorage.getItem('show') && $hidden.show();
With this:
if (localStorage.getItem('show')) {
$hidden.show();
$('.followback-btn').hide();
}
This means that if the show variable is set in the local storage, the .following-btn will be shown when the page loads, instead of the .followback-btn one.
Hope this helps.

Hide element if search results displayed

I'm trying to hide an element (no-results-wrapper) if there are search results displayed.
Right now when there are search results the element (no-results-wrapper) displays at the very bottom of the results. I want the element to be hidden if there are search results.
I've tried using {% if search.terms == blank %} to only show the element if the search results are blank, but that didn't work. Any help would be appreciated.
{%- if settings.basel_search_widget != 'disable' -%}
<div class="search-button basel-search-{{settings.basel_search_widget}}">
<i class="fa fa-search"></i>
<div class="basel-search-wrapper">
<div class="basel-search-inner">
<span class="basel-close-search">{{ 'general.search.close_search' | t }}</span>
<form role="search" method="get" class="searchform{%- if settings.ajax_search %} basel-ajax-search{%- endif -%}" action="/search">
<div>
<label class="screen-reader-text"></label>
<input type="text" placeholder="{{ 'general.search.placeholder' | t }}" value="{{ search.terms | escape }}" name="q" autocomplete="off">
{%- if settings.only_search_products -%}<input type="hidden" name="type" value="product" />{%- endif -%}
<button type="submit">{{ 'general.search.submit' | t }}</button>
</div>
</form>
<div class="search-results-wrapper">
<div class="basel-search-results">
<div class="autocomplete-wrapper">
<div class="autocomplete-suggestions" style="position: absolute; max-height: 300px; z-index: 9999;"></div>
{% if search.terms == blank %}
<div class="no-results-wrapper">
<div class="search-bar-item">
<div class="canvas ratio-2-3">
<div class="product-image-color-overlay" style="z-index: 10; background-color: #efefef;">
<div class="display-table">
<div class="display-table-cell">
<div class="search-bar-no-result-item">
<p>HMMM...</p>
<p>NOT SURE WHAT YOU’RE
LOOKING FOR?</p>
<p>Shop New Arrivals
Shop Latest</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-bar-item">
<a href="#">
<div class="canvas ratio-2-3">
<div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div>
<div class="product-image-color-overlay"></div>
</div>
<div class="product-card-details">
<div class="product-card-title">One-Pieces</div>
</div>
</a>
</div>
<div class="search-bar-item">
<a href="#">
<div class="canvas ratio-2-3">
<div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div>
<div class="product-image-color-overlay"></div>
</div>
<div class="product-card-details">
<div class="product-card-title">New Arrivals</div>
</div>
</a>
</div>
<div class="search-bar-item">
<a href="#">
<div class="canvas ratio-2-3">
<div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div>
<div class="product-image-color-overlay"></div>
</div>
<div class="product-card-details">
<div class="product-card-title">Holiday</div>
</div>
</a>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{%- endif -%}

You need to replace this:
{% if search.terms == blank %}
With this:
{% if search.results_count == 0 %}

How do I pass a variable to a form from a link

I am trying to pass the sets ID to a form when a user clicks on the link. Semantic is being used for the frontend.
When the user is viewing a Class, they see a button that says 'New Survey' as below:
This is the HTML:
<a href="/form/create?set_dropdown={{set.id}}">
<button class="ui labeled icon button green">
<i class="inverted plus icon"></i>
New Survey
</button>
</a>
This is the field that is being targeted:
<div class="ui selection dropdown" id="set_dropdown">
<input type="hidden" id='class_dropdown' name="set">
<i class="dropdown icon"></i>
<div class="default text">Class</div>
<div class="menu">
{% for set in sets %}
<div class="item" data-value="{{ set.id }}">{{ set.name }}</div>
{% endfor %}
</div>
</input>
</div>
Its a dropdown that is dynamically rendered in with Jinja2.
Any help would be appreciated

You can use request.args to retrieve parameter from the url
{{ request.args.get('set_dropdown') }}
use this and set a unique id for the selection drop down:
<div class="ui selection dropdown" id="set_dropdown_{{ request.args.get('set_dropdown') }}">
<input type="hidden" id='class_dropdown' name="set">
<i class="dropdown icon"></i>
<div class="default text">Class</div>
<div class="menu">
{% for set in sets %}
<div class="item" data-value="{{ set.id }}">{{ set.name }}</div>
{% endfor %}
</div>
</input>
</div>