243 lines
15 KiB
HTML
243 lines
15 KiB
HTML
{% set product = __SELF__.offer %}
|
|
{% set rating = __SELF__.rating %}
|
|
|
|
<!-- Breadcumb Area -->
|
|
<div class="breadcumb_area">
|
|
<div class="container h-100">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col-12">
|
|
<h5>Haryt barada giňişleýin maglumat</h5>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ 'index'|page }}">Esasy sahypa</a></li>
|
|
<li class="breadcrumb-item"><a href="#">Harytlar</a></li>
|
|
<li class="breadcrumb-item active">{{ product.name }}</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Breadcumb Area -->
|
|
|
|
<!-- Single Product Details Area -->
|
|
<section class="single_product_details_area section_padding_100">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6">
|
|
<div class="single_product_thumb">
|
|
<div id="product_details_slider" class="carousel slide" data-ride="carousel">
|
|
|
|
<!-- Carousel Inner -->
|
|
<div class="carousel-inner">
|
|
|
|
{% for key, image in product.images %}
|
|
<div class="carousel-item {{ key == 0 ? 'active' : '' }}">
|
|
<a class="gallery_img" href="{{ image.path }}" title="{{ product.name }}">
|
|
<img class="d-block w-100" src="{{ image.path }}" alt="{{ product.name }}">
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Carosel Indicators -->
|
|
<ol class="carousel-indicators">
|
|
{% for key, image in product.images %}
|
|
<li class="{{ key == 0 ? 'active' : '' }}" data-target="#product_details_slider" data-slide-to="{{key}}" style="background-image: url({{ image.path }});"></li>
|
|
{% endfor %}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Single Product Description -->
|
|
<div class="col-12 col-lg-6">
|
|
<div class="single_product_desc">
|
|
<h4 class="title mb-2">{{ product.name }}</h4>
|
|
<div class="single_product_ratings mb-2">
|
|
{% if(product.comments_count > 0) %}
|
|
<i class="fa fa-star {{ (rating == 1 or rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<i class="fa fa-star {{ (rating == 2 or rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<i class="fa fa-star {{ (rating == 3 or rating > 2) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<i class="fa fa-star {{ (rating == 4 or rating > 3) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<i class="fa fa-star {{ (rating == 5 or rating > 4) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
{% else %}
|
|
<i class="fa fa-star" aria-hidden="true"></i>
|
|
<i class="fa fa-star" aria-hidden="true"></i>
|
|
<i class="fa fa-star" aria-hidden="true"></i>
|
|
<i class="fa fa-star" aria-hidden="true"></i>
|
|
<i class="fa fa-star" aria-hidden="true"></i>
|
|
{% endif %}
|
|
<span class="text-muted">({{ product.comments_count }} teswir)</span>
|
|
</div>
|
|
<h4 class="price mb-4">{{ product.price }} TMT</h4>
|
|
|
|
<!-- Overview -->
|
|
<div class="short_overview mb-4">
|
|
<h6>Maglumat</h6>
|
|
<p>{{ product.description|raw }}</p>
|
|
</div>
|
|
|
|
|
|
<!-- Add to Cart Form -->
|
|
<form class="cart clearfix my-5 d-flex flex-wrap align-items-center" method="post">
|
|
<div class="quantity">
|
|
<input type="number" class="qty-text form-control" id="qty2" step="1" min="1" max="12" name="quantity" value="1">
|
|
</div>
|
|
<button type="submit" name="addtocart" value="5" class="btn btn-primary mt-1 mt-md-0 ml-1 ml-md-3">Sebede goş</button>
|
|
</form>
|
|
|
|
<!-- Others Info -->
|
|
<div class="others_info_area mb-3 d-flex flex-wrap">
|
|
{% if user %}
|
|
<a class="add_to_wishlist" href="wishlist.html"><i class="fa fa-heart" aria-hidden="true"></i> Halanlarym</a>
|
|
{% else %}
|
|
<a class="add_to_wishlist" href="{{ 'login'|page }}"><i class="fa fa-heart" aria-hidden="true"></i> Halanlarym</a>
|
|
{% endif %}
|
|
<a class="share_with_friend" href="#"><i class="fa fa-share" aria-hidden="true"></i> Paýlaşmak</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="product_details_tab section_padding_100_0 clearfix">
|
|
<!-- Tabs -->
|
|
<ul class="nav nav-tabs" role="tablist" id="product-details-tab">
|
|
<li class="nav-item">
|
|
<a href="#description" class="nav-link active" data-toggle="tab" role="tab">Giňişleýin maglumat</a>
|
|
</li>
|
|
{% if user %}
|
|
<li class="nav-item">
|
|
<a href="#reviews" class="nav-link" data-toggle="tab" role="tab">Teswirler <span class="text-muted">({{ product.comments_count }})</span></a>
|
|
</li>
|
|
{% endif %}
|
|
<li class="nav-item">
|
|
<a href="#addi-info" class="nav-link" data-toggle="tab" role="tab">Goşmaça maglumat</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#refund" class="nav-link" data-toggle="tab" role="tab">Yzyna tabşyrmak & Zakazy ýatyrmak</a>
|
|
</li>
|
|
</ul>
|
|
<!-- Tab Content -->
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane fade show active" id="description">
|
|
<div class="description_area">
|
|
<h5>Giňişleýin maglumat</h5>
|
|
<p>{{ product.description|raw }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if user %}
|
|
|
|
<div role="tabpanel" class="tab-pane fade" id="reviews">
|
|
<div class="reviews_area">
|
|
<ul>
|
|
<li>
|
|
{% for comment in product.comments %}
|
|
<div class="single_user_review mb-15">
|
|
<div class="review-rating">
|
|
<i class="fa fa-star {{ (comment.rating == 1 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<i class="fa fa-star {{ (comment.rating == 2 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<i class="fa fa-star {{ (comment.rating == 3 or comment.rating > 2) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<i class="fa fa-star {{ (comment.rating == 4 or comment.rating > 3) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<i class="fa fa-star {{ (comment.rating == 5 or comment.rating > 4) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
|
|
<span>{{ comment.comment }}</span>
|
|
</div>
|
|
<div class="review-details">
|
|
<p><a href="#">{{ comment.user.name }}</a> <span>{{ comment.created_at|date('d.m.Y') }}</span></p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="submit_a_review_area mt-20">
|
|
<h4>Teswir ýazmak</h4>
|
|
<form id="commentForm"
|
|
data-request="onCommentSave"
|
|
data-request-flash
|
|
data-request-validate
|
|
data-request-success="resetForm()"
|
|
data-request-error="resetForm()"
|
|
method="post">
|
|
<div class="form-group">
|
|
<div class="stars">
|
|
<input type="radio" name="star" class="star-1" value="1" id="star-1">
|
|
<label class="star-1" for="star-1">1</label>
|
|
<input type="radio" name="star" class="star-2" value="2" id="star-2">
|
|
<label class="star-2" for="star-2">2</label>
|
|
<input type="radio" name="star" class="star-3" value="3" id="star-3">
|
|
<label class="star-3" for="star-3">3</label>
|
|
<input type="radio" name="star" class="star-4" value="4" id="star-4">
|
|
<label class="star-4" for="star-4">4</label>
|
|
<input type="radio" name="star" class="star-5" value="5" id="star-5">
|
|
<label class="star-5" for="star-5">5</label>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="comments">Teswirler</label>
|
|
<input type="hidden" name="product_id" value="{{ product.id }}">
|
|
<textarea class="form-control" name="comment" id="comment" rows="5" data-max-length="300"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Teswiri ugratmak</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
<div role="tabpanel" class="tab-pane fade" id="addi-info">
|
|
<div class="additional_info_area">
|
|
<h5>Goşmaça maglumatlar</h5>
|
|
<p>Gelen harydyň hili pes bolan ýagdaýynda näme edip bilerin?
|
|
<br> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit similique qui, itaque delectus labore.</span></p>
|
|
<p>Zakaz eden harydym gelmedi, onuň ýerine başga zat geldi.
|
|
<br> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quam voluptatum beatae harum tempore, ab?</span></p>
|
|
<p class="mb-0">Zakazy nädip ýatyryp bilerin?
|
|
<br> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum eius eum, minima!</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane fade" id="refund">
|
|
<div class="refund_area">
|
|
<h6>Harydy yzyna gaýtarmak</h6>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem, eos eius laboriosam voluptates totam mollitia repellat rem voluptate obcaecati quas fuga similique impedit cupiditate vitae repudiandae. Rem, tenetur placeat!</p>
|
|
|
|
<h6>Näme sebäpden yzyna gaýtarmakçy</h6>
|
|
<ul class="mb-30 ml-30">
|
|
<li><i class="icofont-check"></i> Hili pes</li>
|
|
<li><i class="icofont-check"></i> Dostawka haýal</li>
|
|
<li><i class="icofont-check"></i> Başga haryt geldi</li>
|
|
|
|
</ul>
|
|
|
|
<h6>Sorag. Gelen harydyň hili pes bolan ýagdaýynda näme edip bilerin?</h6>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit similique qui, itaque delectus labore.</p>
|
|
|
|
<h6>Sorag. Zakaz eden harydym gelmedi, onuň ýerine başga zat geldi Näme edip bilerin?.</h6>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quam voluptatum beatae harum tempore, ab?</p>
|
|
|
|
<h6>Sorag. Nädip zakazy ýatyryp bilerin?</h6>
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum eius eum, minima!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Single Product Details Area End -->
|
|
|
|
{% put scripts %}
|
|
<script>
|
|
function resetForm() {
|
|
document.getElementById('commentForm').reset(); // Reset the form
|
|
}
|
|
</script>
|
|
{% endput %} |