SauloKleinNery/vtex-cms-template-atualizado-saulo-klein-nery
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adicioa minicart

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-12-08 14:38:47 -03:00
parent 2d00732b68
commit 85c28ba5f0
5 changed files with 74 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/arquivos/js/app/app.js
View File

@ -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",

4
src/arquivos/js/app/components/Minicart.js
View File

@ -290,8 +290,6 @@ export default class Minicart {
}
this.createMiniCartStructure(element);
this.configureEvents(
"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
);
this.configureEvents(".minicart__button");
}
}

84
src/arquivos/sass/components/_mini-cart.scss
View File

@ -1,21 +1,65 @@
.mini-cart {
height: 475px;
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;
.minicart {
position: relative;
@include mq(md, max) {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
&__button {
position: relative;
padding: 0;
border: 0;
outline: 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);
}
}
}

39
src/arquivos/sass/partials/_header.scss
View File

@ -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 {

12
src/template-pagina/sub-templates/sauloklein-header.html
View File

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