From 6bf66ea9c0051aa1486f666a505c6a40ab478022 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:29:01 -0300 Subject: [PATCH] feat(jsComponents):Adiciona metodos necessario nos scripts do components --- .../src/arquivos/js/components/CheckoutUI.js | 14 +- checkout/src/arquivos/js/components/Footer.js | 266 +++++++++++++++++- checkout/src/arquivos/js/components/Header.js | 164 ++++++++++- checkout/src/arquivos/sass/checkout.scss | 1 + 4 files changed, 419 insertions(+), 26 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..3675c2e 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -31,10 +31,7 @@ export default class CheckoutUI { toggleFooterDropdown(event) { event.target.classList.toggle("closed"); - - event.target.nextElementSibling.classList.toggle( - "dropdown__content--closed" - ); + event.target.nextElementSibling.classList.toggle("dropdown__content--closed"); } init() { @@ -56,14 +53,7 @@ export default class CheckoutUI { resizeImages() { $(".product-image img").each((i, el) => { const $el = $(el); - $el.attr( - "src", - alterarTamanhoImagemSrcVtex( - $el.attr("src"), - this.width, - this.height - ) - ); + $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height)); }); } } diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..3c3f115 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,276 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.events(); + this.onUpdate(); + this.createPaymentsIcons(); + this.createVtexpciIcon(); + this.createDevIcons(); + // await this.addCarrossel(); + } + + events() { + window.addEventListener("hashchange", () => { + this.onUpdate(); + if (window.location.hash != "#/cart") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "none"; + } + + this.cartTitle.style.display = "none"; + } + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "block"; + } + this.cartTitle.style.display = "block"; + } + console.log("HASHCHANGE FOOTER"); + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + this.list.style.display = "flex"; + } + if (window.location.hash != "#/cart") { + this.list.style.display = "none"; + } + }); + addEventListener("resize", () => { + this.addCarrossel(); + }); } async selectors() { //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.list = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000, + }); + // this.slick = await waitElement(".slick-test"); + // this.footerTitle = await waitElement(".footerTitle", { + // timeout: 5000, + // interval: 1000, + // }); + this.allList = await waitElement(".footerCheckout"); this.checkoutVazio = await waitElement(".empty-cart-content"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexpci = await waitElement(".footerCheckout__vtexpci"); + this.devIncons = await waitElement(".footerCheckout__developedBy"); + this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); + this.cartTitle = await waitElement("#cart-title"); } 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 - // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver let target = this.checkoutVazio; + let lista = this.list; + + let cartTitle = this.cartTitle; + console.log("title:", cartTitle); + if (target.style.display == "none" && window.location.hash == "#/cart") { + lista.style.display = "flex"; + cartTitle.style.display = "block"; + if (!this.list.classList.contains("fetch")) { + console.log("PRIMEIRO NAO TEM FETCH"); + this.fetchApiData(); + } + } else { + lista.style.display = "none"; + cartTitle.style.display = "none"; + } let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); + if (window.location.hash == "#/cart") { + console.log("listairai", this.list.classList); + if (!lista.classList.contains("fetch")) { + console.log("SEGUNDO NAO TEM FETCH"); + this.fetchApiData(); + } + mutations.forEach(function (mutation) { + if (target.style.display != "none") { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "none"; + } + cartTitle.style.display = "none"; + lista.style.display = "none"; + } else { + if (document.querySelector(".footerTitle") != null) { + document.querySelector(".footerTitle").style.display = "block"; + } + lista.style.display = "flex"; + cartTitle.style.display = "block"; + } + console.log(mutation.type); + }); + } }); observer.observe(target, config); } + async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + console.log("start slick"); + const elemento = await waitElement(".slick-test"); + if ($(elemento).hasClass("slick-initialized")) { + $(elemento).slick("unslick"); + } + if (window.innerWidth > 1024) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 4, + slidesToScroll: 1, + }); + } else if (window.innerWidth > 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 3, + slidesToScroll: 1, + }); + } else if (window.innerWidth <= 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 2, + slidesToScroll: 1, + }); + } + + console.log("end slick"); + } + + fetchApiData() { + console.log("COMEÇO FETCH"); + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => { + console.log(data); + const ul = document.createElement("ul"); + + ul.classList.add("slick-test"); + this.list.appendChild(ul); + const footerCheckout = document.querySelector(".footerCheckout"); + const footerTitle = document.createElement("p"); + footerTitle.classList.add("footerTitle"); + footerTitle.innerText = "Você também pode gostar:"; + footerCheckout.insertBefore(footerTitle, this.list); + data.map((item) => { + let colors = ""; + for (let i = 0; i < item.items.length; i++) { + console.log(colors); + colors += `

${item.items[i].name}

`; + } + const li = document.createElement("li"); + li.setAttribute("name", item.itemId); + li.classList.add("itemList"); + li.innerHTML = ` +

${item.productName}

+
+ ${colors} +
+ VER PRODUTO`; + console.log(item.productName, colors); + console.log("adiciona li"); + ul.appendChild(li); + this.list.classList.add("fetch"); + console.log(this.list); + ul.style.width = "100%"; + }); + }) + .then(() => { + this.addCarrossel(); + }); + console.log("FIM FETCH"); + } + + createPaymentsIcons() { + this.payments.innerHTML = ` + + `; + } + + createVtexpciIcon() { + this.vtexpci.innerHTML = ` +
+ +
+ `; + } + + createDevIcons() { + this.devIncons.innerHTML = ` +
  • + + Powered By +
    + +
    +     +
    • + +
  • + + Developed By +
    + +
    +     +
    • + `; } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..bfa1e44 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,174 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.events(); + this.createProgressBar(); + await this.progressBarProgress(); } async selectors() { - this.item = await waitElement("#my-element", { + this.item = await waitElement("#progressBar", { //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); + this.header = await waitElement(".headerCheckout"); + this.progressBar = await waitElement("#progressBar"); + } + events() { + addEventListener("resize", () => { + this.createProgressBar(); + this.progressBarProgress(); + }); + } + createProgressBar() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + `; + } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } + } + async progressBarProgress() { + this.circle1 = await waitElement(".progress-bar-circle-1"); + this.circle2 = await waitElement(".progress-bar-circle-2"); + this.circle3 = await waitElement(".progress-bar-circle-3"); + if (this.progressBar && window.innerWidth > 1024) { + const progressBarList = document.querySelectorAll("#progressBar ul li"); + progressBarList.forEach((li) => { + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (this.circle1) { + this.circle1.classList.add("active"); + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping" + ) { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + console.log("email shipping"); + console.log(this.circle1); + if (this.circle2) { + this.circle2.classList.add("active"); + console.log("teste dados"); + } + console.log(this.circle2); + console.log(this.circle3); + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + this.circle3.classList.add("active"); + } + } + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (this.circle1) { + this.circle1.classList.add("active"); + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } else if ( + window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping" + ) { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + this.circle2.classList.add("active"); + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } else if (window.location.hash == "#/payment") { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + this.circle3.classList.add("active"); + } + } + }); + }); + } } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..deb107c 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.scss"; @import "./checkout/checkout.scss";