Adiciona o minicart
This commit is contained in:
parent
f28b2bf928
commit
ebd0c95a9f
@ -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",
|
||||
|
||||
@ -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"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
&__button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(md, max) {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -23,10 +23,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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user