From f18efdc03adccaffba32cea5db5501206cc9e1c5 Mon Sep 17 00:00:00 2001 From: Vinicius Date: Sun, 18 Dec 2022 23:13:01 -0200 Subject: [PATCH 1/3] fix(header): corrige o flex --- checkout/src/arquivos/js/components/Footer.js | 217 ++++++++++-------- checkout/src/arquivos/js/components/Header.js | 213 ----------------- .../sass/checkout/_checkout-carrinho.scss | 11 + .../src/arquivos/sass/partials/_footer.scss | 3 +- .../src/arquivos/sass/partials/_header.scss | 50 +--- 5 files changed, 139 insertions(+), 355 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ba3ee4b..d9e3c0a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -1,122 +1,141 @@ -// import { waitElement } from "m3-utils"; - -// export default class Footer { -// constructor() { -// this.init(); -// } - -// async init() { -// await this.selectors(); -// // this.onUpdate(); -// } - -// 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.checkoutVazio = await waitElement(".empty-cart-content"); -// } - -// 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 config = { childList: true, attributes: true }; -// let observer = new MutationObserver((mutations) => { -// mutations.forEach(function (mutation) { -// console.log(mutation.type); -// }); -// }); - -// observer.observe(target, config); -// } -// async addCarrossel() { -// const elemento = await waitElement("#my-element"); -// $(elemento).slick({ -// slidesToShow: 4, -// slidesToScroll: 1, -// }); -// } -// } - import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); - this.requestShelf(); - this.addCarrossel(); } - async init() { + async Init() { + this.list = await this.fetchPrat(); await this.selectors(); - // this.onUpdate(); - this.requestShelf(); + //this.onUpdate(); + this.createPrat(); + this.prateleira = await waitElement(".footerCheckout__carrossel-itens"); + this.itensPrat(); this.addCarrossel(); + this.creditCardIconsHTML(); + this.developedByIconsHTML(); } async selectors() { - this.itensShelf = await waitElement(".footerCheckout__prateleira"); - // 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); - }); - }); - } - - 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 config = { childList: true, attributes: true }; - let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); + this.itensShelf = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000, }); - - observer.observe(target, config); + this.creditCardIcons = await waitElement(".footerCheckout__stamps"); + this.developedByIcons = await waitElement(".footerCheckout__developedBy"); } + + // onUpdate() { + // let target = this.checkoutVazio; + // let config = { childList: true, attributes: true }; + // let observer = new MutationObserver((mutations) => { + // let removeClassh3 = document.getElementById("removeClassh3"); + // let removeClassul = document.getElementById("removeClassul"); + // mutations.forEach(function (mutation) { + // const checkoutTarget = mutation.target.attributes.style.nodeValue; + // console.log(checkoutTarget); + // if (checkoutTarget === "display: none;") { + // removeClassh3.classList.remove("displayNone"); + // removeClassul.classList.remove("displayNone"); + // } else if (checkoutTarget === "display: block;") { + // removeClassh3.classList.add("displayNone"); + // removeClassul.classList.add("displayNone"); + // } + // }); + // }); + + // observer.observe(target, config); + // } + + createPrat() { + if (this.itensShelf) { + this.itensShelf.innerHTML = ` +
+

Você também pode gostar:

