0

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>
Manoj Kumar
  • 5
  • 3

1 Answers1

0

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.

Jeremy
  • 225
  • 1
  • 3
  • 10