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

@@ -7,34 +7,195 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.onUpdate();
+        this.criaFooter();
+        this.criaPrateleira();
+        this.criaCarrossel();
     }
 
     async selectors() {
-        //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
+        // Containers
-        // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
+        this.containerMain = document.querySelector("body .container-main");
+        this.cartTemplate = document.querySelector(".cart-template");
+        this.checkoutContainer = document.querySelector(".checkout-container");
+        // Checkout
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.checkoutTitle = document.querySelector("#cart-title");
+        this.checkoutButton = document.querySelector("#cart-choose-products");
+        // Footer
+        this.checkoutAddress = document.querySelector(".footerCheckout__address");
+        this.cardsIcons = document.querySelector(".footerCheckout__stamps").firstElementChild;
+        this.vtexIcon = document.querySelector(".footerCheckout__stamps").lastElementChild;
+        this.poweredBy = document.querySelector(".footerCheckout__developedBy").firstElementChild;
+        this.developedBy = document.querySelector(".footerCheckout__developedBy").lastElementChild;
+        // Prateleira
+        this.prateleira = document.querySelector(".footerCheckout__prateleira");
     }
 
     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 containerMain = this.containerMain;
+        let cartTemplate = this.cartTemplate;
+        let checkoutContainer = this.checkoutContainer;
+        let checkoutTitle = this.checkoutTitle;
+        let checkoutButton = this.checkoutButton;
+        let prateleira = this.prateleira;
+
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                if (target.style.display != "none") {
+                    if (document.querySelector(".prateleiraTitle") != null) {
+                        document.querySelector(".prateleiraTitle").style.display = "none";
+                    }
+                    containerMain.style.display = "flex";
+                    containerMain.style.height = "100%";
+                    checkoutTitle.style.display = "none";
+                    checkoutButton.innerHTML = "Continuar comprando";
+                    cartTemplate.style.display = "flex";
+                    prateleira.style.display = "none";
+
+
+                } else {
+                    if (document.querySelector(".prateleiraTitle") != null) {
+                        document.querySelector(".prateleiraTitle").style.display = "block";
+                    }
+                    containerMain.style.display = "block";
+                    containerMain.style.height = "max-content";
+                    checkoutTitle.style.display = "block";
+                    cartTemplate.style.height = "max-content";
+                    cartTemplate.style.display = "block";
+                    prateleira.style.display = "block";
+
+                    if (window.location.hash != "#/cart") {
+                        checkoutTitle.style.display = "none";
+                        prateleira.style.display = "none";
+                    }
+
+                    if (window.location.hash == "#/email") {
+                        containerMain.style.height = "100%";
+                        checkoutContainer.style.overflow = "initial"
+                    }
+                }
             });
         });
 
         observer.observe(target, config);
     }
-    async addCarrossel() {
+
-        const elemento = await waitElement("#my-element");
+    criaFooter() {
-        $(elemento).slick({
+        this.checkoutAddress.innerHTML = `
-            slidesToShow: 4,
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-            slidesToScroll: 1,
+        `;
-        });
+
+        this.cardsIcons.innerHTML = `
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/mastercardM3Academy.png" alt="Mastercard">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Visa">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Amex">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto">
+            </figure>
+        `;
+
+        this.vtexIcon.innerHTML = `
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="VTEX PCI">
+            </figure>
+        `;
+
+        this.poweredBy.innerHTML = `
+            <div>
+                <p>Powered By</p>
+
+                <figure>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX">
+                </figure>
+            </div>
+        `;
+
+        this.developedBy.innerHTML = `
+            <div>
+                <p>Developed By</p>
+
+                <figure>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3 Academy">
+                </figure>
+            </div>
+        `;
+    }
+
+    async criaPrateleira() {
+        const urlAPI =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+
+        let prateleira = this.prateleira;
+
+        prateleira.innerHTML = `
+            <h2 class="prateleiraTitle">Você também pode gostar:</h2>
+            <ul class="carrossel-items"></ul>
+        `;
+
+        fetch(urlAPI)
+            .then((response) => {
+                return response.json();
+            })
+
+            .then((data) => {
+                return data.map((product) => {
+                    let li = document.createElement("li");
+                    li.setAttribute("id", product.productId);
+                    li.innerHTML = `
+                        <img src="${product.items[0].images[0].imageUrl}" alt="${
+                        product.productName
+                    }"/>
+
+                        <p class="product-name">${product.productName}</p>
+
+                        <div class="product-variation">${product.items
+                            .map((name) => {
+                                return `<a name="product-variation__item" class="product-variation__item">${name.name}</a>`;
+                            })
+                            .join("")}
+                        </div>
+
+                        <button class="product-button">Ver produto</button>
+                    `;
+                    prateleira.children[1].appendChild(li);
+                });
+            });
+    }
+
+    async criaCarrossel() {
+        const prateleira = await waitElement(".carrossel-items");
+
+        setTimeout(() => {
+            $(prateleira).slick({
+                slidesToShow: 4,
+                slidesToScroll: 1,
+                autoplay: true,
+                autoplaySpeed: 2000,
+            });
+        }, 600);
     }
 }

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

