feat: adiciona o minicart

src/arquivos/js/app/app.js

@@ -64,7 +64,7 @@ const app = new Container({
 	],
 });
 
-app.bind(Minicart.name, ".carrinho .mini-cart");
+app.bind(Minicart.name, ".minicart__drawer");
 app.bind(Newsletter.name, {
 	elemento: ".news-form",
 	textButtom: "Cadastre-se",

src/arquivos/js/app/components/Minicart.js

@@ -16,7 +16,9 @@ export default class Minicart {
 				</div>
 				<div class="mini-cart-main">
 					<div class="wait-screen"></div>
-					<ul class="product-list"></ul>
+					<ul class="product-list">
+
+					</ul>
 				</div>
 				<div class="mini-cart-footer">
 					<div class="totals-container">
@@ -57,7 +59,7 @@ export default class Minicart {
 					<li id="${i + "-" + items[i].uniqueId}" class="product">
 						<div class="product-image">
 							<a href="${items[i].detailUrl}" title="${items[i].name}">
-								<img src="${alterarTamanhoImagemSrcVtex(items[i].imageUrl, 85, 100)}" alt="${
+								<img src="${alterarTamanhoImagemSrcVtex(items[i].imageUrl, 80, 102)}" alt="${
 					items[i].name
 				}">
 							</a>
@@ -115,10 +117,10 @@ export default class Minicart {
 				orderItems(items);
 				$(".mini-cart-container").addClass("have-item");
 			} else {
-				emptyMessage();
+				//emptyMessage();
 			}
 		} catch (e) {
-			emptyMessage();
+			//emptyMessage();
 			console.warn("couldnt list items. " + e.message);
 		}
 	}
@@ -290,8 +292,6 @@ export default class Minicart {
 		}
 
 		this.createMiniCartStructure(element);
-		this.configureEvents(
+		this.configureEvents(".minicart__button");
-			"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
-		);
 	}
 }

src/arquivos/js/app/partials/Menu.js

@@ -37,7 +37,11 @@ export default class Menu {
 		event.preventDefault(); //nao adicionar nada na url por ex #
 		const link = $(event.target); //para saber qual link foi clicado
 
-		link.siblings(".submenu").addClass("is-open"); //pegar o irmao
+		link.parents(".main-menu__department")
+			.find(".submenu")
+			.addClass("is-open"); //pega o pai, acha o filho submenu, mesmo clicando no icone
+		//link.siblings(".submenu").addClass("is-open"); //pegar o irmao , POREM DESSE JEITO NAO PEGA NO ICONE
+		//mas a solucao poderia ser apenas colocar um point events none no icone, la no css
 	}
 
 	closeSubmenu(event) {

src/arquivos/sass/components/_mini-cart.scss

@@ -1,21 +1,66 @@
-.mini-cart {
+.minicart {
-	height: 475px;
+	position: relative;
-	max-height: 200px;
-	opacity: 0;
-	position: absolute;
-	right: 0px;
-	top: 50px;
-	transition: all 0.3s ease-in-out;
-	visibility: hidden;
-	width: 375px;
-	z-index: 16;
 
-	@include mq(md, max) {
+	&__button {
-		bottom: 0;
+		position: relative;
-		height: 100%;
+		padding: 0;
-		left: 0;
+		border: 0;
-		position: fixed;
+		outline: 0;
-		top: 0;
+		background: transparent;
+		cursor: pointer;
+
+		.portal-totalizers-ref {
+			.title,
+			.amount-products,
+			.amount-items strong,
+			.amount-kits,
+			.total-cart {
+				display: none;
+			}
+		}
+
+		.cart-info {
+			margin: 0;
+		}
+
+		.amount-items-em {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
+			top: 4px;
+			right: -4px;
+			width: 15px;
+			height: 15px;
+			border-radius: 50%;
+			font-style: normal;
+			font-weight: 700;
+			font-size: 9px;
+			line-height: 11px;
+			color: $white-500;
+			background: $blue-500;
+		}
+	}
+
+	&__drawer {
+		height: 475px;
+		max-height: 200px;
+		opacity: 0;
+		position: absolute;
+		right: 0px;
+		top: 80px;
+		transition: all 0.3s ease-in-out;
+		visibility: hidden;
+		width: 375px;
+		z-index: 16;
+
+		@include mq(md, max) {
+			bottom: 0;
+			height: 100%;
+			left: 0;
+			position: fixed;
+			top: 0;
+		}
 	}
 }
 
@@ -380,7 +425,7 @@
 		}
 
 		.finish-order {
-			background-color: #2fab61;
+			background-color: $black-500;
 			color: #fff;
 			display: block;
 			font-weight: 700;
@@ -392,12 +437,18 @@
 			width: 100%;
 
 			&:hover {
-				background-color: lighten(#2fab61, 2.5);
+				background-color: lighten($black-500, 2.5);
 			}
 
 			&:active {
-				background-color: darken(#2fab61, 10);
+				background-color: darken($black-500, 10);
 			}
 		}
 	}
+
+	&.have-item {
+		.totals-container {
+			display: block;
+		}
+	}
 }

src/arquivos/sass/partials/_header.scss

@@ -26,45 +26,6 @@
 		}
 	}
 
-	.busca {
-		display: flex;
-		align-items: center;
-
-		margin: 0;
-
-		legend,
-		label,
-		select {
-			display: none;
-		}
-
-		.fulltext-search-box {
-			flex: 1;
-			height: 23px;
-			padding: 0;
-			border: 0;
-			background: transparent;
-			outline: 0;
-			color: $white-500;
-			font-size: 10px;
-			line-height: 12px;
-		}
-
-		.btn-buscar {
-			width: 23px;
-			height: 23px;
-			padding: 0;
-			border: 0;
-			outline: 0;
-			font-size: 0;
-			background-color: transparent;
-
-			/*quando ja tem estrutuura, e temos que substituir*/
-			@extend .sprite;
-			@extend .sprite-search-icon;
-		}
-	}
-
 	.user-items {
 		display: flex;
 		align-items: center;
@@ -107,13 +68,16 @@
 				}
 			}
 		}
+	}
 
-		&__minicart-button {
+	.minicart {
+		&__button {
 			position: relative;
 			padding: 0;
 			border: 0;
 			outline: 0;
 			background: transparent;
+			cursor: pointer;
 
 			.portal-totalizers-ref {
 				.title,

src/template-pagina/sub-templates/caina-header.html

@@ -25,10 +25,16 @@
 					<i class="sprite sprite-user-icon"></i>
 				</a>
 
-				<button class="user-items__minicart-button">
+				<div class="minicart">
-					<i class="sprite sprite-bag-icon"></i>
+					<button class="minicart__button">
-					<vtex.cmc:AmountItemsInCart />
+						<i class="sprite sprite-bag-icon"></i>
-				</button>
+						<vtex.cmc:AmountItemsInCart />
+					</button>
+
+					<div class="minicart__drawer"></div>
+				</div>
+
+
 			</div>
 		</div>
 	</div>