checkout/src/arquivos/js/components/Footer.js

@@ -7,19 +7,32 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+
+        /*if (window.location.hash === "#/cart") {
+            this.onUpdate();
+        }*/
+
+        this.requestAPI();
+        this.prateleiraItem = await waitElement(".prateleira__ul");
+        this.events();
+        this.onUpdate();
+        //await this.addCarrossel();
         this.paymentsIconsHTML();
         this.vtexPciIconHTML();
         this.developedByLogoHTML();
-        // this.onUpdate();
     }
 
     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.checkoutVazio = await waitElement(".empty-cart-content");
         this.payments = await waitElement(".footerCheckout__payments");
         this.vtexPCI = await waitElement(".footerCheckout__vtexpci");
         this.developedBy = await waitElement(".footerCheckout__developedBy");
+        this.cartTitle = await waitElement("#cart-title");
+
+        this.prateleira = await waitElement(".footerCheckout__prateleira", {
+            timeout: 5000,
+            interval: 1,
+        });
     }
 
     paymentsIconsHTML() {
@@ -72,26 +85,127 @@ export default class Footer {
         }
     }
 
+    hashCgange(e) {
+        if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
+            this.prateleira.classList.add("desativado");
+        }else {
+            this.prateleira.classList.remove("desativado");
+        }
+    }
+
+    events() {
+        window.addEventListener("hashchange", this.hashCgange.bind(this));
+    }
+
     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 config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
+            mutations.map((mutation) => {
-                console.log(mutation.type);
+
-            });
+                const status = mutation.target.attributes.style.nodeValue;
+
+                if (status == "display:none;") {
+                    this.requestAPI();
+                } else if (status == "display:block;") {
+                    this.removePrateleira();
+                }
+
             });
 
             observer.observe(target, config);
+        });
+    }
+
+    requestAPI() {
+        this.prateleira.innerHTML = `
+        <h3 class="prateleira__title">Você também pode gostar:</h3>
+        <ul class="prateleira__ul" id="prateleira__ul"></ul>
+        `;
+
+        const api =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+        const products = document.querySelector(".prateleira__ul");
+
+        fetch(api)
+            .then((response) => {
+                return response.json();
+            })
+
+            .then((data) => {
+                data.forEach((item) => {
+                    const imgProduct = item.items[0].images[0].imageUrl;
+                    const nameProduct = item.productName;
+                    const linkProduct = item.link;
+
+                    products.innerHTML += `
+                <li class="prateleira__li">
+                    <figure class="prateleira__image">
+                        <img src="${imgProduct}" alt="Imagem do Produto" />
+                    </figure>
+
+                    <div class="prateleira__text">
+                        <h2>${nameProduct}</h2>
+
+                        <ul>
+                            ${item.items.map((name) => `<li>${name.name}</li>`).join("")}
+                        </ul>
+
+                        <a href="${linkProduct}">
+                            Ver Produto
+                        </a>
+                    </div>
+                </li>
+                `;
+                });
+            })
+
+            .then(() => {
+                this.addCarrossel();
+            });
+    }
+
+    removePrateleira() {
+        this.requestAPI.innerHTML = "";
     }
 
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const prateleiraItem = await waitElement("#prateleira__ul");
-        $(elemento).slick({
+
+        $(prateleiraItem).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            infinite: false,
+            arrows: true,
+            responsive: [
+                {
+                  breakpoint: 1170,
+                  settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                    infinite: false,
+                    arrows: true,
+                  }
+                },
+                {
+                  breakpoint: 925,
+                  settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1,
+                    infinite: false,
+                    arrows: true,
+                  }
+                },
+                {
+                  breakpoint: 635,
+                  settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                    infinite: false,
+                    arrows: true,
+                  }
+                }
+              ]
         });
     }
 }

checkout/src/arquivos/sass/lib/_slick.scss

@@ -99,6 +99,12 @@
 .slick-arrow {
     font-size: 0;
     position: absolute;
+    border: none;
+    top: 170px;
+
+    @include mq(xg, min) {
+        top: 280px;
+    }
 }
 .slick-prev {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
@@ -107,8 +113,11 @@
     left: 10px;
 }
 .slick-next {
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
+        no-repeat center center;
     z-index: 4;
     right: 10px;
+    transform: rotateY(180deg);
 }
 .slick-arrow.slick-hidden {
     display: none;

checkout/src/arquivos/sass/partials/_prateleira.scss

@@ -1 +1,143 @@
 /* _prateleira.scss */
+
+.footerCheckout__prateleira {
+    width: 79.375%;
+
+    @include mq(xg, min) {
+        width: 79.76%;
+    }
+
+    .prateleira {
+        &__title {
+            font-family: $font-family-secundary;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 38px;
+            color: $color-black2;
+            text-align: center;
+
+            @include mq(xg, min) {
+                font-size: 48px;
+                line-height: 76px;
+            }
+        }
+
+        &__ul {
+            display: flex;
+            justify-content: center;
+            margin: 0;
+            gap: 16px;
+
+            @include mq(xg, min) {
+                gap: 19px;
+            }
+        }
+
+        &__li {
+            width: 242px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            
+            @include mq(xg, min) {
+                width: 485px;
+            }
+        }
+        
+        &__image {
+            width: 242px;
+            height: auto;
+            margin-bottom: 20px;
+            margin-inline-start: 0px;
+            margin-inline-end: 0px;
+
+            @include mq(xg, min) {
+                width: 485px;
+                margin-bottom: 21px;
+            }
+        }
+
+        &__text {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            h2 {
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 13px;
+                line-height: 18px;
+                color: $color-black2;
+                text-align: center;
+                margin: 0;
+
+                @include mq(xg, min) {
+                    font-size: 26px;
+                    line-height: 35px;
+                }
+            }
+            
+            a {
+                background-color: $color-blue2;
+                border-radius: 8px;
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 13px;
+                line-height: 18px;
+                color: $color-white;
+                letter-spacing: 0.05em;
+                width: 242px;
+                height: 42px;
+                padding: 12px 72px;
+                text-align: center;
+                white-space: nowrap;
+                text-transform: uppercase;
+                cursor: pointer;
+                margin-bottom: 56px;
+
+                @include mq(xg, min) {
+                    width: 485px;
+                    height: 59px;
+                    font-size: 26px;
+                    line-height: 35px;
+                    padding: 12px 0 12px 0;
+                }
+            }
+            
+            ul {
+                display: flex;
+                width: fit-content;
+                gap: 10px;
+                margin: 20px 0 20px 0;
+                
+                li {
+                    background-color: $color-blue2;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+                    font-family: $font-family;
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 13px;
+                    line-height: 18px;
+                    color: $color-white;
+                    letter-spacing: 0.05em;
+                    padding: 5px;
+                    text-align: center;
+                    text-transform: uppercase;
+
+                    @include mq(xg, min) {
+                        height: 45px;
+                        font-size: 26px;
+                        line-height: 35px;
+                        padding: 8px 5px;
+                    }
+                }
+            }
+        }
+    }
+}