Gustavo_Rallenson_Goncalves_Da_Silva/m3-academy-template-checkout-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

desenvolvimento #3

Merged
Gustavo_Rallenson_Goncalves_Da_Silva merged 19 commits from desenvolvimento into Develop 2022-12-27 03:00:25 +00:00
Conversation 0 Commits 19 Files Changed 12 +120 -39
5 changed files with 120 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2a58a51b26 - Show all commits

3
checkout/src/arquivos/assets/svgs/Rectangle 138.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 195 B

14
checkout/src/arquivos/js/components/Footer.js
View File

@ -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() {

47
checkout/src/arquivos/js/components/app.js
View File

@ -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);
}
}

34
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -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;
}
}
}
}

61
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -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;
}