From 390b738e763a32efc26686624b59d10819e70654 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Mon, 26 Dec 2022 20:52:42 -0300 Subject: [PATCH 1/2] =?UTF-8?q?feat(footer):=20criado=20e=20alterado=20est?= =?UTF-8?q?iliza=C3=A7=C3=A3o.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/arquivos/sass/partials/_footer.scss | 140 +++++++++++++++--- 1 file changed, 116 insertions(+), 24 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..7251a0e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,23 +1,52 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + figure { + margin: 0; + } + + ul { + padding: 0; + margin: 0 0 0 0; + } + + p { + margin: 0; + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + .container { + border-top: 1px solid $color-black2; + display: flex; + align-items: center; + justify-content: space-between; + width: 95%; + padding: 23px 32px; + + @include mq(xl, min) { + padding: 29px 63px; + } + } + + .container::before, + .container::after { + display: none; + } } &__address { - color: $color-gray2; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 10px; - line-height: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black1; text-transform: capitalize; - max-width: 40%; + max-width: 269px; + + @include mq(xl, min) { + font-size: 20px; + line-height: 27px; + max-width: 537px; + } @include mq(md, max) { margin-bottom: 24px; @@ -31,40 +60,103 @@ justify-self: center; list-style: none; + li { + display: flex; + } + + li:nth-child(1) { + display: flex; + } + + li:last-child { + img { + max-width: 53px; + height: 33px; + margin: 0 0 0 10px; + + @include mq(xl, min) { + max-width: 103px; + height: 64px; + } + } + } + + img { + height: 20px; + max-width: 34px; + margin-right: 13px; + + @include mq(xl, min) { + max-width: 69px; + height: 39px; + } + } + @include mq(md, max) { align-self: center; margin-bottom: 12px; } &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; width: 1px; + height: 24px; + background-color: $color-gray6; + + @include mq(xl, min) { + height: 43px; + } } } &__developedBy { - align-items: center; display: flex; + align-items: center; list-style-type: none; margin: 0; - li:last-child { + li { margin-left: 16px; + img { + margin-left: 11px; + } } - a { - align-items: center; - color: $color-gray2; + li:first-child { + img { + max-width: 44px; + height: 16px; + + @include mq(xl, min) { + max-width: 87px; + height: 31px; + } + } + } + + li:last-child { + img { + max-width: 28px; + height: 15px; + + @include mq(xl, min) { + max-width: 55px; + height: 30px; + } + } + } + + div { display: flex; + align-items: center; font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - text-decoration: none; + font-size: 9px; + font-weight: 400; + color: $color-black1; + + @include mq(xl, min) { + font-size: 18px; + line-height: 25px; + } span { margin-right: 8px; -- 2.34.1 From 9b65667845b9fa05098c54033e77b1fafe10b76a Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Mon, 26 Dec 2022 20:52:49 -0300 Subject: [PATCH 2/2] feat(footer): criado e alterado script. --- checkout/src/arquivos/js/components/Footer.js | 187 ++++++++++++++++-- 1 file changed, 174 insertions(+), 13 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..96fc09d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,195 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.onUpdate(); + this.criaFooter(); + this.criaPrateleira(); + this.criaCarrossel(); } 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 + // Containers + this.containerMain = document.querySelector("body .container-main"); + this.cartTemplate = document.querySelector(".cart-template"); + this.checkoutContainer = document.querySelector(".checkout-container"); + // Checkout this.checkoutVazio = await waitElement(".empty-cart-content"); + this.checkoutTitle = document.querySelector("#cart-title"); + this.checkoutButton = document.querySelector("#cart-choose-products"); + // Footer + this.checkoutAddress = document.querySelector(".footerCheckout__address"); + this.cardsIcons = document.querySelector(".footerCheckout__stamps").firstElementChild; + this.vtexIcon = document.querySelector(".footerCheckout__stamps").lastElementChild; + this.poweredBy = document.querySelector(".footerCheckout__developedBy").firstElementChild; + this.developedBy = document.querySelector(".footerCheckout__developedBy").lastElementChild; + // Prateleira + this.prateleira = document.querySelector(".footerCheckout__prateleira"); } 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 containerMain = this.containerMain; + let cartTemplate = this.cartTemplate; + let checkoutContainer = this.checkoutContainer; + let checkoutTitle = this.checkoutTitle; + let checkoutButton = this.checkoutButton; + let prateleira = this.prateleira; + let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + if (target.style.display != "none") { + if (document.querySelector(".prateleiraTitle") != null) { + document.querySelector(".prateleiraTitle").style.display = "none"; + } + containerMain.style.display = "flex"; + containerMain.style.height = "100%"; + checkoutTitle.style.display = "none"; + checkoutButton.innerHTML = "Continuar comprando"; + cartTemplate.style.display = "flex"; + prateleira.style.display = "none"; + + + } else { + if (document.querySelector(".prateleiraTitle") != null) { + document.querySelector(".prateleiraTitle").style.display = "block"; + } + containerMain.style.display = "block"; + containerMain.style.height = "max-content"; + checkoutTitle.style.display = "block"; + cartTemplate.style.height = "max-content"; + cartTemplate.style.display = "block"; + prateleira.style.display = "block"; + + if (window.location.hash != "#/cart") { + checkoutTitle.style.display = "none"; + prateleira.style.display = "none"; + } + + if (window.location.hash == "#/email") { + containerMain.style.height = "100%"; + checkoutContainer.style.overflow = "initial" + } + } }); }); observer.observe(target, config); } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + + criaFooter() { + this.checkoutAddress.innerHTML = ` +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ `; + + this.cardsIcons.innerHTML = ` +
+ Mastercard +
+ +
+ Visa +
+ +
+ Amex +
+ +
+ Elo +
+ +
+ HiperCard +
+ +
+ PayPal +
+ +
+ Boleto +
+ `; + + this.vtexIcon.innerHTML = ` +
+ VTEX PCI +
+ `; + + this.poweredBy.innerHTML = ` +
+

Powered By

+ +
+ VTEX +
+
+ `; + + this.developedBy.innerHTML = ` +
+

Developed By

+ +
+ M3 Academy +
+
+ `; + } + + async criaPrateleira() { + const urlAPI = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + + let prateleira = this.prateleira; + + prateleira.innerHTML = ` +

Você também pode gostar:

+ + `; + + fetch(urlAPI) + .then((response) => { + return response.json(); + }) + + .then((data) => { + return data.map((product) => { + let li = document.createElement("li"); + li.setAttribute("id", product.productId); + li.innerHTML = ` + ${ + product.productName + } + +

${product.productName}

+ +
${product.items + .map((name) => { + return `${name.name}`; + }) + .join("")} +
+ + + `; + prateleira.children[1].appendChild(li); + }); + }); + } + + async criaCarrossel() { + const prateleira = await waitElement(".carrossel-items"); + + setTimeout(() => { + $(prateleira).slick({ + slidesToShow: 4, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 2000, + }); + }, 600); } } -- 2.34.1