footer-1280

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

@@ -7,6 +7,9 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        this.icons();
+        this.vtexIcon();
+        this.poweredDevelopeIcon();
         // this.onUpdate();
     }
 
@@ -14,27 +17,85 @@ export default class Footer {
         //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.devIncons = await waitElement(".footerCheckout__developedBy");
     }
 
-    onUpdate() {
+    icons() {
-        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        this.payments.innerHTML = `
-        // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
+            <ul class="payments-icons-wrapper">
-        // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
+                <li>
-        let target = this.checkoutVazio;
+                    <img class="img-payments"
-        let config = { childList: true, attributes: true };
+                        src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
-        let observer = new MutationObserver((mutations) => {
+                        alt=""
-            mutations.forEach(function (mutation) {
+                    />
-                console.log(mutation.type);
+                </li>
-            });
+                <li>
-        });
+                    <img class="img-payments"
-
+                        src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
-        observer.observe(target, config);
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img class="img-payments"
+                        src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img class="img-payments"
+                        src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img class="img-payments"
+                        src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img class="img-payments"
+                        src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
+                        alt=""
+                    />
+                </li>
+            </ul>
+        </div>
+        `;
     }
-    async addCarrossel() {
+
-        const elemento = await waitElement("#my-element");
+    vtexIcon() {
-        $(elemento).slick({
+        this.vtexpci.innerHTML = `
-            slidesToShow: 4,
+            <img class="vtex-icon"
-            slidesToScroll: 1,
+                src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
-        });
+                alt=""
+            />
+        `;
+    }
+
+    poweredDevelopeIcon() {
+        this.devIncons.innerHTML = `
+        <li class="li">
+            <a href="https://vtex.com/br-pt/">
+                <span>PoweredBy</span>
+                <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
+            </a>
+        </li>
+
+        <li class="li-2">
+            <a href="https://agenciam3.com/">
+                <span>DevelopedBy</span>
+                <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
+            </a>
+        </li>
+        `;
     }
 }

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

@@ -1,59 +1,82 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    // width: 1280px;
-    color: $color-gray2;
+    // height: 65px;
-
+    border-top: 1px solid #292929;
-    &__wrapper {
+    // position: relative;
-        align-items: center;
+    // display: flex;
-        display: flex;
+    // top: 800px;
-        justify-content: space-between;
+    .container{
+    position: relative;
+    display: flex;
+    max-width: max-content;
+    justify-content: space-between;
+    margin-top: 22px;
     }
+        &__wrapper {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+        }
 
-    &__address {
+        &__address {
         color: $color-gray2;
-        font-family: $font-family;
+        font-family: "Open Sans",sans-serif;
         font-style: normal;
         font-weight: normal;
         font-size: 10px;
         line-height: 12px;
         text-transform: capitalize;
-        max-width: 40%;
+        min-width: 40%;
+        margin-left: -80px;
+        margin-right: -45px;
+        margin-top: 10px;
 
-        @include mq(md, max) {
+            @include mq(md, max) {
-            margin-bottom: 24px;
+                margin-bottom: 24px;
-            max-width: 100%;
+                max-width: 100%;
-        }
+            }
-    }
-
-    &__stamps {
-        align-items: center;
-        display: flex;
-        justify-self: center;
-        list-style: none;
-
-        @include mq(md, max) {
-            align-self: center;
-            margin-bottom: 12px;
         }
 
-        &__divider {
+        .payments-icons-wrapper{
-            background-color: $color-gray4;
+            display: flex;
-            display: inline-block;
+             list-style: none;
-            height: 24px;
-            margin: 0 8px;
-            width: 1px;
         }
+
+        img {
+        max-width: 100%;
+        min-width: 36px;
+        min-height: 20px;
+        vertical-align: middle;
+        border: 0;
+        }
+
+        &__stamps {
+            align-items: center;
+            display: flex;
+            list-style: none;
+            margin-right: 30px;
+
+            @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;
+            }
     }
 
     &__developedBy {
         align-items: center;
         display: flex;
         list-style-type: none;
-        margin: 0;
+        margin-left: -1px;
-
+}
-        li:last-child {
-            margin-left: 16px;
-        }
 
         a {
             align-items: center;
@@ -70,5 +93,8 @@
                 margin-right: 8px;
             }
         }
+        .li-2{
+            margin-left: 35px;
+        }
     }
-}
+

checkout/src/template-checkout/checkout-footer.html

@@ -23,14 +23,13 @@
             <li>
                 <a href="https://vtex.com/br-pt/">
                     <span>Powered By</span>
-                    @TODO: vtex icon
+
                 </a>
             </li>
 
             <li>
                 <a href="https://agenciam3.com/">
                     <span>Developed By</span>
-                    @TODO: m3 icon
                 </a>
             </li>
         </ul>