Front-end basket button, js optimization

hosts/localhost/template/header.html

@@ -46,6 +46,9 @@
 							<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 class="nav-link basket" href="#">Basket <span class="badge badge-pill badge-primary">0</span></a>
+							</li>
 						</ul>
 					</div>
 				</div>

hosts/localhost/template/scripts.js

@@ -1,4 +1,6 @@
-$(document).ready(function() {
+var GlobalLastProductImage = '';
+
+function ShopProductImagesLightGallery() {
 	$('#product_thumbnails').lightGallery({
 		pager: false,
 		showThumbByDefault: false,
@@ -8,11 +10,19 @@ $(document).ready(function() {
 	});
 	$('#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'));
+			if($(this).data('hover') != GlobalLastProductImage) {
+				GlobalLastProductImage = $(this).data('hover');
+				$('#product_image img').attr('src', $(this).data('hover'));
+				$('#product_image img').data('index', $(this).data('index'));
+			}
 		});
-    });
+	});
+}
+
+// Init all
+$(document).ready(function() {
+	ShopProductImagesLightGallery();
 });

hosts/localhost/template/styles.css

@@ -27,6 +27,7 @@
 		 max-width: 1000px; 
 		/*background: red;*/
 	}
+
 	.navbar-expand-lg .navbar-nav {
 		margin-right: -.5rem;
 	}
@@ -98,6 +99,12 @@ footer {
 	padding-top: 3.5rem;
 }
 
+/* Basket button */
+a.nav-link.basket .badge {
+	vertical-align: top;
+	margin-top: 3px;
+}
+
 /* Fave background */
 .bg-fave {
 	background: #205081 url(/assets/sys/bg.png) repeat 0 0;
@@ -133,9 +140,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;