forked from M3-Academy/vtex-cms-template-atualizado
feat: header finalizado #5
@ -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",
|
||||
|
||||
@ -1,45 +1,27 @@
|
||||
import { isSmallerThen768 } from "Helpers/MediasMatch";
|
||||
import { isSmallerThen991 } from "Helpers/MediasMatch";
|
||||
|
||||
export default class FixedHeader {
|
||||
constructor() {
|
||||
if (!isSmallerThen768) {
|
||||
this.fixedHeader();
|
||||
if (!isSmallerThen991) {
|
||||
this.selectors();
|
||||
this.events();
|
||||
}
|
||||
}
|
||||
selectors() {
|
||||
this.pageHeader = $(".page-header");
|
||||
}
|
||||
|
||||
fixedHeader() {
|
||||
var lastScroll = 0;
|
||||
var timer, scrollTop, headerHeight;
|
||||
var element = $("header.header");
|
||||
events() {
|
||||
$(document).scroll(this.FixHeader.bind(this));
|
||||
}
|
||||
|
||||
$(document).scroll(function (e) {
|
||||
headerHeight = element.height();
|
||||
scrollTop = $(document).scrollTop();
|
||||
FixHeader() {
|
||||
const topScroll = $(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);
|
||||
}
|
||||
});
|
||||
if (topScroll > 200) {
|
||||
this.pageHeader.addClass("is-fixed");
|
||||
} else {
|
||||
this.pageHeader.removeClass("is-fixed");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,8 @@ export default class Minicart {
|
||||
</div>
|
||||
<div class="mini-cart-main">
|
||||
<div class="wait-screen"></div>
|
||||
<ul class="product-list"></ul>
|
||||
<ul class="product-list">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mini-cart-footer">
|
||||
<div class="totals-container">
|
||||
@ -57,7 +58,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>
|
||||
@ -68,7 +69,7 @@ export default class Minicart {
|
||||
<div class="product-price">${price}</div>
|
||||
<div class="product-qtd">
|
||||
<button class="remove-from-cart" aria-label="Remover um item">-</button>
|
||||
<span class="value">${items[i].quantity}</span>
|
||||
<span class="value">1</span>
|
||||
<button class="add-to-cart" aria-label="Adicionar um item">+</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -290,8 +291,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");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,64 @@
|
||||
.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;
|
||||
.portal-totalizers-ref {
|
||||
.title,
|
||||
.amount-products,
|
||||
.amount-items strong,
|
||||
.amount-kits,
|
||||
.total-cart {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
.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;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 9px;
|
||||
line-height: 11px;
|
||||
color: $color-white;
|
||||
background: $color-blue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__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 +423,7 @@
|
||||
}
|
||||
|
||||
.finish-order {
|
||||
background-color: #2fab61;
|
||||
background-color: $color-black;
|
||||
color: $color-white;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
@ -392,12 +435,17 @@
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#2fab61, 2.5);
|
||||
background-color: lighten($color-black, 2.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(#2fab61, 10);
|
||||
background-color: darken($color-black, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.have-item {
|
||||
.totals-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,20 @@
|
||||
.page-header {
|
||||
background-color: $color-black;
|
||||
padding: 28px 0;
|
||||
position: relative;
|
||||
|
||||
@include mq(lg, max) {
|
||||
padding: 18px 0 0;
|
||||
}
|
||||
|
||||
@include mq(lg, min) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.is-fixed {
|
||||
background: rgba($color-black, 0.9);
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
@ -62,45 +71,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;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 9px;
|
||||
line-height: 11px;
|
||||
color: $color-white;
|
||||
background: $color-blue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__search-box {
|
||||
|
||||
@ -23,10 +23,15 @@
|
||||
<a class="user-items__account-link" href="/account">
|
||||
<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>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<body>
|
||||
<vtex:template id="thiagodutra-header" />
|
||||
|
||||
<main class="home"></main>
|
||||
<main class="home" style="height: 600px"></main>
|
||||
|
||||
<footer>
|
||||
<vtex:template id="thiagodutra-footer-newsletter" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user