ThiagoDutraSampaioLeite/vtex-cms-template-atualizado-thiago-dutra
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'thiagodutra' of ssh://gitea.ecommercetools.com.br:22022/ThiagoDutraSampaioLeite/vtex-cms-template-atualizado-thiago-dutra

Browse Source
This commit is contained in:
ThiagoDuutra 2022-12-06 21:03:10 -03:00
commit 67d2a051d8
7 changed files with 111 additions and 107 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",

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

@ -1,45 +1,27 @@
import { isSmallerThen768 } from "Helpers/MediasMatch"; import { isSmallerThen991 } from "Helpers/MediasMatch";
export default class FixedHeader { export default class FixedHeader {
constructor() { constructor() {
if (!isSmallerThen768) { if (!isSmallerThen991) {
this.fixedHeader(); this.selectors();
this.events();
} }
} }
selectors() {
this.pageHeader = $(".page-header");
}
fixedHeader() { events() {
var lastScroll = 0; $(document).scroll(this.FixHeader.bind(this));
var timer, scrollTop, headerHeight; }
var element = $("header.header");
$(document).scroll(function (e) { FixHeader() {
headerHeight = element.height(); const topScroll = $(document).scrollTop();
scrollTop = $(document).scrollTop();
if (scrollTop > 1) { if (topScroll > 200) {
$("body").css("padding-top", headerHeight); this.pageHeader.addClass("is-fixed");
element.addClass("fixed"); } else {
this.pageHeader.removeClass("is-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);
}
});
} }
} }

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

@ -16,7 +16,8 @@ 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">
</ul>
</div> </div>
<div class="mini-cart-footer"> <div class="mini-cart-footer">
<div class="totals-container"> <div class="totals-container">
@ -57,7 +58,7 @@ 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>
@ -68,7 +69,7 @@ export default class Minicart {
<div class="product-price">${price}</div> <div class="product-price">${price}</div>
<div class="product-qtd"> <div class="product-qtd">
<button class="remove-from-cart" aria-label="Remover um item">-</button> <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> <button class="add-to-cart" aria-label="Adicionar um item">+</button>
</div> </div>
</div> </div>
@ -290,8 +291,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"
);
} }
} }

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

@ -1,21 +1,64 @@
.mini-cart { .minicart {
height: 475px; position: relative;
max-height: 200px; &__button {
opacity: 0; position: relative;
position: absolute; padding: 0;
right: 0px; border: 0;
top: 50px; outline: 0;
transition: all 0.3s ease-in-out; background: transparent;
visibility: hidden; cursor: pointer;
width: 375px; .portal-totalizers-ref {
z-index: 16; .title,
.amount-products,
.amount-items strong,
.amount-kits,
.total-cart {
display: none;
}
}
@include mq(md, max) { .cart-info {
bottom: 0; margin: 0;
height: 100%; }
left: 0;
position: fixed; .amount-items-em {
top: 0; 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 { .finish-order {
background-color: #2fab61; background-color: $color-black;
color: $color-white; color: $color-white;
display: block; display: block;
font-weight: 700; font-weight: 700;
@ -392,12 +435,17 @@
width: 100%; width: 100%;
&:hover { &:hover {
background-color: lighten(#2fab61, 2.5); background-color: lighten($color-black, 2.5);
} }
&:active { &:active {
background-color: darken(#2fab61, 10); background-color: darken($color-black, 10);
} }
} }
} }
&.have-item {
.totals-container {
display: block;
}
}
} }

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

@ -1,11 +1,20 @@
.page-header { .page-header {
background-color: $color-black; background-color: $color-black;
padding: 28px 0; padding: 28px 0;
position: relative;
@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($color-black, 0.9);
}
&__wrapper { &__wrapper {
display: grid; display: grid;
grid-template-columns: 2fr 1fr 2fr; 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 { &__search-box {

13
src/template-pagina/sub-templates/thiagodutra-header.html
View File

@ -23,10 +23,15 @@
<a class="user-items__account-link" href="/account"> <a class="user-items__account-link" href="/account">
<i class="sprite sprite-user-icon"></i> <i class="sprite sprite-user-icon"></i>
</a> </a>
<button class="user-items__minicart-button">
<i class="sprite sprite-bag-icon"></i> <div class="minicart">
<vtex.cmc:AmountItemsInCart /> <button class="minicart__button">
</button> <i class="sprite sprite-bag-icon"></i>
<vtex.cmc:AmountItemsInCart />
</button>
<div class="minicart__drawer"></div>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/template-pagina/thiagodutra-home.html
View File

@ -20,7 +20,7 @@
<body> <body>
<vtex:template id="thiagodutra-header" /> <vtex:template id="thiagodutra-header" />
<main class="home"></main> <main class="home" style="height: 600px"></main>
<footer> <footer>
<vtex:template id="thiagodutra-footer-newsletter" /> <vtex:template id="thiagodutra-footer-newsletter" />