FilipeQuintanilha/vtex-cms-template-atualizado-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adiciona o minicart

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2022-12-07 19:35:49 -03:00
parent 3bd2e842ef
commit 69b5845241
5 changed files with 82 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");
}
}

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

@ -1,21 +1,66 @@
.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: 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;
}
}
}

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

@ -67,45 +67,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%;
font-style: normal;
font-weight: 700;
font-size: 9px;
line-height: 11px;
color: $white-500;
background: $blue-500;
}
}
}
&__search-box {

13
src/template-pagina/sub-templates/filipequintanilha-header.html
View File

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