feat(footer):slick inicializado

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

@@ -8,35 +8,94 @@ export default class Footer {
     async init() {
         await this.selectors();
         await this.addCarrossel();
-        // this.onUpdate();
+        await this.empytStart()
+        await 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.checkoutVazio = await waitElement(".empty-cart-content");
+        this.checkoutVazio = await waitElement(".empty-cart-content", {
+            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+        });
         this.slick = await waitElement(".footerCheckout__prateleira");
+        this.Footer = await waitElement(".footerCheckout");
+        this.Fds = document.createElement("div")
     }
-
+    async empytStart(){
-    onUpdate() {
+        let target2 = this.slick;
+        let Footer = this.Footer;
+        console.log(Footer)
+        let ExistsAtt = document.querySelector('.empty-cart-content[style="display: flex;"]');
+        if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){
+            if(!!ExistsAtt){
+                console.log(!!ExistsAtt,"empyt cart existe"); //true
+                target2.classList.add('hide')
+                Footer.classList.remove('footerCheckout__ComSlick')
+            }else{
+                console.log(!!ExistsAtt,"empyt cart não existe"); //false
+                target2.classList.remove('hide')
+                Footer.classList.add('footerCheckout__ComSlick')
+            }
+        }
+    }
+    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 target2 = this.slick;
+        let Footer = this.Footer;
+        let config = {
+                    childList: true,
+                    attributes: true,
+                    attributeOldValue:true,
+                    attributeFilter:["style"],
+                    subtree:false,
+                    characterData:true,
+                    characterDataOldValue:true};
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation);
+                if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){
+                    if(mutation.oldValue == "display: none;"){
+                        console.log("entrei no if",mutation.oldValue)
+                        target2.classList.add('hide')
+                        Footer.classList.remove('footerCheckout__ComSlick')
+                    }else{
+                        console.log("entrei no else",mutation.oldValue)
+                        target2.classList.remove('hide')
+                        Footer.classList.add('footerCheckout__ComSlick')
+                    }
+                }
             });
         });
 
         observer.observe(target, config);
     }
     async addCarrossel() {
-        const elemento = await waitElement("footerCheckout__prateleira");
+        let target2 = this.slick;
-        $(elemento).slick({
+        let divRegua = this.Fds;
+        console.log(this.Fds)
+        divRegua.classList.add('Regua')
+        this.Footer.appendChild(divRegua)
+        target2.classList.add('hide')
+        this.slick.innerHTML =
+        `
+        <div class="quadrado"> 1 </div>
+        <div class="quadrado"> 2 </div>
+        <div class="quadrado"> 3 </div>
+        <div class="quadrado"> 4 </div>
+        <div class="quadrado"> 5 </div>
+        `
+        $(this.slick).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            infinite: true,
+            initialSlide: 0,
+            variableWidth:true,
         });
     }
 }

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

@@ -12,7 +12,6 @@ export default class Header {
         window.addEventListener("hashchange", this.stepProgress.bind(this));
         await this.event();
         await this.progress();
-        await this.stepProgress();
         console.log(this.item);
     }
 
@@ -23,6 +22,8 @@ export default class Header {
             interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         });
         this.step = document.querySelector('.completed');
+        this.slick = await waitElement(".footerCheckout__prateleira");
+        this.Footer = await waitElement(".footerCheckout");
     }
     async event(){
 
@@ -45,18 +46,23 @@ export default class Header {
                 </li>
             </ul>
         `
+        await this.stepProgress();
     }
     async stepProgress(){
         const progressList = document.querySelectorAll("#progressBar ul li")
         const step1 = document.getElementById("step_1")
         const step2 = document.getElementById("step_2")
         const step3 = document.getElementById("step_3")
+        let target2 = this.slick;
+        let Footer = this.Footer;
         progressList.forEach((li) => {
             if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){
                     if(li.children[1].id === "step_1"){
                         step2.classList.remove('completed');
                         step3.classList.remove('completed');
-                        li.children[1].classList.toggle('completed');
+                        li.children[1].classList.add('completed');
+                        target2.classList.toggle('hide')
+                        Footer.classList.add('footerCheckout__ComSlick')
                 }
             }
             if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email"
@@ -65,16 +71,18 @@ export default class Header {
                     if(li.children[1].id === "step_2"){
                         step1.classList.remove('completed');
                         step3.classList.remove('completed');
-                        console.log(li,"esse é o children 2")
                         li.children[1].classList.add('completed');
+                        target2.classList.add('hide');
+                        Footer.classList.remove('footerCheckout__ComSlick');
                 }
             }
             if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){
                     if(li.children[1].id === "step_3"){
                         step1.classList.remove('completed');
                         step2.classList.remove('completed');
-                        console.log(li,"esse é o children 3")
+                        li.children[1].classList.add('completed');
-                        li.children[1].classList.toggle('completed');
+                        target2.classList.add('hide');
+                        Footer.classList.remove('footerCheckout__ComSlick');
                 }
             }
         })

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

@@ -1,15 +1,20 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    position: relative;
+    border-top: 1px solid;
     color: $color-gray2;
+    margin-top: 100px;
+    &__ComSlick{
+        margin-top: 900px !important;
+    }
 
     &::before{
         content: '';
-        position: absolute;
+        // right: 0;
-        right: 0;
+        // width: 100%;
-        width: 100%;
+        // height: 67px;
-        height: 67px;
+        // border-bottom: 1px solid red;
-        border-bottom: 1px solid $color-black;
+        // $color-black
     }
     &__payments{
         &__images{
@@ -23,12 +28,11 @@
     }
     &__wrapper {
         position: relative;
+        width: 100 !important;
         height: 100px;
         display: inline-flex;
         align-items: flex-end;
         .container{
-            position: absolute;
-            top: 94px;
             width: 100%;
             display: flex;
             align-items: baseline;
@@ -107,4 +111,39 @@
             }
         }
     }
+    &__prateleira{
+        position: absolute;
+        display: inline-flex;
+        width: 100% !important;
+        height: 390px;
+        padding-left: 7.4803149606299%;
+        margin-bottom: 54px !important;
+        top: -445px;
+        align-items: center;
+        justify-content: center;
+        padding-right: 15.33203125%;
+        .quadrado{
+            text-align: center;
+            width: 83.818897637795%!important;
+            height: 390px;
+            margin-left: 16px;
+            background: pink;
+        }
+        .slick-slide{
+            width: 258px !important;
+        }
+        .slick-list {
+            width: 1016px;
+            left: 34px;
+        }
+    }
+    .Regua{
+        background: blue;
+        position: absolute;
+        top: -485px;
+        left: 126px;
+        z-index: -1;
+        width: 1016px;
+        height: 466px !important;
+    }
 }