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

Compare commits

base: andreamatsunaga:main
Branches Tags
andreamatsunaga:main
andreamatsunaga:feature/cart
andreamatsunaga:development
andreamatsunaga:feature/header
andreamatsunaga:feature/responsiveness
andreamatsunaga:feature/order-form
andreamatsunaga:feature/footer
..
compare: andreamatsunaga:feature/cart
Branches Tags
andreamatsunaga:feature/cart
andreamatsunaga:development
andreamatsunaga:feature/header
andreamatsunaga:main
andreamatsunaga:feature/responsiveness
andreamatsunaga:feature/order-form
andreamatsunaga:feature/footer

1 Commits
main ... feature/ca

Author SHA1 Message Date
Andrea Matsunaga
7fc41445af feat: ajusta responsividade do empty cart 2022-12-24 01:53:50 -03:00
8 changed files with 127 additions and 83 deletions
Show Stats Expand all files Collapse all files

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

@ -16,7 +16,7 @@ export default class Footer {
} }
async selectors() { async selectors() {
console.log("iniciando selectors()") console.log("iniciando selectors()");
//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");
@ -25,22 +25,21 @@ export default class Footer {
this.frete = await waitElement(".shipping-date"); this.frete = await waitElement(".shipping-date");
this.unidade = await waitElement(".product-price"); this.unidade = await waitElement(".product-price");
this.prateleira = await waitElement(".footerCheckout__prateleira"); this.prateleira = await waitElement(".footerCheckout__prateleira");
// this.prateleiraSlick = await waitElement(".prateleira__carousel") // this.prateleiraSlick = await waitElement(".prateleira__carousel")
} }
async replaceCartContent() { async replaceCartContent() {
console.log("entrou no replaceCart") console.log("entrou no replaceCart");
if(this.cart) { if (this.cart) {
console.log("entrou no if do replaceCart()") console.log("entrou no if do replaceCart()");
console.log(this.cart) console.log(this.cart);
this.frete.textContent = "Frete"; this.frete.textContent = "Frete";
console.log(this.frete) console.log(this.frete);
this.unidade.textContent = "Unidade"; this.unidade.textContent = "Unidade";
console.log(this.unidade) console.log(this.unidade);
} }
} }
@ -58,63 +57,64 @@ export default class Footer {
// } // }
async onUpdate() { async onUpdate() {
console.log("chamada do onUpdate()") console.log("chamada do onUpdate()");
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
if(this.checkoutVazio) { if (this.checkoutVazio) {
console.log("entrou no if do onUpdate()") console.log("entrou no if do onUpdate()");
if (this.checkoutVazio.style.display == "block") {
console.log("Carrinho está vazio");
this.cartTitle.style.display = "none";
this.prateleira.style.display = "none";
} else {
console.log("Carrinho NÃO está vazio");
this.cartTitle.style.display = "block";
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
console.log("Está no #/cart");
this.prateleira.style.display = "block";
}
}
let target = this.checkoutVazio; let target = this.checkoutVazio;
let config = { attributes: true }; let config = { attributes: true };
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) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(() => { mutations.forEach(() => {
if (this.checkoutVazio.style.display == "block") {
if(this.checkoutVazio.style.display == "block") { console.log("Carrinho está vazio ou não está no #/cart");
console.log("Carrinho está vazio ou não está no #/cart")
this.cartTitle.style.display = "none"; this.cartTitle.style.display = "none";
this.prateleira.style.display = "none"; this.prateleira.style.display = "none";
} else { } else {
console.log("Carrinho NÃO está vazio e está no #/cart"); console.log("Carrinho NÃO está vazio e está no #/cart");
this.cartTitle.style.display = "block"; this.cartTitle.style.display = "block";
this.prateleira.style.display = "block"; if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
this.prateleira.style.display = "block";
}
} }
}); });
}); });
observer.observe(target, config); 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";
// }
// });
} }
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) { 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:");
prateleiraTitle.classList.add("prateleira__title"); prateleiraTitle.classList.add("prateleira__title");
@ -123,17 +123,18 @@ export default class Footer {
const prateleiraSlick = document.createElement("ul"); const prateleiraSlick = document.createElement("ul");
prateleiraSlick.classList.add("prateleira__carousel"); prateleiraSlick.classList.add("prateleira__carousel");
const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"); const response = await fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
);
console.log("await fetch response:", response); console.log("await fetch response:", response);
const productsList = await response.json(); const productsList = await response.json();
console.log("await fetch productsList:", productsList); console.log("await fetch productsList:", productsList);
let cardsStructure = ""; let cardsStructure = "";
if(productsList) { if (productsList) {
productsList.forEach((product) => { productsList.forEach((product) => {
console.log(product) console.log(product);
const productImageUrl = product.items[0].images[0].imageUrl; const productImageUrl = product.items[0].images[0].imageUrl;
const productName = product.productName; const productName = product.productName;
@ -141,7 +142,6 @@ export default class Footer {
const productLink = product.link; const productLink = product.link;
let skusStructure = ""; let skusStructure = "";
console.log("productImageUrl:", productImageUrl); console.log("productImageUrl:", productImageUrl);
console.log("productName:", productName); console.log("productName:", productName);
console.log("productSkus:", productSkus); console.log("productSkus:", productSkus);
@ -153,8 +153,8 @@ export default class Footer {
<li> <li>
<button type="button">${sku.name}</button> <button type="button">${sku.name}</button>
</li> </li>
` `;
}) });
cardsStructure += ` cardsStructure += `
<li class="prateleira__item"> <li class="prateleira__item">
@ -169,15 +169,15 @@ export default class Footer {
</a> </a>
</div> </div>
</li> </li>
` `;
}) });
this.prateleira.appendChild(prateleiraTitle); this.prateleira.appendChild(prateleiraTitle);
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);
// } // }
} }
} }
@ -199,22 +199,22 @@ export default class Footer {
breakpoint: 1025, breakpoint: 1025,
settings: { settings: {
slidesToShow: 3, slidesToShow: 3,
} },
}, },
{ {
breakpoint: 768, breakpoint: 768,
settings: { settings: {
slidesToShow: 2, slidesToShow: 2,
} },
} },
] ],
}); });
} }
async stampsHTML() { async stampsHTML() {
console.log("entrou no stamps") console.log("entrou no stamps");
const stamps = await waitElement('.footerCheckout__stamps'); const stamps = await waitElement(".footerCheckout__stamps");
// console.log(stamps.children[0], stamps.children[2]); // console.log(stamps.children[0], stamps.children[2]);
@ -248,38 +248,37 @@ export default class Footer {
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" /> <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
</li> </li>
</ul> </ul>
` `;
const certifiedStructure = ` const certifiedStructure = `
<img class="footerCheckout__vtexpci footerCheckout__payments--certified" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" /> <img class="footerCheckout__vtexpci footerCheckout__payments--certified" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
` `;
stamps.children[0].innerHTML = paymentsStructure; stamps.children[0].innerHTML = paymentsStructure;
stamps.children[2].innerHTML = certifiedStructure; stamps.children[2].innerHTML = certifiedStructure;
} }
async developedByHTML() { async developedByHTML() {
console.log("entrou no developedBy") console.log("entrou no developedBy");
const developedBy = await waitElement('.footerCheckout__developedBy'); const developedBy = await waitElement(".footerCheckout__developedBy");
// console.log(developedBy.children[0].children[0]); // console.log(developedBy.children[0].children[0]);
const vtexIcon = ` const vtexIcon = `
<span>Powered By</span> <span>Powered By</span>
<img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="" /> <img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="" />
` `;
const m3Icon = ` const m3Icon = `
<span>Powered By</span> <span>Powered By</span>
<img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="" /> <img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="" />
` `;
developedBy.children[0].children[0].innerHTML = vtexIcon; developedBy.children[0].children[0].innerHTML = vtexIcon;
developedBy.children[1].children[0].innerHTML = m3Icon; developedBy.children[1].children[0].innerHTML = m3Icon;
// developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link') // developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link')
// developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link') // developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
} }
} }

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

