From 6b588f998dc4e1d8ad13367427bdc72cc33a5f8d Mon Sep 17 00:00:00 2001 From: carloswinter Date: Sun, 18 Dec 2022 21:55:06 -0300 Subject: [PATCH 1/3] feat(footer): adiciona logica slick e icons ao footer --- .gitignore | 1 + checkout/src/arquivos/js/components/Footer.js | 266 +++++++++++++++++- package-lock.json | 2 + 3 files changed, 257 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index 351724d..f394f93 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ *node_modules node_modules +yarn.lock # para arquivos sass e scss diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..a518996 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,276 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.events(); + this.onUpdate(); + this.createPaymentsIcons(); + this.createVtexpciIcon(); + this.createDevIcons(); + // await this.addCarrossel(); + } + + events() { + window.addEventListener("hashchange", () => { + this.onUpdate(); + if (window.location.hash != "#/cart") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "none"; + } + + this.cartTitle.style.display = "none"; + } + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "block"; + } + this.cartTitle.style.display = "block"; + } + console.log("HASHCHANGE FOOTER"); + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + this.list.style.display = "flex"; + } + if (window.location.hash != "#/cart") { + this.list.style.display = "none"; + } + }); + addEventListener("resize", () => { + this.addCarrossel(); + }); } async selectors() { //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.list = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000, + }); + // this.slick = await waitElement(".slick-test"); + // this.footerTitle = await waitElement(".footerTitle", { + // timeout: 5000, + // interval: 1000, + // }); + this.allList = await waitElement(".footerCheckout"); this.checkoutVazio = await waitElement(".empty-cart-content"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexpci = await waitElement(".footerCheckout__vtexpci"); + this.iconsFooter = await waitElement(".footerCheckout__developedBy"); + this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); + this.cartTitle = await waitElement("#cart-title"); } onUpdate() { - //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 - // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver let target = this.checkoutVazio; + let lista = this.list; + + let cartTitle = this.cartTitle; + console.log("title:", cartTitle); + if (target.style.display == "none" && window.location.hash == "#/cart") { + lista.style.display = "flex"; + cartTitle.style.display = "block"; + if (!this.list.classList.contains("fetch")) { + console.log("PRIMEIRO NAO TEM FETCH"); + this.fetchApiData(); + } + } else { + lista.style.display = "none"; + cartTitle.style.display = "none"; + } let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); + if (window.location.hash == "#/cart") { + console.log("listairai", this.list.classList); + if (!lista.classList.contains("fetch")) { + console.log("SEGUNDO NAO TEM FETCH"); + this.fetchApiData(); + } + mutations.forEach(function (mutation) { + if (target.style.display != "none") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "none"; + } + cartTitle.style.display = "none"; + lista.style.display = "none"; + } else { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "block"; + } + lista.style.display = "flex"; + cartTitle.style.display = "block"; + } + console.log(mutation.type); + }); + } }); observer.observe(target, config); } + async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + console.log("start slick"); + const elemento = await waitElement(".slick-test"); + if ($(elemento).hasClass("slick-initialized")) { + $(elemento).slick("unslick"); + } + if (window.innerWidth > 1024) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 4, + slidesToScroll: 1, + }); + } else if (window.innerWidth > 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 3, + slidesToScroll: 1, + }); + } else if (window.innerWidth <= 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 2, + slidesToScroll: 1, + }); + } + + console.log("end slick"); + } + + fetchApiData() { + console.log("COMEÇO FETCH"); + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => { + console.log(data); + const ul = document.createElement("ul"); + + ul.classList.add("slick-test"); + this.list.appendChild(ul); + const footerCheckout = document.querySelector(".footerCheckout"); + const footerTitle = document.createElement("p"); + footerTitle.classList.add("footerTitle"); + footerTitle.innerText = "Você também pode gostar:"; + footerCheckout.insertBefore(footerTitle, this.list); + data.map((item) => { + let colors = ""; + for (let i = 0; i < item.items.length; i++) { + console.log(colors); + colors += `

${item.items[i].name}

`; + } + const li = document.createElement("li"); + li.setAttribute("name", item.itemId); + li.classList.add("itemList"); + li.innerHTML = ` +

