Django template not showing - python

I don't know why but my code doesn't work, I don't know where the problem is. Please help, my product doesn't appear on the template although I have saved products in the database
{% for product in products %}
<div class="col-md-6 col-lg-3 ftco-animate">
<div class="product">
{% if product.ImgProduct %}
<a href="#" class="img-prod"><img class="img-fluid" src="{{ product.ImgProduct.url }}" alt="ColorlibTemplate">
<div class="overlay"></div>
</a>
{% endif %}
<div class="text py-3 pb-4 px-3 text-center">
<h3>{{ product.product_name }}</h3>
<div class="d-flex">
<div class="pricing">
<p class="price"><span>{{ product.product_price }}</span></p>
</div>
</div>
<div class="bottom-area d-flex px-3">
<div class="m-auto d-flex">
<a href="#" class="add-to-cart d-flex justify-content-center align-items-center text-center">
<span><i class="ion-ios-menu"></i></span>
</a>
<a href="#" class="buy-now d-flex justify-content-center align-items-center mx-1">
<span><i class="ion-ios-cart"></i></span>
</a>
<a href="#" class="heart d-flex justify-content-center align-items-center ">
<span><i class="ion-ios-heart"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}

Related

Django with Bootstrap Carousel

My code it's displaying image but not changing the image in the bootstrap carousel when I click the button to pass
{% if variation.extravariationproductpicture_set.all %}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for picture in variation.extravariationproductpicture_set.all %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img class="d-block w-100" src="{{picture.image.url}}" alt="First slide">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% endif %}

Django Template extract list

I have a list:
productlinks = [google.com, tes.com, lol.com]
prices = [$134, $123,$123]
I wanna extract those list to my django template inside the bootsrap. Here is my django template code:
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
{% for link in productlinks %}
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price--> x
$40.00 - $80.00 -> price must be here using loop to extract the list
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{{ link }}" target="_blank">View options</a></div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
So basically, I wanna also extract the prices list but i dont know how to place the loop after the my productlinks loop. Because it will ruins the result.
and here is my views code:
return render(request, '/home.html', {
'productlinks': productlinks,
'prices': productprices
}
)

views
return render(request, '/home.html', {
'data': zip(productlinks,productprices)
}
)
template
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
{% for link,price in data %}
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price--> x
{{ price }}
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{{ link }}" target="_blank">View options</a></div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>

How can I have my template display a list on two different div tags without having redundancies

I have a list from my Model but I want my template to display the list element in groups of 4 or half the total length of the list Example: let say i have 10 elements in my list i want 5 on the right size and 5 on the left side. Please see screenshot below.
This is how i want my page to look like:
But this is what i get:
This is my HTML file.
<div class="section-title">
<h2>Skills</h2>
<p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc dfkjhvxjdknfxzjxvkc.
</p>
</div>
{% for skill in skills_list%}
<div class="row skills-content">
<div class="col-lg-6" data-aos="fade-up">
<div class="progress">
<span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
views.py:
#### TEST
class TestView(generic.ListView):
model = Skills
template_name = 'portfolio_app/test.html'
########################URL.py
from django.urls import path
from portfolio_app.models import *
from . import views
urlpatterns = [
path('',views.fact,name='index'),
#path('index/',views.SkillView.as_view,name='index'),
path('about/',views.about_me,name='about'),
path('service/',views.ServiceView.as_view(),name='service'),
path('resume/',views.ResumeView.as_view(),name='resume'),
path('contact/',views.ContactView.as_view(),name='contact'),
path('test/',views.TestView.as_view(),name='test'),
]

You can try to move <div class="row skills-content"> outside the for loop like this:
<div class="section-title">
<h2>Skills</h2>
<p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc
d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc
dfkjhvxjdknfxzjxvkc.
</p>
</div>
<div class="row skills-content">
{% for skill in skills_list%}
<div class="col-lg-6" data-aos="fade-up">
<div class="progress">
<span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}}
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
{% endfor %}
</div>
And you should remove redundant last </div> to make it work correctly.

Use slice like this:
<div class="row skills-content">
<div class="col-lg-6" data-aos="fade-up">
{% for skill in skills_list|slice:":5" %}
<div class="progress">
<span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{% endfor %}
</div>
<div class="col-lg-6" data-aos="fade-up">
{% for skill in skills_list|slice:"5:" %}
<div class="progress">
<span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{% endfor %}
</div>
</div>
To get rid of redundant div's create a separate template for skills and include that in you current template using include template tag like this:
skills.html:
<div class="progress">
<span class="skill">{{skill.skill_name}} <i class="val">{{skill.skill_value}}</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
your current temple:
<div class="row skills-content">
<div class="col-lg-6" data-aos="fade-up">
{% for skill in skills_list|slice:":5" %}
{% include 'skills.html' with skill=skill %}
{% endfor %}
</div>
</div>
similarly for second loop.

