From 2a58a51b26f9d287d134b37a28da834375731d98 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 20 Dec 2022 10:24:35 -0300 Subject: [PATCH 1/5] feat:inserindo html --- .../arquivos/assets/svgs/Rectangle 138.svg | 3 + checkout/src/arquivos/js/components/Footer.js | 14 ++--- checkout/src/arquivos/js/components/app.js | 47 +++++++++++++- .../sass/checkout/_checkout-autenticacao.scss | 34 +++++++++-- .../sass/checkout/_checkout-pagamento.scss | 61 +++++++++++-------- 5 files changed, 120 insertions(+), 39 deletions(-) create mode 100644 checkout/src/arquivos/assets/svgs/Rectangle 138.svg diff --git a/checkout/src/arquivos/assets/svgs/Rectangle 138.svg b/checkout/src/arquivos/assets/svgs/Rectangle 138.svg new file mode 100644 index 0000000..8c52abc --- /dev/null +++ b/checkout/src/arquivos/assets/svgs/Rectangle 138.svg @@ -0,0 +1,3 @@ + + + diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 3ef4bc6..4099d7a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -55,7 +55,7 @@ export default class Footer { let target = this.checkoutVazio; let target2 = this.prateleira; let Footer = this.Footer; - const MeuCarrinho = this.MeuCarrinho + const MeuCarrinho = this.MeuCarrinho; let config = { childList: false, attributes: true, @@ -63,7 +63,8 @@ export default class Footer { attributeFilter:["style"], subtree:false, characterData:true, - characterDataOldValue:true}; + characterDataOldValue:true + }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation); @@ -71,18 +72,17 @@ export default class Footer { if(mutation.oldValue == "display: none;"){ console.log("entrei no if",mutation.oldValue) MeuCarrinho.classList.add('hide'); - target2.classList.add('hide') - Footer.classList.remove('footerCheckout__ComSlick') + target2.classList.add('hide'); + Footer.classList.remove('footerCheckout__ComSlick'); }else{ console.log("entrei no else",mutation.oldValue) MeuCarrinho.classList.remove('hide'); - target2.classList.remove('hide') - Footer.classList.add('footerCheckout__ComSlick') + target2.classList.remove('hide'); + Footer.classList.add('footerCheckout__ComSlick'); } } }); }); - observer.observe(target, config); } async addCarrossel() { diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 599589f..91dfc48 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -10,6 +10,7 @@ export default class Footer { await this.selectors(); await this.event(); await this.TextTransfer(); + await this.onUpdate(); } async selectors() { @@ -45,9 +46,11 @@ export default class Footer { }); this.tbody = await waitElement(".accordion-inner"); this.LapisAzul = await waitElement(".icon-edit"); - // this.HomeIcon = await waitElement(".delivery-address-title"); this.btnCep = await waitElement("#shipping-calculate-link"); this.Dados_profile = document.querySelectorAll(".accordion-group")[1]; + this.Dados_profile_payment = document.querySelectorAll(".accordion-group")[3]; + this.safeP = document.createElement("p"); + this.Dados_profileAll = document.querySelectorAll(".accordion-group"); this.pay__Wrapper = document.createElement("div"); this.Finalizar_btn = document.createElement("button"); this.more = document.createElement("p"); @@ -55,7 +58,7 @@ export default class Footer { } async event() { this.btnCep.addEventListener("click",this.nonExist.bind(this)) - + window.addEventListener("hashchange", this.TextTransfer.bind(this)); } async nonExist(){ this.cep = await waitElement('.ship-postalCode small a'); @@ -73,6 +76,7 @@ export default class Footer { } async TextTransfer(){ const dadosProfile =this.Dados_profile.children[0].children[0].children[1] + const Dados_profile_payment =this.Dados_profile_payment.children[0] const tbodywrapper = this.wrapper; const tbody = this.tbody.children[1].children[3]; const table = this.table.children[0].children[0].children[1]; @@ -81,8 +85,13 @@ export default class Footer { tbodywrapper.appendChild(this.more) tbodywrapper.appendChild(this.Finalizar_btn) tbody.appendChild(tbodywrapper) - console.log(this.HomeIcon,"Lugar onde você colocara o icone") + console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") + console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ + + this.Dados_profile_payment.children[0].appendChild(this.safeP) + } this.Finalizar_btn.innerHTML =` FINALIZAR COMPRA ` @@ -92,6 +101,9 @@ export default class Footer { this.more.innerHTML =` Escolher mais produtos ` + this.safeP.innerHTML =` + Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados + ` table.innerHTML= ` Frete @@ -161,4 +173,33 @@ export default class Footer { CONTINUAR COMPRANDO ` } + async onUpdate() { + const target = this.Dados_profile_payment; + const safeP = this.safeP; + let config = { + childList: false, + attributes: true, + attributeOldValue:true, + subtree:false, + characterData:true, + characterDataOldValue:true + }; + let observer = new MutationObserver((mutations) => { + mutations.forEach(function (mutation) { + console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue); + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ + console.log(mutation) + if(mutation.oldValue == "step accordion-group store-country-BRA active"){ + console.log("o pai está aberto",mutation.oldValue) + console.log(target) + } + } + else{ + console.log("o pai está fechado") + } + }); + }); + + observer.observe(target, config); + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 2461b50..9cd1069 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -241,7 +241,7 @@ border: 1px solid $color-gray4; border-radius: 0; - label { + label{ background-color: $color-white; box-shadow: none; color: #303030; @@ -265,11 +265,31 @@ } .address-summary { + position: relative; background: none; border-color: $color-gray4; - border-radius: 0; color: #303030; - padding: 12px; + padding: 26px; + .street, + .neighborhood{ + margin-left: 18px; + } + .postalCode{ + margin-left: 20px; + } + &::before{ + content: ""; + position: absolute; + left: 0; + bottom: 33px; + margin-left: 12px; + margin-right: 8px; + width: 24px; + height: 24px; + background: no-repeat; + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + background-size: 24px; + } @include mq(md, max) { background-position: 8px 9px; @@ -306,8 +326,14 @@ } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + color:#7D7D7D; + text-shadow: 0.3px 1px #292929; + } + .vtex-omnishipping-1-x-deliveryOptionInactive{ + color:rgba(196, 196, 196, 1) !important; + + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 951c6df..d95c394 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -14,32 +14,39 @@ body .container-main.container-order-form .orderform-template.active { } #postalCode-finished-loading{ .shipping-method-toggle{ - background: transparent !important; - border-radius: 16px !important; - border: 1px solid $color-black !important; + border: 1px solid $color-black; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + border-radius: 100px; } div{ background: transparent !important; - border-radius: 16px !important; + border-radius: 32px !important; + box-shadow: 0px 0px 3px rgba(196, 196, 196, 1); } span{ - color: $color-black; - text-shadow: none !important; + // color:#7D7D7D; + // text-shadow: 0.3px 1px #292929 !important; text-transform: uppercase; + font-family: $font-family; + font-weight: 400; + font-size: 14px; + line-height: 19px; + font-style: normal; + box-sizing: border-box; } } -#ship-number{ - width: 296px; - height: 35px; -} +#ship-number, +#ship-receiverName, +#ship-postalCode, #ship-complement{ - width: 296px; - height: 35px; + width: 296px !important; + height: 35px !important; + max-width: 100%!important; } -#ship-receiverName{ - width: 296px; - height: 35px; +#ship-postalCode{ + margin-bottom: 10px; } + .ship-country{ display: none; } @@ -69,7 +76,6 @@ body .container-main.container-order-form .orderform-template.active { } } .accordion-group{ - width: 332px; border-radius: 4px!important; border: 1px solid $color-gray3; border: 1px solid $color-gray6 !important; @@ -77,6 +83,7 @@ body .container-main.container-order-form .orderform-template.active { p, label{ color: #7D7D7D !important; + font-weight: 700 !important; } input, .cart{ @@ -135,7 +142,7 @@ body .container-main.container-order-form .orderform-template.active { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } #payment-data{ - width: 719px !important; + max-width: 719px !important; #payment-group-custom204PaymentGroupPaymentGroup, #payment-group-SPEIPaymentGroup, #payment-group-MercadoPagoPaymentGroup, @@ -150,17 +157,17 @@ body .container-main.container-order-form .orderform-template.active { #payment-group-creditDirectSalePaymentGroup{ display: none; } + .btn-small{ + background: transparent !important; + border: 0 !important; + &:hover{ + border: 0 !important; + } + } .form-step{ display: flex; height: 452px; } - .accordion-group{ - width: 680px !important; - height: 452px !important; - } - // h3{ - // display: block !important; - // } span, a{ width: 210px; @@ -186,9 +193,13 @@ body .container-main.container-order-form .orderform-template.active { .steps-view{ position: absolute; right: 0; - top: -2px; + top: 33px; } } .PaymentCardHolderDocument{ display: none !important; } +.payment-group-item.active{ + margin: 0 0 0 5px; +} + From 42dff75a0c3fff2e7d8189f6d16eef924f6dea4f Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 20 Dec 2022 13:35:17 -0300 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20p=C3=A1gina=20de=20pagamento=20fina?= =?UTF-8?q?lizada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/app.js | 135 +++++++++++++++++++-- 1 file changed, 125 insertions(+), 10 deletions(-) diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 91dfc48..786ed7b 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -47,6 +47,7 @@ export default class Footer { this.tbody = await waitElement(".accordion-inner"); this.LapisAzul = await waitElement(".icon-edit"); this.btnCep = await waitElement("#shipping-calculate-link"); + this.Dados_profile_payment_wrapper = await waitElement("#payment-data"); this.Dados_profile = document.querySelectorAll(".accordion-group")[1]; this.Dados_profile_payment = document.querySelectorAll(".accordion-group")[3]; this.safeP = document.createElement("p"); @@ -75,6 +76,7 @@ export default class Footer { } } async TextTransfer(){ + const payment_group = this.Dados_profile_payment_wrapper; const dadosProfile =this.Dados_profile.children[0].children[0].children[1] const Dados_profile_payment =this.Dados_profile_payment.children[0] const tbodywrapper = this.wrapper; @@ -85,13 +87,56 @@ export default class Footer { tbodywrapper.appendChild(this.more) tbodywrapper.appendChild(this.Finalizar_btn) tbody.appendChild(tbodywrapper) - console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") - console.log(Dados_profile_payment,"Todos os conteiners de pagamento") + // console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") + // console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ - this.Dados_profile_payment.children[0].appendChild(this.safeP) + Dados_profile_payment.appendChild(this.safeP) } + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[2] + .children[0] + .innerHTML =` + Cartão de Débito + ` + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[9] + .children[0] + .innerHTML = + ` + Boleto à Vista + ` + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + .innerHTML =` + Boleto Faturado + ` this.Finalizar_btn.innerHTML =` FINALIZAR COMPRA ` @@ -174,8 +219,11 @@ export default class Footer { ` } async onUpdate() { - const target = this.Dados_profile_payment; - const safeP = this.safeP; + const target = this.Dados_profile_payment_wrapper; + const safeP = document.createElement("p"); + safeP.innerHTML =` + Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados + ` let config = { childList: false, attributes: true, @@ -188,14 +236,81 @@ export default class Footer { mutations.forEach(function (mutation) { console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue); if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ + console.log("o pai está aberto",mutation.oldValue) console.log(mutation) - if(mutation.oldValue == "step accordion-group store-country-BRA active"){ - console.log("o pai está aberto",mutation.oldValue) - console.log(target) - } + console.log(target) + target.children[0].children[0].appendChild(safeP) + target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[2] + .children[0] + .innerHTML =` + Cartão de Débito + ` + target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[9] + .children[0] + .innerHTML =` + Boleto à Vista + ` + target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + .innerHTML =` + Boleto Faturado + ` + console.log(target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + ) } else{ - console.log("o pai está fechado") + console.log("o pai está fechado",mutation.oldValue); + console.log(mutation) + console.log(target) + console.log(target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + ) } }); }); From 2fadcf7e42d10d26990816b42d02c2fad7c3f56e Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 20 Dec 2022 19:25:43 -0300 Subject: [PATCH 3/5] feat:adicionando estilo ao resumo de pagamento --- checkout/src/arquivos/js/components/Header.js | 1 + checkout/src/arquivos/js/components/app.js | 98 ++++++++++--------- .../sass/checkout/_checkout-carrinho.scss | 24 ++++- .../sass/checkout/_checkout-pagamento.scss | 18 +++- 4 files changed, 94 insertions(+), 47 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 46f66a1..0fe02d9 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -21,6 +21,7 @@ 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.totalizer = await waitElement(".totalizers-list"); this.MeuCarrinho = await waitElement("#cart-title"); this.Finalizar_Pedido = await waitElement("#orderform-title"); this.Finalizar_Pagamento = await waitElement(".store-country-BRA"); diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 786ed7b..e3cdef2 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -1,16 +1,21 @@ import { waitElement } from "m3-utils"; export default class Footer { + constructor() { + this.init(); console.log("app.js funcionando") + } async init() { + await this.selectors(); await this.event(); await this.TextTransfer(); await this.onUpdate(); + } async selectors() { @@ -60,6 +65,7 @@ export default class Footer { async event() { this.btnCep.addEventListener("click",this.nonExist.bind(this)) window.addEventListener("hashchange", this.TextTransfer.bind(this)); + window.addEventListener("hashchange", this.nonExist.bind(this)); } async nonExist(){ this.cep = await waitElement('.ship-postalCode small a'); @@ -76,6 +82,7 @@ export default class Footer { } } async TextTransfer(){ + // console.log(this.totalizer,"tabela") const payment_group = this.Dados_profile_payment_wrapper; const dadosProfile =this.Dados_profile.children[0].children[0].children[1] const Dados_profile_payment =this.Dados_profile_payment.children[0] @@ -91,54 +98,55 @@ export default class Footer { // console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ - Dados_profile_payment.appendChild(this.safeP) + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[2] + .children[0] + .innerHTML =` + Cartão de Débito + ` + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[9] + .children[0] + .innerHTML = + ` + Boleto à Vista + ` + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + .innerHTML =` + Boleto Faturado + ` } - payment_group - .children[0] - .children[1] - .children[0] - .children[1] - .children[4] - .children[0] - .children[1] - .children[3] - .children[2] - .children[0] - .innerHTML =` - Cartão de Débito - ` - payment_group - .children[0] - .children[1] - .children[0] - .children[1] - .children[4] - .children[0] - .children[1] - .children[3] - .children[9] - .children[0] - .innerHTML = - ` - Boleto à Vista - ` - payment_group - .children[0] - .children[1] - .children[0] - .children[1] - .children[4] - .children[0] - .children[1] - .children[3] - .children[10] - .children[0] - .innerHTML =` - Boleto Faturado - ` this.Finalizar_btn.innerHTML =` - FINALIZAR COMPRA + + FINALIZAR COMPRA + ` dadosProfile.innerHTML =` Identificação diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index bec69bb..917c08a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,9 +1,28 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); +#Finalizar{ + text-decoration: none; + color: $color-black; +} + .container { @include mq(md, max) { width: 100%; } } +.cart-fixed{ + .summary-template-holder{ + border: 1px solid $color-gray5; + border-radius: 8px; + } + a { + position: relative; + left: -15px; + } + small{ + left: -42px; + position: relative; + } +} .totalizers-list{ td{ height: 0; @@ -72,6 +91,7 @@ } } .cart-fixed.affix { + top: -69px; position: relative !important; } .cart-fixed { @@ -94,7 +114,7 @@ } .cart { - border: 1px solid $color-gray4; + // border: 1px solid $color-gray4; ul li { border-top: none; @@ -117,6 +137,8 @@ .summary-template-holder { border-top: none; background: $color-white; + width: 300px; + padding: 15px; } #go-to-cart-button a { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index d95c394..b38bfe4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -9,9 +9,15 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } +.summary-cart-template-holder{ + width: 332px; +} #is-corporate-client{ display: none; } +#hproduct-item-2616{ + margin-left: 16px; +} #postalCode-finished-loading{ .shipping-method-toggle{ border: 1px solid $color-black; @@ -45,6 +51,9 @@ body .container-main.container-order-form .orderform-template.active { } #ship-postalCode{ margin-bottom: 10px; + width: 172px !important; + height: 36px !important; + max-width: 200px !important; } .ship-country{ @@ -142,7 +151,7 @@ body .container-main.container-order-form .orderform-template.active { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } #payment-data{ - max-width: 719px !important; + right: 0; #payment-group-custom204PaymentGroupPaymentGroup, #payment-group-SPEIPaymentGroup, #payment-group-MercadoPagoPaymentGroup, @@ -202,4 +211,11 @@ body .container-main.container-order-form .orderform-template.active { .payment-group-item.active{ margin: 0 0 0 5px; } +#client-profile-data{ + .filled{ + width: 332px !important; + height: 164px !important; + } +} + From 5d4d6677d5029d3302deeafe86c2ec764d876935 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Wed, 21 Dec 2022 00:37:57 -0300 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20p=C3=A1gina=20de=20pagamaneto=20ter?= =?UTF-8?q?minada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/app.js | 19 ++++++-- .../sass/checkout/_checkout-carrinho.scss | 18 ++++++-- .../sass/checkout/_checkout-pagamento.scss | 46 +++++++++++++++++-- 3 files changed, 70 insertions(+), 13 deletions(-) diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index e3cdef2..4bc4efd 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -51,6 +51,7 @@ export default class Footer { }); this.tbody = await waitElement(".accordion-inner"); this.LapisAzul = await waitElement(".icon-edit"); + this.cartfixed = await waitElement(".cart-fixed"); this.btnCep = await waitElement("#shipping-calculate-link"); this.Dados_profile_payment_wrapper = await waitElement("#payment-data"); this.Dados_profile = document.querySelectorAll(".accordion-group")[1]; @@ -60,6 +61,7 @@ export default class Footer { this.pay__Wrapper = document.createElement("div"); this.Finalizar_btn = document.createElement("button"); this.more = document.createElement("p"); + this.PedidoSumary = document.createElement("h2"); this.wrapper = document.createElement("tr"); } async event() { @@ -82,7 +84,11 @@ export default class Footer { } } async TextTransfer(){ - // console.log(this.totalizer,"tabela") + console.log(this.cartfixed.children[1].children[0].children[0],"tabela"); + this.safeP.classList.add("safep") + this.cartfixed.children[0].classList.add("hide"); + this.cartfixed.children[1].children[0].children[0].appendChild(this.PedidoSumary) + this.PedidoSumary.classList.add("payment_Sumary") const payment_group = this.Dados_profile_payment_wrapper; const dadosProfile =this.Dados_profile.children[0].children[0].children[1] const Dados_profile_payment =this.Dados_profile_payment.children[0] @@ -90,10 +96,10 @@ export default class Footer { const tbody = this.tbody.children[1].children[3]; const table = this.table.children[0].children[0].children[1]; const table_2 = this.table.children[0].children[0].children[2]; - tbodywrapper.classList.add("flex") - tbodywrapper.appendChild(this.more) - tbodywrapper.appendChild(this.Finalizar_btn) - tbody.appendChild(tbodywrapper) + tbodywrapper.classList.add("flex"); + tbodywrapper.appendChild(this.more); + tbodywrapper.appendChild(this.Finalizar_btn); + tbody.appendChild(tbodywrapper); // console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") // console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") @@ -148,6 +154,9 @@ export default class Footer { FINALIZAR COMPRA ` + this.PedidoSumary.innerHTML =` + Resumo do Pedido + ` dadosProfile.innerHTML =` Identificação ` diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 917c08a..0acfd9d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -11,8 +11,11 @@ } .cart-fixed{ .summary-template-holder{ - border: 1px solid $color-gray5; - border-radius: 8px; + border-bottom: 3px solid $color-gray5; + border-left: 3px solid $color-gray5; + border-right: 3px solid $color-gray5; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; } a { position: relative; @@ -74,7 +77,11 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border-top: 3px solid $color-gray5; + border-left: 3px solid $color-gray5; + border-right: 3px solid $color-gray5; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; box-sizing: border-box; border-radius: 5px; padding: 16px; @@ -91,12 +98,13 @@ } } .cart-fixed.affix { - top: -69px; + top: -40px; position: relative !important; } .cart-fixed { font-family: $font-family; width: 100%; + height: 100% !important; h2 { background: $color-white; border: none; @@ -137,7 +145,7 @@ .summary-template-holder { border-top: none; background: $color-white; - width: 300px; + width: 296px; padding: 15px; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index b38bfe4..e40dd09 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -9,13 +9,43 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } +.cart-fixed { + top: -42px; +} +.cart-items{ + display: flex; + flex-direction: column-reverse; + align-items: flex-start; + .payment_Sumary{ + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + margin: 24px 0px 34px 0; + } +} +.hproduct{ + .fn{ + width: 115px !important; + height: 34px; + white-space: break-spaces !important; + color: $color-black; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + } +} .summary-cart-template-holder{ width: 332px; } #is-corporate-client{ display: none; } -#hproduct-item-2616{ +.photo{ + width: 60px !important; + height: 60px !important; margin-left: 16px; } #postalCode-finished-loading{ @@ -91,8 +121,8 @@ body .container-main.container-order-form .orderform-template.active { .newsletter-text, p, label{ - color: #7D7D7D !important; - font-weight: 700 !important; + color: #7D7D7D; + font-weight: 700; } input, .cart{ @@ -217,5 +247,15 @@ body .container-main.container-order-form .orderform-template.active { height: 164px !important; } } +.safep{ + width: 622px; + height: 48px; + font-family: $font-family; + font-style: normal; + font-weight: 400 !important; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; +} From 0f2d1e715fa70a6d48b6d3685b64feb98e8140bf Mon Sep 17 00:00:00 2001 From: Rallenson Date: Wed, 21 Dec 2022 17:45:41 -0300 Subject: [PATCH 5/5] =?UTF-8?q?feat:p=C3=A1gina=20de=20pagamento=20finaliz?= =?UTF-8?q?ada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-carrinho.scss | 16 +++++----- .../sass/checkout/_checkout-pagamento.scss | 31 ++++++++++++++++++- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 0acfd9d..101f143 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -11,9 +11,9 @@ } .cart-fixed{ .summary-template-holder{ - border-bottom: 3px solid $color-gray5; - border-left: 3px solid $color-gray5; - border-right: 3px solid $color-gray5; + border-bottom: 1px solid $color-gray5; + border-left: 1px solid $color-gray5; + border-right: 1px solid $color-gray5; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } @@ -77,9 +77,9 @@ display: none; } .cart { - border-top: 3px solid $color-gray5; - border-left: 3px solid $color-gray5; - border-right: 3px solid $color-gray5; + border-top: 1px solid $color-gray5; + border-left: 1px solid $color-gray5; + border-right: 1px solid $color-gray5; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; box-sizing: border-box; @@ -132,7 +132,6 @@ &:not(:first-child) { margin-top: 8px; padding-top: 8px; - border-top: 1px solid #e5e5e5; } .shipping-date, @@ -145,8 +144,7 @@ .summary-template-holder { border-top: none; background: $color-white; - width: 296px; - padding: 15px; + width: 330px; } #go-to-cart-button a { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index e40dd09..7c1b1ac 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -9,6 +9,35 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } +.body-order-form{ + .totalizers-list{ + tr{ + border-bottom: 1px solid black; + border-top: 1px solid black; + margin-right: 17px; + left: 20px; + position: relative; + text-align-last: start; + .info{ + width: 100% !important; + } + } + } + tfoot{ + .info{ + width: 93% !important; + } + tr{ + border-top: 1px solid; + margin-right: 17px; + left: 20px; + position: relative; + text-align-last: start; + text-indent: -17px; + } + + } +} .cart-fixed { top: -42px; } @@ -173,7 +202,7 @@ body .container-main.container-order-form .orderform-template.active { } } #payment-data-submit{ - width: 100% !important; + width: 88% !important; background: $color-green_2 !important; text-transform: uppercase !important; height: 42px !important;