From ad706045a6a6a7680470408bde5a39d4bf8649d7 Mon Sep 17 00:00:00 2001
From: vitorsoaresdev <dev.vitors@gmail.com>
Date: Mon, 19 Dec 2022 00:21:19 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20fun=C3=A7=C3=A3o=20remove=20?=
 =?UTF-8?q?slick=20carrinho=20vazio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Footer.js | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 03829db..5cfc934 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -3,21 +3,20 @@ import { waitElement } from "m3-utils";
 export default class Footer {
     constructor() {
         this.init();
-
     }
 
-
     async init() {
         await this.selectors();
-        this.onUpdate();
+        // this.onUpdate();
         this.showPrateleira();
-        this.addCarrossel();
+        // this.addCarrossel();
+        this.displaySlick();
     }
 
     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.footerPratileira = await waitElement(".footerCheckout__prateleira");
+        this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
         this.footerStamps = await waitElement(".footerCheckout__stamps");
         this.footerAddress = await waitElement(".footerCheckout__address");
         this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
@@ -40,16 +39,13 @@ export default class Footer {
         observer.observe(target, config);
     }
 
-
-
     showPrateleira() {
-        let pratileira = this.footerPratileira;
-        pratileira.innerHTML = `
+        let prateleira = this.footerPrateleira;
+        prateleira.innerHTML = `
 
         <h2 class="prateleira-title"> Você também pode gostar:</h2>
         <ul class=" container-carrossel-item"></ul>
-
-        `
+        `;
 
         fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
 
@@ -74,11 +70,8 @@ export default class Footer {
                 </div>
 
                 <button class="prateleira-button"> ver produto</button>
-
-
                 `
-                    pratileira.children[1].appendChild(li)
-                    // console.log(pratileira)
+                    prateleira.children[1].appendChild(li)
 
                 });
 
@@ -127,6 +120,27 @@ export default class Footer {
     `;
     }
 
+    async displaySlick() {
+        const orderForm = await window.vtexjs.checkout.getOrderForm();
+        const items = orderForm.items.length;
+
+        $(window).on("orderFormUpdated.vtex", (evt, oF) => {
+            if (oF.items.length <= 0) {
+                this.footerPrateleira.style.display = "none";
+            } else {
+                this.addCarrossel();
+                this.footerPrateleira.style.display = "block";
+            }
+            if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") {
+                this.footerPrateleira.style.display = "none";
+            }
+        });
+        if (items === 0) {
+            this.footerPrateleira.style.display = "none";
+        }
+    }
+
+
     async addCarrossel() {
         const elemento = await waitElement(".container-carrossel-item");
         $(elemento).slick({