Theme update

Resources/Public/Themes/default/account-basket.css

@@ -0,0 +1,62 @@
+.account-basket {
+	margin: 0 auto;
+}
+
+.account-basket .header {
+	text-transform: uppercase;
+	text-align: start;
+	font-weight: normal;
+	padding: 0.5rem 1rem;
+	color: var(--ai-secondary);
+	border-bottom: 1px solid var(--ai-secondary);
+}
+
+.account-basket .basket-item {
+	border: 1px solid var(--ai-tertiary);
+	padding: 1rem;
+	margin: 1rem;
+}
+
+.account-basket .basket-basic {
+	font-weight: bold;
+}
+
+.account-basket .name:after {
+	content: ": ";
+}
+
+.account-basket .action {
+	margin-top: 0.5rem;
+}
+
+.account-basket .action .btn {
+	border: 1px solid var(--ai-secondary);
+	display: block;
+	width: 100%;
+	max-width: 6rem;
+	margin: auto;
+}
+
+.account-basket-detail {
+	padding-top: 1rem;
+	display: none;
+}
+
+.account-basket-detail a:hover {
+	text-decoration: underline;
+}
+
+.account-basket-detail h2 {
+	margin: 0.5rem 0;
+}
+
+.account-basket-detail h3 {
+	display: inline-block;
+	font-size: 1rem;
+	margin: 0;
+}
+
+.account-basket-detail li.attr-item .name,
+.account-basket-detail li.attr-item .value {
+	min-width: 0;
+}

Resources/Public/Themes/default/account-basket.js

@@ -0,0 +1,37 @@
+/**
+ * Account basket actions
+ */
+AimeosAccountBasket = {
+
+	/**
+	 * Shows basket details without page reload
+	 */
+	onToggleDetail() {
+
+		$(".account-basket").on("click", ".basket-item .action .btn", ev => {
+
+			const target = $(ev.currentTarget).closest(".basket-item");
+			const details = $(".account-basket-detail", target);
+
+			$(".btn.show", target).toggleClass('hidden');
+			$(".btn.close", target).toggleClass('hidden');
+
+			slideToggle(details[0], 300);
+
+			return false;
+		});
+	},
+
+
+	/**
+	 * Initializes the account basket actions
+	 */
+	init() {
+		this.onToggleDetail();
+	}
+};
+
+
+$(() => {
+	AimeosAccountBasket.init();
+});

Resources/Public/Themes/default/aimeos.css

