170 lines
9.0 KiB
HTML
170 lines
9.0 KiB
HTML
{{ define "product" }}
|
|
<section class="breadcrumb-section pb-3 pt-3">
|
|
<div class="container">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="/products">Products</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">{{ .product.Name}}</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
<section class="product-page pb-4 pt-4">
|
|
<div class="container">
|
|
<div class="row product-detail-inner">
|
|
<div class="col-lg-6 col-md-6 col-12">
|
|
<div id="product-images" class="carousel slide" data-ride="carousel">
|
|
<!-- slides -->
|
|
<div class="carousel-inner">
|
|
{{ range $i, $productImage := .product.ProductImages }}
|
|
{{ if eq $i 0 }}
|
|
<div class="carousel-item active"><img src="{{ $productImage.Path }}" alt="Product 1">
|
|
</div>
|
|
{{ else }}
|
|
<<div class="carousel-item"><img src="{{ $productImage.Path }}" alt="Product 2"></div>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div> <!-- Left right -->
|
|
<a class="carousel-control-prev" href="#product-images" data-slide="prev"> <span
|
|
class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next"
|
|
href="#product-images" data-slide="next">
|
|
<span class="carousel-control-next-icon"></span> </a><!-- Thumbnails -->
|
|
<ol class="carousel-indicators list-inline">
|
|
{{ range $i, $productImage := .product.ProductImages }}
|
|
{{ if eq $i 0 }}
|
|
<li class="list-inline-item active"><a id="carousel-selector-{{ $i }}" class="selected"
|
|
data-slide-to="{{ $i }}" data-target="#product-images">
|
|
<img src="{{ $productImage.Path }}" class="img-fluid"> </a></li>
|
|
{{ else }}
|
|
<li class="list-inline-item"><a id="carousel-selector-{{ $i }}" data-slide-to="{{ $i }}"
|
|
data-target="#product-images"> <img
|
|
src="{{ $productImage.Path }}" class="img-fluid"> </a></li>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6 col-12">
|
|
<div class="product-detail">
|
|
<h2 class="product-name">{{ .product.Name }}</h2>
|
|
<div class="product-price">
|
|
<span class="price">IDR {{ .product.Price }}</span>
|
|
</div>
|
|
{{ if .success }}
|
|
<div class="alert alert-success">
|
|
{{ range $i, $msg := .success }}
|
|
{{ $msg }}<br/>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
{{ if .error }}
|
|
<div class="alert alert-danger">
|
|
{{ range $i, $msg := .error }}
|
|
{{ $msg }}<br/>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
<div class="product-short-desc">
|
|
<p>{{ .product.ShortDescription }}</p>
|
|
</div>
|
|
<div class="product-select">
|
|
<form method="POST" action="/carts">
|
|
<input type="hidden" name="product_id" value="{{ .product.ID }}"/>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<input type="number" name="qty" class="form-control" value="1"/>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<button type="submit" class="btn btn-primary btn-block">Add to Cart</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="btn btn-secondary"><i class="fa fa-heart-o"></i></a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!--
|
|
<div class="product-categories">
|
|
<ul>
|
|
<li class="categories-title">Categories :</li>
|
|
<li><a href="#">fashion</a></li>
|
|
<li><a href="#">electronics</a></li>
|
|
<li><a href="#">toys</a></li>
|
|
<li><a href="#">food</a></li>
|
|
<li><a href="#">jewellery</a></li>
|
|
</ul>
|
|
</div>
|
|
-->
|
|
<!--<div class="product-tags">
|
|
<ul>
|
|
<li class="categories-title">Tags :</li>
|
|
<li><a href="#">fashion</a></li>
|
|
<li><a href="#">electronics</a></li>
|
|
<li><a href="#">toys</a></li>
|
|
<li><a href="#">food</a></li>
|
|
<li><a href="#">jewellery</a></li>
|
|
</ul>
|
|
</div>
|
|
-->
|
|
<!--
|
|
<div class="product-share">
|
|
<ul>
|
|
<li class="categories-title">Share :</li>
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="product-details">
|
|
<div class="nav-wrapper">
|
|
<ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab"
|
|
href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1"
|
|
aria-selected="true">Beschreibung</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab"
|
|
href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2"
|
|
aria-selected="false">Reviews</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="tabs-icons-text-1" role="tabpanel"
|
|
aria-labelledby="tabs-icons-text-1-tab">
|
|
<p>{{ .product.Description }}</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel"
|
|
aria-labelledby="tabs-icons-text-2-tab">
|
|
<div class="review-form">
|
|
<h3>Write a review</h3>
|
|
<form>
|
|
<div class="form-group">
|
|
<label>Your Name</label>
|
|
<input type="text" class="form-control"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Your Review</label>
|
|
<textarea cols="4" class="form-control"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ end }} |