forked from M3-Academy/m3-academy-template-checkout
Merge branch 'feature/pagamento' into desenvolvimento
This commit is contained in:
commit
e036e2283c
3
checkout/src/arquivos/assets/svgs/Rectangle 138.svg
Normal file
3
checkout/src/arquivos/assets/svgs/Rectangle 138.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect id="Rectangle 138" x="0.5" y="0.5" width="17" height="17" rx="2.5" stroke="#C4C4C4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 195 B |
@ -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() {
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -1,15 +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() {
|
||||
@ -45,17 +51,23 @@ export default class Footer {
|
||||
});
|
||||
this.tbody = await waitElement(".accordion-inner");
|
||||
this.LapisAzul = await waitElement(".icon-edit");
|
||||
// this.HomeIcon = await waitElement(".delivery-address-title");
|
||||
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];
|
||||
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");
|
||||
this.PedidoSumary = document.createElement("h2");
|
||||
this.wrapper = document.createElement("tr");
|
||||
}
|
||||
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');
|
||||
@ -72,19 +84,78 @@ export default class Footer {
|
||||
}
|
||||
}
|
||||
async TextTransfer(){
|
||||
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]
|
||||
const tbodywrapper = this.wrapper;
|
||||
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)
|
||||
console.log(this.HomeIcon,"Lugar onde você colocara o icone")
|
||||
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")
|
||||
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
|
||||
`
|
||||
}
|
||||
this.Finalizar_btn.innerHTML =`
|
||||
FINALIZAR COMPRA
|
||||
<a id="Finalizar" href="https://m3academy.myvtex.com/checkout/#/email">
|
||||
FINALIZAR COMPRA
|
||||
</a>
|
||||
`
|
||||
this.PedidoSumary.innerHTML =`
|
||||
Resumo do Pedido
|
||||
`
|
||||
dadosProfile.innerHTML =`
|
||||
Identificação
|
||||
@ -92,6 +163,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 +235,103 @@ export default class Footer {
|
||||
CONTINUAR COMPRANDO
|
||||
`
|
||||
}
|
||||
async onUpdate() {
|
||||
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,
|
||||
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("o pai está aberto",mutation.oldValue)
|
||||
console.log(mutation)
|
||||
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",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]
|
||||
)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,31 @@
|
||||
@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-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;
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
left: -15px;
|
||||
}
|
||||
small{
|
||||
left: -42px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.totalizers-list{
|
||||
td{
|
||||
height: 0;
|
||||
@ -55,7 +77,11 @@
|
||||
display: none;
|
||||
}
|
||||
.cart {
|
||||
border: 3px solid $color-gray3;
|
||||
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;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
@ -72,11 +98,13 @@
|
||||
}
|
||||
}
|
||||
.cart-fixed.affix {
|
||||
top: -40px;
|
||||
position: relative !important;
|
||||
}
|
||||
.cart-fixed {
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
h2 {
|
||||
background: $color-white;
|
||||
border: none;
|
||||
@ -94,7 +122,7 @@
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 1px solid $color-gray4;
|
||||
// border: 1px solid $color-gray4;
|
||||
|
||||
ul li {
|
||||
border-top: none;
|
||||
@ -104,7 +132,6 @@
|
||||
&:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.shipping-date,
|
||||
@ -117,6 +144,7 @@
|
||||
.summary-template-holder {
|
||||
border-top: none;
|
||||
background: $color-white;
|
||||
width: 330px;
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
|
||||
@ -9,37 +9,112 @@ 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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.photo{
|
||||
width: 60px !important;
|
||||
height: 60px !important;
|
||||
margin-left: 16px;
|
||||
}
|
||||
#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;
|
||||
width: 172px !important;
|
||||
height: 36px !important;
|
||||
max-width: 200px !important;
|
||||
}
|
||||
|
||||
.ship-country{
|
||||
display: none;
|
||||
}
|
||||
@ -69,14 +144,14 @@ 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;
|
||||
.newsletter-text,
|
||||
p,
|
||||
label{
|
||||
color: #7D7D7D !important;
|
||||
color: #7D7D7D;
|
||||
font-weight: 700;
|
||||
}
|
||||
input,
|
||||
.cart{
|
||||
@ -127,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;
|
||||
@ -135,7 +210,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;
|
||||
right: 0;
|
||||
#payment-group-custom204PaymentGroupPaymentGroup,
|
||||
#payment-group-SPEIPaymentGroup,
|
||||
#payment-group-MercadoPagoPaymentGroup,
|
||||
@ -150,17 +225,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 +261,30 @@ 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;
|
||||
}
|
||||
#client-profile-data{
|
||||
.filled{
|
||||
width: 332px !important;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user