Selenium: is there a way to check if text extends beyond the borders of an element?

I'm writing tests python+selenium, and here is the problem I've stumbled upon.
I need to check if the text in a box is displayed correctly and doesn't go beyond the margins.
What I means is:
Page source:
<div class="mt-5">
<div class="row flex-column flex-lg-row">
<div id="card-6e64c570-f558-47c8-d66a-08d9a43db45b" class="events-left-block w-100 col-lg-6 mb-4xl position-relative">
<a href="/Invite/Trainings/6e64c570-f558-47c8-d66a-08d9a43db45b?back=%2FCatalog" class="w-100">
<div class="card border-0 bg-white h-100 shadow rounded-lg p-0">
<div class="card-body p-4 h-100 d-flex flex-column">
<div class="card-title text-dark mb-4 row justify-content-between no-gutters flex-nowrap">
<h5 class="mb-0">Pneumonoultramicroscopicsilicovolcanoconiosis</h5>
<span class="text-white ml-4"></span>
</div>
<div class="card-text d-flex justify-content-between align-items-end flex-row flex-grow-1">
<ui class="list-group-flush">
<li class="d-flex align-items-center small list-group-item li-info text-dark">
<i class="fas fa-user-friends text-light-gray fa-small"></i>
1
</li>
<li class="d-flex align-items-center list-group-item small li-info text-dark">
<i class="ri-calendar-fill text-light-gray small"></i>
29.11.2021
</li>
</ui>
<img class="rounded-circle cover-image" src="/images/default-training.png" width="64" height="64" alt="img">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
I was wondering if there is a way to check (by selenium, jquery, whatever) if the text fits the box?

How to sort bootstrap panels dividing them by left-right side and add content panel?

I'm trying to sort the panels onto that way:
image screen - please enter to see:
But I've got more than 6 columns (it's 9). I'm looking forward to set 4 on the LEFT, 4 on the RIGHT and 1 in CONTENT.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w kórych jesteś zawodnikiem:</div>
<div class="panel-body">
<ul>
{% for playerT in playersT %}
<li>{{playerT.tournament_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4 ">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w których jesteś trenerem:</div>
<div class="panel-body">
<ul>
{% for tournament in ctournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje turnieje:</div>
<div class="panel-body">
<ul>
{% for tournament in mtournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje drużyny:</div>
<div class="panel-body">
<ul>
{% for team in teams %}
<li>{{team.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenie do drużyny:</div>
<div class="panel-body">
<ul>
{% if playerteam %}
<li>{{ playerteam.team_id.name }} <a href="{% url 'playerToTeamAccept' playerteam.id %}">
Akceptuj </a></li>
{% endif%}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia dla Twoich zawodników do turnieju:</div>
<div class="panel-body">
<ul>
{% for player in AplayersT %}
<li>{{ player.tournament_id.name }} <a href="{% url 'playerToTournamentAccept' player.id %}">
Akceptuj </a></li>
{% endfor%}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByC' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zgłoszenia zawodników do Twoich turniejów:</div>
<div class="panel-body">
<table class="table table-hover table-condensed">
<br>
{% for EplayerT in EplayersT %}
<tr>
<td class="col-md-3" align="center"><a
href="{% url 'allTeamTourAcceptByM' EplayerT.player_id.team_id.id %}"> Akceptuj
drużynę {{ EplayerT.player_id.team_id.name }} </a></td>
<td class="col-md-3">Zawodnik {{ EplayerT.player_id.name }} {{ EplayerT.player_id.surname }}
zgłoszony do {{ EplayerT.tournament_id.name }}
</td>
<td class="col-md-3" align="center"> Akceptuj zawodnika</td>
</tr>
{% endfor %}
</table>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByM' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Przynależność do drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia do Twojej drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
</div>
But now it looks:
image screen - please enter to see:
Does anyone has an idea how to sort it ? Thanks for each solution!

Are you looking for a layout like this? In that case I would suggest you to create three columns and simply put four panels inside the left and right column. Also has the advantage that the top of panel 2 isn't dependent on the bottom of panel 6.
.box {
font-family: Arial;
font-size: 24px;
border: 1px solid #f99;
background-color: #fee;
color: #333;
padding: 10px;
height: 75px;
margin-bottom: 10px;
}
.box.box--100 {
height: 100px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="box">1</div>
<div class="box box--100">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="col-xs-4">
<div class="box">5</div>
</div>
<div class="col-xs-4">
<div class="box box--100">6</div>
<div class="box">7</div>
<div class="box box--100">8</div>
<div class="box box--100">9</div>
</div>
</div>
</div>

Categories

Resources