diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 623727a..e574c2d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,19 +8,49 @@ export default class Footer { async init() { await this.selectors(); this.createFooter(); - // this.onUpdate(); + this.addCarrossel(); + this.onUpdate(); } async selectors() { - this.footerCheckout = await waitElement(".footerCheckout__stamps"); + this.footerCheckoutStamps = await waitElement(".footerCheckout__stamps"); this.footerCheckoutDevelop = await waitElement(".footerCheckout__developedBy"); + this.footerCheckoutPrateleira = await waitElement(".footerCheckout__prateleira"); //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"); } createFooter() { - this.footerCheckout.innerHTML = ` + const slickPrat = this.footerCheckoutPrateleira; + slickPrat.innerHTML = `

Você também pode gostar:

+ `; + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => { + return response.json(); + }) + .then((data) => { + data.map((item) => { + const li = document.createElement("li"); + li.setAttribute("id", item.productId); + li.innerHTML = ` +

${item.productName}

+
+ ${item.items.map((sku) => { + return ``; + })} +
+ `; + slickPrat.children[1].appendChild(li); + }); + }); + + this.footerCheckoutStamps.innerHTML = ` +
    • @@ -54,14 +84,14 @@ export default class Footer { `; this.footerCheckoutDevelop.innerHTML = ` -
  • +
  • Powered By
    • -
  • +
  • Developed By @@ -78,14 +108,21 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + if ( + mutation.target.style.display === "none" && + window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" + ) { + console.log("none"); + } else { + console.log("block"); + } }); }); observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".container-carrossel"); $(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 68b8e99..077bf9d 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -29,7 +29,9 @@ export default class Header {

    Meu carrinho

    -

    +

    @@ -39,7 +41,7 @@ export default class Header {

    Dados Pessoais

    -

    +

    @@ -49,7 +51,7 @@ export default class Header {

    Pagamento

    -

    +

    @@ -59,7 +61,7 @@ export default class Header { `; } if (this.progressBar && window.innerWidth < 1024) { - this.progressBar.innerHTML = ``; + this.progressBar.innerHTML = ""; } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..5d3a7a8 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -107,6 +107,8 @@ left: 10px; } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; z-index: 4; right: 10px; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 257df28..4242f6c 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,12 +2,20 @@ .footerCheckout { border-top: none; color: $color-gray2; - border-top: 1px solid $color-black-500; &__wrapper { - align-items: center; display: flex; - justify-content: space-between; + align-items: center; + width: 100% !important; + margin-top: 52px !important; + + .container { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + border-top: 1px solid $color-black-500; + } } &__address { @@ -19,6 +27,8 @@ line-height: 13px; text-transform: capitalize; max-width: 40%; + width: 80%; + margin-left: 32px; @include mq(md, max) { margin-bottom: 24px; @@ -31,8 +41,10 @@ display: flex; justify-self: center; list-style: none; - padding: 18px 0; + padding: 16px 0; margin: 0; + width: 100%; + justify-content: flex-end; @include mq(md, max) { align-self: center; @@ -53,6 +65,9 @@ display: flex; list-style-type: none; margin: 0; + width: 100%; + margin-right: 32px; + justify-content: flex-end; li:last-child { margin-left: 16px; @@ -100,4 +115,83 @@ margin: 0 0 0 10px; } } + + &__prateleira { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + h2 { + font-weight: 400; + font-size: 24px; + color: $color-black; + font-family: $font-family-secundary; + margin-bottom: 20px; + } + .container-carrossel { + max-width: 100%; + display: flex; + } + + li { + list-style: none; + img { + width: 242px; + height: 242px; + } + .prateleira-text { + color: $color-black; + text-align: center; + margin: 20px 0; + } + .btn-prateleira { + display: flex; + margin-bottom: 25px; + align-items: center; + justify-content: center; + + button { + display: flex; + align-items: center; + border: none; + border-radius: 8px; + color: $color-white; + height: 26px; + padding: 5px; + margin: 5px; + background: $color-blue-100; + } + } + } + .slick-slide { + margin-right: 16px; + + &:last-child { + margin-right: 0; + } + } + + .slick-prev, + .slick-next { + border: none; + background-color: transparent; + top: 40%; + } + + .slick-next { + right: 20px; + } + + .btn-list-prateleira { + width: 100%; + border: none; + border-radius: 8px; + background: $color-blue-100; + color: $color-white; + font-family: $font-family; + font-weight: bold; + height: 42px; + } + } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8ae46d2..31efbcd 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -79,7 +79,9 @@ justify-content: center; } - &__circle { + &__circle-1, + &__circle-2, + &__circle-3 { display: flex; align-items: center; justify-content: center; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f9652d1..70d3257 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -17,6 +17,7 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-blue: #4267b2; +$color-blue-100: #00c8ff; $color-green: #4caf50;