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

@@ -20,11 +20,8 @@ export default class Minicart {
 				</div>
 				<div class="mini-cart-footer">
 					<div class="totals-container">
-						<div class="qtd-items">
-							Total de <span class="value">0</span> itens
-						</div>
 						<div class="total">
-							Subtotal: <strong>R$<span class="value">00,00</span></strong>
+							TOTAL: <strong>R$<span class="value">00,00</span></strong>
 						</div>
 					</div>
 					<button class="continue-buying" aria-label="Continuar comprando">
@@ -57,7 +54,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>
@@ -79,6 +76,29 @@ export default class Minicart {
 					</li>
 				`;
 
+
+				// <li class="product">
+				// 			<div class="product-image">
+				// 				<a href="#" title="">
+				// 					<img src="${alterarTamanhoImagemSrcVtex("http://aramado.vteximg.com.br/arquivos/ids/189008-115-115/LVC130.200.2.2-1-.jpg?v=637846747065030000", 80, 102)}" alt="">
+				// 				</a>
+				// 			</div>
+				// 			<div class="product-options">
+				// 				<div class="product-info">
+				// 					<div class="name">Lorem ipsum dolor</div>
+				// 					<div class="product-price">R$3.799,05</div>
+				// 					<div class="product-qtd">
+				// 						<button class="remove-from-cart" aria-label="Remover um item">-</button>
+				// 						<span class="value">1</span>
+				// 						<button class="add-to-cart" aria-label="Adicionar um item">+</button>
+				// 					</div>
+				// 				</div>
+				// 				<div class="product-remove">
+				// 					<button class="remove" aria-label="Remover produto">Remover</button>
+				// 				</div>
+				// 			</div>
+				// 		</li>
+
 				$(".mini-cart-container .product-list").append(orderItem);
 			}
 
@@ -291,7 +311,7 @@ export default class Minicart {
 
 		this.createMiniCartStructure(element);
 		this.configureEvents(
-			"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
+			".minicart__button"
 		);
 	}
 }

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

@@ -1,21 +1,65 @@
-.mini-cart {
+.minicart {
-	height: 475px;
+	position: relative;
-	max-height: 200px;
+	&__button {
-	opacity: 0;
+		position: relative;
-	position: absolute;
+		padding: 0;
-	right: 0px;
+		border: 0;
-	top: 50px;
+		outline: 0;
-	transition: all 0.3s ease-in-out;
+		background: transparent;
-	visibility: hidden;
+		cursor: pointer;
-	width: 375px;
-	z-index: 16;
 
-	@include mq(md, max) {
+		.portal-totalizers-ref {
-		bottom: 0;
+			.title,
-		height: 100%;
+			.amount-products,
-		left: 0;
+			.amount-items strong,
-		position: fixed;
+			.amount-kits,
-		top: 0;
+			.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%;
+			line-height: 11px;
+			font-size: 9px;
+			font-weight: bold;
+			font-style: normal;
+			color: $white-500;
+			background-color: $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 +424,7 @@
 		}
 
 		.finish-order {
-			background-color: $color-green;
+			background-color: $black-500;
 			color: $color-white;
 			display: block;
 			font-weight: 700;
@@ -392,12 +436,19 @@
 			width: 100%;
 
 			&:hover {
-				background-color: lighten($color-green, 2.5);
+				background-color: lighten($black-500, 2.5);
 			}
 
 			&:active {
-				background-color: darken($color-green, 10);
+				background-color: darken($black-500, 10);
 			}
 		}
 	}
+
+
+	&.has-item {
+		.totals-container {
+			display: block;
+		}
+	}
 }

src/arquivos/sass/partials/_header.scss

@@ -72,46 +72,6 @@
 				}
 			}
 		}
-
-		&__minicart-button {
-			position: relative;
-			padding: 0;
-			border: 0;
-			outline: 0;
-			background: transparent;
-
-			.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%;
-				line-height: 11px;
-				font-size: 9px;
-				font-weight: bold;
-				font-style: normal;
-				color: $white-500;
-				background-color: $blue-500;
-			}
-		}
 	}
 
 	&__search-box {

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

@@ -23,10 +23,14 @@
 					<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>