From 61527ab28d56a4ad82f4e3f6426e7d9e44e467d5 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Mon, 19 Dec 2022 01:42:59 -0300 Subject: [PATCH] feat: cria responsividade parcialmente --- checkout/src/arquivos/js/components/Footer.js | 90 +++++++++---------- checkout/src/arquivos/js/components/Header.js | 12 ++- .../sass/checkout/_checkout-carrinho.scss | 32 ++++++- .../sass/checkout/_checkout-vazio.scss | 82 +++++++++++++---- .../src/arquivos/sass/checkout/_checkout.scss | 9 ++ .../src/arquivos/sass/partials/_footer.scss | 66 +++++++++++++- .../src/arquivos/sass/partials/_header.scss | 56 +++++++++++- .../arquivos/sass/partials/_prateleira.scss | 12 +++ .../src/arquivos/sass/utils/_variaveis.scss | 4 +- 9 files changed, 291 insertions(+), 72 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9e0ccbe..e7f8f0f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -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,8 +68,16 @@ export default class Footer { let target = this.checkoutVazio; let config = { attributes: true }; - // this.cartTitle.style.display = "none"; - this.prateleira.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.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() { - 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, + } + } + ] }); } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 7df8cb7..466e0ac 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -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 = `