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, {
elemento: ".news-form",
textButtom: "Cadastre-se",

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

@ -6,7 +6,7 @@ export default class Minicart {
const structure = `
<div class="mini-cart-container">
<div class="mini-cart-header">
<i class="sprite sprite-cadeado"></i>
<i class="sprite sprite-lock-cart-icon"></i>
<span>
COMPRA 100% SEGURA
</span>
@ -20,12 +20,10 @@ 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>
<div> Total:</div> <strong>R$<span class="value">00,00</span></strong>
</div>
</div>
<button class="continue-buying" aria-label="Continuar comprando">
Continuar comprando
@ -290,8 +288,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");
}
}

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

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

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

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

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

@ -11,6 +11,8 @@ $blue: #00c8ff;
$gray: #333;
$gray-100: #e0e0e0;
$gray-200: #828282;
$gray-300: #6D6E70;
$gray-400: #bdbdbd;
// 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>
</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>