andreamatsunaga/m3-academy-template-checkout-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/responsiveness' into development

Browse Source
This commit is contained in:
Andrea Matsunaga 2022-12-19 01:43:47 -03:00
commit af22a2c2f4
9 changed files with 291 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
checkout/src/arquivos/js/components/Footer.js
View File

@ -1,4 +1,3 @@
import { timers } from "jquery";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
@ -10,11 +9,9 @@ export default class Footer {
await this.selectors(); await this.selectors();
await this.stampsHTML(); await this.stampsHTML();
await this.developedByHTML(); await this.developedByHTML();
await this.replaceEmptyCartContent();
await this.renderPrateleira();
await this.onUpdate(); await this.onUpdate();
await this.renderPrateleira();
await this.replaceCartContent(); await this.replaceCartContent();
await this.replaceSummaryContent();
// await this.replaceProfileContent(); // await this.replaceProfileContent();
} }
@ -23,9 +20,6 @@ export default class Footer {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); 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.cart = await waitElement(".cart");
this.cartTitle = await waitElement("#cart-title"); this.cartTitle = await waitElement("#cart-title");
this.frete = await waitElement(".shipping-date"); this.frete = await waitElement(".shipping-date");
@ -37,16 +31,6 @@ export default class Footer {
// this.prateleiraSlick = await waitElement(".prateleira__carousel") // 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() { async replaceCartContent() {
console.log("entrou no replaceCart") 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() { // async replaceProfileContent() {
// if(this.identificacao) { // if(this.identificacao) {
@ -96,8 +68,16 @@ export default class Footer {
let target = this.checkoutVazio; let target = this.checkoutVazio;
let config = { attributes: true }; let config = { attributes: true };
// this.cartTitle.style.display = "none"; if(this.checkoutVazio.style.display == "block") {
this.prateleira.style.display = "none"; 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) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(() => { mutations.forEach(() => {
@ -116,22 +96,24 @@ export default class Footer {
}); });
observer.observe(target, config); observer.observe(target, config);
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
this.prateleira.style.display = "block";
} else {
this.cartTitle.style.display = "block";
this.prateleira.style.display = "none";
}
})
} }
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() { async renderPrateleira() {
if (this.prateleira && window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { if (this.prateleira) {
const prateleiraTitle = document.createElement("h2"); const prateleiraTitle = document.createElement("h2");
const titleNode = document.createTextNode("Você também pode gostar:"); const titleNode = document.createTextNode("Você também pode gostar:");
@ -194,11 +176,15 @@ export default class Footer {
this.prateleira.appendChild(prateleiraSlick); this.prateleira.appendChild(prateleiraSlick);
prateleiraSlick.innerHTML = cardsStructure; prateleiraSlick.innerHTML = cardsStructure;
if(window.innerWidth > 1024) { // if(window.innerWidth > 1024) {
this.addCarrossel(prateleiraSlick); this.addCarrossel(prateleiraSlick);
} // }
} }
} }
// else {
// this.prateleira.style.display = none;
// }
} }
async addCarrossel(element) { async addCarrossel(element) {
@ -207,7 +193,21 @@ export default class Footer {
$(element).slick({ $(element).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
infinite: false infinite: false,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
}
]
}); });
} }

12
checkout/src/arquivos/js/components/Header.js
View File

