From 38e48607228a6444367579b7d9b45fba3b038f46 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Fri, 16 Dec 2022 14:32:54 -0300 Subject: [PATCH] feat(footer): cria prateleira desktop com slick --- checkout/src/arquivos/js/components/Footer.js | 90 ++++++++++++++++--- .../sass/checkout/_checkout-autenticacao.scss | 19 ++++ .../sass/checkout/_checkout-carrinho.scss | 45 +++++++++- .../sass/checkout/_checkout-vazio.scss | 1 + checkout/src/arquivos/sass/lib/_slick.scss | 7 +- .../arquivos/sass/partials/_prateleira.scss | 30 +++++++ .../template-checkout/checkout-footer.html | 55 +++++++++++- 7 files changed, 230 insertions(+), 17 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index b4bd9d7..6f979fc 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,6 +8,7 @@ export default class Footer { async init() { await this.selectors(); this.replaceEmptyCartContent(); + this.renderPrateleira(); this.stampsHTML(); this.developedByHTML(); this.onUpdate(); @@ -21,10 +22,12 @@ export default class Footer { this.emptyCartTitle = await waitElement(".empty-cart-title"); this.continueShopping = await waitElement("#cart-choose-products"); this.prateleira = await waitElement(".footerCheckout__prateleira"); + // this.prateleiraSlick = await waitElement(".prateleira__carousel") } replaceEmptyCartContent() { if (this.checkoutVazio) { + console.log("entrou no if do replaceContent()") this.emptyCartTitle.textContent = "Seu Carrinho está vazio"; this.continueShopping.textContent = "Continuar comprando"; } @@ -35,21 +38,24 @@ export default class Footer { // 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 if(this.checkoutVazio) { + console.log("entrou no if do onUpdate()") + let target = this.checkoutVazio; let config = { attributes: true }; - this.cartTitle.style.display = "none"; - this.prateleira.style.display = "none"; + // this.cartTitle.style.display = "none"; + // this.prateleira.style.display = "none"; let observer = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - console.log("mutation type: ", mutation.typ) - console.log("rolou mutation") + mutations.forEach(() => { + if(this.checkoutVazio.style.display == "block") { console.log("Carrinho está vazio") this.cartTitle.style.display = "none"; this.prateleira.style.display = "none"; + } else { + console.log("Carrinho NÃO está vazio"); this.cartTitle.style.display = "block"; this.prateleira.style.display = "block"; @@ -61,13 +67,73 @@ export default class Footer { } } - // async addCarrossel() { - // const elemento = await waitElement("#my-element"); - // $(elemento).slick({ - // slidesToShow: 4, - // slidesToScroll: 1, - // }); - // } + async renderPrateleira() { + if (this.prateleira) { + + const prateleiraSlick = document.createElement("ul"); + prateleiraSlick.classList.add("prateleira__carousel"); + + const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"); + console.log("await fetch response:", response); + const productsList = await response.json(); + console.log("await fetch productsList:", productsList); + + let cardsStructure = ""; + + if(productsList) { + + productsList.forEach((product) => { + console.log(product) + + const productImageUrl = product.items[0].images[0].imageUrl; + console.log("productImageUrl:", productImageUrl); + const productName = product.productName; + console.log("productName:", productName); + const productSkus = product.items; + console.log("productSkus:", productSkus); + let skusStructure = ""; + + productSkus.forEach((sku) => { + console.log("sku:", sku); + skusStructure += ` +
  • + +
    • + ` + }) + + cardsStructure += ` +
  • +
    + +
    +
    +

    ${productName}

    +
      ${skusStructure}
    + +
    +
    • + ` + }) + + prateleiraSlick.innerHTML = cardsStructure; + this.prateleira.appendChild(prateleiraSlick); + + if(window.innerWidth > 1024) { + this.addCarrossel(prateleiraSlick); + } + } + } + } + + async addCarrossel(element) { + console.log("chamada do addCarrossel()"); + // const elemento = await waitElement(this.prateleiraSlick); + $(element).slick({ + slidesToShow: 4, + slidesToScroll: 1, + }); + } async stampsHTML() { const stamps = await waitElement('.footerCheckout__stamps'); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 02e0d67..d785fcf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,4 +1,14 @@ .checkout-container { + // background: yellow; + // height: 100%; + // box-sizing: border-box; + + // &:before, + // &:after { + // display: none; + // } + + .client-pre-email { border-color: $color-gray4; font-family: $font-family; @@ -287,3 +297,12 @@ } } } + +// .transactions-container { +// height: 0; + +// &::before, +// &::after { +// display: none; +// } +// } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 8b03e45..eb6f983 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,22 +1,38 @@ .container { + // background: salmon; + + // &:before, + // &:after { + // display: none; + // }; + @include mq(md, max) { width: 100%; } } .cart-template { + // background: red; + margin: 0; + + font-family: $font-family; @include mq(md, max) { padding: 0 0; } + .item-unit-label { display: none; } + .cart { - border: 3px solid $color-gray3; - box-sizing: border-box; + // margin: 0; + // background: purple; + // border: 1px solid red; + // $color-gray3; border-radius: 5px; padding: 16px; + box-sizing: border-box; @include mq(md, max) { margin: 0px 0 25px 0; @@ -24,10 +40,31 @@ border-right: none; border-radius: 0; } + + // .cart-items { + // font-family: $font-family-secundary; + + // thead { + // line-height: 16px; + // font-size: 14px; + // // font-style: normal; + // // font-weight: 400; + // color: $black-300; + // } + + // .product-image img { + // display: block; + // width: 60px; + // height: 60px; + // transform: scaleX(-1); + // } + // } } + .cart-fixed.affix { position: relative !important; } + .cart-fixed { font-family: $font-family; width: 100%; @@ -48,7 +85,7 @@ } .cart { - border: 1px solid $color-gray4; + // border: 1px solid $color-gray4; ul li { border-top: none; @@ -749,6 +786,8 @@ flex-direction: column; width: 343px; + margin-bottom: 43px; + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 35360d4..5cec85c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -51,3 +51,4 @@ } } } + diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..60f95f6 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,6 +1,8 @@ /* Slider */ .slick-slider { + margin: 0; + position: relative; display: block; box-sizing: border-box; @@ -18,7 +20,7 @@ position: relative; overflow: hidden; display: block; - margin: 0; + margin: 0 -8px 0 -8px; padding: 0; &:focus { @@ -62,6 +64,9 @@ } } .slick-slide { + margin: 0 8px; + // width: 242px; + float: left; height: 100%; min-height: 1px; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..756f5f9 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,31 @@ /* _prateleira.scss */ +.footerCheckout__prateleira { + // estilos no _footer.scss +} + +.prateleira__carousel { + margin: 0; + list-style-type: none; +} + +.prateleira__item { + width: 242px; + height: 390px; + background: red; + + + &--image-container { + width: 242px; + height: 242px; + + img { + width: 242px; + height: 242px; + } + } + + &--description { + background: yellow; + } + +} diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..77b390c 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -2,7 +2,60 @@ MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no footer, deverá ser feito através de javaScript. -->