From 82062a7577fdaca28c971049b7f588362c8c3d58 Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Sat, 17 Dec 2022 22:58:13 -0300 Subject: [PATCH] =?UTF-8?q?Feat(Checkout):=20Cria=20fun=C3=A7=C3=A3o=20Pro?= =?UTF-8?q?gressBar=20e=20prateleira(estilizada=20no=20desktop)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/arquivos/js/components/CheckoutUI.js | 1 + checkout/src/arquivos/js/components/Footer.js | 59 +++++++- checkout/src/arquivos/js/components/Header.js | 132 +++++++++++++++++- checkout/src/arquivos/sass/checkout.scss | 1 + .../src/arquivos/sass/checkout/_checkout.scss | 21 +-- checkout/src/arquivos/sass/lib/_slick.scss | 10 +- .../src/arquivos/sass/partials/_header.scss | 7 +- .../arquivos/sass/partials/_prateleira.scss | 93 ++++++++++++ 8 files changed, 306 insertions(+), 18 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..6e4aff7 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -66,4 +66,5 @@ export default class CheckoutUI { ); }); } + } diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 203e20f..1247c4b 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,10 +6,16 @@ export default class Footer { } async init() { + this.list = await this.Api(); await this.selectors(); // this.onUpdate(); this.addIconsCardAndVtxpci(); this.addIconVtexAndM3(); + this.createShelf(); + this.shelfList = await waitElement(".footerCheckout__shelfList"); + this.shelfItens(); + // await this.shelfUpdate(); + this.addCarrossel(); } async selectors() { @@ -18,6 +24,11 @@ export default class Footer { this.checkoutVazio = await waitElement(".empty-cart-content"); this.iconesCartoesAndVtexpci = await waitElement(".footerCheckout__stamps"); this.iconsVtexAndM3 = await waitElement(".footerCheckout__developedBy"); + this.prateleira = await waitElement(".footerCheckout__prateleira"); + this.itensShelf = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000, + }); } onUpdate() { @@ -35,10 +46,12 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".footerCheckout__shelfList"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, + infinite: false, }); } addIconVtexAndM3() { @@ -83,4 +96,48 @@ export default class Footer { `; } } + 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 Api() { + 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 peçaBase = data.map((response) => ({ + name: response.productName, + skus: response.items.map((item) => item.name), + img: response.items[0].images[0].imageUrl, + link: response.link, + })); + return peçaBase; + }); + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 65843ae..b36a173 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,8 +8,8 @@ export default class Header { async init() { await this.selectors(); - // console.log(this.item); this.progressBarCronstructor(); + await this.progressBarProgress(); } async selectors() { @@ -18,7 +18,10 @@ export default class Header { // timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise // interval: 1000, // vai verificar a cada 1 segundo se o elemento existe // }); - this.progressBar = await waitElement(".progress-bar"); + this.progressBar = await waitElement("#progressBar", { + timeout: 5000, + interval: 1000, + }); } progressBarCronstructor() { @@ -29,7 +32,7 @@ export default class Header {

    Meu Carrinho

    -

    +

    @@ -39,7 +42,7 @@ export default class Header {

    Dados Pessoais

    -

    +

    @@ -48,7 +51,7 @@ export default class Header {

    Pagamento

    -

    +

    @@ -56,5 +59,124 @@ export default class Header { `; } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } + } + async progressBarProgress() { + if (this.progressBar && window.innerWidth > 1024) { + const progressBarLista = document.querySelectorAll("#progressBar ul li"); + progressBarLista.forEach((li) => { + const Bola1 = li.children[0].children[0].children["p-bola1"]; + const Bola2 = li.children[0].children[0].children["p-bola2"]; + const Bola3 = li.children[0].children[0].children["p-bola3"]; + + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (Bola1) { + Bola1.classList.add("active"); + } + + if (Bola2) { + if (Bola2.classList.contains("active")) { + Bola2.classList.remove("active"); + } + } + if (Bola3) { + if (Bola3.classList.contains("active")) { + Bola3.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 (Bola1) { + if (Bola1.classList.contains("active")) { + Bola1.classList.remove("active"); + } + } + if (Bola2) { + Bola2.classList.add("active"); + } + if (Bola3) { + if (Bola3.classList.contains("active")) { + Bola3.classList.remove("active"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (Bola1) { + if (Bola1.classList.contains("active")) { + Bola1.classList.remove("active"); + } + } + + if (Bola2) { + if (Bola2.classList.contains("active")) { + Bola2.classList.remove("active"); + } + } + + if (Bola3) { + Bola3.classList.add("active"); + } + } + + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (Bola1) { + Bola1.classList.add("active"); + } + + if (Bola2) { + if (Bola2.classList.contains("active")) { + Bola2.classList.remove("active"); + } + } + if (Bola3) { + if (Bola3.classList.contains("active")) { + Bola3.classList.remove("active"); + } + } + } else if ( + window.location.hash === "#/email" || + window.location.hash === "#/profile" || + window.location.hash === "#/shipping" + ) { + if (Bola1) { + if (Bola1.classList.contains("active")) { + Bola1.classList.remove("active"); + } + } + if (Bola2) { + Bola2.classList.add("active"); + } + + if (Bola3) { + if (Bola3.classList.contains("active")) { + Bola3.classList.remove("active"); + } + } + } else if (window.location.hash == "#/payment") { + if (Bola1) { + if (Bola1.classList.contains("active")) { + Bola1.classList.remove("active"); + } + } + + if (Bola2) { + if (Bola2.classList.contains("active")) { + Bola2.classList.remove("active"); + } + } + if (Bola3) { + Bola3.classList.add("active"); + } + } + }); + }); + } } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..c6f1a38 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -3,3 +3,4 @@ @import "./partials/header"; @import "./partials/footer"; @import "./checkout/checkout.scss"; +@import "./partials/prateleira.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 078423f..3b46e0d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -129,8 +129,8 @@ body { margin-top: 47px; } } - div#client-profile-data.span6.client-profile-data{ - .client-profile-email{ + div.step.accordion-group.client-profile-data { + .client-profile-email{ margin-bottom: 6px; } .client-profile-summary{ @@ -179,13 +179,16 @@ body { color: $color-gray9; } } - // a#payment-group-SPEIPaymentGroup.payment-group-item, - // a#payment-group-MercadoPagoPaymentGroup.payment-group-item, - // a#payment-group-PSEPaymentGroup.payment-group-item, - // a#payment-group-promissoryPaymentGroup.payment-group-item, - // a#payment-group-creditDirectSalePaymentGroup.payment-group-item, - // a#payment-group-creditControlPaymentGroup.payment-group-item { - // display: none; + // form.form-page.client-pre-email.anim-death.anim-current{ + // span{ + // div#client-profile-data.span6.client-profile-data span{ + // font-size: 20px; + // line-height: 23px; + // } + // &::after{ + // display: none; + // } + // } // } a#payment-group-creditCardPaymentGroup.payment-group-item, a#payment-group-bankInvoicePaymentGroup.payment-group-item { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..6af1493 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -99,16 +99,22 @@ .slick-arrow { font-size: 0; position: absolute; + top: 50%; + transform: translateY(-100%); } .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; z-index: 4; - left: 10px; + left: 0; + border: none; } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; z-index: 4; - right: 10px; + right: 16px; + border: none; } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 82bce17..76bdaa9 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -35,7 +35,9 @@ font-family: $font-family-secundary; color: $color-black2; } - .p-bola{ + .p-bola1, + .p-bola2, + .p-bola3 { border: 1px solid $color-black2; border-radius: 50%; width: 10px; @@ -83,6 +85,9 @@ width: 100.8%; transform: translateY(-7px); } + .active{ + background: $color-black2; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..0e2c226 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,94 @@ /* _prateleira.scss */ +.footerCheckout { + border-top: none; + color: $color-gray2; + + .footerCheckout__prateleira{ + width: 79.38%; + margin-bottom: 54px; + } + .footerCheckout__shelfList{ + margin: 0; + } + .footerCheckout__shelfList-wrapper{ + margin: 0; + } + .footerCheckout__shelfList-wrapper, + .footerCheckout__shelfList-name, + .footerCheckout__shelfList-skus-wrapper, + .footerCheckout__shelfList-button { + margin-right: 16px; + } + + + .footerCheckout__prateleira-title{ + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: $color-black2; + } + .footerCheckout__shelfList-name{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: $color-black2; + margin: 20px 0; + width: 95%; + } + .footerCheckout__shelfList-skus-wrapper{ + .footerCheckout__shelfList-skus{ + background: $color-blue2; + border-radius: 8px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: max-content; + padding: 4px 5.6px 4px 5.6px; + color: $color-white; + margin-right: 5px; + letter-spacing: 0.05em; + text-transform: uppercase; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + } + display: flex; + text-align: center; + justify-content: center; + + li::marker{ + font-size: 0; + } + &#text{ + font-size: 0; + } + } + .footerCheckout__shelfList-button{ + justify-content: center; + width: 95%; + background: $color-blue2; + border-radius: 8px; + padding: 0; + border: none; + height: 42px; + margin: 20px 0 0 0; + + a{ + color: $color-white; + letter-spacing: 0.05em; + text-transform: uppercase; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + } + } +}