diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ba51747..ec5c645 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -13,8 +13,12 @@ export default class Footer { async init() { await this.selectors(); - this.innerToPayments(); - this.innerDevelopedBy(); + + this.createdToPaymentsInFooter(); + this.createdToDevelopedBy(); + + this.onloadWindowVerificatedShelf(); + this.onUpdate(); } @@ -25,55 +29,55 @@ export default class Footer { this.paymentContainer = await waitElement(".footerCheckout__stamps"); this.developedByContainer = await waitElement(".footerCheckout__developedBy"); this.checkoutContainer = await waitElement(".container-main"); - this.self = await waitElement(".footerCheckout__prateleira"); + this.shelf = await waitElement(".footerCheckout__prateleira"); } - innerToPayments() { - if (this.paymentContainer) { - const payments = this.paymentContainer.children[0].children[0]; - const vericatedVtex = this.paymentContainer.children[2].children[0]; + createdToPaymentsInFooter() { + if (this.isExistElement(this.paymentContainer)) { + const paymentCreditContent = this.paymentContainer.children[0].children[0]; + const verificatedVtexPCI = this.paymentContainer.children[2].children[0]; - if (payments && vericatedVtex) { - let structure = ""; - const paymentsTypes = [ - "masterCard", - "visa", - "amex", - "elo", - "hiperCard", - "payPal", - "boleto", - ]; + let verifacatedContents = + this.isExistElement(paymentCreditContent) && + this.isExistElement(verificatedVtexPCI); - paymentsTypes.forEach( - (payment) => - (structure += `
  • ${insertImage( - payment, - 'class="footerCheckout__creditImage"' - )}
  • `) - ); - - payments.innerHTML = ``; - - vericatedVtex.innerHTML = insertImage( + if (verifacatedContents) { + let creditStructure = ""; + let verificatedVtexStructure = insertImage( "vtexPCI", 'class="footerCheckout__verificatedVtex"' ); + + let creditTypes = this.creditPaymentsName(); + + creditTypes.forEach((creditType) => { + creditStructure += `
  • ${insertImage( + creditType, + 'class="footerCheckout__creditImage"' + )}
  • `; + }); + + paymentCreditContent.innerHTML = ``; + verificatedVtexPCI.innerHTML = verificatedVtexStructure; } } } - innerDevelopedBy() { - if (this.developedByContainer) { - const poweredBy = this.developedByContainer.children[0].children[0]; - const developedBy = this.developedByContainer.children[1].children[0]; + createdToDevelopedBy() { + if (this.isExistElement(this.developedByContainer)) { + const poweredByContent = this.developedByContainer.children[0].children[0]; + const developedByContent = this.developedByContainer.children[1].children[0]; - if (poweredBy && developedBy) { - poweredBy.innerHTML = `Powered By${insertImage( + let verificatedContents = + this.isExistElement(poweredByContent) && this.isExistElement(developedByContent); + + if (verificatedContents) { + poweredByContent.innerHTML = `Powered By${insertImage( "logoVTEX", 'class="footerCheckout__logo footerCheckout__logo--vtex"' )}`; - developedBy.innerHTML = `Developed By${insertImage( + + developedByContent.innerHTML = `Developed By${insertImage( "logoM3", 'class="footerCheckout__logo footerCheckout__logo--m3"' )}`; @@ -81,52 +85,51 @@ export default class Footer { } } + onloadWindowVerificatedShelf() { + let checkoutEmpty = this.checkoutEmpty; + let checkoutContainer = this.checkoutContainer; + + if (checkoutEmpty.style.display === "none") { + this.addClassToElement(checkoutContainer, "container-cart-fill"); + } else { + this.removeClassToElement(checkoutContainer, "container-fill"); + } + + if ( + this.getElementClass(checkoutContainer, "container-cart-fill") && + this.getElementClass(checkoutContainer, "container-cart") && + window.location.href.endsWith("#/cart") + ) { + this.createdInitialShelfList(); + this.createdProductsToShelf(); + this.addCarrossel(); + } else { + this.shelf.innerHTML = ""; + } + } + 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 - if (this.checkoutEmpty && this.checkoutContainer) { - if (this.checkoutEmpty.style.display === "none") { - this.checkoutContainer.classList.add("container-cart-fill"); - } else { - this.checkoutContainer.classList.remove("container-fill"); - } - - if ( - this.checkoutContainer.classList.contains("container-cart-fill") && - this.checkoutContainer.classList.contains("container-cart") && - window.location.href.endsWith("#/cart") - ) { - this.innerSelfList(); - this.innerToSelf(); - this.addCarrossel(); - } else { - this.self.innerHTML = ""; - } + let verificatedContents = + this.isExistElement(this.checkoutEmpty) && this.isExistElement(this.checkoutContainer); + if (verificatedContents) { let target = this.checkoutEmpty; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { + /* prettier-ignore */ for (let i = 0; i < mutations.length; i++) { if (mutations[i].attributeName === "style") { if (this.checkoutEmpty.style.display === "none") { - this.checkoutContainer.classList.add("container-cart-fill"); + this.addClassToElement(this.checkoutContainer, "container-cart-fill"); } else { - this.checkoutContainer.classList.remove("container-cart-fill"); + this.removeClassToElement(this.checkoutContainer,"container-cart-fill"); } - if ( - this.checkoutContainer.classList.contains("container-cart-fill") && - this.checkoutContainer.classList.contains("container-cart") && - window.location.href.endsWith("#/cart") - ) { - this.innerSelfList(); - this.innerToSelf(); - this.addCarrossel(); - } else { - this.self.innerHTML = ""; - } + this.onloadWindowVerificatedShelf(); break; } @@ -135,24 +138,12 @@ export default class Footer { observer.observe(target, config); - window.addEventListener("hashchange", () => { - if ( - this.checkoutContainer.classList.contains("container-cart-fill") && - this.checkoutContainer.classList.contains("container-cart") && - window.location.href.endsWith("#/cart") - ) { - this.innerSelfList(); - this.innerToSelf(); - this.addCarrossel(); - } else { - this.self.innerHTML = ""; - } - }); + window.addEventListener("hashchange", this.onloadWindowVerificatedShelf.bind(this)); } } addCarrossel() { - $(this.self.children[1]).slick({ + $(this.shelf.children[1]).slick({ slidesToShow: 4, slidesToScroll: 1, arrows: true, @@ -174,24 +165,26 @@ export default class Footer { }); } - async getProducts() { + async requestAPIProducts() { let url = (name) => { let domain = "https://m3academy.myvtex.com/"; return domain + name; }; - let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319")); + let featchProducts = fetch( + url("api/catalog_system/pub/products/search/?fq=productClusterIds:319") + ); - let response = await API.then((res) => res.json()); + let response = await featchProducts.then((res) => res.json()); return response; } - async innerToSelf() { - let datas = await this.getProducts(); + async createdProductsToShelf() { + let datas = await this.requestAPIProducts(); datas.forEach(() => { - $(this.self.children[1]).slick("unslick"); + $(this.shelf.children[1]).slick("unslick"); this.createdCardsProducts(datas); @@ -231,16 +224,47 @@ export default class Footer { `; }); - this.self.children[1].innerHTML = ` + this.shelf.children[1].innerHTML = ` ${structure.trim()} `; } - innerSelfList() { - this.self.innerHTML = ` + createdInitialShelfList() { + this.shelf.innerHTML = `

    Você também pode gostar:

    - `; + + `; + } + + addClassToElement(element, name) { + element.classList.add(name); + } + + removeClassToElement(element, name) { + element.classList.remove(name); + } + + getElementClass(element, name) { + return element.classList.contains(name); + } + + isExistElement(element) { + return !!element; + } + + creditPaymentsName() { + const creditPaymentsTypes = [ + "masterCard", + "visa", + "amex", + "elo", + "hiperCard", + "payPal", + "boleto", + ]; + + return creditPaymentsTypes; } }