Feat(Checkout): Cria mudanças Js!

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

@@ -8,18 +8,12 @@ export default class Footer {
     async init() {
         this.list = await this.Api();
         await this.selectors();
-        // this.onUpdate();
+        this.onUpdate();
         this.addIconsCardAndVtxpci();
         this.addIconVtexAndM3();
         this.createShelf();
         this.shelfList = await waitElement(".footerCheckout__shelfList");
         this.shelfItens();
-        if (window.innerWidth > 1024){
-            this.addCarrossel();
-        }
-        if (window.innerWidth < 1024){
-            this.addCarrosselMobile();
-        }
         this.prateleiraView();
 
     }
@@ -35,41 +29,77 @@ export default class Footer {
             timeout: 5000,
             interval: 1000,
         });
-        this.pratWrapper = await waitElement(".footerCheckout")
+        this.pratWrapper = await waitElement(".footerCheckout");
     }
 
-    onUpdate() {
+    async 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 pratchange = this.pratWrapper;
+        const elemento = await waitElement(".footerCheckout__shelfList");
+        let config = { childList: false, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+
+                if (mutation.attributeName === "style") {
+                    if (pratchange.children[0]) {
+                        pratchange.children[0].classList.add("view");
+                    }
+                    if (window.innerWidth > 1024){
+                        $(elemento).slick({
+                            slidesToShow: 4,
+                            slidesToScroll: 1,
+                            arrows: true,
+                            infinite: false,
+                        });
+                    }
+                    if (window.innerWidth < 1024){
+                            $(elemento).slick({
+                            slidesToShow: 3,
+                            slidesToScroll: 1,
+                            arrows: true,
+                            infinite: false,
+                        });
+                    }
+                    if (window.innerWidth < 600){
+                        $(elemento).slick({
+                            slidesToShow: 2,
+                            slidesToScroll: 1,
+                            arrows: true,
+                            infinite: false,
+                        });
+                    }
+                }
             });
         });
 
         observer.observe(target, config);
     }
-    async addCarrossel() {
+    // async addCarrossel() {
-        const elemento = await waitElement(".footerCheckout__shelfList");
+    //     const elemento = await waitElement(".footerCheckout__shelfList");
-        $(elemento).slick({
+    //     $(elemento).slick({
-            slidesToShow: 4,
+    //         slidesToShow: 4,
-            slidesToScroll: 1,
+    //         slidesToScroll: 1,
-            arrows: true,
+    //         arrows: true,
-            infinite: false,
+    //         infinite: false,
-        });
+    //     });
-    }
+    // }
-    async addCarrosselMobile() {
+    async advie() {
-        const elemento = await waitElement(".footerCheckout__shelfList");
+        if (this.pratWrapper.children[0]) {
-        $(elemento).slick({
+            this.pratWrapper.children[0].classList.add("view");
-            slidesToShow: 3,
+        }
-            slidesToScroll: 1,
-            arrows: true,
-            infinite: false,
-        });
     }
+    // async addCarrosselMobile() {
+    //     const elemento = await waitElement(".footerCheckout__shelfList");
+    //     $(elemento).slick({
+    //         slidesToShow: 3,
+    //         slidesToScroll: 1,
+    //         arrows: true,
+    //         infinite: false,
+    //     });
+    // }
     addIconVtexAndM3() {
         if (this.iconsVtexAndM3) {
             this.iconsVtexAndM3.innerHTML = `
@@ -165,7 +195,7 @@ export default class Footer {
 
                 if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
                     if (prat) {
-                        prat.classList.add("view");
+                        prat.classList.add("");
                     }
 
                 } else if (

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

@@ -126,7 +126,8 @@ body {
             display: none;
         }
     }
-    div.cart-fixed.cart-fixed-transition.affix-top {
+    div.cart-fixed.cart-fixed-transition.affix-top,
+    div.cart-fixed.cart-fixed-transition.affix {
         .Items {
             border-top: 1px solid $color-gray10;
             border-bottom: 1px solid $color-gray10;