forked from M3-Academy/m3-academy-template-checkout
development #2
@ -1,4 +1,3 @@
|
||||
import { timers } from "jquery";
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Footer {
|
||||
@ -10,11 +9,9 @@ export default class Footer {
|
||||
await this.selectors();
|
||||
await this.stampsHTML();
|
||||
await this.developedByHTML();
|
||||
await this.replaceEmptyCartContent();
|
||||
await this.renderPrateleira();
|
||||
await this.onUpdate();
|
||||
await this.renderPrateleira();
|
||||
await this.replaceCartContent();
|
||||
await this.replaceSummaryContent();
|
||||
// await this.replaceProfileContent();
|
||||
}
|
||||
|
||||
@ -23,9 +20,6 @@ export default class Footer {
|
||||
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
|
||||
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.emptyCartTitle = await waitElement(".empty-cart-title");
|
||||
this.continueShopping = await waitElement("#cart-choose-products");
|
||||
|
||||
this.cart = await waitElement(".cart");
|
||||
this.cartTitle = await waitElement("#cart-title");
|
||||
this.frete = await waitElement(".shipping-date");
|
||||
@ -37,16 +31,6 @@ export default class Footer {
|
||||
// this.prateleiraSlick = await waitElement(".prateleira__carousel")
|
||||
}
|
||||
|
||||
async replaceEmptyCartContent() {
|
||||
if (this.checkoutVazio) {
|
||||
console.log("entrou no if do replaceEmptyCart()")
|
||||
this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
|
||||
console.log(this.emptyCartTitle)
|
||||
this.continueShopping.textContent = "Continuar comprando";
|
||||
console.log(this.continueShopping)
|
||||
}
|
||||
}
|
||||
|
||||
async replaceCartContent() {
|
||||
console.log("entrou no replaceCart")
|
||||
|
||||
@ -60,18 +44,6 @@ export default class Footer {
|
||||
}
|
||||
}
|
||||
|
||||
async replaceSummaryContent() {
|
||||
console.log("entrou no replaceSummary()")
|
||||
|
||||
const naoSeiMeuCep = await waitElement(".ship-postalCode");
|
||||
|
||||
if(naoSeiMeuCep) {
|
||||
console.log("entrou no if naoSeiMeuCep")
|
||||
naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
|
||||
console.log(naoSeiMeuCep)
|
||||
}
|
||||
}
|
||||
|
||||
// async replaceProfileContent() {
|
||||
// if(this.identificacao) {
|
||||
|
||||
@ -96,9 +68,17 @@ export default class Footer {
|
||||
let target = this.checkoutVazio;
|
||||
let config = { attributes: true };
|
||||
|
||||
// this.cartTitle.style.display = "none";
|
||||
if(this.checkoutVazio.style.display == "block") {
|
||||
console.log("Carrinho está vazio ou não está no #/cart")
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "none";
|
||||
|
||||
} else {
|
||||
console.log("Carrinho NÃO está vazio e está no #/cart");
|
||||
this.cartTitle.style.display = "block";
|
||||
this.prateleira.style.display = "block";
|
||||
}
|
||||
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(() => {
|
||||
|
||||
@ -116,22 +96,24 @@ export default class Footer {
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
|
||||
if (window.location.hash == "#/cart") {
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "block";
|
||||
// this.renderPrateleira();
|
||||
} else {
|
||||
this.cartTitle.style.display = "block";
|
||||
this.prateleira.style.display = "none";
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async renderPrateleira() {
|
||||
|
||||
if (this.prateleira && window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
if (this.prateleira) {
|
||||
|
||||
const prateleiraTitle = document.createElement("h2");
|
||||
const titleNode = document.createTextNode("Você também pode gostar:");
|
||||
@ -194,11 +176,15 @@ export default class Footer {
|
||||
this.prateleira.appendChild(prateleiraSlick);
|
||||
prateleiraSlick.innerHTML = cardsStructure;
|
||||
|
||||
if(window.innerWidth > 1024) {
|
||||
// if(window.innerWidth > 1024) {
|
||||
this.addCarrossel(prateleiraSlick);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// else {
|
||||
// this.prateleira.style.display = none;
|
||||
// }
|
||||
}
|
||||
|
||||
async addCarrossel(element) {
|
||||
@ -207,7 +193,21 @@ export default class Footer {
|
||||
$(element).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: false
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -7,18 +7,22 @@ export default class Header {
|
||||
}
|
||||
|
||||
async init() {
|
||||
console.log("entrou no init do header")
|
||||
await this.selectors();
|
||||
this.progressBarStructure();
|
||||
await this.progressBarStructure();
|
||||
await this.progressBarMove();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
// this.header = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
console.log("progressBar await element")
|
||||
}
|
||||
|
||||
progressBarStructure() {
|
||||
async progressBarStructure() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
console.log("entrou no if do progressBarStructure")
|
||||
|
||||
this.progressBar.innerHTML = `
|
||||
<ul class="progress-bar__container">
|
||||
<li class="progress-bar__stage">
|
||||
@ -48,7 +52,9 @@ export default class Header {
|
||||
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
|
||||
const progressBarStages = document.querySelectorAll((".progress-bar__stage"));
|
||||
console.log("entrou no if do progressBarMove")
|
||||
|
||||
const progressBarStages = document.querySelectorAll(".progress-bar__stage");
|
||||
|
||||
progressBarStages.forEach((stage) => {
|
||||
|
||||
|
||||
@ -220,6 +220,11 @@
|
||||
color: $black-300;
|
||||
text-align: left;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
&.quantity-price,
|
||||
&.shipping-date {
|
||||
@ -236,6 +241,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
.product-image {
|
||||
@ -282,6 +288,11 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 23px;
|
||||
}
|
||||
@ -301,6 +312,11 @@
|
||||
font-style: normal;
|
||||
color: $gray-300;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
@ -329,6 +345,10 @@
|
||||
|
||||
text-decoration-line: line-through;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
font-size: 12px;
|
||||
@ -463,6 +483,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $black-300;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -699,10 +724,15 @@
|
||||
margin-bottom: 2px;
|
||||
line-height: 14px;
|
||||
font-family: $font-family;
|
||||
font-size: 12px;
|
||||
font-size: 0;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color: $black-300;
|
||||
|
||||
&::after {
|
||||
content: "Não sei meu código postal";
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
@ -5,17 +5,43 @@
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 0;
|
||||
margin: 0 0 32px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
margin: 0 0 22px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "Seu Carrinho está vazio";
|
||||
line-height: 33px;
|
||||
font-family: $font-family;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: $black-500;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
vertical-align: bottom;
|
||||
|
||||
@include mq(xl, min) {
|
||||
line-height: 65px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
line-height: 25px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-message {
|
||||
@ -23,26 +49,46 @@
|
||||
}
|
||||
|
||||
&-links {
|
||||
width: 325px;
|
||||
height: 46px;
|
||||
width: 32%; //327px;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.link-choose-products {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0;
|
||||
background: $color-white;
|
||||
box-shadow: none;
|
||||
transition: ease-in 0.22s all;
|
||||
// outline: none;
|
||||
|
||||
&::after {
|
||||
content: "Continuar comprando";
|
||||
line-height: 16px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $black-500;
|
||||
background: $color-white;
|
||||
transition: ease-in 0.22s all;
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
// outline: none;
|
||||
// letter-spacing: 0.05em;
|
||||
@include mq(xl, min) {
|
||||
line-height: 33px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($blue-300, 5);
|
||||
@ -52,3 +98,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.transactions-container.row-fluid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -96,6 +96,15 @@ body {
|
||||
@include mq(md, max) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
@ -4,11 +4,19 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 54px;
|
||||
// margin-top: 262px;
|
||||
// background: cyan;
|
||||
|
||||
// border-top: none;
|
||||
// color: $color-gray2;
|
||||
|
||||
// @include mq(sm, max) {
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// background: $color-white;
|
||||
// z-index: 5;
|
||||
// }
|
||||
|
||||
&__prateleira {
|
||||
// margin-top: 101px;
|
||||
height: 448px;
|
||||
@ -26,6 +34,16 @@
|
||||
// // // align-items: center;
|
||||
// // // display: flex;
|
||||
// // // justify-content: space-between;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 16px 63px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -39,6 +57,14 @@
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
align-items: center;
|
||||
|
||||
@include mq(lg, max) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"stamps"
|
||||
"address"
|
||||
"developedBy"
|
||||
}
|
||||
|
||||
// text-align: center;
|
||||
// // // grid-auto-flow: column;
|
||||
// // // grid-auto-columns: max-content;
|
||||
@ -64,12 +90,24 @@
|
||||
// max-width: 40%;
|
||||
justify-self: flex-start;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
margin-bottom: 16px;
|
||||
grid-area: address;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
@ -80,9 +118,18 @@
|
||||
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
// @include mq(md, max) {
|
||||
// align-self: center;
|
||||
// margin-bottom: 12px;
|
||||
// }
|
||||
|
||||
@include mq(lg, max) {
|
||||
margin-bottom: 16px;
|
||||
grid-area: stamps;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
@ -106,6 +153,10 @@
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: auto;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,6 +164,10 @@
|
||||
display: block;
|
||||
width: 53px;
|
||||
height: 33px;
|
||||
|
||||
@include mq(lg, max) {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__developedBy {
|
||||
@ -123,6 +178,11 @@
|
||||
margin: 0;
|
||||
justify-self: flex-end;
|
||||
|
||||
@include mq(lg, max) {
|
||||
grid-area: developedBy;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: $black-300;
|
||||
|
||||
@ -6,22 +6,48 @@
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 30px 256px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: 1fr 43.22% 1fr;
|
||||
//repeat(3, 1fr);
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@include mq(xl, min) {
|
||||
grid-template-columns: 1fr 54.27% 1fr;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
img {
|
||||
height: 37.14px;
|
||||
width: auto;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 91.2px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
height: 32.12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +56,7 @@
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
width: 440px;
|
||||
// width: 43.22%; //440px;
|
||||
|
||||
&__container {
|
||||
// position:relative;
|
||||
@ -58,7 +84,14 @@
|
||||
line-height: 14px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
line-height: 28px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--circle {
|
||||
@ -70,6 +103,11 @@
|
||||
&.active {
|
||||
background: $black-500;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
@ -106,6 +144,15 @@
|
||||
img {
|
||||
width: 12px;
|
||||
height: 15px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 29.47px;
|
||||
height: 41.46px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
height: 13.33px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@ -114,6 +161,11 @@
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: $black-300;
|
||||
|
||||
@include mq(xl, min) {
|
||||
line-height: 33px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +45,18 @@
|
||||
|
||||
&--image {
|
||||
height: 242px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 485px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 164px;
|
||||
}
|
||||
}
|
||||
|
||||
&--description {
|
||||
|
||||
@ -34,8 +34,8 @@ $grid-breakpoints: (
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
lg: 1025px,
|
||||
xl: 2500px
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user