diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index be49d35..10c96e1 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,63 @@ export default class Footer { async init() { await this.selectors(); - this.requestApi(); - this.addCarrossel(); + this.verificaPag(); + await this.onUpdate(); this.creatPaymentsIcons(); this.creatVtexIconPci(); this.creatDevIconsM3(); - this.onUpdate(); - + this.addProdutos(); + await this.addCarrossel(); } async selectors() { this.checkoutVazio = await waitElement(".empty-cart-content"); this.divPrateleira = await waitElement('.footerCheckout__prateleira'); + this.tituloPrateleira = await waitElement('#cart-title') this.payments = await waitElement('.footerCheckout__payments'); this.vtexIconPci = await waitElement('.footerCheckout__vtexpci'); this.devIcons = await waitElement('.footerCheckout__developedBy'); + this.continuarComprando = await waitElement('.empty-cart-links'); } - onUpdate() { + async onUpdate() { let target = this.checkoutVazio; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); + mutations.forEach((mutation) => { + console.log(observer); + const status = mutation.target.attributes.style.nodeValue; + if(status === 'display: none;') { + this.requestApi(); + } else { + this.divPrateleira.innerHTML = ``; + } }); }); - observer.observe(target, config); } + + verificaPag () { + if(this.checkoutVazio.attributes.style.nodeValue === 'display: none;') { + if(window.location.hash == '#/cart') { + this.requestApi(); + } + } else { + this.divPrateleira.innerHTML= ``; + } + window.addEventListener('hashchange',() => { + if(this.checkoutVazio.attributes.style.nodeValue === 'display: none;') { + if(window.location.hash == '#/cart') { + this.requestApi(); + } + } else if (window.location.hash == '#/email' || window.location.hash == '#/profile' || window.location.hash == '#/shipping') { + this.divPrateleira.innerHTML= ``; + }else if (window.location.href == "https://m3academy.myvtex.com/checkout/#/payment") { + this.divPrateleira.innerHTML= ``; + } + })}; + + requestApi () { this.divPrateleira.innerHTML = `

Você também pode gostar:

@@ -54,19 +83,19 @@ export default class Footer { const linkProd = prod.link; ulProdut.innerHTML += `
  • -
    - Imagem Produto -
    -
    -

    ${nameProd}

    - - - Ver Produto - -
    +
    + Imagem Produto +
    +
    +

    ${nameProd}

    + + + Ver Produto + +
    • ` }) }); @@ -82,53 +111,60 @@ export default class Footer { }); } } + addProdutos() { + this.continuarComprando.innerHTML = `continuar comprando` + } + // removePrateleira() { + // this.divPrateleira.style.display = 'none' + // }; creatPaymentsIcons () { this.payments.innerHTML = ` - `; + `; } creatVtexIconPci () { this.vtexIconPci.innerHTML = ` - ` + ` } creatDevIconsM3 () { this.devIcons.innerHTML = ` -
  • - - Powered By -
    - LogoVTEX -
    -     -
    • -
  • - +
  • + + Powered By +
    + LogoVTEX +
    +     +
    • +
  • + Developed By -
    - LogoM3 -
    -     -
    • ` - } +
    + LogoM3 +
    + + + ` + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index bad8f8a..70924d3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -49,10 +49,6 @@ body { .container-order-form, .container-cart { width: 80%; - - #cart-title { - display: none !important; - } } } @@ -71,20 +67,24 @@ body { #cart-title, #orderform-title { - color: $color-gray2; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-weight: 700; + font-size: 24px; + line-height: 33px; + margin: 16px 0; + letter-spacing: 0.05em; text-transform: uppercase; + color: $color-black-500; @include mq(md, max) { margin-left: 30px; } + .activeTitle { + display: none; + } } + .dropdown { &__content { &--closed { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 4e1eb7f..5339a56 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -13,6 +13,13 @@ -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; + + // .slick-slide:first-child { + // margin-right: 8px; + // } + // .slick-slid:last-child { + // margin-left: 8px; + // } } .slick-list { position: relative; @@ -46,7 +53,7 @@ display: flex; margin-left: auto; margin-right: auto; - column-gap: 16px; + gap: 16px; &:before, &:after { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 22e2610..776428f 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -211,7 +211,6 @@ align-items: center; text-align: center; margin: 0; - padding: 0; background-color: $color-blue-200; color: $color-white; border-radius: 8px; @@ -222,8 +221,6 @@ font-style: normal; line-height: 18px; padding: 5px; - transition: ease-in-out 250ms; - border: 1px solid $color-blue-200; } &__prateleira-div-text a { @@ -231,7 +228,6 @@ justify-content: center; display: flex; width: 100%; - max-width: 242px; background: $color-blue-200; height: 42px; align-items: center; @@ -244,14 +240,22 @@ font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; - transition: ease-in-out 250ms; - border: 1px solid $color-blue-200; + transition: ease-in-out 280ms; &:hover { - background-color: $color-white; - color: $color-blue-200; + background-color: $color-blue-100; } } + + &__prateleira-div-text ul li { + text-transform: uppercase; + font-family: $font-family; + font-size: 13px; + font-weight: 700; + line-height: 18px; + font-style: normal; + } + } @media only screen and (width: 1280px){ diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 3f71f09..ba4c8b6 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -16,6 +16,7 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-blue-100: #6fd5f2; $color-blue-200: #00C8FF; $color-blue: #4267b2;