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

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

@ -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,
}
}
]
});
}

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

@ -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) => {

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

@ -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 {

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

@ -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;
}

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

@ -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 {

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

@ -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;

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

@ -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;
}
}
}
}

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

@ -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 {

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

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