@ -7,18 +7,22 @@ export default class Header {
} }
async init() { async init() {
console.log("entrou no init do header")
await this.selectors(); await this.selectors();
this.progressBarStructure(); await this.progressBarStructure();
await this.progressBarMove(); await this.progressBarMove();
} }
async selectors() { async selectors() {
// this.header = await waitElement(".headerCheckout"); // this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar"); this.progressBar = await waitElement("#progressBar");
console.log("progressBar await element")
} }
progressBarStructure() { async progressBarStructure() {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
console.log("entrou no if do progressBarStructure")
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul class="progress-bar__container"> <ul class="progress-bar__container">
<li class="progress-bar__stage"> <li class="progress-bar__stage">
@ -48,7 +52,9 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) { 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) => { progressBarStages.forEach((stage) => {

32
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -220,6 +220,11 @@
color: $black-300; color: $black-300;
text-align: left; text-align: left;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
@ -236,6 +241,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: left; text-align: left;
} }
.product-image { .product-image {
@ -282,6 +288,11 @@
text-decoration: none; text-decoration: none;
} }
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 23px; margin-left: 23px;
} }
@ -301,6 +312,11 @@
font-style: normal; font-style: normal;
color: $gray-300; color: $gray-300;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
@ -329,6 +345,10 @@
text-decoration-line: line-through; text-decoration-line: line-through;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(sm, max) { @include mq(sm, max) {
font-size: 12px; font-size: 12px;
@ -463,6 +483,11 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $black-300; color: $black-300;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
} }
} }
@ -699,10 +724,15 @@
margin-bottom: 2px; margin-bottom: 2px;
line-height: 14px; line-height: 14px;
font-family: $font-family; font-family: $font-family;
font-size: 12px; font-size: 0;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
color: $black-300; color: $black-300;
&::after {
content: "Não sei meu código postal";
font-size: 12px;
}
} }
input { input {

82
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -5,17 +5,43 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
} }
&-title { &-title {
font-size: 0;
margin: 0 0 32px; margin: 0 0 32px;
line-height: 33px;
font-family: $font-family; @include mq(sm, max) {
font-size: 24px; margin: 0 0 22px;
color: $black-500; }
&::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 { &-message {
@ -23,26 +49,46 @@
} }
&-links { &-links {
width: 325px; width: 32%; //327px;
height: 46px; height: 48px;
margin: 0 auto; margin: 0 auto;
border: 1px solid $black-500;
@include mq(xl, min) {
height: 66px;
}
@include mq(sm, max) {
width: 100%;
}
.link-choose-products { .link-choose-products {
width: 100%;
height: 100%;
margin: 0;
padding: 0; padding: 0;
line-height: 16px; border: 1px solid $black-500;
font-family: $font-family-secundary;
font-size: 14px;
border: none;
border-radius: 0; border-radius: 0;
color: $black-500; display: flex;
align-items: center;
justify-content: center;
font-size: 0;
background: $color-white; background: $color-white;
transition: ease-in 0.22s all;
box-shadow: none; box-shadow: none;
transition: ease-in 0.22s all;
// outline: none; // outline: none;
// letter-spacing: 0.05em;
&::after {
content: "Continuar comprando";
line-height: 16px;
font-family: $font-family-secundary;
font-size: 14px;
color: $black-500;
@include mq(xl, min) {
line-height: 33px;
font-size: 28px;
}
}
&:hover { &:hover {
background: lighten($blue-300, 5); background: lighten($blue-300, 5);
@ -52,3 +98,7 @@
} }
} }
.transactions-container.row-fluid {
display: none;
}

9
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -96,6 +96,15 @@ body {
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
@include mq(xl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(lg, max) {
line-height: 33px;
}
} }
.dropdown { .dropdown {

66
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -4,11 +4,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 54px; gap: 54px;
// margin-top: 262px;
// background: cyan; // background: cyan;
// border-top: none; // border-top: none;
// color: $color-gray2; // color: $color-gray2;
// @include mq(sm, max) {
// position: fixed;
// bottom: 0;
// background: $color-white;
// z-index: 5;
// }
&__prateleira { &__prateleira {
// margin-top: 101px; // margin-top: 101px;
height: 448px; height: 448px;
@ -26,6 +34,16 @@
// // // align-items: center; // // // align-items: center;
// // // display: flex; // // // display: flex;
// // // justify-content: space-between; // // // 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); grid-template-columns: repeat(3, 1fr);
align-items: center; align-items: center;
@include mq(lg, max) {
display: grid;
grid-template-areas:
"stamps"
"address"
"developedBy"
}
// text-align: center; // text-align: center;
// // // grid-auto-flow: column; // // // grid-auto-flow: column;
// // // grid-auto-columns: max-content; // // // grid-auto-columns: max-content;
@ -64,12 +90,24 @@
// max-width: 40%; // max-width: 40%;
justify-self: flex-start; justify-self: flex-start;
@include mq(xl, min) {
font-size: 20px;
line-height: 27px;
}
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 24px;
max-width: 100%; max-width: 100%;
} }
@include mq(lg, max) {
margin-bottom: 16px;
grid-area: address;
display: flex;
justify-content: space-between;
}
} }
&__stamps { &__stamps {
@ -80,9 +118,18 @@
margin: 0; margin: 0;
@include mq(md, max) { // @include mq(md, max) {
align-self: center; // align-self: center;
margin-bottom: 12px; // 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 { &__divider {
@ -106,6 +153,10 @@
display: block; display: block;
height: 20px; height: 20px;
width: auto; width: auto;
@include mq(xl, min) {
height: 40px;
}
} }
} }
@ -113,6 +164,10 @@
display: block; display: block;
width: 53px; width: 53px;
height: 33px; height: 33px;
@include mq(lg, max) {
width: 30px;
}
} }
&__developedBy { &__developedBy {
@ -123,6 +178,11 @@
margin: 0; margin: 0;
justify-self: flex-end; justify-self: flex-end;
@include mq(lg, max) {
grid-area: developedBy;
justify-self: flex-start;
}
a { a {
align-items: center; align-items: center;
color: $black-300; color: $black-300;

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

@ -6,22 +6,48 @@
width: 100%; width: 100%;
border-bottom: 1px solid $black-500; border-bottom: 1px solid $black-500;
@include mq(xl, min) {
padding: 30px 256px;
}
@include mq(lg, max) {
padding: 16px 16px;
}
.container { .container {
width: auto !important; width: auto !important;
} }
&__wrapper { &__wrapper {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: 1fr 43.22% 1fr;
//repeat(3, 1fr);
// display: flex; // display: flex;
// justify-content: space-between; // justify-content: space-between;
align-items: center; 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 { &__logo {
img { img {
height: 37.14px; height: 37.14px;
width: auto; width: auto;
@include mq(xl, min) {
height: 91.2px;
}
@include mq(lg, max) {
height: 32.12px;
}
} }
} }
@ -30,7 +56,7 @@
// top: 50%; // top: 50%;
// left: 50%; // left: 50%;
// transform: translate(-50%, -50%); // transform: translate(-50%, -50%);
width: 440px; // width: 43.22%; //440px;
&__container { &__container {
// position:relative; // position:relative;
@ -58,7 +84,14 @@
line-height: 14px; line-height: 14px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 12px; font-size: 12px;
font-weight: 400;
font-style: normal;
color: $black-500; color: $black-500;
@include mq(xl, min) {
line-height: 28px;
font-size: 24px;
}
} }
&--circle { &--circle {
@ -70,6 +103,11 @@
&.active { &.active {
background: $black-500; background: $black-500;
} }
@include mq(xl, min) {
width: 24px;
height: 24px;
}
} }
&::before, &::before,
@ -106,6 +144,15 @@
img { img {
width: 12px; width: 12px;
height: 15px; height: 15px;
@include mq(xl, min) {
width: 29.47px;
height: 41.46px;
}
@include mq(lg, max) {
height: 13.33px;
}
} }
span { span {
@ -114,6 +161,11 @@
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
color: $black-300; color: $black-300;
@include mq(xl, min) {
line-height: 33px;
font-size: 24px;
}
} }
} }
} }

12
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -45,6 +45,18 @@
&--image { &--image {
height: 242px; height: 242px;
@include mq(xl, min) {
height: 485px;
}
@include mq(lg, max) {
height: 320px;
}
@include mq(sm, max) {
height: 164px;
}
} }
&--description { &--description {

4
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -34,8 +34,8 @@ $grid-breakpoints: (
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 1025px,
xl: 1200px xl: 2500px
) !default; ) !default;
$z-index: ( $z-index: (