Shop front-end, product out of stock

assets/template/shop_category_html_file.go

@@ -28,7 +28,9 @@ var VarShopCategoryHtmlFile = []byte(`{{template "header.html" .}}
 						<div class="card-text">{{.Briefly}}</div>
 					</div>
 					<div class="card-footer">
-						<span class="price">{{.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</span><a href="{{.Permalink}}" class="btn btn-success">View</a>
+						<a href="{{.Permalink}}" class="btn btn-success">View</a>
+						<span class="price">{{.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</span>
+						{{if le .Quantity 0}}<br><span class="badge badge-primary">Out of stock</span>{{end}}
 					</div>
 				</div>
 			{{end}}

assets/template/shop_html_file.go

@@ -28,7 +28,9 @@ var VarShopHtmlFile = []byte(`{{template "header.html" .}}
 						<div class="card-text">{{.Briefly}}</div>
 					</div>
 					<div class="card-footer">
-						<span class="price">{{.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</span><a href="{{.Permalink}}" class="btn btn-success">View</a>
+						<a href="{{.Permalink}}" class="btn btn-success">View</a>
+						<span class="price">{{.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</span>
+						{{if le .Quantity 0}}<br><span class="badge badge-primary">Out of stock</span>{{end}}
 					</div>
 				</div>
 			{{end}}

assets/template/shop_product_html_file.go

@@ -3,7 +3,7 @@ package template
 var VarShopProductHtmlFile = []byte(`{{template "header.html" .}}
 <div class="card mb-4">
 	<div class="card-body product-full">
-		<h2 class="card-title">{{$.Data.Shop.Product.Name}} {{$.Data.Shop.Product.Id}}</h2>
+		<h2 class="card-title">{{$.Data.Shop.Product.Name}} {{$.Data.Shop.Product.Id}}{{if le $.Data.Shop.Product.Quantity 0}} <span class="badge badge-primary">Out of stock</span>{{end}}</h2>
 		<ul class="nav nav-tabs" id="myTab" role="tablist">
 			<li class="nav-item">
 				<a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true">All about product</a>
@@ -51,7 +51,7 @@ var VarShopProductHtmlFile = []byte(`{{template "header.html" .}}
 						{{end}}
 						<div class="card mt-3{{if not $.Data.Shop.Product.HaveVariations}} mt-sm-3 mt-md-0 mt-lg-0{{end}}">
 							<div class="card-body">
-								<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</h3><a href="" class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopBasketProductAdd(this, {{$.Data.Shop.Product.Id}});return false;">Buy</a>
+								<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</h3><button class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopBasketProductAdd(this, {{$.Data.Shop.Product.Id}});return false;"{{if le $.Data.Shop.Product.Quantity 0}} disabled{{end}}>Buy</button>
 							</div>
 						</div>
 						<div class="card mt-3">
@@ -119,7 +119,7 @@ var VarShopProductHtmlFile = []byte(`{{template "header.html" .}}
 							</div>
 							<div class="card mt-3">
 								<div class="card-body">
-									<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</h3><a href="" class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopBasketProductAdd(this, {{$.Data.Shop.Product.Id}});return false;">Buy</a>
+									<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</h3><button class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopBasketProductAdd(this, {{$.Data.Shop.Product.Id}});return false;"{{if le $.Data.Shop.Product.Quantity 0}} disabled{{end}}>Buy</button>
 								</div>
 							</div>
 						</div>

assets/template/styles_css_file.go

@@ -198,6 +198,15 @@ footer {
 	float: right;
 }
 
+.grid-products .card-product .card-footer {
+	position: relative;
+}
+
+.grid-products .card-product .card-footer .badge {
+	position: absolute;
+	margin-top: -4px;
+}
+
 .product-full .price {
 	display: inline-block;
 	vertical-align: middle;

hosts/localhost/template/shop-category.html

@@ -26,7 +26,9 @@
 						<div class="card-text">{{.Briefly}}</div>
 					</div>
 					<div class="card-footer">
-						<span class="price">{{.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</span><a href="{{.Permalink}}" class="btn btn-success">View</a>
+						<a href="{{.Permalink}}" class="btn btn-success">View</a>
+						<span class="price">{{.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</span>
+						{{if le .Quantity 0}}<br><span class="badge badge-primary">Out of stock</span>{{end}}
 					</div>
 				</div>
 			{{end}}

hosts/localhost/template/shop-product.html

@@ -1,7 +1,7 @@
 {{template "header.html" .}}
 <div class="card mb-4">
 	<div class="card-body product-full">
-		<h2 class="card-title">{{$.Data.Shop.Product.Name}} {{$.Data.Shop.Product.Id}}</h2>
+		<h2 class="card-title">{{$.Data.Shop.Product.Name}} {{$.Data.Shop.Product.Id}}{{if le $.Data.Shop.Product.Quantity 0}} <span class="badge badge-primary">Out of stock</span>{{end}}</h2>
 		<ul class="nav nav-tabs" id="myTab" role="tablist">
 			<li class="nav-item">
 				<a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true">All about product</a>
@@ -49,7 +49,7 @@
 						{{end}}
 						<div class="card mt-3{{if not $.Data.Shop.Product.HaveVariations}} mt-sm-3 mt-md-0 mt-lg-0{{end}}">
 							<div class="card-body">
-								<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</h3><a href="" class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopBasketProductAdd(this, {{$.Data.Shop.Product.Id}});return false;">Buy</a>
+								<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</h3><button class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopBasketProductAdd(this, {{$.Data.Shop.Product.Id}});return false;"{{if le $.Data.Shop.Product.Quantity 0}} disabled{{end}}>Buy</button>
 							</div>
 						</div>
 						<div class="card mt-3">
@@ -117,7 +117,7 @@
 							</div>
 							<div class="card mt-3">
 								<div class="card-body">
-									<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</h3><a href="" class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopBasketProductAdd(this, {{$.Data.Shop.Product.Id}});return false;">Buy</a>
+									<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</h3><button class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopBasketProductAdd(this, {{$.Data.Shop.Product.Id}});return false;"{{if le $.Data.Shop.Product.Quantity 0}} disabled{{end}}>Buy</button>
 								</div>
 							</div>
 						</div>

hosts/localhost/template/shop.html

@@ -26,7 +26,9 @@
 						<div class="card-text">{{.Briefly}}</div>
 					</div>
 					<div class="card-footer">
-						<span class="price">{{.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</span><a href="{{.Permalink}}" class="btn btn-success">View</a>
+						<a href="{{.Permalink}}" class="btn btn-success">View</a>
+						<span class="price">{{.PriceNice}} {{$.Data.Shop.CurrentCurrency.Code}}</span>
+						{{if le .Quantity 0}}<br><span class="badge badge-primary">Out of stock</span>{{end}}
 					</div>
 				</div>
 			{{end}}

hosts/localhost/template/styles.css

@@ -196,6 +196,15 @@ footer {
 	float: right;
 }
 
+.grid-products .card-product .card-footer {
+	position: relative;
+}
+
+.grid-products .card-product .card-footer .badge {
+	position: absolute;
+	margin-top: -4px;
+}
+
 .product-full .price {
 	display: inline-block;
 	vertical-align: middle;