@ -4,6 +4,7 @@ import { waitElement } from "m3-utils";
export default class Header { export default class Header {
constructor() { constructor() {
this.init(); this.init();
console.log("constructor do header")
} }
async init() { async init() {

1
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -1,4 +1,5 @@
.checkout-container { .checkout-container {
// height: 542px; (567px)
// background: yellow; // background: yellow;
// height: 100%; // height: 100%;
// box-sizing: border-box; // box-sizing: border-box;

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

@ -9,12 +9,16 @@
@include mq(md, max) { @include mq(md, max) {
width: 100%; width: 100%;
} }
// .cart-template { //
// margin-bottom: 0;
// }
} }
.cart-template { .cart-template {
// height: 542px; (567 = 552px + mb15)
// background: red; // background: red;
margin: 0; margin-bottom: 0;
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
@ -1168,3 +1172,16 @@
} }
} }
} }
/*
checkout-container row-fluid cart-active
cart-template full-cart span12 active
cart-template-holder
empty-cart-content
empty-cart-title
empty-cart-message
clearfix empty-cart-links
cart
*/

1
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -50,4 +50,3 @@ body .container-main.container-order-form .orderform-template.active {
// } // }
} }

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

@ -1,20 +1,27 @@
.empty-cart { .empty-cart {
&-content { &-content {
margin: 170px 0 262px; margin: 170px 0 247px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
// @include mq(md, max) {
// padding: 0 16px;
@include mq(md, max) { // }
padding: 0 16px;
}
} }
&-title { &-title {
margin: 0 0 29px;
line-height: 33px;
font-size: 0; font-size: 0;
margin: 0 0 32px;
@include mq(xl, min) {
line-height: 65px;
}
@include mq(lg, max) {
line-height: 25px;
}
@include mq(sm, max) { @include mq(sm, max) {
margin: 0 0 22px; margin: 0 0 22px;
@ -22,25 +29,25 @@
&::after { &::after {
content: "Seu Carrinho está vazio"; content: "Seu Carrinho está vazio";
line-height: 33px;
font-family: $font-family; font-family: $font-family;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
font-style: normal;
color: $black-500; color: $black-500;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
vertical-align: bottom; vertical-align: bottom;
@include mq(xl, min) { @include mq(xl, min) {
line-height: 65px;
font-size: 48px; font-size: 48px;
} }
@include mq(lg, max) { @include mq(lg, max) {
line-height: 25px;
font-size: 18px; font-size: 18px;
} }
@include mq(xs, max) {
font-size: 16px;
}
} }
} }
@ -49,16 +56,28 @@
} }
&-links { &-links {
width: 32%; //327px; width: 31.93%; //327px;
max-width: 323px;
height: 48px; height: 48px;
margin: 0 auto; margin: 0 auto;
@include mq(xl, min) { @include mq(xl, min) {
max-width: 645px;
height: 66px; height: 66px;
} }
@include mq(lg, max) {
width: 30.52%;
min-width: max-content;
}
@include mq(md, max) {
width: 39.33%;
}
@include mq(sm, max) { @include mq(sm, max) {
width: 100%; width: 100%;
max-width: 250px;
} }
.link-choose-products { .link-choose-products {
@ -79,6 +98,7 @@
&::after { &::after {
content: "Continuar comprando"; content: "Continuar comprando";
padding: 16px 26px;
line-height: 16px; line-height: 16px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 14px; font-size: 14px;
@ -88,6 +108,14 @@
line-height: 33px; line-height: 33px;
font-size: 28px; font-size: 28px;
} }
@include mq(lg, max) {
padding: 0 10px;
}
@include mq(xs, max) {
font-size: 12px;
}
} }
&:hover { &:hover {

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

@ -16,8 +16,7 @@ footer .footerCheckout__wrapper {
width: 100%; width: 100%;
// margin: auto auto 0 auto; // margin: auto auto 0 auto;
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira {
header {
width: 79.53125%; width: 79.53125%;
margin: 0 auto; margin: 0 auto;
} }

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

@ -30,8 +30,8 @@ $color-green: #4caf50;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 375px,
cstm: 400, cstm: 400px,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 1025px, lg: 1025px,