diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 32323a5..11d461d 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -1,3 +1,4 @@
+import { data } from "jquery";
import { waitElement } from "m3-utils";
export default class Footer {
@@ -5,60 +6,235 @@ export default class Footer {
this.init();
}
- payments() {
- this.paymentTypesIconsContainer.innerHTML = "";
- const paymentTypes = [
- "masterCardM3Academy",
- "visaM3Academy",
- "amexM3Academy",
- "eloM3Academy",
- "hiperCardM3Academy",
- "paypalM3Academy",
- "boletoM3Academy",
- ];
- paymentTypes.forEach((paymentType) => {
- const image = document.createElement("img");
- image.src = `https://agenciamagma.vteximg.com.br/arquivos/${paymentType}.png`;
- this.paymentTypesIconsContainer.appendChild(image);
- });
- }
-
async init() {
await this.selectors();
- this.payments();
- // this.onUpdate();
+ this.createPaymentsIcons();
+ this.createVtexpciIcon();
+ this.createDevIcons();
+ this.onUpdate();
+ this.events();
+ }
+
+ events() {
+ window.addEventListener("hashchange", () => {
+ if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+ this.listaPrateleira.style.display = "flex";
+ }
+ if (window.location.hash != "#/cart") {
+ this.listaPrateleira.style.display = "none";
+ }
+ });
+ addEventListener("resize", () => {
+ this.addCarrossel();
+ });
}
async selectors() {
- this.paymentTypesIconsContainer = await waitElement(
- ".footerCheckout__stamps li:first-of-type"
- );
- //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.checkoutVazio = await waitElement(".empty-cart-content");
+ this.checkoutAtivo = await waitElement(".checkout-container");
+ 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.titulo = await waitElement(".transactions-container");
+ this.cartTitulo = await waitElement("#cart-title");
+ this.titleSlick = await waitElement(".transactions-container");
}
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 list = this.listaPrateleira;
+ let cartTitle = this.cartTitulo;
+ let slickTitle = this.titleSlick;
+
+ if (target.style.display == "none" && window.location.hash == "#/cart") {
+ list.style.display = "flex";
+ list.style.display = "block";
+ this.fetchApi();
+ } else {
+ this.cartTitulo.style.display = "none";
+ list.style.display = "none";
+ }
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
+ if (!this.listaPrateleira.classList.contains("fetch")) {
+ this.fetchApi();
+ }
mutations.forEach(function (mutation) {
- console.log(mutation.type);
+ if (target.style.display != "none") {
+ list.style.display = "none";
+ cartTitle.style.display = "none";
+ if (list.style.display == "none") {
+ slickTitle.style.display = "none";
+ }
+ } else {
+ cartTitle.style.display = "block";
+ list.style.display = "flex";
+ }
});
});
- observer.observe(target, config);
+ observer.observe(target, config, cartTitle, slickTitle);
}
+
async addCarrossel() {
- const elemento = await waitElement("#my-element");
- $(elemento).slick({
- slidesToShow: 4,
- slidesToScroll: 1,
- });
+ const elemet = await waitElement(".slick-list");
+ if ($(elemet).hasClass("slick-initialized")) {
+ $(elemet).slick("unslick");
+ }
+ if (window.innerWidth > 1024) {
+ $(elemet).not(".slick-initialized").slick({
+ slidesToShow: 4,
+ slidesToScroll: 1,
+ });
+ } else if (window.innerWidth > 375) {
+ $(elemet).not(".slick-initialized").slick({
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ });
+ } else if (window.innerWidth <= 375) {
+ $(elemet).not(".slick-initialized").slick({
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ });
+ }
+ }
+
+ createPaymentsIcons() {
+ this.payments.innerHTML = `
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+
+ `;
+ }
+
+ createVtexpciIcon() {
+ this.vtexpci.innerHTML = `
+
+ 
+
+ `;
+ }
+
+ createDevIcons() {
+ this.devIncons.innerHTML = `
+
+
+ Powered By
+
+ 
+
+
+
+
+
+
+ Developed By
+
+ 
+
+
+
+ `;
+ }
+
+ async fetchApi() {
+ this.titulo.innerHTML = `
+ Você também pode gostar:
+ `;
+
+ fetch(
+ "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+ )
+ .then((response) => response.json())
+ .then((data) => {
+ const ul = document.createElement("ul");
+ ul.classList.add("slick-list");
+ this.listaPrateleira.appendChild(ul);
+
+ data.map((item) => {
+ let cores = "";
+ for (let i = 0; i < item.items.length; i++) {
+ cores += `${item.items[i].name}
`;
+ }
+ const li = document.createElement("li");
+ li.setAttribute("name", item.itemId);
+ li.classList.add("slick-list__itemList");
+
+ li.innerHTML = `
+
+ 
+
+ ${item.productName}
+
+ ${cores}
+
+ VER PRODUTO
+ `;
+ ul.appendChild(li);
+ this.listaPrateleira.classList.add("fetch");
+ });
+ })
+ .then(() => {
+ this.addCarrossel();
+ });
}
}
-
-// final