diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..b34a32a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,7 @@ export default class Footer { async init() { await this.selectors(); + await this.addCarrossel(); // this.onUpdate(); } @@ -14,6 +15,7 @@ export default class Footer { //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.checkoutVazio = await waitElement(".empty-cart-content"); + this.slick = await waitElement(".footerCheckout__prateleira"); } onUpdate() { @@ -31,7 +33,7 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement("footerCheckout__prateleira"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index ef44815..148eda7 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -51,36 +51,30 @@ export default class Header { const step1 = document.getElementById("step_1") const step2 = document.getElementById("step_2") const step3 = document.getElementById("step_3") - console.log(step1,"primeiro circulo") - console.log(step2,"segundo circulo") - console.log(step3,"terceiro circulo") progressList.forEach((li) => { if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ - console.log("estou no cart") if(li.children[1].id === "step_1"){ step2.classList.remove('completed'); step3.classList.remove('completed'); li.children[1].classList.toggle('completed'); } } - if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email"){ - console.log("estou no email") + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email" + || window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" + || window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){ if(li.children[1].id === "step_2"){ step1.classList.remove('completed'); step3.classList.remove('completed'); console.log(li,"esse é o children 2") - li.children[1].classList.toggle('completed'); + li.children[1].classList.add('completed'); } } - if(window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" - || window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" - || window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ - console.log("estou no profile") + if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){ if(li.children[1].id === "step_3"){ step1.classList.remove('completed'); step2.classList.remove('completed'); console.log(li,"esse é o children 3") - li.children[1].classList.add('completed'); + li.children[1].classList.toggle('completed'); } } }) diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index f2d830a..8a7f677 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -9,7 +9,7 @@ export default class Footer { async init() { await this.selectors(); await this.event(); - await this.TextBtn(); + await this.TextTransfer(); } async selectors() { @@ -18,13 +18,80 @@ export default class Footer { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); - + this.IconPayFot = await waitElement(".footerCheckout__payments", { + //#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.IconVtex = await waitElement(".footerCheckout__vtexpci", { + //#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 + }); } async event() { - + } - async TextBtn(){ + async TextTransfer(){ + const IconDev = document.querySelector(".footerCheckout__developedBy") + + IconDev.children[0].children[0].innerHTML=` + Powered by + M3 Academy + ` + IconDev.children[1].children[0].innerHTML=` + Developed by + M3 Academy + ` + this.IconVtex.innerHTML=` + M3 Academy + ` + this.IconPayFot.innerHTML=` +
    +
  1. + M3 Academy +
    2. +
  2. + M3 Academy +
    3. +
  3. + M3 Academy +
    4. +
  4. + M3 Academy +
    5. +
  5. + M3 Academy +
    6. +
  6. + M3 Academy +
    7. +
  7. + M3 Academy +
    8. +
` + this.buttonText.innerHTML =` CONTINUAR COMPRANDO ` diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..20a1ea1 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,10 +3,38 @@ border-top: none; color: $color-gray2; + &::before{ + content: ''; + position: absolute; + right: 0; + width: 100%; + height: 67px; + border-bottom: 1px solid $color-black; + } + &__payments{ + &__images{ + list-style: none; + display: flex; + align-items: center; + .images_pay-card{ + margin-right: 15px; + } + } + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + position: relative; + height: 100px; + display: inline-flex; + align-items: flex-end; + .container{ + position: absolute; + top: 94px; + width: 100%; + display: flex; + align-items: baseline; + justify-content: space-between; + flex-direction: row; + } } &__address { @@ -51,6 +79,14 @@ list-style-type: none; margin: 0; + .VtexM3{ + width: 44px; + height: 16px; + } + .VtexM3_2{ + width: 28px; + height: 16px; + } li:last-child { margin-left: 16px; }