feat: adiciona o minicart
This commit is contained in:
parent
2a9dfc2716
commit
6b82cc5fe7
@ -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",
|
||||
|
||||
@ -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(
|
||||
"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
|
||||
);
|
||||
this.configureEvents(".minicart__button");
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -1,10 +1,54 @@
|
||||
.mini-cart {
|
||||
.minicart {
|
||||
position: relative;
|
||||
|
||||
&__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: 50px;
|
||||
top: 80px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
visibility: hidden;
|
||||
width: 375px;
|
||||
@ -17,6 +61,7 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-mini-cart {
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -25,10 +25,16 @@
|
||||
<i class="sprite sprite-user-icon"></i>
|
||||
</a>
|
||||
|
||||
<button class="user-items__minicart-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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user