Browse Source

Save template files

Vova Tkach 5 years ago
parent
commit
5c5bb0df54

+ 3 - 0
assets/template/header_html_file.go

@@ -48,6 +48,9 @@ var VarHeaderHtmlFile = []byte(`<!doctype html>
 							<li class="nav-item">
 								<a class="nav-link{{if eq $.Data.Module "404"}} active{{end}}" href="/not-existent-page/">404</a>
 							</li>
+							<li class="nav-item">
+								<a id="basket-nav-btn" class="nav-link" href="" onclick="window&&window.frontend&&frontend.ShopOpenBasket(this);return false;">Basket <span class="badge badge-pill badge-primary">0</span></a>
+							</li>
 						</ul>
 					</div>
 				</div>

+ 82 - 18
assets/template/scripts_js_file.go

@@ -1,20 +1,84 @@
 package template
 
-var VarScriptsJsFile = []byte(`$(document).ready(function() {
-	$('#product_thumbnails').lightGallery({
-		pager: false,
-		showThumbByDefault: false,
-		toogleThumb: false,
-		controls: false,
-		download: false
-	});
-	$('#product_image img').css('cursor', 'pointer').click(function() {
-		$($('#product_thumbnails a.thumbnail').get($(this).data('index'))).click();
-    });
-	$('#product_thumbnails a.thumbnail').each(function() {
-		$(this).mouseover(function() {
-			$('#product_image img').attr('src', $(this).data('hover'));
-			$('#product_image img').data('index', $(this).data('index'));
-		});
-    });
-});`)
+var VarScriptsJsFile = []byte(`(function(window, $) {
+	var frontend = function(window, $) {
+		var ShopProductsLightGalleryLastImage = '';
+
+		// Private
+		function ShopProductsInitLightGallery() {
+			$('#product_thumbnails').lightGallery({
+				pager: false,
+				showThumbByDefault: false,
+				toogleThumb: false,
+				controls: false,
+				download: false
+			});
+			$('#product_image img').css('cursor', 'pointer').click(function() {
+				$($('#product_thumbnails a.thumbnail').get($(this).data('index'))).click();
+			});
+			$('#product_thumbnails a.thumbnail').each(function() {
+				$(this).mouseover(function() {
+					if($(this).data('hover') != ShopProductsLightGalleryLastImage) {
+						ShopProductsLightGalleryLastImage = $(this).data('hover');
+						$('#product_image img').attr('src', $(this).data('hover'));
+						$('#product_image img').data('index', $(this).data('index'));
+					}
+				});
+			});
+		};
+
+		function ShopSetBasketNavBtnProductsCount(value) {
+			$('#basket-nav-btn .badge').html(value);
+		};
+
+		function Initialize() {
+			// Check if jQuery was loaded
+			if(typeof $ == 'function') {
+				ShopProductsInitLightGallery();
+			} else {
+				console.log('Error: jQuery is not loaded!');
+			}
+		};
+
+		// Initialize
+		if(window.addEventListener) {
+			// W3C standard
+			window.addEventListener('load', Initialize, false);
+		} else if(window.attachEvent) {
+			// Microsoft
+			window.attachEvent('onload', Initialize);
+		};
+
+		// Public
+		return {
+			ShopOpenBasket: function(object) {
+				if(!$(object).hasClass('click-blocked')) {
+					$(object).addClass('click-blocked');
+
+					ShopSetBasketNavBtnProductsCount(0);
+					console.log('ShopOpenBasket', object);
+
+					$(object).removeClass('click-blocked');
+				}
+				return false;
+			},
+
+			// TODO: add product to basket or count++ if already in basket
+			// Update products counter in header nav bar button
+			// Automatically open basket popup
+			ShopAddProductToBasket: function(object, product_id) {
+				if(!$(object).hasClass('click-blocked')) {
+					$(object).addClass('click-blocked');
+
+					ShopSetBasketNavBtnProductsCount(product_id);
+					console.log('ShopAddProductToBasket', object, product_id);
+
+					$(object).removeClass('click-blocked');
+				}
+				return false;
+			},
+		};
+	}(window, $);
+
+	window.frontend = frontend;
+}(window, jQuery));`)

+ 1 - 1
assets/template/shop_category_html_file.go

@@ -28,7 +28,7 @@ var VarShopCategoryHtmlFile = []byte(`{{template "header.html" .}}
 						<div class="card-text">{{.Briefly}}</div>
 					</div>
 					<div class="card-footer">
-						<span class="price">{{.PriceFormat "%.2f"}} {{.Currency.Code}}</span><a href="{{.Permalink}}" class="btn btn-primary">View</a>
+						<span class="price">{{.PriceFormat "%.2f"}} {{.Currency.Code}}</span><a href="{{.Permalink}}" class="btn btn-success" onclick="window&&window.frontend&&frontend.ShopAddProductToBasket(this, {{.Id}});return false;">Buy</a>
 					</div>
 				</div>
 			{{end}}

+ 1 - 1
assets/template/shop_html_file.go

@@ -28,7 +28,7 @@ var VarShopHtmlFile = []byte(`{{template "header.html" .}}
 						<div class="card-text">{{.Briefly}}</div>
 					</div>
 					<div class="card-footer">
-						<span class="price">{{.PriceFormat "%.2f"}} {{.Currency.Code}}</span><a href="{{.Permalink}}" class="btn btn-primary">View</a>
+						<span class="price">{{.PriceFormat "%.2f"}} {{.Currency.Code}}</span><a href="{{.Permalink}}" class="btn btn-success" onclick="window&&window.frontend&&frontend.ShopAddProductToBasket(this, {{.Id}});return false;">Buy</a>
 					</div>
 				</div>
 			{{end}}

+ 2 - 2
assets/template/shop_product_html_file.go

@@ -49,7 +49,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.PriceFormat "%.2f"}} {{$.Data.Shop.Product.Currency.Code}}</h3><a href="" class="btn btn-success btn-buy">Buy</a>
+								<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceFormat "%.2f"}} {{$.Data.Shop.Product.Currency.Code}}</h3><a href="" class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopAddProductToBasket(this, {{$.Data.Shop.Product.Id}});return false;">Buy</a>
 							</div>
 						</div>
 						<div class="card mt-3">
@@ -117,7 +117,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.PriceFormat "%.2f"}} {{$.Data.Shop.Product.Currency.Code}}</h3><a href="" class="btn btn-success btn-buy">Buy</a>
+									<h3 class="price mb-0 mr-4">{{$.Data.Shop.Product.PriceFormat "%.2f"}} {{$.Data.Shop.Product.Currency.Code}}</h3><a href="" class="btn btn-success btn-buy" onclick="window&&window.frontend&&frontend.ShopAddProductToBasket(this, {{$.Data.Shop.Product.Id}});return false;">Buy</a>
 								</div>
 							</div>
 						</div>

+ 24 - 3
assets/template/styles_css_file.go

@@ -29,6 +29,7 @@ var VarStylesCssFile = []byte(`/* Fix bootstrap */
 		 max-width: 1000px; 
 		/*background: red;*/
 	}
+
 	.navbar-expand-lg .navbar-nav {
 		margin-right: -.5rem;
 	}
@@ -100,6 +101,12 @@ footer {
 	padding-top: 3.5rem;
 }
 
+/* Basket button */
+#basket-nav-btn .badge {
+	vertical-align: top;
+	margin-top: 3px;
+}
+
 /* Fave background */
 .bg-fave {
 	background: #205081 url(/assets/sys/bg.png) repeat 0 0;
@@ -135,9 +142,23 @@ footer {
 	margin-left: -1px;
 }
 
-@media (min-width: 768px) { .grid-products .card-product { width: 50%; } }
-@media (min-width: 992px) { .grid-products .card-product { width: 33.33333%; } }
-@media (min-width: 1200px) { .grid-products .card-product { width: 33.33333%; } }
+@media (min-width: 768px) {
+	.grid-products .card-product {
+		width: 50%;
+	}
+}
+
+@media (min-width: 992px) {
+	.grid-products .card-product {
+		width: 33.33333%;
+	}
+}
+
+@media (min-width: 1200px) {
+	.grid-products .card-product {
+		width: 33.33333%;
+	}
+}
 
 .grid-products .card-product:hover {
 	background-color: #f2f4f6;