feat: Adicioa 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

@@ -290,8 +290,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/sass/components/_mini-cart.scss

@@ -1,21 +1,65 @@
-.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-color: 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;
+			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,11 +436,11 @@
 			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);
 			}
 		}
 	}

src/arquivos/sass/partials/_header.scss

@@ -68,45 +68,6 @@
 				}
 			}
 		}
-
-		&__minicart-button {
-			position: relative;
-			padding: 0;
-			border: 0;
-			outline: 0;
-			background-color: 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%;
-				font-style: normal;
-				font-weight: 700;
-				font-size: 9px;
-				color: $white-500;
-				background-color: $blue-500;
-			}
-		}
 	}
 
 	&__search-box {

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

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