150 lines
7.4 KiB
HTML
150 lines
7.4 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% block title %}Магазин{% endblock %}
|
|
{% block content %}
|
|
<style>
|
|
.section-padding{padding:10px 0;}
|
|
</style>
|
|
<!-- header section end -->
|
|
<!-- collection section start -->
|
|
|
|
<!-- collection section end -->
|
|
<!-- product-grid-view content section start -->
|
|
<section style="background:#rgb(255 255 255); min-height:calc(100% - 110px);" class="pages products-page section-padding-bottom">
|
|
<div class="container">
|
|
<div class="row"><br>
|
|
<div class="col-xs-12 col-sm-8 col-md-9" style="width: 100%;">
|
|
<div class="right-products">
|
|
<br/>
|
|
<br/>
|
|
<div class="row">
|
|
<div class="tab-content grid-content">
|
|
<div class="tab-pane fade in active text-center" id="grid">
|
|
{% for product in products %}
|
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
<div style="background:#ffffff; border-radius:15px;" class="single-product">
|
|
<div class="product-img">
|
|
{% if product.discount != 0.00 %}
|
|
<div class="pro-type">
|
|
<span>Скидка</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if product.new %}
|
|
<div style="background:#1c1427;color:#f4cca4" class="pro-type">
|
|
<span>Новый</span>
|
|
</div>
|
|
{% endif %}
|
|
<a href="{{product.get_product_details_url}}"><img style="border-radius: 50%;" src="{{product.image.url}}" alt="Product Title" /></a>
|
|
</div>
|
|
<div class="product-dsc">
|
|
<p><a style="color:#d99879" href="{{product.get_prodcut_details_url}}">{{product.name}}</a></p>
|
|
<span style="color:#3b3b3b">{{product.price}} тг</span><br><br>
|
|
<div style="font-size:16px" class="rating-star">
|
|
<span>
|
|
<i class="fa fa-star{% if product.averageRating < 0.5 %}-o{% elif product.averageRating >= 0.5 and product.averageRating < 1 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<i class="fa fa-star{% if product.averageRating < 1.5 %}-o{% elif product.averageRating >= 1.5 and product.averageRating < 2 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<i class="fa fa-star{% if product.averageRating < 2.5 %}-o{% elif product.averageRating >= 2.5 and product.averageRating < 3 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<i class="fa fa-star{% if product.averageRating < 3.5 %}-o{% elif product.averageRating >= 3.5 and product.averageRating < 4 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<i class="fa fa-star{% if product.averageRating < 4.5 %}-o{% elif product.averageRating >= 4.5 and product.averageRating < 5 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<span style="font-size:16px"> </span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="tab-pane fade in" id="list">
|
|
{% for product in products %}
|
|
<div class="col-xs-12" >
|
|
<div class="single-list-view">
|
|
<div style="width:100%;" class="row">
|
|
<div class="col-xs-12 col-md-4">
|
|
<div class="list-img">
|
|
<div class="product-img">
|
|
{% if product.discount != 0.00 %}
|
|
<div class="pro-type">
|
|
<span>Discount</span>
|
|
</div>
|
|
{% endif %}
|
|
<a href="{{product.get_prodcut_details_url}}"><img style="width:100%; border-radius:20px 0 0 20px;" src="{{product.image.url}}" alt="Product Title" /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-md-8" style="background: #F5F5F5">
|
|
<div style="height:350px; border-radius:0 20px 20px 0;" class="list-text">
|
|
|
|
<div style="font-size:16px" class="rating-star floatright">
|
|
<span>
|
|
<i class="fa fa-star{% if product.averageRating < 0.5 %}-o{% elif product.averageRating >= 0.5 and product.averageRating < 1 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<i class="fa fa-star{% if product.averageRating < 1.5 %}-o{% elif product.averageRating >= 1.5 and product.averageRating < 2 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<i class="fa fa-star{% if product.averageRating < 2.5 %}-o{% elif product.averageRating >= 2.5 and product.averageRating < 3 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<i class="fa fa-star{% if product.averageRating < 3.5 %}-o{% elif product.averageRating >= 3.5 and product.averageRating < 4 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<i class="fa fa-star{% if product.averageRating < 4.5 %}-o{% elif product.averageRating >= 4.5 and product.averageRating < 5 %}-half-o {% endif %}" aria-hidden="true"></i>
|
|
<span style="font-size:16px">(<b>{{product.countReview}}</b> reviews)</span>
|
|
</span>
|
|
</div>
|
|
<h3 style="color:#d99879">{{product.name}}</h3>
|
|
<h5>{% if product.discount != 0.00 %}<del>{{product.discount}}тг</del>{% endif %} {{product.price}}тг</h5>
|
|
<p>{{product.description}}.</p>
|
|
<div class="list-btn">
|
|
|
|
<a href="{{product.get_prodcut_details_url}}" class="btn btn-warning" style="background:none; color:#f4cca4">Посмотреть детали<i class="mdi mdi-eye"></i></a>
|
|
<a href="{% url 'cart:add_cart' product.id %}" class="btn " style="color:#1c1427;background:#f4cca4">Добавить в корзину<i class="mdi mdi-cart-outline"></i></a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div style="background:#ffffff" class="pagnation-ul">
|
|
{% if products.has_other_pages %}
|
|
<ul class="clearfix">
|
|
{% if products.has_previous %}
|
|
<li><a href="?page={{products.previous_page_number}}"><i style="color:#3b3b3b" class="mdi mdi-arrow-left-bold"></i></a></li>
|
|
{% else %}
|
|
<li><a href="#"><i class="mdi mdi-arrow-left-bold"></i></a></li>
|
|
{% endif %}
|
|
|
|
{% for x in products.paginator.page_range %}
|
|
{% if products.number == x %}
|
|
<li ><a href="#">{{x}}</a></li>
|
|
{% else %}
|
|
<li><a style="color:#3b3b3b" href="?page={{x}}">{{x}}</a></li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if products.has_next %}
|
|
<li ><a href="?page={{products.next_page_number}}"><i style="color:#3b3b3b" class="mdi mdi-arrow-right-bold"></i></a></li>
|
|
{% else %}
|
|
<li><a href="#"><i class="mdi mdi-arrow-right-bold"></i></a></li>
|
|
{% endif %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DTB27SGYGF"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-DTB27SGYGF');
|
|
</script>
|
|
{% endblock content %} |