+
+ + `; + } + } + + async itensPrat() { + letstructure = ""; + + this.list.forEach((response) => { + const sku = response.skus.map((item) => `
  • ${item}
    • `); + + structure += ` +
  • +
    +
    ${response.name}
    +
      ${sku}
    + +
    • + `; + }); + this.prateleira.innerHTML = structure; + } + + async fetchPrat() { + constapi = + "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; + }); + } + async addCarrossel() { - const elemento = await waitElement(".carrosel-ul"); + const elemento = await waitElement(".footerCheckout__carrossel-itens"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, arrows: true, - variableWidth: true, infinite: false, }); } + + creditCardIconsHTML() { + this.creditCardIcons.innerHTML = ` +
  • Mastercard
    • +
    • +
  • American Express
    • +
  • Elo
    • +
  • Hipercard
    • +
  • PayPal
    • +
  • Boleto
    • +
    • +
  • PCI VTEX
    • + `; + } + + developedByIconsHTML() { + this.developedByIcons.innerHTML = ` +
  • +
    + +Powered By + + +
    +
    • + +
  • +
    + +Developed By + + +
    +
    • + `; + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 10fda88..6b42e07 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -1,216 +1,3 @@ -// // // import waitForEl from "../helpers/waitForEl"; -// import { waitElement } from "m3-utils"; -// Export default class Header { - -// constructor() { -// this.init(); - -// } - -// async init() { -// await this.selectors(); -// this.progressBarHTML(); -// await this.progressBarProgress(); -// } - -// async selectors() { -// this.header = await waitElement(".headerCheckout"); -// this.progressBar = await waitElement("#progressBar"); -// } - -// progressBarHTML() { -// if (this.progressBar && window.innerWidth > 1024) { -// // 1024) { -// const progressBarLista = document.querySelectorAll("#progressBar ul li"); -// progressBarLista.forEach((li) => { -// if (window.location.href==="https://m3academy.myvtex.com/checkout/#/cart") { -// if (li.children[0].children[0].children["progress-bar-circle-1"]) { -// li.children[0].children[0].children["progress-bar-circle-1"].classList.add( -// "active"); -// } -// if (li.children[0].children[0].children["progress-bar-circle-2"]) { -// if ( -// li.children(0).children[0].children[ -// "progress-bar-circle-2" -// ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-2" -// ].classList.remove("active"); -// } -// } -// if (li.children[0].children[0].children["progress-bar-circle-3"]) { -// if ( -// li.children[0].children[0].children[ -// "progress-bar-circle-3" -// ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-3" -// ].classList.remove("active"); -// } -// } -// } else if ( -// window.location.href==="https://m3academy.myvtex.com/checkout/#/email" || -// window.location.href== "https://m3academy.myvtex.com/checkout/#/profile" || -// window.location.href=="https://m3academy.myvtex.com/checkout/#/shipping" -// ){ -// if(li.children[0].children[0].children["progress-bar-circle-1"]){ -// if(li.children[0].children[0].children[ -// "progress-bar-circle-1" -// ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-1" -// ].classList.remove("active"); - -// } -// } -// } - -// if(li.children[0].children[0].children["progress-bar-circle-2"]){ -// li.children[0].children[0].children["progress-bar-circle-2"].classList.add( -// "active" -// ); -// } - -// if(li.children[0].children[0].children["progress-bar-circle-3"]){ -// if( -// li.children[0].children[0].children[ -// "progress-bar-circle-3" -// ].classList.contains["active"] -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-3" -// ].classList.remove["active"]; -// } -// } else if( -// window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" -// ){ -// if (li.children[0].children[0].children["progress-bar-circle-1"]) { - -// if ( -// li.children[0].children[0].children[ -// "progress-bar-circle-1"].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-1" ].classList.remove("active"); -// } -// } -// if (li.children[0].children[0].children["progress-bar-circle-2"]) { -// if( -// li.children[0].children[0].children[ -// "progress-bar-circle-2" -// ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-2" ].classList.remove("active"); -// } -// } -// if (li.children[0].children[0].children["progress-bar-circle-3"]) { -// li.children[0].children[0].children["progress-bar-circle-3"].classList.add( -// "active"); -// } -// } - -// window.addEventListener("hashchange", © ) => { -// if (window.location.hash="#/cart") { -// if (li.children[0].children[0].children["progress-bar-circle-1"]) { -// li.children[0].children[0].children[ "progress-bar-circle-1" -// ].classList.add("active"); -// } -// if (li.children[0].children[0].children["progress-bar-circle-2"]) { -// if ( -// li.children(0).children[0].children[ -// "progress-bar-circle-2" ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-2" ].classList.remove("active"); -// } -// } -// if (li.children[0].children[0].children["progress-bar-circle-3"]) { -// if ( -// li.children[0].children[0].children[ -// "progress-bar-circle-3" -// ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-3" -// ].classList.remove("active"); -// } -// } else if ( -// window.location.hash=="#/email" || -// window.location.hash =="#/profile" || -// window.location.hash=="#/shipping"){ -// if (li.children[0].children[0].children["progress-bar-circle-1"]) { -// if ( -// li.children[0].children[0].children[ -// "progress-bar-circle-1" ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-1" ].classList.remove("active"); -// } -// } -// if (li.children[0].children[0].children["progress-bar-circle-2"]) { -// li.children[0].children[0].children[ -// "progress-bar-circle-2" -// ].classList.add("active"); -// } -// if (li.children[0].children[0].children["progress-bar-circle-3"]) { -// if ( -// li.children[0].children[0].children[ "progress-bar-circle-3" -// ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-3" ].classList.remove("active"); -// } -// } -// } else if (window.location.hash=="#/payment") { -// if (li.children[0].children[0].children["progress-bar-circle-1"]) { -// if ( -// li.children[0].children[0].children[ -// "progress-bar-circle-1" ].classList.contains("active") -// ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-1" ].classList.remove("active"); -// } -// } -// if (li.children[0].children[0].children["progress-bar-circle-2"]) { -// if ( -// li.children[0].children[0].children[ -// "progress-bar-circle-2" ].classList.contains("active") ){ -// li.children[0].children[0].children[ -// "progress-bar-circle-2" ].classList.remove("active"); -// } -// } -// if (li.children[0].children[0].children["progress-bar-circle-3"]) { -// li.children[0].children[0].children[ -// "progress-bar-circle-3" -// ].classList.add("active"); -// } -// } -// }); -// }); -// } -// } -// } - -// import waitForEl from "../helpers/waitForEl"; import { waitElement } from "m3-utils"; export default class Header { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 516cbc7..854a918 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -855,3 +855,14 @@ } } } + +@media (max-width: 1024px) { + .btn-place-order-wrapper{ + max-width:100%; + } + .cart-links-bottom a { + width: 100%; + display: flex; + justify-content: center; + } +} diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..c167b9d 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,7 +1,6 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + border-top: 1px solid $color-black; &__wrapper { align-items: center; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 08abaf0..b2378d0 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,44 +1,11 @@ -// /* _header.scss */ -// .headerCheckout { -// .container { -// width: auto !important; -// } -// &__wrapper { -// align-items: center; -// display: flex; -// justify-content: space-between; -// } - -// &__logo { -// img { -// height: 52px; -// width: auto; -// } -// } - -// &__safeBuy { -// span { -// align-items: center; -// display: flex; -// text-transform: uppercase; -// font-family: $font-family; -// font-style: normal; -// font-weight: normal; -// font-size: 12px; -// line-height: 14px; -// color: $color-gray; -// } - -// i { -// margin-right: 8px; -// } -// } -// } - -/* _header.scss */ .headerCheckout { + border-bottom: 1px solid $color-black; + height: 96px; + width: 100%; + display: flex; + align-items: center; .container { - width: auto !important; + width: 100%; #progressBar { width: 439px; @@ -47,7 +14,7 @@ list-style-type: none; display: flex; align-items: center; - justify-content: space-between; + justify-content: space-around; margin: 0; } @@ -143,7 +110,8 @@ &__wrapper { align-items: center; display: flex; - justify-content: space-between; + justify-content: space-around; + width: 100%; } &__logo { -- 2.34.1 From 29509d938ae3c34a67d02666ed1a5488da83fd0a Mon Sep 17 00:00:00 2001 From: Vinicius Date: Sun, 18 Dec 2022 23:17:58 -0200 Subject: [PATCH 2/3] feat(header): atualiza safebuy --- checkout/src/arquivos/sass/partials/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index b2378d0..8ce11da 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -132,7 +132,7 @@ font-weight: 400; font-size: 12px; line-height: 16px; - color: $color-gray; + color: $color-black; } img { -- 2.34.1 From fb3b5ddb5bc88921e0c3bdac1632709df5bf0eac Mon Sep 17 00:00:00 2001 From: Vinicius Date: Mon, 19 Dec 2022 00:33:15 -0200 Subject: [PATCH 3/3] feat(footer):adiciona funcao footer --- checkout/src/arquivos/js/components/Footer.js | 51 +++++++++---------- 1 file changed, 23 insertions(+), 28 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index d9e3c0a..04b5231 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -5,14 +5,16 @@ export default class Footer { this.init(); } - async Init() { - this.list = await this.fetchPrat(); + async init() { + this.list = await this.fetchPrateleira(); await this.selectors(); - //this.onUpdate(); - this.createPrat(); + // this.onUpdate(); + this.createPrateleira(); this.prateleira = await waitElement(".footerCheckout__carrossel-itens"); - this.itensPrat(); + this.itensPrateleira(); + this.addCarrossel(); + this.creditCardIconsHTML(); this.developedByIconsHTML(); } @@ -26,29 +28,22 @@ export default class Footer { this.developedByIcons = await waitElement(".footerCheckout__developedBy"); } - // onUpdate() { - // let target = this.checkoutVazio; - // let config = { childList: true, attributes: true }; - // let observer = new MutationObserver((mutations) => { - // let removeClassh3 = document.getElementById("removeClassh3"); - // let removeClassul = document.getElementById("removeClassul"); - // mutations.forEach(function (mutation) { - // const checkoutTarget = mutation.target.attributes.style.nodeValue; - // console.log(checkoutTarget); - // if (checkoutTarget === "display: none;") { - // removeClassh3.classList.remove("displayNone"); - // removeClassul.classList.remove("displayNone"); - // } else if (checkoutTarget === "display: block;") { - // removeClassh3.classList.add("displayNone"); - // removeClassul.classList.add("displayNone"); - // } - // }); - // }); + 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; + letconfig = { childList: true, attributes: true }; + letobserver = new MutationObserver((mutations) => { + mutations.forEach(function (mutation) { + console.log(mutation.type); + }); + }); - // observer.observe(target, config); - // } + observer.observe(target, config); + } - createPrat() { + createPrateleira() { if (this.itensShelf) { this.itensShelf.innerHTML = `
    @@ -59,7 +54,7 @@ export default class Footer { } } - async itensPrat() { + async itensPrateleira() { letstructure = ""; this.list.forEach((response) => { @@ -77,7 +72,7 @@ export default class Footer { this.prateleira.innerHTML = structure; } - async fetchPrat() { + async fetchPrateleira() { constapi = "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; return fetch(api) -- 2.34.1