From d29c433a4d83cf17bade81be5cf40da4ba0cf706 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Thu, 15 Dec 2022 23:55:03 -0300 Subject: [PATCH 1/5] =?UTF-8?q?feat(Footer.js):=20api=20das=20prateleiras,?= =?UTF-8?q?com=20o=20slick=20n=C3=A3o=20funcional?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 45 ++++++++++++++++++- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..219a3ca 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -3,17 +3,55 @@ import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); + this.requestShelf(); + this.addCarrossel(); } async init() { await this.selectors(); // this.onUpdate(); + this.requestShelf(); + this.addCarrossel(); } async selectors() { + this.itensShelf = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000}) + // this.itensShelf = await waitElement(".empty-cart-content") //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.checkoutVazio = await waitElement(".container-cart", { + + // }); + } + + requestShelf() { + let prateleira= this.itensShelf; + prateleira.innerHTML = ` +

Você também pode gostar

+ + `; + const api = "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + const prodUl = document.querySelector("carrosel-ul") + fetch(api) + .then((response) => response.json()) + .then(function(data) { + return data.map(function(item) { + let li = document.createElement("li") + li.setAttribute("id", item.productId) + li.innerHTML = ` + ${item.productName} +

${item.productName}

+
${item.items.map((name) => { + return `${name.name}` + + }).join("")}
+ + `; + prateleira.children[1].appendChild(li); + }); + }); } onUpdate() { @@ -31,10 +69,13 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".carrosel-ul"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, + variableWidth: true, + infinite: false, }); } } -- 2.34.1 From b4761dc6f0a0ec289531ddbf179f805b0d50e64e Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 16 Dec 2022 12:34:54 -0300 Subject: [PATCH 2/5] fix(Footer.js): logica das prateleiras toda alterada, para funcionamento do slick de forma correta. --- checkout/src/arquivos/js/components/Footer.js | 97 +++++++++++-------- 1 file changed, 57 insertions(+), 40 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 219a3ca..fa29cea 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -3,57 +3,75 @@ import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); - this.requestShelf(); - this.addCarrossel(); + } async init() { + this.list = await this.requestApi(); await this.selectors(); // this.onUpdate(); - this.requestShelf(); + this.createShelf(); + this.shelfList = await waitElement(".footerCheckout__shelfList"); + this.shelfItens(); + + + this.addCarrossel(); } async selectors() { this.itensShelf = await waitElement(".footerCheckout__prateleira", { - timeout: 5000, - interval: 1000}) - // this.itensShelf = await waitElement(".empty-cart-content") - //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(".container-cart", { - - // }); - } - - requestShelf() { - let prateleira= this.itensShelf; - prateleira.innerHTML = ` -

Você também pode gostar

- - `; - const api = "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; - const prodUl = document.querySelector("carrosel-ul") - fetch(api) - .then((response) => response.json()) - .then(function(data) { - return data.map(function(item) { - let li = document.createElement("li") - li.setAttribute("id", item.productId) - li.innerHTML = ` - ${item.productName} -

${item.productName}

-
${item.items.map((name) => { - return `${name.name}` - - }).join("")}
- - `; - prateleira.children[1].appendChild(li); - }); + timeout: 5000, + interval: 1000, }); } + createShelf() { + if(this.itensShelf) { + this.itensShelf.innerHTML = ` +
+

Você também pode gostar:

+
+ + ` + } + } + + async shelfItens() { + let structure = ""; + + this.list.forEach((response) => { + const sku = response.skus.map((item) => `
  • ${item}
    • `); + + structure += ` +
  • +
    +
    ${response.name}
    +
      ${sku}
    + +
    • + ` + }) + this.shelfList.innerHTML = structure + } + + async requestApi() { + const api = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + return fetch(api) + .then((response) => response.json()) + .then((data) => { + const prodInfo = data.map((response) => ({ + name: response.productName, + skus: response.items.map((item) => item.name), + img: response.items[0].images[0].imageUrl, + link: response.link, + })); + return prodInfo + }); + } + + 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 @@ -69,12 +87,11 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement(".carrosel-ul"); + const elemento = await waitElement(".footerCheckout__shelfList"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, arrows: true, - variableWidth: true, infinite: false, }); } -- 2.34.1 From 2346a5f5e66da54d0a150ee879dc3ca6d510c0dc Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 16 Dec 2022 15:19:27 -0300 Subject: [PATCH 3/5] =?UTF-8?q?feat(Footer.js):=20implementa=C3=A7=C3=A3o?= =?UTF-8?q?=20das=20imagens=20e=20logos=20no=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 56 ++++++++++++++++++- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index fa29cea..76bbcbb 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -3,19 +3,19 @@ import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); - } async init() { this.list = await this.requestApi(); await this.selectors(); + this.creditCardIconsHTML(); + this.developedByIconsHTML(); + // this.onUpdate(); this.createShelf(); this.shelfList = await waitElement(".footerCheckout__shelfList"); this.shelfItens(); - - this.addCarrossel(); } @@ -24,6 +24,13 @@ export default class Footer { timeout: 5000, interval: 1000, }); + this.checkoutVazio = await waitElement(".empty-cart-content", { + timeout: 5000, + interval: 1000, + }); + this.creditCardIcons = await waitElement(".footerCheckout__stamps"); + this.developedByIcons = await waitElement(".footerCheckout__developedBy"); + } createShelf() { @@ -95,4 +102,47 @@ export default class Footer { infinite: false, }); } + + creditCardIconsHTML() { + this.creditCardIcons.innerHTML = ` +
  • Mastercard
    • +
    • +
  • American Express
    • +
  • Elo
    • +
  • Hipercard
    • +
  • PayPal
    • +
  • Boleto
    • +
    • +
  • PCI VTEX
    • + `; + } + + developedByIconsHTML() { + this.developedByIcons.innerHTML = ` +
  • +
    + + Powered By + + +
    +
    • + +
  • +
    + + Developed By + + +
    +
    • + `; + } + + } + + + + + -- 2.34.1 From 62be124c6db2285b31bb275258e91796a8f87930 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 16 Dec 2022 20:52:42 -0300 Subject: [PATCH 4/5] =?UTF-8?q?feature(Footer.js):=20observer=20prateleira?= =?UTF-8?q?=20n=C3=A3o=20funcional,=20prateleira=20n=C3=A3o=20some=20com?= =?UTF-8?q?=20mudan=C3=A7a=20do=20checkout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 36 +++++++++++-------- .../sass/checkout/_checkout-vazio.scss | 3 ++ 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 76bbcbb..9911b31 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,15 +8,14 @@ export default class Footer { async init() { this.list = await this.requestApi(); await this.selectors(); - this.creditCardIconsHTML(); - this.developedByIconsHTML(); - - // this.onUpdate(); this.createShelf(); this.shelfList = await waitElement(".footerCheckout__shelfList"); this.shelfItens(); - + await this.shelfUpdate(); this.addCarrossel(); + this.creditCardIconsHTML(); + this.developedByIconsHTML(); + } async selectors() { @@ -78,21 +77,30 @@ export default class Footer { }); } + events() { + window.addEventListener("hashchange", () =>{}) + } - 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 + async shelfUpdate() { let target = this.checkoutVazio; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); - }); - + console.log("observer"); + mutations.map((mutation) => { + const status = mutation.target.attributes.style.nodeValue; + console.log(status); + if(status === "display: none") { + this.renderShelf(); + this.shelfList.classList.remove("inactive"); + } else if (status === "display: block") { + this.removeShelf(); + this.shelfList.classList.add("inactive"); + } + }) + }) observer.observe(target, config); } + async addCarrossel() { const elemento = await waitElement(".footerCheckout__shelfList"); $(elemento).slick({ diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..498b48b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -8,6 +8,9 @@ padding: 0 16px; } } + &-message { + display: none; + } &-title { font-size: 20px; -- 2.34.1 From 114965e967d298200e7fff6904adf44600aa72bf Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Sun, 18 Dec 2022 20:51:27 -0300 Subject: [PATCH 5/5] =?UTF-8?q?feat(Footer):=20novas=20fun=C3=A7=C3=B5es?= =?UTF-8?q?=20para=20funcionamento=20do=20mutation,=20uma=20parte=20do=20c?= =?UTF-8?q?ss=20do=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 94 ++++++++++++------- .../src/arquivos/sass/partials/_footer.scss | 41 ++++++++ 2 files changed, 99 insertions(+), 36 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9911b31..844be3d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,10 +8,12 @@ export default class Footer { async init() { this.list = await this.requestApi(); await this.selectors(); - this.createShelf(); + if (window.location.hash === "#/cart") { + await this.shelfUpdate(); + } this.shelfList = await waitElement(".footerCheckout__shelfList"); this.shelfItens(); - await this.shelfUpdate(); + this.events(); this.addCarrossel(); this.creditCardIconsHTML(); this.developedByIconsHTML(); @@ -19,14 +21,8 @@ export default class Footer { } async selectors() { - this.itensShelf = await waitElement(".footerCheckout__prateleira", { - timeout: 5000, - interval: 1000, - }); - this.checkoutVazio = await waitElement(".empty-cart-content", { - timeout: 5000, - interval: 1000, - }); + this.itensShelf = await waitElement(".footerCheckout__prateleira"); + this.checkoutVazio = await waitElement(".empty-cart-content"); this.creditCardIcons = await waitElement(".footerCheckout__stamps"); this.developedByIcons = await waitElement(".footerCheckout__developedBy"); @@ -43,14 +39,14 @@ export default class Footer { } } - async shelfItens() { + shelfItens() { let structure = ""; this.list.forEach((response) => { const sku = response.skus.map((item) => `
  • ${item}
    • `); structure += ` -
  • +
  • ${response.name}
      ${sku}
    @@ -78,29 +74,34 @@ export default class Footer { } events() { - window.addEventListener("hashchange", () =>{}) + window.addEventListener("hashchange", this.hashChange.bind(this)) } async shelfUpdate() { let target = this.checkoutVazio; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - console.log("observer"); mutations.map((mutation) => { - const status = mutation.target.attributes.style.nodeValue; - console.log(status); - if(status === "display: none") { - this.renderShelf(); - this.shelfList.classList.remove("inactive"); - } else if (status === "display: block") { + console.log(mutation.target.attributes.style.nodeValue); + if(mutation.target.attributes.style.nodeValue == "display: none;") { + this.createShelf(); + } else if (mutation.target.attributes.style.nodeValue == "display: block;") { this.removeShelf(); - this.shelfList.classList.add("inactive"); } - }) - }) + }); + }); observer.observe(target, config); } + hashChange(e) { + if(e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") { + this.itensShelf.classList.add("desativado"); + } else { + this.itensShelf.classList.remove("desativado"); + } + + } + async addCarrossel() { const elemento = await waitElement(".footerCheckout__shelfList"); $(elemento).slick({ @@ -108,20 +109,43 @@ export default class Footer { slidesToScroll: 1, arrows: true, infinite: false, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + } + }, + { + breakpoint: 375, + settings: { + slidesToShow: 2, + slidesToScroll: 1 + } + }, + { + breakpoint: 290, + settings: { + slidesToShow: 1, + slidesToScroll: 1 + } + } + ] }); } creditCardIconsHTML() { this.creditCardIcons.innerHTML = ` -
  • Mastercard
    • -
    • -
  • American Express
    • -
  • Elo
    • -
  • Hipercard
    • -
  • PayPal
    • -
  • Boleto
    • +
  • Mastercard
    • +
    • +
  • American Express
    • +
  • Elo
    • +
  • Hipercard
    • +
  • PayPal
    • +
  • Boleto
    • -
  • PCI VTEX
    • +
  • PCI VTEX
    • `; } @@ -147,10 +171,8 @@ export default class Footer { `; } + removeShelf() { + this.itensShelf.innerHTML = ""; + } } - - - - - diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..5ab96c5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,10 +3,48 @@ border-top: none; color: $color-gray2; + &__prateleira{ + .footerCheckout__prateleira-title { + display: flex; + justify-content: center; + } + } + &__wrapper { align-items: center; display: flex; justify-content: space-between; + padding-top: 56px; + + .container { + display: flex; + justify-content: space-between; + + .footerCheckout__address{ + width: 21.02%; + left: 2.5%; + } + + .footerCheckout__stamps { + width: 31.56%; + } + + .footerCheckout__developedBy{ + display: flex; + width: 16.95%; + right: 2.5%; + + .by-vtex, .by-m3{ + display: flex; + + .vtex-logo, .m3-logo{ + width: 50% ; + } + } + + + } + } } &__address { @@ -71,4 +109,7 @@ } } } + .desativado { + display: none !important; + } } -- 2.34.1