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

@@ -7,19 +7,41 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.onUpdate();
+        await this.hideCartTitle();
     }
 
     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.checkoutTitle = await waitElement("#cart-title");
+        this.cartChooseProducts = await waitElement("#cart-choose-products");
+        this.productName = await waitElement("#product-name", {
+            timeout: 5000,
+            interval: 1000,
+        });
+    }
+
+    async hideCartTitle() {
+        if (this.checkoutVazio) {
+            console.log("Carrinho Vazio, removendo título");
+            this.checkoutTitle.classList.add("hidden");
+        }
+        // if (this.productName) {
+        //     console.log("Produto Encontrado, adicionando título");
+        //     if (this.checkoutTitle.classList.contains("hidden")) {
+        //         console.log("Titulo tá escondido");
+        //         this.checkoutTitle.classList.remove("hidden");
+        //         this.checkoutTitle.classList.add("visible");
+        //     }
+        // }
     }
 
     onUpdate() {
-        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        // Função que 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
+        // sempre que o carrinho estiver vazio o elemento checkoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
         let target = this.checkoutVazio;
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
@@ -29,7 +51,10 @@ export default class Footer {
         });
 
         observer.observe(target, config);
+
+        this.cartChooseProducts.innerHTML = "Continuar Comprando";
     }
+
     async addCarrossel() {
         const elemento = await waitElement("#my-element");
         $(elemento).slick({

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

@@ -18,24 +18,29 @@
 
     &-links {
         .link-choose-products {
-            background: $color-black;
+            background: white;
-            border: none;
+            border: 1px solid #000000;
-            border-radius: 5px;
             transition: ease-in 0.22s all;
             outline: none;
-            font-family: $font-family;
+            font-family: "Tenor Sans";
             font-style: normal;
-            font-weight: 500;
+            font-weight: 400;
             font-size: 14px;
             line-height: 16px;
             text-align: center;
             letter-spacing: 0.05em;
-            color: $color-white;
+            color: #000;
             text-transform: uppercase;
+            cursor: pointer;
+            padding: 16px 65px;
 
             &:hover {
                 background: lighten($color-black, 5);
             }
         }
     }
+
+    &-message {
+        display: none;
+    }
 }

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

@@ -66,9 +66,17 @@ body {
     color: $color-black !important;
 }
 
+.hidden {
+    display: none;
+}
+
+.visible {
+    display: block;
+}
+
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
+    color: #292929;
     font-family: $font-family;
     margin: 40px 0 30px;
     letter-spacing: 0.1em;