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, {
elemento: ".news-form",
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 {
constructor() {
if (!isSmallerThen768) {
this.fixedHeader();
this.selectors();
this.events();
}
}
fixedHeader() {
var lastScroll = 0;
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);
}
});
selectors() {
this.pageHeader = $(".page-header");
}
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 = `
<div class="mini-cart-container">
<div class="mini-cart-header">
<i class="sprite sprite-cadeado"></i>
<i class="sprite sprite-minicart-lock-icon"></i>
<span>
COMPRA 100% SEGURA
</span>
@ -16,15 +16,34 @@ export default class Minicart {
</div>
<div class="mini-cart-main">
<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 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,9 +76,8 @@ 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="${
items[i].name
}">
<img src="${alterarTamanhoImagemSrcVtex(items[i].imageUrl, 80, 102)}" alt="${items[i].name
}">
</a>
</div>
<div class="product-options">
@ -115,10 +133,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);
}
}
@ -291,7 +309,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"
);
}
}

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

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

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

@ -1,12 +1,22 @@
.page-header {
background: $black-500;
padding: 28px 0;
position: relative;
z-index: map-get($z-index , level-5);
@include mq(lg, max) {
padding: 18px 0 0;
}
@include mq(lg, min) {
position: sticky;
top: 0;
}
&.is-fixed {
background: rgba($black-500, 0.9);
}
&__wrapper {
display: grid;
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 {
margin-top: 18px;
border-top: 1px solid $gray-500;
@include mq(lg, min) {
display: none;
}

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

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

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

@ -35,7 +35,7 @@
}
.itens-inline {
> * {
>* {
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
></a>
<button aria-label="Bag" class="user-items__minicart-button">
<i class="sprite sprite-bag-icon"></i>
<vtex.cmc:AmountItemsInCart />
</button>
<div class="minicart">
<button aria-label="Bag" class="minicart__button">
<i class="sprite sprite-bag-icon"></i>
<vtex.cmc:AmountItemsInCart />
</button>
<div class="minicart__drawer"></div>
</div>
</div>
</div>
</div>