@@ -313,7 +313,7 @@ img {
 }
 
 .aimeos .prototype {
-	display: none;
+	display: none !important;
 }
 
 .aimeos .lazy-image {
@@ -631,10 +631,6 @@ body > .content, body .main-section {
 	justify-content: flex-end;
 }
 
-.navbar-mainnavigation {
-	position: fixed !important;
-}
-
 .navbar-nav {
 	padding: 0;
 }
@@ -823,15 +819,15 @@ body > .content, body .main-section {
 	--swiffy-slider-item-ratio: var(--ai-product-image-ratio);
 }
 
-.aimeos .list .product .media-list div:first-of-type,
-.aimeos .product-list .media-list div:first-of-type {
+.aimeos .list .product .media-list span:first-of-type,
+.aimeos .product-list .media-list span:first-of-type {
 	z-index: 1;
 	opacity: 1;
 	transition: opacity .3s linear;
 }
 
-.aimeos .list .product .media-list.multiple:hover div:first-of-type,
-.aimeos .product-list .media-list.multiple:hover div:first-of-type {
+.aimeos .list .product .media-list.multiple:hover span:first-of-type,
+.aimeos .product-list .media-list.multiple:hover span:first-of-type {
 	transition: opacity .3s linear;
 	opacity: 0;
 }
@@ -851,6 +847,7 @@ body > .content, body .main-section {
 	left: 0;
 	width: 100%;
 	height: 100%;
+	display: block;
 	object-fit: contain;
 }
 

Resources/Public/Themes/default/aimeos.js

@@ -61,6 +61,22 @@ Aimeos = {
 	},
 
 
+	/**
+	 * Delays the function by the given timeout
+	 *
+	 * @param {Function} fcn Function to delay
+	 * @param {int} timeout Timeout in milliseconds
+	 * @returns {Function} Function wrapped into timer function
+	 */
+	 debounce( fcn, timeout = 300) {
+		let timer;
+		return (...args) => {
+		  clearTimeout(timer);
+		  timer = setTimeout(() => { fcn.apply(this, args); }, timeout);
+		};
+	},
+
+
 	/**
 	 * Removes an existing overlay from the current page
 	 */
@@ -125,7 +141,7 @@ Aimeos = {
 
 			$(".aimeos .lazy-image").each((idx, el) => {
 				(new IntersectionObserver(callback, {
-					root: $(el).closest('.product')[0],
+					root: null,
 					rootMargin: '320px',
 					threshold: 0
 				})).observe(el);
@@ -314,7 +330,8 @@ AimeosBasket = {
 				}
 
 				if( index === 0 ) {
-					$(".select-option", select).removeAttr("disabled").data("disabled", 0).data("by", {});
+					$(".select-option", select).prop("checked", false).prop("selected", false)
+						.removeAttr("disabled").data("disabled", 0).data("by", {});
 				}
 
 				$(".select-option", select).each((idx, option) => {
@@ -545,7 +562,7 @@ AimeosBasket = {
 		$(".articleitem", item).removeClass("price-actual");
 		newPrice.addClass("price-actual");
 
-		if(!(item.data("reqstock") && $(".stockitem", newStock).hasClass("stock-out"))) {
+		if(!(item.data("reqstock") && $(".stockitem", newStock).filter(".stock-out").length == $(".stockitem", newStock).length)) {
 			stock = true;
 		}
 

Resources/Public/Themes/default/basket-bulk.css

@@ -7,6 +7,9 @@
 .basket-bulk .headline,
 .basket-bulk .bulk-content .details {
 	border-bottom: 1px solid var(--ai-secondary);
+}
+
+.basket-bulk .row {
 	align-items: center;
 }
 

Resources/Public/Themes/default/basket-mini.js

@@ -16,7 +16,7 @@ AimeosBasketMini = {
 		const price = Number.parseFloat(attr['order.base.price']);
 		const delivery = Number.parseFloat(attr['order.base.costs']);
 
-		const formatter = new Intl.NumberFormat([], {
+		const formatter = new Intl.NumberFormat(attr['order.base.languageid'], {
 			currency: attr['order.base.currencyid'],
 			style: "currency"
 		});

Resources/Public/Themes/default/basket-standard.css

@@ -4,6 +4,29 @@
 	padding: 2rem 0;
 }
 
+.basket-standard .header {
+	align-items: center;
+	padding: 0 1rem;
+}
+
+.basket-standard .header h1 {
+	margin: 0;
+}
+
+.basket-standard .basket-save.input-group {
+    border-bottom: 1px solid var(--ai-secondary);
+	width: auto;
+}
+
+.basket-standard .basket-save .basket-name {
+	border: none;
+}
+
+.basket-standard .basket-save .btn {
+	border: none;
+	width: 5rem;
+}
+
 .basket-standard-main {
 	border: 1px solid var(--ai-tertiary);
 	padding: 1rem;

Resources/Public/Themes/default/catalog-detail.css

@@ -583,6 +583,7 @@
 }
 
 .catalog-detail-supplier .media-item {
+	display: block;
 	float: right;
 	margin: 1rem;
 }
@@ -871,7 +872,6 @@
 .catalog-detail-bought .product,
 .catalog-detail-bundle .product,
 .catalog-detail-suggest .product {
-	display: inline-block;
 	vertical-align: top;
 	position: relative;
 	width: 160px;
@@ -891,6 +891,7 @@
 .catalog-detail-bought .media-item,
 .catalog-detail-bundle .media-item,
 .catalog-detail-suggest .media-item {
+	display: block;
 	height: 213px;
 	width: 160px;
 }