From c6f21500aceeeb0b3a57c6e5da978ce6675a68ed Mon Sep 17 00:00:00 2001 From: Leonardo Date: Wed, 14 Dec 2022 18:53:05 -0300 Subject: [PATCH] feat: adiciona a prateleira a pagina --- checkout/src/arquivos/js/components/Footer.js | 31 +- checkout/src/arquivos/js/components/Header.js | 55 +- .../sass/checkout/_checkout-autenticacao.scss | 503 +++++++++--------- .../src/arquivos/sass/partials/_header.scss | 111 +++- 4 files changed, 446 insertions(+), 254 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..98242ab 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,8 @@ export default class Footer { async init() { await this.selectors(); + this.catalogoApi(); + // this.onUpdate(); } @@ -14,6 +16,33 @@ export default class Footer { //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.footerPrateleira = document.querySelector(".footerCheckout__prateleira"); + } + + async catalogoApi() { + this.addCarrossel(); + this.footerPrateleira.innerHTML = ``; + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ).then((response) => { + response.json().then((res) => { + res.forEach((product) => { + const novaUl = document.querySelector(".products-list"); + const name = product.productName; + const link = product.link; + const image = product.items[0].images[0].imageUrl; + novaUl.innerHTML += ` +
  • + +

    ${name}

    + + VER PRODUTO + +
    • + `; + }); + }); + }); } onUpdate() { @@ -31,7 +60,7 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".products-list"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..1698d84 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,63 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + //console.log(this.item); + this.progressBarHtml(); + await this.progressBarProgress(); } async selectors() { - this.item = await waitElement("#my-element", { + /* this.item = await waitElement("#my-element", { //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe - }); + });*/ + this.header = await waitElement(".headerCheckout"); + this.progressBar = await waitElement("#progressBar"); } + + progressBarHtml() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + + `; + } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ""; + } + } + + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..0677f03 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,318 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + .client-pre-email { + border-color: $color-gray4; + font-family: $font-family; + padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; + .link-cart { + a { + color: $color-black2; + font-size: 14px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; - &:hover { - color: lighen($color-black, 10); - } - } - } + &:hover { + color: lighen($color-black, 10); + } + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - h3 { - margin-bottom: 16px; + h3 { + margin-bottom: 16px; - span { - color: #303030; - font-size: 24px; - } + span { + color: $color-black2; + text-transform: uppercase; + font-weight: 400; + font-size: 20px; + line-height: 23px; + font-family: $font-family-secundary; + } - small { - color: $color-gray4; - } - } - } + small { + color: $color-black2; + text-transform: uppercase; + font-weight: 400; + font-size: 20px; + line-height: 23px; + font-family: $font-family-secundary; + } + } + } - .client-email { - margin: 0 0 16px; + .client-email { + margin: 0 0 16px; - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + input { + box-shadow: none; + color: $color-black2; + font-family: $font-family; + padding: 0 16px; + border: 1px solid $color-black2; + box-sizing: border-box; + border-radius: 5px 0 0 5px; + width: 443px; - @media (max-width: 490px) { - width: auto; - } - } + @media (max-width: 490px) { + width: auto; + } + } - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + button { + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; + border: none; + color: $color-black2; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + width: 126.76px; + font-family: $font-family; + height: 54px; + right: 0; + top: 0; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - span.help.error { - color: red; - } - } + span.help.error { + color: red; + font-weight: 700; + font-size: 12px; + line-height: 16px; + } + } - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + .emailInfo { + padding: 16px; + background-color: $color-white; + border: 1px solid $color-gray4; + border-radius: 0; - h3 { - color: #303030; - margin: 0 0 8px 0; - } + h3 { + color: $color-black2; + margin: 0 0 8px 0; + font-weight: 700; + font-size: 12px; + line-height: 16px; + } - ul { - margin: 0; + ul { + margin: 0; - li { - span { - color: $color-black; - } + li { + span { + color: $color-black2; + font-weight: 700; + font-size: 12px; + line-height: 16px; + } - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + i::before { + color: $color-blue2; + font-size: 1rem; + opacity: 1; + } + } + } - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + i::before { + color: #303030; + font-size: 6rem; + opacity: 0.5; + } + } + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0; + border: 1px solid $color-gray4; + font-family: $font-family; + padding: 16px; - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; - i::before { - fill: #303030; - } - } + i::before { + fill: #303030; + } + } - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } - .accordion-inner { - padding: 0; + .accordion-inner { + padding: 0; - /* General configurations */ + /* General configurations */ - .client-notice { - color: $color-black; - } + .client-notice { + color: $color-black; + } - p { - label { - color: $color-black; - font-weight: 500; - } + p { + label { + color: $color-black; + font-weight: 500; + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + select, + input { + border-radius: 0; + border: 1px solid $color-gray4; + box-shadow: none; + } - .help.error { - color: red; - } - } + .help.error { + color: red; + } + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; + font-weight: 500; + text-decoration: underline; + } + } - .state-inscription-box span { - font-weight: 500; - } + .state-inscription-box span { + font-weight: 500; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + button.submit { + border: none; + border-radius: 5px; + background: $color-black; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; - &:hover { - background: lighten($color-black, 5); - } + &:hover { + background: lighten($color-black, 5); + } - &:active { - background: darken($color-black, 5); - } - } + &:active { + background: darken($color-black, 5); + } + } - /* Shipping configurations */ + /* Shipping configurations */ - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 0; - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - svg path { - fill: #d8c8ac; - } - } - } - } + svg path { + fill: #d8c8ac; + } + } + } + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-summary-group-info { - border-color: $color-gray4; - } + .shp-summary-group-info { + border-color: $color-gray4; + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; - @include mq(md, max) { - background-position: 8px 9px; - } + @include mq(md, max) { + background-position: 8px 9px; + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } - .shp-summary-group-price { - padding-right: 16px; - } + .shp-summary-group-price { + padding-right: 16px; + } - .shp-summary-package { - padding-left: 16px; - } + .shp-summary-package { + padding-left: 16px; + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + border: 1px solid #d8c8ac; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 0120f21..8ac5abc 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,13 +1,105 @@ /* _header.scss */ .headerCheckout { - width: 100%; - height: 96px; - border-bottom: 1px solid $color-black; .container { - display: grid; - grid-template-rows: 2fr 2fr 1fr; - width: 79.532% !important; + width: auto !important; + .progress-bar { + width: 446px; + + ul { + list-style-type: none; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 !important; + } + + li .containerLi { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + } + + li.central .containerLi { + align-items: center; + margin-left: 7px; + } + + li:last-child .containerLi { + align-items: flex-end; + } + + li .containerLi div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + li { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-black2; + width: 39.9103%; + @media (min-width: 2500px) { + font-size: 24px; + } + } + + li.central { + width: auto; + } + + li #progress-bar-circle-1, + li #progress-bar-circle-2, + li #progress-bar-circle-3 { + width: 10px; + height: 10px; + border: 1px solid black; + border-radius: 50%; + + @media (min-width: 2500px) { + width: 24px; + height: 24px; + } + } + + li #progress-bar-circle-1.active, + li #progress-bar-circle-2.active, + li #progress-bar-circle-3.active { + border: none; + background-color: black; + } + + .progress-bar-line-1 { + position: absolute; + left: 25%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid $color-black2; + } + + .progress-bar-line-2 { + position: absolute; + right: 21%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid $color-black2; + } + } @media screen and (max-width: 1024px) { width: 100% !important; @@ -33,12 +125,6 @@ @media screen and (max-width: 1024px) { margin: 29px 16px 0 16px; } - - .progress-bar { - @media screen and (max-width: 1024px) { - display: none; - } - } } &__logo { @@ -46,7 +132,6 @@ height: 99.35%; img { max-width: 100%; - height: 100%; } }