diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..ad5a611 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,222 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.replaceEmptyCartContent(); + this.renderPrateleira(); + this.stampsHTML(); + this.developedByHTML(); + 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.cartTitle = await waitElement("#cart-title"); this.checkoutVazio = await waitElement(".empty-cart-content"); + this.emptyCartTitle = await waitElement(".empty-cart-title"); + this.continueShopping = await waitElement("#cart-choose-products"); + this.frete = await waitElement(".shipping-date"); + this.unidade = await waitElement(".product-price"); + this.iconMinus = await waitElement(".icon-minus-sign"); + this.iconPlus = await waitElement(".icon-plus-sign"); + this.prateleira = await waitElement(".footerCheckout__prateleira"); + this.naoSeiMeuCep = await waitElement(".ship-postalCode"); + // this.prateleiraSlick = await waitElement(".prateleira__carousel") + } + + replaceEmptyCartContent() { + if (this.checkoutVazio) { + console.log("entrou no if do replaceContent()") + this.emptyCartTitle.textContent = "Seu Carrinho está vazio"; + this.continueShopping.textContent = "Continuar comprando"; + this.frete.textContent = "Frete"; + this.unidade.textContent = "Unidade"; + this.naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal"; + + } } 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); - }); - }); + if(this.checkoutVazio) { + console.log("entrou no if do onUpdate()") - observer.observe(target, config); + let target = this.checkoutVazio; + let config = { attributes: true }; + + // this.cartTitle.style.display = "none"; + // this.prateleira.style.display = "none"; + + let observer = new MutationObserver((mutations) => { + mutations.forEach(() => { + + if(this.checkoutVazio.style.display == "block") { + console.log("Carrinho está vazio") + this.cartTitle.style.display = "none"; + this.prateleira.style.display = "none"; + + } else { + + console.log("Carrinho NÃO está vazio"); + this.cartTitle.style.display = "block"; + this.prateleira.style.display = "block"; + } + }); + }); + + observer.observe(target, config); + } } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ + + async renderPrateleira() { + + if (this.prateleira) { + + const prateleiraTitle = document.createElement("h2"); + const titleNode = document.createTextNode("Você também pode gostar:"); + prateleiraTitle.classList.add("prateleira__title"); + prateleiraTitle.appendChild(titleNode); + + const prateleiraSlick = document.createElement("ul"); + prateleiraSlick.classList.add("prateleira__carousel"); + + const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"); + console.log("await fetch response:", response); + const productsList = await response.json(); + console.log("await fetch productsList:", productsList); + + let cardsStructure = ""; + + if(productsList) { + + productsList.forEach((product) => { + console.log(product) + + const productImageUrl = product.items[0].images[0].imageUrl; + const productName = product.productName; + const productSkus = product.items; + const productLink = product.link; + let skusStructure = ""; + + + console.log("productImageUrl:", productImageUrl); + console.log("productName:", productName); + console.log("productSkus:", productSkus); + console.log("productLink:", productLink); + + productSkus.forEach((sku) => { + console.log("sku:", sku); + skusStructure += ` +
  • + +
    • + ` + }) + + cardsStructure += ` +
  • +
    + +
    +
    +

    ${productName}

    + + + + +
    +
    • + ` + }) + + this.prateleira.appendChild(prateleiraTitle); + this.prateleira.appendChild(prateleiraSlick); + prateleiraSlick.innerHTML = cardsStructure; + + if(window.innerWidth > 1024) { + this.addCarrossel(prateleiraSlick); + } + } + } + } + + async addCarrossel(element) { + console.log("chamada do addCarrossel()"); + // const elemento = await waitElement(this.prateleiraSlick); + $(element).slick({ slidesToShow: 4, slidesToScroll: 1, + infinite: false }); } + + async stampsHTML() { + const stamps = await waitElement('.footerCheckout__stamps'); + + // console.log(stamps.children[0], stamps.children[2]); + + const paymentsStructure = ` + + ` + + const certifiedStructure = ` + + ` + + stamps.children[0].innerHTML = paymentsStructure; + stamps.children[2].innerHTML = certifiedStructure; + } + + async developedByHTML() { + const developedBy = await waitElement('.footerCheckout__developedBy'); + + // console.log(developedBy.children[0].children[0]); + + const vtexIcon = ` + Powered By + + ` + + const m3Icon = ` + Powered By + + ` + + developedBy.children[0].children[0].innerHTML = vtexIcon; + developedBy.children[1].children[0].innerHTML = m3Icon; + + // developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link') + // developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link') + + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..fbea03f 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,190 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.progressBarStructure(); + await this.progressBarMove(); } async selectors() { - 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"); } + + progressBarStructure() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + ` + } + + if(this.progressBar && window.innerWidth <=1024) { + this.progressBar.innerHTML = ""; + } + } + + async progressBarMove() { + + if (this.progressBar && window.innerWidth > 1024) { + + const progressBarStages = document.querySelectorAll((".progress-bar__stage")); + + progressBarStages.forEach((stage) => { + + if(window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + + if(stage.children["progress-bar__cart"]) { + stage.children["progress-bar__cart"].classList.add("active") + } + + if(stage.children["progress-bar__personal-data"]) { + if(stage.children["progress-bar__personal-data"].classList.contains("active")) { + stage.children["progress-bar__personal-data"].classList.remove("active") + } + } + + if(stage.children["progress-bar__payment"]) { + if(stage.children["progress-bar__payment"].classList.contains("active")) { + stage.children["progress-bar__payment"].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(stage.children["progress-bar__cart"]) { + if(stage.children["progress-bar__cart"].classList.contains("active")) { + stage.children["progress-bar__cart"].classList.remove("active") + } + } + + if(stage.children["progress-bar__personal-data"]) { + stage.children["progress-bar__personal-data"].classList.add("active") + } + + if(stage.children["progress-bar__payment"]) { + if(stage.children["progress-bar__payment"].classList.contains("active")) { + stage.children["progress-bar__payment"].classList.remove("active") + } + } + + } else if ( + + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment") { + + if(stage.children["progress-bar__cart"]) { + if(stage.children["progress-bar__cart"].classList.contains("active")) { + stage.children["progress-bar__cart"].classList.remove("active") + } + } + + if(stage.children["progress-bar__personal-data"]) { + if(stage.children["progress-bar__personal-data"].classList.contains("active")) { + stage.children["progress-bar__personal-data"].classList.remove("active") + } + } + + if(stage.children["progress-bar__payment"]) { + stage.children["progress-bar__payment"].classList.add("active") + } + + } else { + console.log("Erro") + } + + window.addEventListener("hashchange", () => { + + if (window.location.hash == "#/cart") { + if(stage.children["progress-bar__cart"]) { + stage.children["progress-bar__cart"].classList.add("active") + } + + if(stage.children["progress-bar__personal-data"]) { + if(stage.children["progress-bar__personal-data"].classList.contains("active")) { + stage.children["progress-bar__personal-data"].classList.remove("active") + } + } + + if(stage.children["progress-bar__payment"]) { + if(stage.children["progress-bar__payment"].classList.contains("active")) { + stage.children["progress-bar__payment"].classList.remove("active") + } + } + + } else if ( + + window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping") { + + if(stage.children["progress-bar__cart"]) { + if(stage.children["progress-bar__cart"].classList.contains("active")) { + stage.children["progress-bar__cart"].classList.remove("active") + } + } + + if(stage.children["progress-bar__personal-data"]) { + stage.children["progress-bar__personal-data"].classList.add("active") + } + + if(stage.children["progress-bar__payment"]) { + if(stage.children["progress-bar__payment"].classList.contains("active")) { + stage.children["progress-bar__payment"].classList.remove("active") + } + } + + } else if (window.location.hash == "#/payment") { + + if(stage.children["progress-bar__cart"]) { + if(stage.children["progress-bar__cart"].classList.contains("active")) { + stage.children["progress-bar__cart"].classList.remove("active") + } + } + + if(stage.children["progress-bar__personal-data"]) { + if(stage.children["progress-bar__personal-data"].classList.contains("active")) { + stage.children["progress-bar__personal-data"].classList.remove("active") + } + } + + if(stage.children["progress-bar__payment"]) { + stage.children["progress-bar__payment"].classList.add("active") + } + + } else { + console.log("Erro") + } + }) + }) + } + } + + // async progressBarMove() { + // if (this.progressBar && window.innerWidth > 1024) { + // const progressBarList = document.querySelectorAll(("#progressBar ul li")); + // progressBarList.forEach((li) => { + // console.log("Aqui vem seu código") + // }) + // } + // } } + + + diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..14b62ba 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,5 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..d785fcf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,4 +1,14 @@ .checkout-container { + // background: yellow; + // height: 100%; + // box-sizing: border-box; + + // &:before, + // &:after { + // display: none; + // } + + .client-pre-email { border-color: $color-gray4; font-family: $font-family; @@ -6,11 +16,11 @@ .link-cart { a { - color: $color-black; + color: $black-300; font-size: 14px; &:hover { - color: lighen($color-black, 10); + color: lighen($black-300, 10); } } } @@ -40,7 +50,7 @@ input { box-shadow: none; - color: $color-black; + color: $black-300; font-family: $font-family; padding: 0 16px; border: 2px solid $color-gray3; @@ -53,7 +63,7 @@ } button { - background-color: $color-black; + background-color: $black-300; border-radius: 5px; border: none; font-family: $font-family; @@ -89,11 +99,11 @@ li { span { - color: $color-black; + color: $black-300; } i::before { - color: $color-black; + color: $black-300; font-size: 1rem; opacity: 1; } @@ -101,7 +111,7 @@ } i::before { - color: $color-black; + color: $black-300; font-size: 6rem; opacity: 0.5; } @@ -146,12 +156,12 @@ /* General configurations */ .client-notice { - color: $color-black; + color: $black-300; } p { label { - color: $color-black; + color: $black-300; font-weight: 500; } @@ -170,7 +180,7 @@ .box-client-info-pj { .link a#is-corporate-client, .link a#not-corporate-client { - color: $color-black; + color: $black-300; font-weight: 500; text-decoration: underline; } @@ -183,17 +193,17 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; + background: $black-300; margin-top: 8px; outline: none; transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($black-300, 5); } &:active { - background: darken($color-black, 5); + background: darken($black-300, 5); } } @@ -281,9 +291,18 @@ } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + text-shadow: 1.3px 1px lighten($black-300, 50); } } } } } + +// .transactions-container { +// height: 0; + +// &::before, +// &::after { +// display: none; +// } +// } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..91744cc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,22 +1,41 @@ .container { + // background: salmon; + + // &:before, + // &:after { + // display: none; + // }; + @include mq(md, max) { width: 100%; } } .cart-template { + // background: red; + margin: 0; + + font-family: $font-family; @include mq(md, max) { padding: 0 0; } + .item-unit-label { display: none; } + .cart { - border: 3px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + margin-bottom: 48px; padding: 16px; + border: 1px solid $color-gray3; + // border-radius: 5px; + // background: cyan; + + // margin: 0; + // background: purple; + // $color-gray3; + // box-sizing: border-box; @include mq(md, max) { margin: 0px 0 25px 0; @@ -24,10 +43,13 @@ border-right: none; border-radius: 0; } + } + .cart-fixed.affix { position: relative !important; } + .cart-fixed { font-family: $font-family; width: 100%; @@ -48,7 +70,7 @@ } .cart { - border: 1px solid $color-gray4; + // border: 1px solid $color-gray4; ul li { border-top: none; @@ -85,18 +107,18 @@ } #payment-data-submit { - background: $color-black; + background: $black-300; border: none; border-radius: 0; color: $color-white; outline: none; transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($black-300, 5); } &:active { - background: darken($color-black, 5); + background: darken($black-300, 5); } } } @@ -105,18 +127,30 @@ background-color: $color-white; } + + .cart-items { + // border-collapse: separate; + // border-spacing: 16px; + .product-item { - padding: 16px 0; + // height: 60px; + // background: green; + } + + thead tr { + // background: purple; } th { - color: $color-black; - padding: 0 0 16px; - font-style: normal; - font-weight: bold; - font-size: 14px; + padding: 0; line-height: 16px; + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-300; + text-align: left; @include mq(md, max) { &.quantity-price, @@ -126,6 +160,16 @@ } } + // tbody tr { + // padding: 16px 0 0; + // } + + td { + margin: 0; + padding: 0; + text-align: left; + } + .product-image { height: auto; padding: 0; @@ -138,7 +182,8 @@ img { height: 60px; max-width: 100%; - width: auto; + width: 60px; + transform: scaleX(-1); @include mq(sm, max) { height: 72px; @@ -148,18 +193,20 @@ } .product-name { - padding-right: 0; + padding-left: 16px; @include mq(lg, max) { width: 250px; } a { - color: $color-blue; - font-style: normal; - font-weight: normal; - font-size: 12px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $black-500; + transition: ease-in 0.22s all; &:hover { @@ -179,9 +226,12 @@ } td.shipping-date { - color: $color-gray2; - font-size: 12px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $gray-300; @include mq(md, max) { display: none; @@ -190,6 +240,7 @@ .product-price { min-width: 100px; + @include mq(md, max) { min-width: 78px; } @@ -200,10 +251,17 @@ } span.list-price { - color: $color-gray2; - font-size: 12px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; text-decoration-line: line-through; + color: $gray-300; + + text-decoration-line: line-through; + + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -218,14 +276,14 @@ td.quantity { align-items: center; border: 1px solid $color-gray3; - border-radius: 0; + border-radius: 8px; box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 0; max-height: 38px; max-width: 118px; - padding: 0; + padding: 9px 11px; width: max-content !important; @media (max-width: 490px) { @@ -233,16 +291,20 @@ } input { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $black-500; + border: none; + background-color: $color-white; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; display: block; max-height: 38px; margin: 0 !important; padding: 8px 0; width: 38px; - color: $color-gray2; box-shadow: none; @include mq(lg, max) { @@ -252,29 +314,61 @@ .icon-plus-sign, .icon-minus-sign { + &::before { - color: $color-black; + line-height: 16px; + text-align: center; + color: $color-white; display: block; - font-weight: 500; - padding: 1px 12px; + font-family: $font-family-secundary; + font-size: 10px; + font-weight: 900; + color: $color-white; + + // padding: 1px 12px; + // transform: translate(-50%, -50%); } } .icon-minus-sign { &:before { content: "-"; - font-size: 16px; + // font-size: 16px; } } .icon-plus-sign { &:before { content: "+"; - font-size: 14px; + // font-size: 16px; } } .item-quantity-change { + // @include buttonStyle(16px) { + // }; + // font-family: $font-family-secundary; + // font-style: normal; + // font-weight: 400; + // font-size: 14px; + // line-height: 16px; + color: $color-white; + background: $blue-300; + border-radius: 50%; + border: none; + width: 16px; + height: 16px; + + + // text-align: center; + // text-transform: uppercase; + + // font-style: normal; + // display: flex; + // align-items: center; + // letter-spacing: 0.05em; + + @media (max-width: 979px) and (min-width: 768px) { position: inherit; bottom: inherit; @@ -300,17 +394,32 @@ font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; + color: $black-300; } } .quantity-price { + + span { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $black-300; + } + + + @include mq(md, max) { display: none; } } .item-remove { + width: 10px; + height: 10px; + @media (max-width: 490px) { top: 0; } @@ -344,19 +453,25 @@ width: max-content; .srp-container { - padding: 0 0 0 10px; + padding: 0; @include mq(md, max) { padding: 0 16px; } .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; + margin: 0 0 11px; + line-height: 33px; + font-family: $font-family; font-size: 24px; - line-height: 28px; - color: $color-gray2; + font-weight: 400; + font-style: normal; + color: $black-500; + + display: flex; + align-items: center; + text-align: center; + @include mq(md, max) { margin-top: 0; @@ -364,24 +479,38 @@ } .srp-description { - color: $color-gray2; - font-size: 12px; + margin: 0 0 11px; + width: 100%; + max-width: 276px; line-height: 18px; - margin: 0 0 12px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $color-gray2; + } button.shp-open-options { - background-color: $color-gray5; + margin: 0; + padding: 12px 41px; + display: flex; + align-items: center; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; + border-radius: 8px; line-height: 19px; - font-weight: 500; - outline: none; - padding: 12px 40px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-500; + background: $gray-100; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + transition: all 0.2s linear; + outline: none; &:hover { background-color: lighten($color-gray5, 5); @@ -405,33 +534,45 @@ } .srp-pickup-my-location__button { - background-color: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - outline: none; width: 100%; + margin-top: 10px; + padding: 12px 35px; + border: none; + border-radius: 8px; + background: #00c8ff; + transition: all 0.2s linear; + outline: none; + + span { + line-height: 18px; + font-family: "Open Sans",sans-serif; + font-size: 13px; + font-weight: 700; + font-style: normal; + color: $color-white; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.05em; + } - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - letter-spacing: 0.05em; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black-300, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black-300, 5); } } } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 10px; + padding: 0; &__wrapper { + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + background-color: $color-white; border-radius: 100px; width: 100%; @@ -448,13 +589,21 @@ border-radius: 100px; } - .blue { - color: $color-blue; - } + // .blue { + // // color: $color-blue; + // } label { width: 50%; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $black-500; + &:active { background-color: #f0f0f0; } @@ -462,61 +611,87 @@ } .srp-postal-code { + + &__form { + width: 100%; + + .vtex-shipping-preview-0-x-postalCodeForgotten { + gap: 8px; + } + } + + .ship-country { + display: none; + } + .ship-postalCode { + width: 172px; + label { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin-bottom: 2px; line-height: 14px; - color: $color-black; - margin-bottom: 12px; + font-family: $font-family; + font-size: 12px; + font-weight: normal; + font-style: normal; + color: $black-300; } input { + width: 172px; + height: 36px; + padding: 12px 8px; border: 1px solid $color-gray3; border-radius: 5px; box-shadow: none; - color: $color-gray3; font-size: 12px; - height: 36px; - padding: 12px 8px; - width: 172px; + color: $color-gray3; } & ~ button { - background-color: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + width: 100px; height: 36px; - letter-spacing: 1px; - outline: none; - position: absolute; - right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; + padding: 8px 11px; + border: none; + border-radius: 8px; + line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + font-style: normal; + color: $color-white; + background: $blue-300; + + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; text-transform: uppercase; + transition: all 0.2s linear; + outline: none; + + // position: absolute; + // right: -150px; + // top: 36px; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black-300, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black-300, 5); } } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; + margin-top: 4px; line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-family: $font-family-secundary; + font-size: 10px; + font-weight: 400; + font-style: normal; + color: $black-500; + text-decoration-line: underline; } span.help.error { @@ -597,6 +772,16 @@ .coupon-data { #cart-link-coupon-add { text-decoration: none; + + span { + line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $black-500; + } + &:hover { text-decoration: underline; cursor: pointer; @@ -630,19 +815,24 @@ } .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin-bottom: 4px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; color: $color-gray2; - cursor: none; + text-align: left; } .coupon-fields { margin-bottom: 32px; + span { + display: flex; + gap: 15px; + }; + @include mq(sm, max) { span { display: flex; @@ -657,14 +847,21 @@ } input { - border: 2px solid $color-gray3; + width: 100%; + max-width: 204px; + height: 36px; + padding: 11px 16px; + border: 1px solid $color-gray5; border-radius: 5px; - box-shadow: none; - color: $color-gray4; + line-height: 14px; + font-family: $font-family-secundary; font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; + font-weight: 400; + font-style: normal; + color: $color-gray-rename; + background: #FFFFFF; + + box-shadow: none; @include mq(sm, max) { max-width: 100%; @@ -672,30 +869,42 @@ } } + .loading-coupon { + display: none; + } + button { - background: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + width: 133px; height: 36px; - letter-spacing: 1px; - margin-left: 6px; + border: none; + border-radius: 8px; + line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-500; + background: $blue-300; + + display: flex; + align-items: center; + justify-content: center; + letter-spacing: 0.05em; + text-transform: uppercase; outline: none; transition: all 0.2s linear; - width: 94px; - text-transform: uppercase; + // margin-left: 6px; @include mq(md, max) { width: 138px; } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black-300, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black-300, 5); } } } @@ -703,6 +912,15 @@ .accordion-group { tr { + padding: 10px 0; + line-height: 16px; + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-300; + + text-align: right; border-color: #e5e5e5; td { @@ -716,8 +934,8 @@ font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; - padding: 12px 0; + color: $black-300; + padding: 10px 0; } &.info { @@ -733,11 +951,12 @@ tfoot { td.info, td.monetary { - font-style: normal; - font-weight: normal; + line-height: 25px; + font-family: $font-family; font-size: 18px; - line-height: 21px; - color: $color-black; + font-weight: 700; + font-style: normal; + color: $black-300; } } } @@ -749,6 +968,8 @@ flex-direction: column; width: 343px; + margin-bottom: 43px; + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); @@ -771,40 +992,49 @@ } a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin: 0; line-height: 14px; - color: $color-blue; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $black-500; + + // text-align: right; } } .btn-place-order-wrapper { a { - background: $color-green; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; + background: $blue-300; transition: ease-in 0.22s all; - padding: 12px 19px; + + text-align: center; + + padding: 12px 0; &:hover { - background-color: darken($color-green, 5); + background-color: darken($blue-300, 5); } &:after { content: "finalizar compra"; - font-family: $font-family; - font-weight: 500; - font-size: 13px; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; - vertical-align: middle; line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + font-style: normal; + letter-spacing: 0.05em; + text-transform: uppercase; text-shadow: none; + vertical-align: middle; + color: $black-500; + + text-align: center; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..5cec85c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,54 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; + + &-content { + margin: 170px 0 262px; + text-align: center; + text-transform: uppercase; @include mq(md, max) { - padding: 0 16px; + padding: 0 16px; } } &-title { - font-size: 20px; + margin: 0 0 32px; + line-height: 33px; + font-family: $font-family; + font-size: 24px; + color: $black-500; } + &-message { + display: none; + } + &-links { - .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + width: 325px; + height: 46px; + margin: 0 auto; + border: 1px solid $black-500; + + .link-choose-products { + padding: 0; + line-height: 16px; + font-family: $font-family-secundary; + font-size: 14px; + border: none; + border-radius: 0; + color: $black-500; + background: $color-white; transition: ease-in 0.22s all; - outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + + box-shadow: none; + + // outline: none; + // letter-spacing: 0.05em; &:hover { - background: lighten($color-black, 5); + background: lighten($blue-300, 5); } + } } } + diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..72b36fc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -3,14 +3,18 @@ @import "./checkout-pagamento"; @import "./checkout-autenticacao"; +* { + box-sizing: border-box; +} + html { height: 100%; min-height: 100%; } footer .footerCheckout__wrapper { - width: 94.9734%; - margin: auto auto 0 auto; + width: 100%; + // margin: auto auto 0 auto; } footer .footerCheckout__prateleira, header { @@ -54,28 +58,40 @@ body { } .btn-success { - background: $color-black; + background: $black-300; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($black-300, 15%); } } .emailInfo h3 { - color: $color-black !important; + color: $black-300 !important; } #cart-title, #orderform-title { - color: $color-gray2; + margin: 16px 0; + line-height: 33px; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-size: 24px; + font-weight: 700; + font-style: normal; text-transform: uppercase; + color: $black-300; + + letter-spacing: 0.05em; + + + // color: $color-gray2; + // font-family: $font-family; + // font-weight: 500; + // font-size: 36px; + // line-height: 42px; + // margin: 40px 0 30px; + // letter-spacing: 0.1em; + // text-transform: uppercase; @include mq(md, max) { margin-left: 30px; diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..61e8fac 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -14,11 +14,18 @@ touch-action: pan-y; -webkit-tap-highlight-color: transparent; } + + .slick-list { + // height: 100%; + margin: 0 -8px 0 -8px; + + // height: 100%; + margin: 0 -8px 0 -8px; + position: relative; overflow: hidden; display: block; - margin: 0; padding: 0; &:focus { @@ -40,6 +47,10 @@ } .slick-track { + // height: 100%; + + // height: 100%; + position: relative; left: 0; top: 0; @@ -62,6 +73,10 @@ } } .slick-slide { + margin: 0 8px; + + //código prévio + //código prévio float: left; height: 100%; min-height: 1px; @@ -69,9 +84,13 @@ [dir="rtl"] & { float: right; } + + img { display: block; } + + &.slick-loading img { display: none; } @@ -96,41 +115,60 @@ border: 1px solid transparent; } } + .slick-arrow { - font-size: 0; position: absolute; + top: 50%; + border: 0; + font-size: 0; + z-index: 4; + transform: translateY(-50%); + top: 50%; + border: 0; + font-size: 0; + z-index: 4; + transform: translateY(-50%); } + + .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") - no-repeat center center; - z-index: 4; + no-repeat center center; + no-repeat center center; left: 10px; + + } .slick-next { - z-index: 4; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; right: 10px; } -.slick-arrow.slick-hidden { - display: none; -} -.slick-dots { - li { - margin: 0.5em; - button { - overflow: hidden; - text-indent: 999999999px; - height: 1em; - width: 1em; - border-radius: 1em; - background-color: #fff; - :focus { - outline: none; - } - } - &.slick-active button { - &:focus { - outline: none; - } - } - } -} + +// .slick-arrow.slick-hidden { +// display: none; +// } + +// .slick-dots { +// li { +// margin: 0.5em; +// button { +// overflow: hidden; +// text-indent: 999999999px; +// height: 1em; +// width: 1em; +// border-radius: 1em; +// background-color: #fff; +// :focus { +// outline: none; +// } +// } +// &.slick-active button { +// &:focus { +// outline: none; +// } +// } +// } +// } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..01bd1c6 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,23 +1,70 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + width: 100%; + display: flex; + flex-direction: column; + gap: 54px; + // background: cyan; - &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; +// border-top: none; +// color: $color-gray2; + + &__prateleira { + // margin-top: 101px; + height: 448px; + // background-color: green; + width: 100%; } + &__wrapper { + margin: 0; + width: 100%; + padding: 16px 32px; + border-top: 1px solid $black-500; + // background-color: magenta; + +// // // align-items: center; +// // // display: flex; +// // // justify-content: space-between; + } + + + .container { + margin: 0; + // padding: 0; + width: 100%; + // height: 100%; + // display: flex; + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; + + // text-align: center; + // // // grid-auto-flow: column; +// // // grid-auto-columns: max-content; +// // justify-content: space-between; +// // margin: 0; + // background-color: yellowgreen; + + &::before, + &::after { + display: none; + } + } + + &__address { - color: $color-gray2; + color: $black-300; font-family: $font-family; - font-style: normal; - font-weight: normal; + // font-style: normal; + // font-weight: normal; font-size: 10px; - line-height: 12px; + line-height: 14px; text-transform: capitalize; - max-width: 40%; + // max-width: 40%; + justify-self: flex-start; + + @include mq(md, max) { margin-bottom: 24px; @@ -26,49 +73,76 @@ } &__stamps { - align-items: center; display: flex; + align-items: center; justify-self: center; list-style: none; + margin: 0; + @include mq(md, max) { align-self: center; margin-bottom: 12px; } &__divider { - background-color: $color-gray4; - display: inline-block; + background-color: $color-gray-rename; + display: block; height: 24px; - margin: 0 8px; + margin: 0 10px 0 13px; width: 1px; } } + &__payments { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + gap: 13px; + list-style: none; + margin: 0; + + img { + display: block; + height: 20px; + width: auto; + } + } + + &__vtexpci { + display: block; + width: 53px; + height: 33px; + } + &__developedBy { align-items: center; display: flex; - list-style-type: none; + gap: 10px; + list-style: none; margin: 0; - - li:last-child { - margin-left: 16px; - } + justify-self: flex-end; a { align-items: center; - color: $color-gray2; + color: $black-300; display: flex; font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; + // font-style: normal; + // font-weight: normal; + font-size: 9px; line-height: 12px; text-decoration: none; span { - margin-right: 8px; + margin-right: 10px; } } + + &__icons { + display: block; + height: 16px; + width: auto; + } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..7820251 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,36 +1,119 @@ /* _header.scss */ .headerCheckout { + // position: relative; + margin: 0; + padding: 30px 131px; + width: 100%; + border-bottom: 1px solid $black-500; + .container { width: auto !important; } + &__wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + // display: flex; + // justify-content: space-between; align-items: center; - display: flex; - justify-content: space-between; } &__logo { img { - height: 52px; + height: 37.14px; 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; + .progress-bar { + // position: absolute; + // top: 50%; + // left: 50%; + // transform: translate(-50%, -50%); + width: 440px; + + &__container { + // position:relative; + + margin: 0; + width: 100%; + display: grid; + grid-template-columns: repeat(3, 1fr); + // display: flex; + // align-items: center; + // justify-content: space-between; + list-style: none; } - i { - margin-right: 8px; + &__stage { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &--text { + margin: 0; + margin-bottom: 9px; + line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + color: $black-500; + } + + &--circle { + width: 12px; + height: 12px; + border-radius: 50%; + border: 1px solid $black-500; + + &.active { + background: $black-500; + } + } + + &::before, + &::after { + content: ''; + position: absolute; + bottom: 6.5px; + width: calc(50% - 7px); + height: 1px; + background: $black-500; + } + + &::before { + left: 0; + } + + &::after{ + left: calc(50% + 7px); + } + + &:first-child::before, + &:last-child::after { + display: none; + } + } + } + + &__safeBuy { + justify-self: flex-end; + display: flex; + align-items: center; + gap: 8px; + + img { + width: 12px; + height: 15px; + } + + span { + line-height: 16px; + font-family: $font-family; + font-size: 12px; + text-transform: uppercase; + color: $black-300; } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..26981d8 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,132 @@ /* _prateleira.scss */ +.footerCheckout__prateleira { + // margin-top: 101px; + height: 448px; + // background-color: green; + + .prateleira__title { + margin: 0 0 20px; + line-height: 38px; + font-family: $font-family-secundary; + font-size: 24px; + font-weight: 400; + // font-style: normal; + text-align: center; + color: $black-500; + } + + .prateleira__carousel { + // (_slick.scss .slick-slider) + margin: 0; + height: 390px; + } + + .prateleira__item { + // height: 100%; + // background: yellow; + + button { + border: none; + border-radius: 8px; + line-height: 18px; + font-size: 13px; + font-family: $font-family; + font-weight: 700; + color: $color-white; + background: $blue-300; + text-align: center; + text-transform: uppercase; + + font-style: normal; + display: flex; + align-items: center; + letter-spacing: 0.05em; + } + + &--image { + height: 242px; + } + + &--description { + display: flex; + flex-direction: column; + gap: 20px; + } + + &--name { + margin: 20px 0 0; + font-family: $font-family; + // font-style: normal; + // font-weight: 400; + line-height: 18px; + font-size: 13px; + text-align: center; + color: $black-500; + } + + &--options { + margin: 0 auto; + display: flex; + gap: 5px; + list-style: none; + + button { + padding: 5px; + } + display: flex; + flex-direction: column; + gap: 20px; + } + + &--name { + margin: 20px 0 0; + font-family: $font-family; + // font-style: normal; + // font-weight: 400; + line-height: 18px; + font-size: 13px; + text-align: center; + color: $black-500; + } + + &--options { + margin: 0 auto; + display: flex; + gap: 5px; + list-style: none; + + button { + padding: 5px; + } + } + + &--link { + button { + width: 100%; + padding: 12px 0; + justify-content: center; + } + } + } + &--link { + button { + width: 100%; + padding: 12px 0; + justify-content: center; + } + } + } +} + +// .slick-track { + +// &:nth-child(3) { + +// div li div { +// background: red; +// } +// // &--image-container { +// // //#B1D7F1; +// // } +// } +// } diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss index 8d969d6..aec645f 100644 --- a/checkout/src/arquivos/sass/utils/_mixin.scss +++ b/checkout/src/arquivos/sass/utils/_mixin.scss @@ -80,6 +80,24 @@ &::-webkit-input-placeholder { @content; } } +@mixin buttonStyle($width: 100%, $color: #ffffff, $bg-color: #00C8FF) { + border: none; + border-radius: 8px; + line-height: 18px; + font-size: 13px; + font-family: $font-family; + font-weight: 700; + color: $color-white; + background: $blue-300; + text-align: center; + text-transform: uppercase; + + font-style: normal; + display: flex; + align-items: center; + letter-spacing: 0.05em; +} + @mixin hardware($backface: true, $perspective: 1000) { @if $backface { backface-visibility: hidden; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..06f0f95 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -5,15 +5,23 @@ $font-family: "Open Sans", sans-serif; $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ -$color-black: #292929; +$black-300: #292929; +$black-500: #000000; + +$color-white: #ffffff; + +$color-gray3: #f0f0f0; +$color-gray-rename: #c4c4c4; +$color-gray2: #7d7d7d; +$gray-100: #EDEDED; +$gray-300: #989898; +$blue-300: #00C8FF; +$color-gray5: #e5e5e5; -$color-white: #fff; $color-gray: #6c6c6c; -$color-gray2: #7d7d7d; -$color-gray3: #f0f0f0; $color-gray4: #8d8d8d; -$color-gray5: #e5e5e5; + $color-blue: #4267b2; diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..77b390c 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -2,7 +2,60 @@ MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no footer, deverá ser feito através de javaScript. -->