${item.productName}

+
+ ${colors} +
+ VER PRODUTO`; + console.log(item.productName, colors); + console.log("adiciona li"); + ul.appendChild(li); + this.list.classList.add("fetch"); + console.log(this.list); + ul.style.width = "100%"; + }); + }) + .then(() => { + this.addCarrossel(); + }); + console.log("FIM FETCH"); + } + + createPaymentsIcons() { + this.payments.innerHTML = ` + + `; + } + + createVtexpciIcon() { + this.vtexpci.innerHTML = ` +
+ +
+ `; + } + + createDevIcons() { + this.iconsFooter.innerHTML = ` +
  • + + Powered By +
    + +
    +     +
    • + +
  • + + Developed By +
    + +
    +     +
    • + `; } } diff --git a/package-lock.json b/package-lock.json index 3be68c7..4024f93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "jquery": "^3.6.0", "m3-utils": "^0.1.0", "sass": "^1.38.1", + "slick-carousel": "^1.8.1", "terser-webpack-plugin": "^5.1.4" }, "devDependencies": { @@ -19345,6 +19346,7 @@ "m3-utils": "^0.1.0", "prettier": "^2.3.2", "sass": "^1.38.1", + "slick-carousel": "^1.8.1", "terser-webpack-plugin": "^5.1.4", "webpack": "^5.51.1", "webpack-merge": "^5.8.0" From 35c3dac351ea540e84246aa9563bd3279374db1b Mon Sep 17 00:00:00 2001 From: carloswinter Date: Sun, 18 Dec 2022 22:04:06 -0300 Subject: [PATCH 2/3] feat(footer): adiciona css em sass ao footer --- .../src/arquivos/sass/partials/_footer.scss | 203 +++++++++++++++--- 1 file changed, 174 insertions(+), 29 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..2ebcd2d 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,47 +1,134 @@ -/* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + margin-top: auto; + //border-top: 1px solid #000; + .container { + display: flex; + flex-direction: column; + width: 100%; + padding: 7px 0; + margin: 0; + + @include mq(dt, min) { + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 15px 0 15px 0; + } + + @include mq(tv, min) { + padding: 26px 0 26px 0; + } + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + border-top: 1px solid $black; + + @media screen and (max-width: 490px) { + padding: 7px 0; + } } &__address { - color: $color-gray2; + color: $gray-500; font-family: $font-family; - font-style: normal; - font-weight: normal; + font-weight: 400; + line-height: 14px; font-size: 10px; - line-height: 12px; text-transform: capitalize; - max-width: 40%; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + @include mq(dt, max) { + display: flex; + width: 100%; + order: 2; + margin-top: 17px; + + span { + margin-left: 16px; + } + } + + @include mq(dt, min) { + min-width: 269px; + margin-left: 32px; + } + + @include mq(tv, min) { + font-size: 20px; + line-height: 27px; + min-width: 537px; + margin-left: 0; } } &__stamps { - align-items: center; display: flex; - justify-self: center; + height: 33px; + align-items: center; list-style: none; + margin: 0 0 0 5px; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + li { + height: 33px; } - &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; - width: 1px; + @include mq(dt, min) { + justify-content: center; + min-width: 404px; + margin: 0; + } + + @include mq(tv, min) { + min-width: 690.52px; + } + + .payments-icons-wrapper { + display: flex; + width: 100%; + list-style: none; + gap: 13.35px; + margin: 0; + + @include mq(dt, max) { + gap: 4.35px; + } + figure { + padding: 6px 0 7px; + width: 35.65px; + height: 20px; + margin: 0; + @include mq(tv, min) { + width: 69.63px; + } + + @include mq(Gf, max) { + width: 24px; + } + } + } + + .footerCheckout__stamps__divider { + border-left: 1px solid $gray; + margin: 0 10px; + height: 33px; + padding: 0 0 9px; + + @include mq(dt, min) { + margin-left: 11.35px; + } + } + + .footerCheckout__vtexpci { + .vtex-icon { + width: 53px; + margin: 0; + } + + @include mq(tv, min) { + .vtex-icon { + width: 103.52px; + height: 64.46px; + } + } } } @@ -51,18 +138,43 @@ list-style-type: none; margin: 0; - li:last-child { + @include mq(dt, max) { + display: flex; + width: 100%; + order: 3; + margin-top: 17px; + } + + @include mq(dt, min) { + min-width: 217px; + margin-right: 22.5px; + } + + li { margin-left: 16px; + + figure { + margin: 0; + } + } + + .vtex-icon { + width: 44.92px; + margin: 0; + } + .m3-icon { + width: 28.66px; + margin: 0; } a { align-items: center; - color: $color-gray2; + color: $gray-500; display: flex; font-family: $font-family; font-style: normal; - font-weight: normal; - font-size: 10px; + font-weight: 400; + font-size: 9px; line-height: 12px; text-decoration: none; @@ -70,5 +182,38 @@ margin-right: 8px; } } + + @include mq(tv, min) { + min-width: 388.98px; + margin-right: 0; + + a { + font-size: 18px; + line-height: 25px; + } + + li { + margin-left: 10px; + } + + .vtex-icon { + width: 87.73px; + } + .m3-icon { + width: 55.98px; + } + } + } + + .footerCheckout::after, + ::before { + display: none; + content: none; + } + + .footerCheckout::before, + ::after { + display: none; + content: none; } } From 38b0c3d4c0c0e8e87d5e78230dc84227db2137cb Mon Sep 17 00:00:00 2001 From: carloswinter Date: Sun, 18 Dec 2022 22:06:38 -0300 Subject: [PATCH 3/3] feat(footer): adiciona css em scss a prateleira no footer --- .../arquivos/sass/partials/_prateleira.scss | 142 ++++++++++++++++++ 1 file changed, 142 insertions(+) diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..e048f93 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,143 @@ /* _prateleira.scss */ +.footerCheckout__prateleira { + //width: 96.88% !important; + margin: 0 132px; + //width: 100% !important; + @media (max-width: 1024px) { + width: auto !important; + margin: 0 16px; + } +} +.footerTitle { + text-align: center; + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $black; + margin-bottom: 20px; + + @include mq(tv, min) { + font-size: 48px; + line-height: 76px; + } +} +.slick-test { + width: 100%; + gap: 16px; + margin: 0 !important; + & li { + max-width: 97.98%; + @media (max-width: 375px) { + width: 164px !important; + } + @media (max-width: 1024px) { + width: 97.86% !important; + max-width: 100%; + } + @include mq(tv, min) { + min-width: 485.07px; + } + } +} +.itemList { + @media (max-width: 375px) { + width: 164px; + } +} +.itemSku { + display: flex; + gap: 5px; + justify-content: center; + flex-wrap: wrap; + height: 26px; + & p { + background: #00c8ff; + border-radius: 8px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + padding: 5px; + display: flex; + align-items: center; + text-align: center; + height: 18px; + margin: 0; + + letter-spacing: 0.05em; + text-transform: uppercase; + + color: $white; + @include mq(tv, min) { + font-size: 26px; + line-height: 35px; + height: auto; + } + } + @media (max-width: 375px) { + height: 61px; + justify-content: center; + align-items: center; + } + @media (max-width: 1183px) { + height: 61px; + justify-content: center; + align-items: center; + } + @include mq(tv, min) { + min-height: 45px; + } +} +.productName { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + margin: 20px 0px; + text-align: center; + height: 18px; + + color: $black; + @media (max-width: 375px) { + height: 36px; + } + @include mq(tv, min) { + height: 35px; + font-size: 26px; + line-height: 35px; + } +} +.productImg { + background: #eeeeee; + width: 100%; +} +.productLink { + background: #00c8ff; + border-radius: 8px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + padding: 12px 0; + //padding: 12px 71px 12px 72px; + display: flex; + justify-content: center; + letter-spacing: 0.05em; + text-transform: uppercase; + margin: 20px 0px 0px; + + color: $white; + &:hover { + color: white; + text-decoration: None; + } + @include mq(tv, min) { + font-size: 26px; + line-height: 35px; + } +}