BernardoWaldhelm/vtex-home-page
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adicionando carriho ao desktop e mobile

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-12-08 09:38:36 -03:00
parent 8d6065d95d
commit f2425407ea
8 changed files with 151 additions and 106 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, { app.bind(Newsletter.name, {
elemento: ".news-form", elemento: ".news-form",
textButtom: "Cadastre-se", textButtom: "Cadastre-se",

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

@ -6,7 +6,7 @@ export default class Minicart {
const structure = ` const structure = `
<div class="mini-cart-container"> <div class="mini-cart-container">
<div class="mini-cart-header"> <div class="mini-cart-header">
<i class="sprite sprite-cadeado"></i> <i class="sprite sprite-lock-cart-icon"></i>
<span> <span>
COMPRA 100% SEGURA COMPRA 100% SEGURA
</span> </span>
@ -20,12 +20,10 @@ export default class Minicart {
</div> </div>
<div class="mini-cart-footer"> <div class="mini-cart-footer">
<div class="totals-container"> <div class="totals-container">
<div class="qtd-items">
Total de <span class="value">0</span> itens
</div>
<div class="total"> <div class="total">
Subtotal: <strong>R$<span class="value">00,00</span></strong> <div> Total:</div> <strong>R$<span class="value">00,00</span></strong>
</div> </div>
</div> </div>
<button class="continue-buying" aria-label="Continuar comprando"> <button class="continue-buying" aria-label="Continuar comprando">
Continuar comprando Continuar comprando
@ -290,8 +288,6 @@ export default class Minicart {
} }
this.createMiniCartStructure(element); this.createMiniCartStructure(element);
this.configureEvents( this.configureEvents(".minicart__button");
"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
);
} }
} }

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

