diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index e574c2d..58b0f78 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,6 +9,7 @@ export default class Footer { await this.selectors(); this.createFooter(); this.addCarrossel(); + this.createPrateleira(); this.onUpdate(); } @@ -22,33 +23,6 @@ export default class Footer { } createFooter() { - 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 = `
  • @@ -100,6 +74,38 @@ export default class Footer { `; } + createPrateleira() { + 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) => { + console.log(data); + data.map((item) => { + const li = document.createElement("li"); + li.setAttribute("id", item.productId); + li.innerHTML = ` +

    ${item.productName}

    +
    + ${item.items + .map((sku) => { + return ``; + }) + .join("")} +
    + `; + slickPrat.children[1].appendChild(li); + }); + }); + } + onUpdate() { //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver @@ -112,7 +118,6 @@ export default class Footer { mutation.target.style.display === "none" && window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" ) { - console.log("none"); } else { console.log("block"); } @@ -126,6 +131,15 @@ export default class Footer { $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + }, + }, + ], }); } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 9d0ff04..fc1b377 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -10,7 +10,6 @@ export default class Header { await this.selectors(); this.progressBarDesktop(); await this.stepBarProcess(); - this.containerMain(); } async selectors() { @@ -59,7 +58,7 @@ export default class Header { `; } - if (this.progressBar && window.innerWidth <= 1024) { + if (this.progressBar && window.innerWidth < 1024) { this.progressBar.innerHTML = ""; } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index f494f66..80f2c5f 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -3,4 +3,5 @@ @import "./partials/header"; @import "./partials/footer"; @import "./checkout/checkout.scss"; +@import "./partials/prateleira.scss"; @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Tenor+Sans&display=swap"); diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 8d57754..b9fda73 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,6 +2,7 @@ .footerCheckout { border-top: none; color: $color-gray2; + margin-top: auto; &__wrapper { display: flex; @@ -15,6 +16,11 @@ justify-content: space-between; width: 100%; border-top: 1px solid $color-black-500; + + @media (min-width: 275px) and (max-width: 1024px) { + flex-direction: column; + justify-content: flex-start; + } } } @@ -34,6 +40,14 @@ margin-bottom: 24px; max-width: 100%; } + + @media (min-width: 275px) and (max-width: 1024px) { + order: 2; + margin-left: 16px; + width: 100%; + max-width: 100%; + justify-content: flex-start; + } } &__stamps { @@ -51,6 +65,13 @@ margin-bottom: 12px; } + @media (min-width: 275px) and (max-width: 1024px) { + order: 1; + margin: 16px 26px 16px 8px; + padding: 0; + justify-content: flex-start; + } + &__divider { background-color: $color-gray4; display: inline-block; @@ -88,6 +109,13 @@ margin-right: 8px; } } + + @media (min-width: 275px) and (max-width: 1024px) { + order: 2; + margin: 0 0 0 16px; + padding: 16px 0; + justify-content: flex-start; + } } img { @@ -115,84 +143,4 @@ 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; - background: $color-gray3; - } - .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/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..3375cba 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,82 @@ /* _prateleira.scss */ +.footerCheckout { + &__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; + background: $color-gray3; + } + .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: $color-blue-100; + } + } + } + .slick-slide { + margin-right: 16px; + + &:last-child { + margin-right: 0; + } + } + + .slick-prev, + .slick-next { + border: none; + background-color: transparent; + top: 43%; + } + + .slick-next { + right: 30px; + } + + .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; + } + } +}