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

@@ -7,19 +7,22 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        // this.requestApi();
+        this.creatPaymentsIcons();
+        this.creatVtexIconPci();
+        this.creatDevIconsM3();
+
     }
 
     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.divPrateleira = await waitElement('.footerCheckout__prateleira');
+        this.payments = await waitElement('.footerCheckout__payments');
+        this.vtexIconPci = await waitElement('.footerCheckout__vtexpci');
+        this.devIcons = await waitElement('.footerCheckout__developedBy');
     }
 
     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) => {
@@ -37,4 +40,76 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
+    requestApi () {
+        this.divPrateleira.innerHTML =
+        `<h3>Você também pode gostar:</h3>
+        <ul class="ulProduct"></ul>
+        `
+        const api = 'https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319';
+        let itemStrutucture = '';
+        const ulProdut = document.querySelectorAll('.ulProdut');
+
+        fetch(api)
+        .then((response) => {
+           return response.json();
+        })
+        .then((data) => {
+            data.forEach((prod) => {
+                itemStrutucture += `
+                `
+            })
+        });
+
+        ulProdut = itemStrutucture;
+    };
+
+    creatPaymentsIcons () {
+        this.payments.innerHTML = `
+        <ul class="footerCheckout__container-ul">
+            <li class="footerCheckout__wrapper-li">
+                <figure class="footerCheckout__figure-img-tickets">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard"/>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="AmericaExpress"/>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="VisaCard"/>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard"/>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"/>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"/>
+                </figure>
+            </li>
+        </ul>`;
+    }
+
+    creatVtexIconPci () {
+        this.vtexIconPci.innerHTML = `
+       <ul class="footerCheckout__container-ul">
+            <li class="footerCheckout__wrapper-li">
+                <figure class="footerCheckout__figure-img-vtex">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo Vtex"/>
+                </figure>
+            </li>
+       </ul>`
+    }
+
+    creatDevIconsM3 () {
+        this.devIcons.innerHTML = `
+        <li class="footerCheckout__container-li-m3Icon">
+            <a href="https://vtex.com/br-pt/">
+                <span>Powered By</span>
+                    <figure class="footerCheckout__figure-img-vtexIcon">
+                        <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="LogoVTEX">
+                    </figure>
+            </a>
+        </li>
+        <li class="footerCheckout__container-li-m3Icon">
+            <a href="https://agenciam3.com/">
+                <span>Developed By</span>
+                    <figure class="footerCheckout__figure-img-m3Icon">
+                        <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3">
+                    </figure>
+            </a>
+        </li>`
+    }
 }

checkout/src/arquivos/sass/checkout.scss

@@ -1,5 +1,6 @@
 @import "./utils/all";
 @import "./lib/slick";
 @import "./partials/header";
+@import "./partials/prateleira.scss";
 @import "./partials/footer";
 @import "./checkout/checkout.scss";

checkout/src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -34,5 +34,6 @@
 				background: lighten($color-black, 5);
 			}
 		}
+
 	}
 }

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -8,8 +8,11 @@ html {
     min-height: 100%;
 }
 
+footer {
+    margin-top: auto;
+}
+
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
     margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,

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

@@ -7,6 +7,8 @@
         align-items: center;
         display: flex;
         justify-content: space-between;
+        border-top: 1px solid $color-black-500;
+        padding: 18px 32px 16px;
     }
 
     &__address {
@@ -71,4 +73,31 @@
             }
         }
     }
+    .container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    &__container-ul {
+        list-style-type: none;
+    }
+    &__figure-img-tickets img {
+        width: 35.65px;
+        height: 20px;
+    }
+
+    &__figure-img-vtex img {
+        width: 53px;
+    }
+
+    &__figure-img-vtexIcon img {
+        width: 44.92px;
+    }
+    &__figure-img-m3Icon img {
+        width: 28.66px;
+    }
+
+
 }