Is there any way to edit django template? - html

Question

In the last part of the code there exists a for loop which helps in constructing the boostrap crousel , but to make the website responsive i need to remove that forloop .
So is there any way achive responsiveness?
<div class="carousel-item active">
{% for i in products %}
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card align-items-center" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top mt-2" alt="...">
<div class="card-body">
<h5 id="productName{{i.id}}" class="card-title">{{i.product_name}}</h5>
<p id="productPrice{{i.id}}" class="card-text">₹ {{i.price}}</p>
<span id='button{{i.id}}'>
<div id='product{{i.id}}' class="btn btn-primary cart">Add to cart</div>
</span>
<a href="/shop/productView/{{i.id}}" id="quickView{{i.id}}"
class="btn btn-primary ml-3">Quick view</a>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
</div>
<div class="carousel-item">
{% endif %}
{% endfor %}
</div>
</div>

Answer 1

I don't have any solution to remove code from template (JS can probably make it work but I don't have any skills in it).
Instead, here's an idea to make your template a bit more responsive using Django.
You can get the user agent in your views:
views.py
user_agent = request.META['HTTP_USER_AGENT']
If you print it you'll get something like that:
>> print(user_agent)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/**.*.****.***
Safari/537.36
You can then set a list of keyword to check if the user agent is referring to a mobile device and assign a value to a variable in your context:
views.py
keywords = ['Mobile','Opera Mini','Android']
if any(word in user_agent for word in keywords):
context['is_mobile'] = True
else:
context['is_mobile'] = False
Finally set an if statement in your template:
your_page.html
{% if is_mobile == False %}
<div class="carousel-item active">
{% for i in products %}
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card align-items-center" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top mt-2" alt="...">
<div class="card-body">
<h5 id="productName{{i.id}}" class="card-title">{{i.product_name}}</h5>
<p id="productPrice{{i.id}}" class="card-text">₹ {{i.price}}</p>
<span id='button{{i.id}}'>
<div id='product{{i.id}}' class="btn btn-primary cart">Add to cart</div>
</span>
<a href="/shop/productView/{{i.id}}" id="quickView{{i.id}}"
class="btn btn-primary ml-3">Quick view</a>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
</div>
<div class="carousel-item">
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
You can find valuable informations that may help you as well on this topic.