feat(Footer): Adiciona função observer

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

@@ -7,34 +7,63 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        this.requestApi();
+        this.verificaPag();
-        this.addCarrossel();
+        await this.onUpdate();
         this.creatPaymentsIcons();
         this.creatVtexIconPci();
         this.creatDevIconsM3();
-        this.onUpdate();
+        this.addProdutos();
-
+        await this.addCarrossel();
     }
 
     async selectors() {
         this.checkoutVazio = await waitElement(".empty-cart-content");
         this.divPrateleira = await waitElement('.footerCheckout__prateleira');
+        this.tituloPrateleira = await waitElement('#cart-title')
         this.payments = await waitElement('.footerCheckout__payments');
         this.vtexIconPci = await waitElement('.footerCheckout__vtexpci');
         this.devIcons = await waitElement('.footerCheckout__developedBy');
+        this.continuarComprando = await waitElement('.empty-cart-links');
     }
 
-    onUpdate() {
+    async onUpdate() {
         let target = this.checkoutVazio;
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
+            mutations.forEach((mutation) => {
-                console.log(mutation.type);
+                console.log(observer);
+                const status = mutation.target.attributes.style.nodeValue;
+                if(status === 'display: none;') {
+                    this.requestApi();
+                } else {
+                    this.divPrateleira.innerHTML = ``;
+                }
             });
         });
-
         observer.observe(target, config);
     }
+
+    verificaPag () {
+        if(this.checkoutVazio.attributes.style.nodeValue === 'display: none;') {
+            if(window.location.hash == '#/cart') {
+                this.requestApi();
+            }
+        }   else {
+                this.divPrateleira.innerHTML= ``;
+            }
+        window.addEventListener('hashchange',() => {
+            if(this.checkoutVazio.attributes.style.nodeValue === 'display: none;') {
+                if(window.location.hash == '#/cart') {
+                    this.requestApi();
+                }
+            } else if (window.location.hash == '#/email' || window.location.hash == '#/profile' || window.location.hash == '#/shipping') {
+                this.divPrateleira.innerHTML= ``;
+            }else if (window.location.href  == "https://m3academy.myvtex.com/checkout/#/payment") {
+                this.divPrateleira.innerHTML= ``;
+            }
+        })};
+
+
     requestApi () {
         this.divPrateleira.innerHTML =
         `<h3 class="footerCheckout__prateleira-title" >Você também pode gostar:</h3>
@@ -82,7 +111,13 @@ export default class Footer {
         });
     }
     }
+    addProdutos() {
+        this.continuarComprando.innerHTML = `<a href="/" id="cart-choose-products" class="btn btn-large btn-success link-choose-products" data-i18n="cart.chooseProducts">continuar comprando</a>`
+    }
 
+    // removePrateleira() {
+    //     this.divPrateleira.style.display = 'none'
+    // };
     creatPaymentsIcons () {
         this.payments.innerHTML = `
             <ul class="footerCheckout__container-ul">
@@ -129,6 +164,7 @@ export default class Footer {
                             <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3">
                         </figure>
                 </a>
-                    </li>`
+            </li>
+        `
     }
 }

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

@@ -49,10 +49,6 @@ body {
     .container-order-form,
     .container-cart {
         width: 80%;
-
-        #cart-title {
-            display: none !important;
-        }
     }
 }
 
@@ -71,20 +67,24 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
     font-family: $font-family;
-    font-weight: 500;
+    font-weight: 700;
-    font-size: 36px;
+    font-size: 24px;
-    line-height: 42px;
+    line-height: 33px;
-    margin: 40px 0 30px;
+    margin: 16px 0;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
+    color: $color-black-500;
 
     @include mq(md, max) {
         margin-left: 30px;
     }
+    .activeTitle {
+    display: none;
+    }
 }
 
+
 .dropdown {
     &__content {
         &--closed {

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

@@ -13,6 +13,13 @@
     -ms-touch-action: pan-y;
     touch-action: pan-y;
     -webkit-tap-highlight-color: transparent;
+
+    // .slick-slide:first-child {
+    //     margin-right: 8px;
+    // }
+    // .slick-slid:last-child {
+    //     margin-left: 8px;
+    // }
 }
 .slick-list {
     position: relative;
@@ -46,7 +53,7 @@
     display: flex;
     margin-left: auto;
     margin-right: auto;
-    column-gap: 16px;
+    gap: 16px;
 
     &:before,
     &:after {

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

@@ -211,7 +211,6 @@
         align-items: center;
         text-align: center;
         margin: 0;
-        padding: 0;
         background-color: $color-blue-200;
         color: $color-white;
         border-radius: 8px;
@@ -222,8 +221,6 @@
         font-style: normal;
         line-height: 18px;
         padding: 5px;
-        transition: ease-in-out 250ms;
-        border: 1px solid $color-blue-200;
     }
 
     &__prateleira-div-text a {
@@ -231,7 +228,6 @@
         justify-content: center;
         display: flex;
         width: 100%;
-        max-width: 242px;
         background: $color-blue-200;
         height: 42px;
         align-items: center;
@@ -244,14 +240,22 @@
         font-style: normal;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        transition: ease-in-out 250ms;
+        transition: ease-in-out 280ms;
-        border: 1px solid $color-blue-200;
 
         &:hover {
-            background-color: $color-white;
+            background-color: $color-blue-100;
-            color: $color-blue-200;
         }
     }
+
+    &__prateleira-div-text ul li {
+        text-transform: uppercase;
+        font-family: $font-family;
+        font-size: 13px;
+        font-weight: 700;
+        line-height: 18px;
+        font-style: normal;
+    }
+
 }
 
 @media only screen and (width: 1280px){

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -16,6 +16,7 @@ $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 
+$color-blue-100:  #6fd5f2;
 $color-blue-200: #00C8FF;
 $color-blue: #4267b2;