From 14311f1b28011ff7146a6c243536b656cbc225c3 Mon Sep 17 00:00:00 2001 From: MateusLopes Date: Sun, 18 Dec 2022 23:49:15 -0300 Subject: [PATCH] feat(slick): add itens no slick --- checkout/src/arquivos/js/components/Footer.js | 97 +++++++++++++++++-- checkout/src/arquivos/js/components/Header.js | 26 +++++ checkout/src/arquivos/sass/checkout.scss | 1 + .../sass/checkout/_checkout-carrinho.scss | 2 +- .../sass/checkout/_checkout-vazio.scss | 12 ++- .../src/arquivos/sass/checkout/_checkout.scss | 3 + checkout/src/arquivos/sass/lib/_slick.scss | 16 ++- .../src/arquivos/sass/partials/_footer.scss | 6 ++ .../src/arquivos/sass/partials/_header.scss | 25 ++++- .../arquivos/sass/partials/_prateleira.scss | 86 ++++++++++++++++ .../src/arquivos/sass/utils/_variaveis.scss | 1 + 11 files changed, 258 insertions(+), 17 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 8820e37..c219d3f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,7 +8,8 @@ export default class Footer { async init() { await this.selectors(); this.footerIcons(); - // this.onUpdate(); + this.addCarrossel(); + this.onUpdate(); } async selectors() { @@ -17,10 +18,10 @@ export default class Footer { this.paymentIcons = await waitElement(".footerCheckout__stamps"); this.developedByIcons = await waitElement(".footerCheckout__developedBy"); this.checkoutVazio = await waitElement(".empty-cart-content"); + // this.carrossel = await waitElement(".footerCheckout__prateleira"); } footerIcons() { - console.log(this.paymentIcons); this.paymentIcons.innerHTML = `
  • @@ -55,6 +56,8 @@ export default class Footer { } onUpdate() { + const title = document.querySelector("#cart-title"); + const prateleira = document.querySelector(".footerCheckout__prateleira"); //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 // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver @@ -62,17 +65,93 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + if (window.vtexjs.checkout.orderForm.items.length == 0) { + title.style.display = "none"; + prateleira.style.display = "none"; + } else { + prateleira.style.display = "block"; + title.style.display = "block"; + } }); }); observer.observe(target, config); } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + + addCarrossel() { + const carrossel = document.querySelector(".footerCheckout__prateleira"); + const title = document.createElement("h2"); + title.setAttribute("class", "prateleira-title"); + title.innerText = "Você também pode gostar:"; + carrossel.appendChild(title); + const ul = document.createElement("ul"); + carrossel.appendChild(ul); + + // const slick = document.querySelector(".slick-track"); + + // const ul = document.createElement("ul"); + // carrossel.appendChild(ul); + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then(function (response) { + return response.json(); + }) + .then(function (data) { + data.map((item) => { + const li = document.createElement("li"); + li.setAttribute("class", "product-card card"); + ul.appendChild(li); + + let categoriesValues = item.items + .filter((categoryValue) => { + if (categoryValue.name) { + return true; + } + return false; + }) + .map((categoryValue) => { + return `
  • ${categoryValue.name}
    • `; + }) + .toString() + .replaceAll(",", ""); + + li.innerHTML = ` + Imagem de ${item.productName} +

    ${item.productName}

    + + + `; + $(ul).slick({ + infinite: false, + slidesToShow: 4, + slidesToScroll: 1, + }); + $(ul).slick("unslick"); + }); + $(ul).slick({ + infinite: false, + slidesToShow: 4, + slidesToScroll: 1, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + }, + }, + { + breakpoint: 376, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + }, + }, + ], + }); + }); } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index f95d76c..f129b64 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -10,6 +10,7 @@ export default class Header { await this.selectors(); this.progressBarHTML(); await this.progressBarWorking(); + // this.mutationOvserver(); // await this.changeTexts(); } @@ -253,4 +254,29 @@ export default class Header { // let texto = (chooseProductsBtn.innerHTML = "Continuar comprando"); // console.log(chooseProductsBtn); // } + + mutationOvserver() { + // seleciona o nó alvo + var target = document.querySelector(".cart-items tbody"); + + // cria uma nova instância de observador + var observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + console.log(mutation.type); + }); + }); + + // configuração do observador: + var config = { + childList: true, + attributes: true, + characterData: true, + subtree: true, + attributeOldValue: true, + characterDataOldValue: true, + }; + + // passar o nó alvo, bem como as opções de observação + observer.observe(target, config); + } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..14b62ba 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,5 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 4870ff3..bfd334d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -278,7 +278,7 @@ display: block; max-height: 38px; margin: 0 !important; - padding: 8px 0; + padding: 0; width: 38px; color: $color-black; box-shadow: none; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index c7040ce..f4737a8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,5 +1,6 @@ .empty-cart { font-family: $font-family; + margin-bottom: 200px; &-content { color: $color-black2; text-align: center; @@ -14,8 +15,13 @@ font-size: 24px; font-weight: 700; line-height: 33px; + margin-top: 170px; margin-bottom: 32px; color: black; + @media (max-width: 1024px) { + font-size: 18px; + margin-bottom: 22px; + } } &-message { @@ -38,7 +44,7 @@ justify-content: center; padding: 0; margin: 0 auto; - width: 31.95%; + width: 327px; height: 48px; letter-spacing: 0.05em; color: black; @@ -46,6 +52,10 @@ transition: ease-in 0.22s all; + @media (max-width: 1024px) { + width: 250px; + } + &:hover { background: lighten($color-black2, 5); } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 484b2f5..44feb04 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -46,6 +46,9 @@ body { .container-order-form, .container-cart { width: 80%; + @media (max-width: 1024px) { + width: 96%; + } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..b5224a2 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -70,7 +70,14 @@ float: right; } img { + background-color: $color-gray15; display: block; + @media (max-width: 1024px) { + width: 94.83% !important; + } + @media (max-width: 375px) { + width: auto !important; + } } &.slick-loading img { display: none; @@ -98,15 +105,20 @@ } .slick-arrow { font-size: 0; + border: none; position: absolute; + bottom: 195px; + line-height: 30px !important; } .slick-prev { - background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") - no-repeat center center; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center + center; z-index: 4; 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 ec4b3bd..ef58945 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -14,6 +14,12 @@ display: flex; justify-content: space-between; align-items: center; + @media (max-width: 1024px) { + flex-direction: column; + align-items: unset; + margin-left: 8px; + width: 100%; + } &:before, &:after { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index a18cbd5..cb71d40 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -7,6 +7,16 @@ width: 79.53125% !important; margin-top: 29.02px; margin-bottom: 29.86px; + @media (max-width: 1024px) { + width: auto !important; + margin: 16px; + } + } + + #progressBar { + @media (max-width: 1024px) { + display: none; + } } &__wrapper { @@ -46,7 +56,7 @@ .progress-bar-line-2 { position: absolute; height: 1px; - background: black; + background: $color-black; bottom: 6px; } @@ -60,9 +70,11 @@ right: 38px; } - .progress-bar-active { - background: black; - border: 1px solid black; + #progress-bar-circle-1.active, + #progress-bar-circle-2.active, + #progress-bar-circle-3.active { + background: $color-black; + border: 1px solid $color-black; } } } @@ -72,6 +84,11 @@ img { height: 37.14px; width: 155.58px; + // @media (max-width: 1024px) { + // max-width: none; + // width: 122.44%; + // height: auto; + // } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..638c81b 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,87 @@ /* _prateleira.scss */ +.footerCheckout__prateleira { + @media (max-width: 1024px) { + width: 97% !important; + } + @media (max-width: 375px) { + width: 92% !important; + } + .prateleira-title { + font-family: $font-family-secondary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-black; + text-align: center; + margin: 43px 0 20px 0; + } + + .slick-initialized { + margin-bottom: 56px; + } + + .slick-slide { + margin: 0 8px; + } + + .slick-list { + margin: 0 -8px; + } + + .product-name { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: $color-black; + margin: 20px 0 !important; + } + + .product-btn { + height: 42px; + width: 100%; + border: none; + border-radius: 8px; + background-color: $color-blue2; + color: $color-white; + font-family: $font-family; + font-size: 13px; + font-weight: 700; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + line-height: 18px; + } + + .product-skus { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; + gap: 5px; + + @media (max-width: 375px) { + flex-wrap: wrap; + height: 60px; + margin-bottom: 37px; + } + } + + .product-category { + background-color: $color-blue2; + border-radius: 8px; + border: none; + font-size: 13px; + font-weight: 700; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + font-family: $font-family; + padding: 5px; + height: fit-content; + } +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 0dca89f..5c69b79 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -24,6 +24,7 @@ $color-gray11: #f4f5f7; $color-gray12: #b3b3b3; $color-gray13: #58595b; $color-gray14: #fbfbfb; +$color-gray15: #eeee; $color-blue: #4267b2; $color-blue2: #00c8ff;