@ -1,21 +1,69 @@
.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%; background: transparent;
left: 0; margin: 0;
position: fixed; padding: 0;
top: 0; outline: 0;
border: 0;
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;
height: 15px;
width: 15px;
border-radius: 50%;
font-style: normal;
font-weight: bold;
line-height: 11px;
font-size: 9px;
color: $white;
background: $blue;
}
}
&__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;
}
} }
} }
@ -51,14 +99,26 @@
} }
.mini-cart-header { .mini-cart-header {
border-bottom: 1px solid hsla(0, 0%, 90%, 1); // border-bottom: 1px solid hsla(0, 0%, 90%, 1);
color: #142032; color: $gray-300;
line-height: 15px;
font-weight: 400;
font-size: 12px; font-size: 12px;
letter-spacing: 0.5px;
padding: 20px 15px 16px; padding: 20px 15px 16px;
position: relative; position: relative;
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;
display: flex;
align-items: center;
&::after {
content: "";
width: 1px;
height: 38px;
position: absolute;
right: 72px;
background: $gray-100;
}
span { span {
margin-left: 4px; margin-left: 4px;
@ -204,6 +264,8 @@
max-width: 85px; max-width: 85px;
width: 100%; width: 100%;
border: 1px solid $gray-100;
a { a {
display: block; display: block;
} }
@ -223,15 +285,18 @@
width: 100%; width: 100%;
.name { .name {
font-size: 14px; font-weight: 500;
line-height: 17px; font-size: 10px;
line-height: 12px;
color: $black;
} }
.product-price { .product-price {
color: #000; color: $black;
font-size: 18px; font-weight: 900;
font-weight: 700; font-size: 13px;
margin-bottom: 8px; line-height: 16px;
margin-bottom: 16px;
} }
.value, .value,
@ -250,7 +315,7 @@
} }
button { button {
background-color: #f71963; background-color: $black;
color: $white; color: $white;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
@ -261,11 +326,11 @@
padding: 0; padding: 0;
&:hover { &:hover {
background-color: lighten(#f71963, 5); background-color: lighten($black, 5);
} }
&:active { &:active {
background-color: darken(#f71963, 10); background-color: darken($black, 10);
} }
} }
@ -302,17 +367,17 @@
&:hover, &:hover,
&:active { &:active {
border-color: darken(#142032, 15); border-color: darken($gray-400, 15);
&:after, &:after,
&:before { &:before {
border-color: darken(#142032, 15); border-color: darken($gray-400, 15);
} }
} }
&:after, &:after,
&:before { &:before {
border-bottom: 1.25px solid #142032; border-bottom: 1.25px solid $gray-400;
content: ""; content: "";
width: 16px; width: 16px;
position: absolute; position: absolute;
@ -337,17 +402,20 @@
.totals-container { .totals-container {
display: none; display: none;
background-color: $white; background-color: transparent;
border-top: 1px solid hsla(0, 0%, 90%, 1); color: $black;
margin: 0 16px; padding: 16px 48px;
padding: 16px 0;
} }
.total { .total {
color: hsla(220, 1%, 43%, 1); display: flex;
font-size: 12px; align-items: center;
line-height: 15px; justify-content: space-between;
letter-spacing: 3px; width: 100%;
font-weight: 900;
font-size: 13px;
line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
strong { strong {
@ -363,9 +431,10 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #6d6e70; color: $gray-300;
display: block; display: block;
font-size: 14px; line-height: 12px;
font-size: 10px;
padding: 17px 15px; padding: 17px 15px;
position: relative; position: relative;
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
@ -375,29 +444,36 @@
&:hover, &:hover,
&:active { &:active {
color: darken(#6d6e70, 15); color: darken($gray-300, 15);
} }
} }
.finish-order { .finish-order {
background-color: #2fab61; background-color: $black;
color: $white; color: $white;
display: block; display: block;
font-weight: 700; font-weight: 900;
font-size: 14px; line-height: 15px;
padding: 15px; font-size: 12px;
padding: 18px;
text-align: center; text-align: center;
transition: all 0.15s linear; transition: all 0.15s linear;
text-transform: uppercase; text-transform: uppercase;
width: 100%; width: 100%;
&:hover { &:hover {
background-color: lighten(#2fab61, 2.5); background-color: lighten($black, 2.5);
} }
&:active { &:active {
background-color: darken(#2fab61, 10); background-color: darken($black, 10);
} }
} }
} }
&.have-item {
.totals-container {
display: block;
}
}
} }

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

@ -69,51 +69,8 @@
} }
} }
} }
&__minicart-button{
position: relative;
background: transparent;
margin: 0;
padding: 0;
outline: 0;
border: 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;
height: 15px;
width: 15px;
border-radius: 50%;
font-style: normal;
font-weight: bold;
line-height: 11px;
font-size: 9px;
color: $white;
background: $blue;
}
}
} }
&__search-box { &__search-box {
margin-top: 18px; margin-top: 18px;
border-top: 1px solid $gray; border-top: 1px solid $gray;

10
src/arquivos/sass/partials/_menu.scss
View File

@ -33,6 +33,15 @@
line-height: 15px; line-height: 15px;
font-size: 12px; font-size: 12px;
&::after {
content: "";
width: 1px;
height: 38px;
position: absolute;
right: 72px;
background: $gray-100;
}
i { i {
margin-right: 10px; margin-right: 10px;
} }
@ -42,6 +51,7 @@
padding: 0; padding: 0;
border: 0; border: 0;
outline: 0; outline: 0;
background: transparent;
} }

2
src/arquivos/sass/utils/_variaveis.scss
View File

@ -11,6 +11,8 @@ $blue: #00c8ff;
$gray: #333; $gray: #333;
$gray-100: #e0e0e0; $gray-100: #e0e0e0;
$gray-200: #828282; $gray-200: #828282;
$gray-300: #6D6E70;
$gray-400: #bdbdbd;
// Grid breakpoints // Grid breakpoints

BIN
src/arquivos/sprite/lock-cart-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 536 B

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

@ -26,10 +26,14 @@
<i class="sprite sprite-user-icon"></i> <i class="sprite sprite-user-icon"></i>
</a> </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> </div>
</div> </div>