From 19f8885e9e1efe9a0c1251466f4c23b69a18276c Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Sat, 17 Dec 2022 14:50:12 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20fun=C3=A7=C3=A3o=20displayTi?= =?UTF-8?q?tle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/arquivos/js/components/CheckoutUI.js | 36 +- .../sass/checkout/_checkout-autenticacao.scss | 358 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 7 +- .../sass/checkout/_checkout-pagamento.scss | 14 +- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 5 files changed, 371 insertions(+), 45 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..13180bb 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -32,13 +32,12 @@ export default class CheckoutUI { toggleFooterDropdown(event) { event.target.classList.toggle("closed"); - event.target.nextElementSibling.classList.toggle( - "dropdown__content--closed" - ); + event.target.nextElementSibling.classList.toggle("dropdown__content--closed"); } init() { this.configThumb(); + this.displayTitle(); waitForEl(".product-image img", this.resizeImages.bind(this)); $(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this)); } @@ -56,14 +55,27 @@ export default class CheckoutUI { resizeImages() { $(".product-image img").each((i, el) => { const $el = $(el); - $el.attr( - "src", - alterarTamanhoImagemSrcVtex( - $el.attr("src"), - this.width, - this.height - ) - ); + $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height)); }); } -} + + async displayTitle() { + const orderForm = await window.vtexjs.checkout.getOrderForm(); + const items = orderForm.items.length; + const cartId = document.querySelector("#cart-title"); + + $(window).on("orderFormUpdated.vtex", (evt, oF) => { + if (oF.items.length <= 0) { + cartId.style.display = "none"; + } else { + cartId.style.display = "block"; + } + if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") { + cartId.style.display = "none"; + } + }); + if (items === 0) { + cartId.style.display = "none"; + } + } +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 1c7016f..bc0b4a5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -83,7 +83,7 @@ color: $color-black-500; width: 126px; height: 50px; - right: -6px; + right: 0px; top: 0; @media (max-width: 490px) { @@ -114,6 +114,9 @@ h3 { font-family: $font-family; color: $color-black-500; + font-size: 12px; + line-height: 16px; + font-weight: 700; margin: 0 0 10px 0; } @@ -145,6 +148,25 @@ } } + .client-profile-data { + .accordion-heading { + .accordion-toggle { + span { + font-size: 0 !important; + + &::after { + font-family: $font-family-secundary; + color: $color-black-100; + content: "Identificação"; + font-size: 16px; + line-height: 19px; + float: left; + } + } + } + } + } + .shipping-data, .payment-data, .client-profile-data { @@ -153,8 +175,18 @@ border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; + max-width: 297px; + width: 100%; .accordion-heading { + + .accordion-toggle-active { + + i::after { + display: none; + } + } + span { font-family: $font-family-secundary; font-size: 16px; @@ -165,18 +197,31 @@ padding: 0; i::before { - display: none; - fill: #303030; + content: ""; + + } + + i::after { + content: ""; + display: block; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 20px; + height: 20px; + float: right; + cursor: pointer; } } a { + display: flex; + opacity: 0; align-items: center; background-color: #303030; border-radius: 8px; border: none; color: $color-white-500; - display: flex; justify-content: center; padding: 6px 5px 6px 8px; } @@ -189,27 +234,145 @@ .client-notice { display: none; - color: $color-black-100; + + // &::after { + // position: absolute; + // content: "Identificação"; + // font-family: $font-family-secundary; + // font-size: 16px; + // line-height: 19px; + // color: $color-black-500; + // top: 0; + // } } - p { - label { + .ship-country { + display: none; + } + + .ship-postalCode { + display: flex; + flex-direction: column; + + label { font-family: $font-family; color: $color-gray2; font-size: 12px; line-height: 16px; - font-weight: 700; + font-weight: 700; + } + + input { + border: 1px solid $color-gray8; + border-radius: 8px; + width: 100%; + max-width: 270px; + margin-bottom: 10px; + } + + small { + font-family: $font-family; + color: $color-black-100; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + margin: 0; + } + } + + p { + margin: 0; + padding: 0; + + label { + + // input { + // display: none; + // } + + // &.checkbox { + // position: relative; + // padding-left: 26px; + + // .newsletter-text { + // &::before { + // position: absolute; + // content: ""; + // top: 0; + // left: 0; + // width: 16px; + // height: 16px; + // border: 1px solid $color-gray11; + // border-radius: 3px; + + // } + + // .newsletter-text:checked + .newsletter-text::before { + // // content: ''; + // background: $color-blue-100; + // } + // } + + font-family: $font-family; + color: $color-gray2; + font-size: 14px; + line-height: 19px; + font-weight: 400; + } + + .btn-go-to-payment { + margin-top: 0; + } } select, input { + font-family: $font-family; + color: $color-gray9; + font-size: 14px; + line-height: 19px; + font-weight: 400; border-radius: 5px; border: 1px solid $color-gray10; box-shadow: none; + padding: 0 12px; } + .input-xlarge { + max-width: 271px; + width: 100%; + height: 40px; + margin-bottom: 16px; + } + + .input-small { + max-width: 115px; + width: 100%; + height: 40px; + margin-bottom: 16px; + } + + #client-first-name, + #client-document { + margin-right: 15px; + } + + [type="checkbox"] { + width: 18px; + height: 18px; + border: 1px solid $color-gray11; + padding-right: 8px; + margin-top: 0px; + } .help.error { + display: none !important; + font-family: $font-family; color: red; + font-size: 12px; + line-height: 16px; + font-weight: 700; + margin: 0; + padding: 0; } } @@ -220,6 +383,7 @@ color: $color-gray9; font-size: 12px; line-height: 16px; + padding-left: 8px; } } @@ -252,7 +416,7 @@ width: 100%; border-radius: 8px; background: $color-blue-100; - margin: 45px 0 29px 0 !important; + margin: 45px 0 29px 0; text-transform: uppercase; outline: none; border: none; @@ -268,20 +432,34 @@ .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; + font-family: $font-family; + color: $color-gray2; font-size: 14px; - font-weight: 500; + line-height: 19px; + font-weight: 700; + padding-bottom: 10px; } .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-gray10; + border-radius: 8px; + + span { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + font-weight: 400; + } label { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; background-color: $color-white-500; box-shadow: none; - color: #303030; - padding: 8px 12px; + padding: 14px 12px; svg path { fill: #d8c8ac; @@ -291,9 +469,13 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05px; + font-weight: 700; + padding-bottom: 10px; } .shp-summary-group-info { @@ -302,19 +484,34 @@ .address-summary { background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; + border: 1px solid $color-gray10; + border-radius: 8px; padding: 12px; + &::before { + content: ""; + display: block; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 20px; + height: 20px; + float: left; + margin: 8px 9.4px 0 0; + } + @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + font-family: $font-family; + color: $color-blue-100; + font-size: 12px; + line-height: 16px; + font-weight: 400; + text-transform: lowercase; + text-decoration: none; } } @@ -331,11 +528,79 @@ padding-left: 16px; } + .vtex-omnishipping-1-x-leanShippingText { + border-right: 1px solid $color-gray10; + } + + .vtex-omnishipping-1-x-leanShippingTextLabel { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + font-weight: 400; + letter-spacing: 0.05px; + } + + .vtex-omnishipping-1-x-svg { + opacity: 0; + + &::before { + border: 1px solid $color-gray8; + width: 16px; + height: 16px; + } + } + + .vtex-omnishipping-1-x-addressSummary { + span { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + } + } + + .vtex-omnishipping-1-x-address { + label { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + font-weight: 700; + } + + .input-large { + border: 1px solid $color-gray10; + border-radius: 8px; + max-width: 294px; + width: 100%; + height: 33px; + padding: 0; + } + + .input-xlarge { + max-width: 294px; + width: 100%; + height: 33px; + margin-bottom: 16px; + } + } + + .btn-ask-for-geolocation-cta { + color: $color-white-500; + background: $color-blue-100; + } + .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; } + .vtex-omnishipping-1-x-warning { + border-color: $color-gray10; + } + .vtex-omnishipping-1-x-deliveryChannelsToggle { background-color: $color-white-500; border: 1px solid $color-gray12; @@ -348,18 +613,52 @@ text-transform: uppercase; font-size: 14px; line-height: 19px; + border-radius: 100px; + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + font-family: $font-family; + color: $color-gray8; + text-transform: uppercase; + font-size: 14px; + line-height: 19px; + border-radius: 100px; // text-shadow: 1.3px 1px lighten($color-black-100, 50); } - .vtex-omnishipping-1-x-addressFormPart1 { - .ship-country { - display: none; + .vtex-omnishipping-1-x-addressFormPart1 {} + + .ship-number { + .input-mini { + max-width: 270px; + width: 100%; + height: 33px; + margin-bottom: 15px; + } + } + + .ship-complement { + .input-large { + max-width: 270px; + width: 100%; + height: 33px; + padding: 0 12px; + margin-bottom: 15px; + } + } + + .ship-receiverName { + .input-xlarge { + max-width: 270px; + width: 100%; + height: 33px; + margin-bottom: 15px; } } } } } -} + .hproduct { @@ -369,6 +668,9 @@ img { transform: rotateY(180deg); + max-width: 60px; + width: 60px; + height: 60px; } span { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 606d845..d731c61 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -800,7 +800,7 @@ color: $color-gray2; font-size: 14px; line-height: 19px; - padding: 10px 0; + margin: 25px 0; } &.info { @@ -821,7 +821,7 @@ line-height: 25px; font-weight: 700; color: $color-black-100; - padding: 14px 0 17px; + padding: 0; } } } @@ -831,7 +831,8 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; + max-width: 354px; + width: 100%; @include mq(md, max) { padding: 0 16px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index f254cf1..b374b2d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -3,23 +3,33 @@ body .container-main.container-order-form .orderform-template.active { border: 1px solid $color-gray5; border-radius: 8px; // padding: 25px 17px; - width: 32.3242%; + height: 397px; + max-width: 331px; + width: 100%; margin-left: unset; margin-right: 0; float: right; } + .span4 { + padding: 24px 17px; + } + h2 { font-family: $font-family-secundary; color: $color-black-100; font-size: 16px; line-height: 19px; - padding: 25px 0 0 17px !important; text-align: initial; padding: 0; margin-bottom: 34px; } + .ask-for-geolocation-title { + padding: 0; + margin: 0; + } + .cart { border: 0; padding: 0; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 276ca6a..638c8ad 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -9,6 +9,7 @@ $color-black-100: #292929; $color-black-500: #000000; $color-white-500: #fff; +$color-white-100: #f5f5f5; $color-gray: #6c6c6c; $color-gray2: #7d7d7d;