Amandaalmeida/vtex-cms-template-atualizado-amanda-almeida
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): Adiciona header fixo

Browse Source
This commit is contained in:
amanda almeida 2022-12-09 15:40:35 -03:00
parent 1713f0fc73
commit 8dc4aa87ad
9 changed files with 168 additions and 132 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",

55
src/arquivos/js/app/components/FixedHeader.js
View File

@ -3,43 +3,28 @@ import { isSmallerThen768 } from "Helpers/MediasMatch";
export default class FixedHeader { export default class FixedHeader {
constructor() { constructor() {
if (!isSmallerThen768) { if (!isSmallerThen768) {
this.fixedHeader(); this.selectors();
this.events();
} }
} }
fixedHeader() { selectors() {
var lastScroll = 0; this.pageHeader = $(".page-header");
var timer, scrollTop, headerHeight;
var element = $("header.header");
$(document).scroll(function (e) {
headerHeight = element.height();
scrollTop = $(document).scrollTop();
if (scrollTop > 1) {
$("body").css("padding-top", headerHeight);
element.addClass("fixed");
if (timer) {
window.clearTimeout(timer);
}
timer = window.setTimeout(function () {
if (
scrollTop > lastScroll &&
scrollTop > element.height() + 20
) {
element.addClass("fixed-hide");
} else {
element.removeClass("fixed-hide");
}
lastScroll = $(document).scrollTop();
}, 50);
} else {
element.removeClass("fixed");
$("body").css("padding-top", 0);
}
});
} }
events() {
$(document).scroll(this.fixHeader.bind(this));
}
fixHeader() {
const topScroll = $(document).scrollTop();
console.log(topScroll)
if (topScroll > 200) {
this.pageHeader.addClass('is-fixed')
} else {
this.pageHeader.removeClass('is-fixed')
}
}
} }

42
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-minicart-lock-icon"></i>
<span> <span>
COMPRA 100% SEGURA COMPRA 100% SEGURA
</span> </span>
@ -16,15 +16,34 @@ export default class Minicart {
</div> </div>
<div class="mini-cart-main"> <div class="mini-cart-main">
<div class="wait-screen"></div> <div class="wait-screen"></div>
<ul class="product-list"></ul> <ul class="product-list">
<li class="product">
<div class="product-image">
<a href="#" title="">
<img src="https://brastemp.vtexassets.com/arquivos/ids/223588-80-80/Lavadora-Brastemp-BWK12AB-Frontal-1_0.jpg?v=637699024851830000${alterarTamanhoImagemSrcVtex("", 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></ul>
</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> Total: <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">
@ -57,9 +76,8 @@ export default class Minicart {
<li id="${i + "-" + items[i].uniqueId}" class="product"> <li id="${i + "-" + items[i].uniqueId}" class="product">
<div class="product-image"> <div class="product-image">
<a href="${items[i].detailUrl}" title="${items[i].name}"> <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
items[i].name }">
}">
</a> </a>
</div> </div>
<div class="product-options"> <div class="product-options">
@ -115,10 +133,10 @@ export default class Minicart {
orderItems(items); orderItems(items);
$(".mini-cart-container").addClass("have-item"); $(".mini-cart-container").addClass("have-item");
} else { } else {
emptyMessage(); // emptyMessage();
} }
} catch (e) { } catch (e) {
emptyMessage(); // emptyMessage();
console.warn("couldnt list items. " + e.message); console.warn("couldnt list items. " + e.message);
} }
} }
@ -291,7 +309,7 @@ export default class Minicart {
this.createMiniCartStructure(element); this.createMiniCartStructure(element);
this.configureEvents( this.configureEvents(
"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart" ".minicart__button"
); );
} }
} }

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

@ -1,24 +1,76 @@
.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; display: flex;
height: 100%; align-items: center;
left: 0; position: relative;
position: fixed; padding: 0;
top: 0; border: 0;
outline: 0;
background: transparent;
cursor: pointer;
.portal-totalizers-ref {
.title,
.amount-products,
.amount-items strong,
.amount-kits,
.total-cart {
display: none;
}
}
.card-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-size: 9px;
line-height: 11px;
font-weight: bold;
font-style: normal;
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;
}
} }
} }
.show-mini-cart { .show-mini-cart {
max-height: 1000px; max-height: 1000px;
opacity: 1; opacity: 1;
@ -41,6 +93,8 @@
overflow-y: auto; overflow-y: auto;
} }
button { button {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -52,7 +106,7 @@
.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-400;
font-size: 12px; font-size: 12px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
padding: 20px 15px 16px; padding: 20px 15px 16px;
@ -155,8 +209,8 @@
left: 0; left: 0;
right: 0; right: 0;
font-size: 0; font-size: 0;
border: 5px solid #fff; border: 5px solid $black-500;
border-top-color: #f71963; border-top-color: $black-500;
border-radius: 50%; border-radius: 50%;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -216,7 +270,7 @@
} }
.product-info { .product-info {
color: #142032; color: $black-500;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
padding-left: 8px; padding-left: 8px;
@ -229,7 +283,7 @@
} }
.product-price { .product-price {
color: #000; color: $black-500;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
margin-bottom: 8px; margin-bottom: 8px;
@ -251,7 +305,7 @@
} }
button { button {
background-color: #f71963; background-color: $black-500;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
@ -262,16 +316,16 @@
padding: 0; padding: 0;
&:hover { &:hover {
background-color: lighten(#f71963, 5); background-color: lighten($black-500, 5);
} }
&:active { &:active {
background-color: darken(#f71963, 10); background-color: darken($black-500, 10);
} }
} }
.value { .value {
border: 1px solid #142032; border: 1px solid $black-500;
box-shadow: none; box-shadow: none;
font-size: 14px; font-size: 14px;
margin: 0 -3px; margin: 0 -3px;
@ -303,17 +357,17 @@
&:hover, &:hover,
&:active { &:active {
border-color: darken(#142032, 15); border-color: darken($black-500, 15);
&:after, &:after,
&:before { &:before {
border-color: darken(#142032, 15); border-color: darken($black-500, 15);
} }
} }
&:after, &:after,
&:before { &:before {
border-bottom: 1.25px solid #142032; border-bottom: 1.25px solid $black-500;
content: ""; content: "";
width: 16px; width: 16px;
position: absolute; position: absolute;
@ -352,7 +406,7 @@
text-transform: uppercase; text-transform: uppercase;
strong { strong {
color: #142032; color: $black-500;
display: inline-block; display: inline-block;
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
@ -364,7 +418,7 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #6d6e70; color: $gray-400;
display: block; display: block;
font-size: 14px; font-size: 14px;
padding: 17px 15px; padding: 17px 15px;
@ -376,12 +430,12 @@
&:hover, &:hover,
&:active { &:active {
color: darken(#6d6e70, 15); color: darken($gray-400, 15);
} }
} }
.finish-order { .finish-order {
background-color: #2fab61; background-color: $black-500;
color: #fff; color: #fff;
display: block; display: block;
font-weight: 700; font-weight: 700;
@ -393,12 +447,18 @@
width: 100%; width: 100%;
&:hover { &:hover {
background-color: lighten(#2fab61, 2.5); background-color: lighten($black-500, 2.5);
} }
&:active { &:active {
background-color: darken(#2fab61, 10); background-color: darken($black-500, 10);
} }
} }
} }
&.have-item {
.totals-container {
display: block;
}
}
} }

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

@ -1,12 +1,22 @@
.page-header { .page-header {
background: $black-500; background: $black-500;
padding: 28px 0; padding: 28px 0;
position: relative; z-index: map-get($z-index , level-5);
@include mq(lg, max) { @include mq(lg, max) {
padding: 18px 0 0; padding: 18px 0 0;
} }
@include mq(lg, min) {
position: sticky;
top: 0;
}
&.is-fixed {
background: rgba($black-500, 0.9);
}
&__wrapper { &__wrapper {
display: grid; display: grid;
grid-template-columns: 2fr 1fr 2fr; grid-template-columns: 2fr 1fr 2fr;
@ -72,56 +82,14 @@
} }
} }
&__minicart-button {
display: flex;
align-items: center;
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;
}
}
.card-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-size: 9px;
line-height: 11px;
font-weight: bold;
font-style: normal;
color: $white-500;
background: $blue-500;
}
}
} }
&__search-box { &__search-box {
margin-top: 18px; margin-top: 18px;
border-top: 1px solid $gray-500; border-top: 1px solid $gray-500;
@include mq(lg, min) { @include mq(lg, min) {
display: none; display: none;
} }

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

@ -11,6 +11,7 @@ $black-500: #000;
$white-500: #fff; $white-500: #fff;
$blue-500: #00C8FF; $blue-500: #00C8FF;
$gray-500: #333333; $gray-500: #333333;
$gray-400: #6D6E70;
$gray-200: #828282; $gray-200: #828282;
$gray-100: #E0E0E0; $gray-100: #E0E0E0;

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

@ -35,7 +35,7 @@
} }
.itens-inline { .itens-inline {
> * { >* {
display: inline-block; display: inline-block;
} }
} }

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 567 B

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

@ -23,10 +23,14 @@
><i class="sprite sprite-user-icon"></i ><i class="sprite sprite-user-icon"></i
></a> ></a>
<button aria-label="Bag" class="user-items__minicart-button"> <div class="minicart">
<i class="sprite sprite-bag-icon"></i> <button aria-label="Bag" 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>