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

@@ -3,21 +3,94 @@ import { waitElement } from "m3-utils";
 export default class Footer {
     constructor() {
         this.init();
+        this.footerHTML();
+        this.addCarrossel();
+
     }
 
     async init() {
         await this.selectors();
+        this.footerHTML();
+        this.addCarrossel();
         // 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.footerPrateleira = await waitElement(".footerCheckout__prateleira");
+        this.footerAdress = await waitElement(".footerCheckout__address");
+        this.footerStamps = await waitElement(".footerCheckout__stamps");
+        this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
+
+
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        console.log(this.checkoutVazio)
+    }
+    footerHTML() {
+        const footerPrat = this.footerPrateleira
+        const textAdress = this.footerAdress;
+        const iconCard = this.footerStamps;
+        const developedBy = this.footerDevelopedBy;
+
+
+        footerPrat.innerHTML = `
+        <h2>Você Também pode gostar:</h2>
+        <ul class="container-carousel-item"></ul>
+        `
+
+        fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
+            .then((resp) => resp.json())
+            .then(function (data) {
+
+                return data.map(function (product) {
+                    const li = document.createElement("li")
+                    li.setAttribute("id", product.productId)
+                    li.innerHTML = `
+                <figure>
+                    <img src="${product.items[0].images[0].imageUrl}" alt="Imagem ${product.productName}" />
+                    <figcaption>${product.productName}</figcaption>
+                </figure>
+                <div>
+                    <label name="tamanho">
+                        ${product.items.name}
+                    </label>
+                    <input name="tamanho" type="radio"/>
+                </div>
+                <div>
+                    <button> </button>
+                </div>
+            `
+                    footerPrat.children[1].appendChild(li)
+                    console.log(footerPrat.children[1])
+                })
+            })
+
+
+        textAdress.innerHTML = `
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
+        `
+
+        iconCard.innerHTML = `
+        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Imagem Master Card"/></li>
+        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Imagem Visa Card"/></li>
+        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Imagem American Express"/></li>
+        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Imagem Elo Card"/></li>
+        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Imagem Hiper Card"/></li>
+        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Imagem PayPal"/></li>
+        <li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Imagem Boleto"/></li>
+        <li><span class="footerCheckout__stamps__divider"> </span></li>
+        <li class="footerCheckout__stamps__item"><img class="iconVtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Imagem Vtex" /></li>
+        `
+        developedBy.innerHTML = `
+            <li class="footerCheckout__developedBy__item-Vtex"><p>Powered By</p><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Imagem VTEX"/> </li>
+            <li class= "footerCheckout__developedBy__item-M3"><p>Developed By</p><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt"Imagem M3"/> </li>
+        `
     }
 
+
     onUpdate() {
-        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        // 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;
@@ -30,11 +103,13 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".container-carousel-item");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            arrows: true,
         });
     }
 }

checkout/src/arquivos/js/components/Header.js

@@ -30,12 +30,11 @@ export default class Header {
                     <li></li>
                     <li></li>
                 </ul>
-
             `
         }
         if (this.progressBar && window.innerWidth <= 1024) {
             this.progressBar.innerHTML = ``;
         }
-    }
+    };
 
 }

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

@@ -1,73 +1,100 @@
-/* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    padding: 0 16px;
-    color: $color-gray2;
+    position: relative;
+
+    .container {
+        display: flex;
+        margin: 16px 0;
+        width: 100% !important;
+    }
 
     &__wrapper {
-        align-items: center;
+        width: 100% !important;
-        display: flex;
+        border-top: solid 1px $black-padrao;
-        justify-content: space-between;
+        position: fixed;
+        bottom: 0;
+        left: 0;
     }
 
     &__address {
-        color: $color-gray2;
+        display: flex;
-        font-family: $font-family;
+        align-items: center;
-        font-style: normal;
+        padding-left: 16px;
-        font-weight: normal;
+        p {
-        font-size: 10px;
+            margin: 0;
-        line-height: 12px;
+            height: 14px;
-        text-transform: capitalize;
+            font-weight: 400;
-        max-width: 40%;
+            font-size: 10px;
-
+            line-height: 14px;
-        @include mq(md, max) {
+            text-transform: capitalize;
-            margin-bottom: 24px;
+            color: $color-black;
-            max-width: 100%;
+            font-family: $font-family;
         }
     }
 
     &__stamps {
-        align-items: center;
+        margin: 0 auto;
         display: flex;
-        justify-self: center;
+        align-items: center;
         list-style: none;
+        width: 32.4%;
 
-        @include mq(md, max) {
+        &__item {
-            align-self: center;
+            margin-right: 13px;
-            margin-bottom: 12px;
+
+            img {
+                width: 100%;
+                height: 20px;
+                object-fit: cover;
+            }
+        }
+
+        .iconVtex {
+            height: 33px;
         }
 
         &__divider {
-            background-color: $color-gray4;
-            display: inline-block;
-            height: 24px;
-            margin: 0 8px;
             width: 1px;
+            height: 24px;
+            margin: 0 10px 0 0;
+            border: 1px solid $color-gray-100;
         }
     }
 
     &__developedBy {
-        align-items: center;
-        display: flex;
-        list-style-type: none;
         margin: 0;
+        display: flex;
+        list-style: none;
+        padding-right: 16px;
 
-        li:last-child {
+        &__item-Vtex {
-            margin-left: 16px;
+            display: flex;
+            align-items: center;
+            margin-right: 16.75px;
+            p {
+                margin: 0 10.1px 0 0;
+                font-weight: 400;
+                font-size: 9px;
+                line-height: 12px;
+                color: $color-black;
+                font-family: $font-family;
+            }
+
+            img {
+                height: 16px;
+            }
         }
 
-        a {
+        &__item-M3 {
-            align-items: center;
-            color: $color-gray2;
             display: flex;
-            font-family: $font-family;
+            align-items: center;
-            font-style: normal;
+            p {
-            font-weight: normal;
+                margin: 0 11px 0 0;
-            font-size: 10px;
+                font-size: 9px;
-            line-height: 12px;
+            }
-            text-decoration: none;
 
-            span {
+            img {
-                margin-right: 8px;
+                height: 16px;
             }
         }
     }