@@ -1,23 +1,52 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    figure {
-    color: $color-gray2;
+        margin: 0;
+    }
+
+    ul {
+        padding: 0;
+        margin: 0 0 0 0;
+    }
+
+    p {
+        margin: 0;
+    }
 
     &__wrapper {
-        align-items: center;
+        .container {
-        display: flex;
+            border-top: 1px solid $color-black2;
-        justify-content: space-between;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 95%;
+            padding: 23px 32px;
+
+            @include mq(xl, min) {
+                padding: 29px 63px;
+            }
+        }
+
+        .container::before,
+        .container::after {
+            display: none;
+        }
     }
 
     &__address {
-        color: $color-gray2;
         font-family: $font-family;
-        font-style: normal;
-        font-weight: normal;
         font-size: 10px;
-        line-height: 12px;
+        font-weight: 400;
+        line-height: 14px;
+        color: $color-black1;
         text-transform: capitalize;
-        max-width: 40%;
+        max-width: 269px;
+
+        @include mq(xl, min) {
+            font-size: 20px;
+            line-height: 27px;
+            max-width: 537px;
+        }
 
         @include mq(md, max) {
             margin-bottom: 24px;
@@ -31,40 +60,103 @@
         justify-self: center;
         list-style: none;
 
+        li {
+            display: flex;
+        }
+
+        li:nth-child(1) {
+            display: flex;
+        }
+
+        li:last-child {
+            img {
+                max-width: 53px;
+                height: 33px;
+                margin: 0 0 0 10px;
+
+                @include mq(xl, min) {
+                    max-width: 103px;
+                    height: 64px;
+                }
+            }
+        }
+
+        img {
+            height: 20px;
+            max-width: 34px;
+            margin-right: 13px;
+
+            @include mq(xl, min) {
+                max-width: 69px;
+                height: 39px;
+            }
+        }
+
         @include mq(md, max) {
             align-self: center;
             margin-bottom: 12px;
         }
 
         &__divider {
-            background-color: $color-gray4;
-            display: inline-block;
-            height: 24px;
-            margin: 0 8px;
             width: 1px;
+            height: 24px;
+            background-color: $color-gray6;
+
+            @include mq(xl, min) {
+                height: 43px;
+            }
         }
     }
 
     &__developedBy {
-        align-items: center;
         display: flex;
+        align-items: center;
         list-style-type: none;
         margin: 0;
 
-        li:last-child {
+        li {
             margin-left: 16px;
+            img {
+                margin-left: 11px;
+            }
         }
 
-        a {
+        li:first-child {
-            align-items: center;
+            img {
-            color: $color-gray2;
+                max-width: 44px;
+                height: 16px;
+
+                @include mq(xl, min) {
+                    max-width: 87px;
+                    height: 31px;
+                }
+            }
+        }
+
+        li:last-child {
+            img {
+                max-width: 28px;
+                height: 15px;
+
+                @include mq(xl, min) {
+                    max-width: 55px;
+                    height: 30px;
+                }
+            }
+        }
+
+        div {
             display: flex;
+            align-items: center;
             font-family: $font-family;
-            font-style: normal;
+            font-size: 9px;
-            font-weight: normal;
+            font-weight: 400;
-            font-size: 10px;
+            color: $color-black1;
-            line-height: 12px;
+
-            text-decoration: none;
+            @include mq(xl, min) {
+                font-size: 18px;
+                line-height: 25px;
+            }
 
             span {
                 margin-right: 8px;