Producte show
Producte werden nun angezeigt .
This commit is contained in:
27
templates/pages/pagination.html
Normal file
27
templates/pages/pagination.html
Normal file
@@ -0,0 +1,27 @@
|
||||
{{ define "pagination" }}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ .pagination.PrevPage }}" tabindex="-1">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ range $i, $link := .pagination.Links }}
|
||||
{{ $active := "" }}
|
||||
{{ if $link.IsCurrentPage }}
|
||||
{{ $active = "active" }}
|
||||
{{ end }}
|
||||
<li class="page-item {{ $active }}"><a class="page-link" href="{{ $link.Url }}">{{ $link.Page }}</a></li>
|
||||
{{ end }}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ .pagination.NextPage }}">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
170
templates/pages/product.html
Normal file
170
templates/pages/product.html
Normal file
@@ -0,0 +1,170 @@
|
||||
{{ 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 }}
|
||||
120
templates/pages/products.html
Normal file
120
templates/pages/products.html
Normal file
@@ -0,0 +1,120 @@
|
||||
{{ define "products" }}
|
||||
<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 active" aria-current="page">Products</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
<section class="products-grid pb-4 pt-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4 col-12">
|
||||
<div class="sidebar">
|
||||
<!--<div class="sidebar-widget">
|
||||
<div class="widget-title">
|
||||
<h3>Shop by Price</h3>
|
||||
</div>
|
||||
<div class="widget-content shop-by-price">
|
||||
<form method="get" action="/tesas">
|
||||
<div class="price-filter">
|
||||
<div class="price-filter-inner">
|
||||
<div id="slider-range"></div>
|
||||
<div class="price_slider_amount">
|
||||
<div class="label-input">
|
||||
<input type="text" id="amount" name="price"
|
||||
placeholder="Add Your Price" />
|
||||
<button type="submit">Filter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="sidebar-widget">
|
||||
<div class="widget-title">
|
||||
<h3>Categories</h3>
|
||||
</div>
|
||||
<div class="widget-content widget-categories">
|
||||
<ul>
|
||||
<li><a href="#">Fashions</a></li>
|
||||
<li><a href="#">Electronics</a>
|
||||
<ul>
|
||||
<li><a href="#">Hand Phone</a></li>
|
||||
<li><a href="#">Laptops</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Home and Kitchen</a></li>
|
||||
<li><a href="#">Baby and Toys</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Digital Goods</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="sidebar-widget">
|
||||
<div class="widget-title">
|
||||
<h3>Brands</h3>
|
||||
</div>
|
||||
<div class="widget-content widget-brands">
|
||||
<ul>
|
||||
<li><a href="#">Apple</a></li>
|
||||
<li><a href="#">Samsung</a></li>
|
||||
<li><a href="#">Lenovo</a></li>
|
||||
<li><a href="#">Asus</a></li>
|
||||
<li><a href="#">Xiaomi</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9 col-md-8 col-12">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="products-top">
|
||||
<div class="products-top-inner">
|
||||
<div class="products-found">
|
||||
<p><span>25</span> products found of <span>1.342</span></p>
|
||||
</div>
|
||||
<!--
|
||||
<div class="products-sort">
|
||||
<span>Sort By : </span>
|
||||
<select>
|
||||
<option>Default</option>
|
||||
<option>Price</option>
|
||||
<option>Recent</option>
|
||||
</select>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ range $i, $product := .products }}
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="single-product">
|
||||
<div class="product-img">
|
||||
<a href="/products/{{ $product.Slug }}">
|
||||
<img src="https://placehold.jp/300x400.png" class="img-fluid" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3><a href="/products/{{ $product.Slug }}">{{ $product.Name }}</a></h3>
|
||||
<div class="product-price">
|
||||
<span>{{ $product.Price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ template "pagination" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user