django_magazine/templates/shop/shop/shop.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>
														&nbsp;<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>
																&nbsp;<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 %}