From 99334707d384a2269a012f211fca4f2da2af5d6b Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Sat, 17 Dec 2022 11:46:36 -0300 Subject: [PATCH 1/5] =?UTF-8?q?feat(scss=20header):=20organzi=C3=A7=C3=A3o?= =?UTF-8?q?=20do=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 22 ++++++++++ .../src/arquivos/sass/partials/_header.scss | 17 +++++--- .../src/arquivos/sass/utils/_variaveis.scss | 40 +++++++++++++------ .../template-checkout/checkout-header.html | 2 +- 4 files changed, 63 insertions(+), 18 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..70c0373 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -5,12 +5,34 @@ export default class Footer { this.init(); } + payments() { + this.paymentTypesIconsContainer.innerHTML = ""; + const paymentTypes = [ + "masterCardM3Academy", + "visaM3Academy", + "amexM3Academy", + "eloM3Academy", + "hiperCardM3Academy", + "paypalM3Academy", + "boletoM3Academy", + ]; + paymentTypes.forEach((paymentType) => { + const image = document.createElement("img"); + image.src = `https://agenciamagma.vteximg.com.br/arquivos/${paymentType}.png`; + this.paymentTypesIconsContainer.appendChild(image); + }); + } + async init() { await this.selectors(); + this.payments(); // this.onUpdate(); } async selectors() { + this.paymentTypesIconsContainer = await waitElement( + ".footerCheckout__stamps li:first-of-type" + ); //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"); diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..730989c 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,10 +1,14 @@ -/* _header.scss */ .headerCheckout { + width: 100%; + border-bottom: 1px solid $color-black; + .container { width: auto !important; } &__wrapper { + padding: 0 130px; align-items: center; + margin: 30px 0; display: flex; justify-content: space-between; } @@ -18,19 +22,22 @@ &__safeBuy { span { + // display: flex; align-items: center; - display: flex; + justify-content: center; text-transform: uppercase; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-gray; + height: 17px; + line-height: 16px; + color: $color-black; } - i { + img { margin-right: 8px; + height: 15px; } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..e3d5082 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,7 +2,7 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; @@ -19,20 +19,36 @@ $color-blue: #4267b2; $color-green: #4caf50; +/* Colors */ +$black: #000; +$white: #fff; + +$gray-50: #e5e5e5; +$gray-100: #f0f0f0; +$gray-125: #c4c4c4; +$gray-150: #989898; +$gray-200: #8d8d8d; +$gray-500: #292929; + +$blue: #00c8ff; + /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + Gf: 328px, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + dt: 1025px, + xl: 1200px, + tv: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 258a0d6..19a53d9 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -12,7 +12,7 @@
Aqui entra a barra de progresso
- Cadeado + Cadeado Compra segura
From b780c5d4bdf12324d29ad680d84ee1ecd2a8a533 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Sat, 17 Dec 2022 11:51:01 -0300 Subject: [PATCH 2/5] feat(footer): adicionei as imagens de pagamento --- checkout/src/arquivos/js/components/Footer.js | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..32323a5 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -5,19 +5,41 @@ export default class Footer { this.init(); } + payments() { + this.paymentTypesIconsContainer.innerHTML = ""; + const paymentTypes = [ + "masterCardM3Academy", + "visaM3Academy", + "amexM3Academy", + "eloM3Academy", + "hiperCardM3Academy", + "paypalM3Academy", + "boletoM3Academy", + ]; + paymentTypes.forEach((paymentType) => { + const image = document.createElement("img"); + image.src = `https://agenciamagma.vteximg.com.br/arquivos/${paymentType}.png`; + this.paymentTypesIconsContainer.appendChild(image); + }); + } + async init() { await this.selectors(); + this.payments(); // this.onUpdate(); } async selectors() { + this.paymentTypesIconsContainer = await waitElement( + ".footerCheckout__stamps li:first-of-type" + ); //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: + //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; @@ -38,3 +60,5 @@ export default class Footer { }); } } + +// final From 4f8dae62e3b5754f11eef77d012155c0ceaeb098 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Sat, 17 Dec 2022 11:54:35 -0300 Subject: [PATCH 3/5] feat(footer): ajeitei o footer com as imagens --- .../src/arquivos/sass/partials/_footer.scss | 197 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 41 ++-- 2 files changed, 197 insertions(+), 41 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..9c6c0ff 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,47 +1,130 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + .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; + margin: 0; + gap: 4px; + + figure { + padding: 6px 0 7px; + width: 35.65px; + height: 20px; + margin: 0; + @include mq(tv, min) { + width: 69.63px; + } + + @include mq(Gf, max) { + width: 28px; + } + } + } + + .footerCheckout_stamps_divider { + border-left: 1px solid $gray-125; + 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 +134,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 +178,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; } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..635db10 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -1,8 +1,7 @@ -/* fonts */ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; @@ -19,20 +18,36 @@ $color-blue: #4267b2; $color-green: #4caf50; +/* Colors */ +$black: #000; +$white: #fff; + +$gray-50: #e5e5e5; +$gray-100: #f0f0f0; +$gray-125: #c4c4c4; +$gray-150: #989898; +$gray-200: #8d8d8d; +$gray-500: #292929; + +$blue: #00c8ff; + /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + Gf: 328px, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + dt: 1025px, + xl: 1200px, + tv: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; From 97424578d652b60b98dd058055d17d487310725b Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Sat, 17 Dec 2022 11:59:36 -0300 Subject: [PATCH 4/5] =?UTF-8?q?feat(slick):=20implementa=C3=A7=C3=A3o=20do?= =?UTF-8?q?=20slick=20no=20carrinho?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 250 +++++++++++++++--- 1 file changed, 213 insertions(+), 37 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 32323a5..11d461d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -1,3 +1,4 @@ +import { data } from "jquery"; import { waitElement } from "m3-utils"; export default class Footer { @@ -5,60 +6,235 @@ export default class Footer { this.init(); } - payments() { - this.paymentTypesIconsContainer.innerHTML = ""; - const paymentTypes = [ - "masterCardM3Academy", - "visaM3Academy", - "amexM3Academy", - "eloM3Academy", - "hiperCardM3Academy", - "paypalM3Academy", - "boletoM3Academy", - ]; - paymentTypes.forEach((paymentType) => { - const image = document.createElement("img"); - image.src = `https://agenciamagma.vteximg.com.br/arquivos/${paymentType}.png`; - this.paymentTypesIconsContainer.appendChild(image); - }); - } - async init() { await this.selectors(); - this.payments(); - // this.onUpdate(); + this.createPaymentsIcons(); + this.createVtexpciIcon(); + this.createDevIcons(); + this.onUpdate(); + this.events(); + } + + events() { + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + this.listaPrateleira.style.display = "flex"; + } + if (window.location.hash != "#/cart") { + this.listaPrateleira.style.display = "none"; + } + }); + addEventListener("resize", () => { + this.addCarrossel(); + }); } async selectors() { - this.paymentTypesIconsContainer = await waitElement( - ".footerCheckout__stamps li:first-of-type" - ); - //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.checkoutAtivo = await waitElement(".checkout-container"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexpci = await waitElement(".footerCheckout__vtexpci"); + this.devIncons = await waitElement(".footerCheckout__developedBy"); + this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); + this.titulo = await waitElement(".transactions-container"); + this.cartTitulo = await waitElement("#cart-title"); + this.titleSlick = await waitElement(".transactions-container"); } 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 list = this.listaPrateleira; + let cartTitle = this.cartTitulo; + let slickTitle = this.titleSlick; + + if (target.style.display == "none" && window.location.hash == "#/cart") { + list.style.display = "flex"; + list.style.display = "block"; + this.fetchApi(); + } else { + this.cartTitulo.style.display = "none"; + list.style.display = "none"; + } let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { + if (!this.listaPrateleira.classList.contains("fetch")) { + this.fetchApi(); + } mutations.forEach(function (mutation) { - console.log(mutation.type); + if (target.style.display != "none") { + list.style.display = "none"; + cartTitle.style.display = "none"; + if (list.style.display == "none") { + slickTitle.style.display = "none"; + } + } else { + cartTitle.style.display = "block"; + list.style.display = "flex"; + } }); }); - observer.observe(target, config); + observer.observe(target, config, cartTitle, slickTitle); } + async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + const elemet = await waitElement(".slick-list"); + if ($(elemet).hasClass("slick-initialized")) { + $(elemet).slick("unslick"); + } + if (window.innerWidth > 1024) { + $(elemet).not(".slick-initialized").slick({ + slidesToShow: 4, + slidesToScroll: 1, + }); + } else if (window.innerWidth > 375) { + $(elemet).not(".slick-initialized").slick({ + slidesToShow: 3, + slidesToScroll: 1, + }); + } else if (window.innerWidth <= 375) { + $(elemet).not(".slick-initialized").slick({ + slidesToShow: 2, + slidesToScroll: 1, + }); + } + } + + createPaymentsIcons() { + this.payments.innerHTML = ` +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
+ `; + } + + createVtexpciIcon() { + this.vtexpci.innerHTML = ` +
+ +
+ `; + } + + createDevIcons() { + this.devIncons.innerHTML = ` +
  • + + Powered By +
    + +
    +     +
    • + +
  • + + Developed By +
    + +
    +     +
    • + `; + } + + async fetchApi() { + this.titulo.innerHTML = ` +

    Você também pode gostar:

    + `; + + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => { + const ul = document.createElement("ul"); + ul.classList.add("slick-list"); + this.listaPrateleira.appendChild(ul); + + data.map((item) => { + let cores = ""; + for (let i = 0; i < item.items.length; i++) { + cores += `

    ${item.items[i].name}

    `; + } + const li = document.createElement("li"); + li.setAttribute("name", item.itemId); + li.classList.add("slick-list__itemList"); + + li.innerHTML = ` +
    + +
    +
    ${item.productName}
    +
    + ${cores} +
    + VER PRODUTO + `; + ul.appendChild(li); + this.listaPrateleira.classList.add("fetch"); + }); + }) + .then(() => { + this.addCarrossel(); + }); } } - -// final From ff20b3960462162e969b021ffb74deca9c892265 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Sat, 17 Dec 2022 12:00:46 -0300 Subject: [PATCH 5/5] =?UTF-8?q?feat(variables):=20implementa=C3=A7=C3=A3o?= =?UTF-8?q?=20de=20variaveis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/sass/utils/_variaveis.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 635db10..e3d5082 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -1,3 +1,4 @@ +/* fonts */ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif;