Merge pull request 'feat: Cria prateleira footer' (#3) from feat/criaFooter into main

Reviewed-on: #3

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

@@ -8,19 +8,49 @@ export default class Footer {
     async init() {
         await this.selectors();
         this.createFooter();
-        // this.onUpdate();
+        this.addCarrossel();
+        this.onUpdate();
     }
 
     async selectors() {
-        this.footerCheckout = await waitElement(".footerCheckout__stamps");
+        this.footerCheckoutStamps = await waitElement(".footerCheckout__stamps");
         this.footerCheckoutDevelop = await waitElement(".footerCheckout__developedBy");
+        this.footerCheckoutPrateleira = await waitElement(".footerCheckout__prateleira");
         //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");
     }
 
     createFooter() {
-        this.footerCheckout.innerHTML = `
+        const slickPrat = this.footerCheckoutPrateleira;
+        slickPrat.innerHTML = `<h2>Você também pode gostar:</h2>
+        <ul class="container-carrossel"></ul>`;
+        fetch(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        )
+            .then((response) => {
+                return response.json();
+            })
+            .then((data) => {
+                data.map((item) => {
+                    const li = document.createElement("li");
+                    li.setAttribute("id", item.productId);
+                    li.innerHTML = `<img src="${item.items[0].images[0].imageUrl}" />
+                                    <p class="prateleira-text">${item.productName}</p>
+                                    <div class="btn-prateleira">
+                                    ${item.items.map((sku) => {
+                                        return `<button>${sku.name}</button>`;
+                                    })}
+                                    </div>
+                                    <button class="btn-list-prateleira" href="${
+                                        item.link
+                                    }">Ver Produto</button>`;
+                    slickPrat.children[1].appendChild(li);
+                });
+            });
+
+        this.footerCheckoutStamps.innerHTML = `
+
              <li class="footerCheckout__listImage">
                  <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
              </li>
@@ -54,14 +84,14 @@ export default class Footer {
         `;
         this.footerCheckoutDevelop.innerHTML = `
 
-                <li class="footerCheckout__developedBy">
+                <li class="footerCheckout__developedBy__list">
                 <a href="https://www.vtex.com/" target="_blank" title="vtex">
                 <span>Powered By</span>
                 <img class="vtex-right" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
                 </a>
                 </li>
 
-                <li class="footerCheckout__developedBy">
+                <li class="footerCheckout__developedBy__list">
                 <a href="https://www.vtex.com/" target="_blank" title="vtex">
                 <span>Developed By</span>
                 <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
@@ -78,14 +108,21 @@ export default class Footer {
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                if (
+                    mutation.target.style.display === "none" &&
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/cart"
+                ) {
+                    console.log("none");
+                } else {
+                    console.log("block");
+                }
             });
         });
 
         observer.observe(target, config);
     }
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".container-carrossel");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,

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

@@ -29,7 +29,9 @@ export default class Header {
                 <div class="containerList">
                     <div class="containerList__div">
                         <p class="containerList__text">Meu carrinho</p>
-                        <p class="containerList__circle"></p>
+                        <p class="containerList__circle-1 ${
+                            window.location.href.includes(`cart`) ? `active` : ``
+                        }"></p>
                         <p class="containerList__line"></p>
                     </div>
                 </div>
@@ -39,7 +41,7 @@ export default class Header {
             <div class="containerList">
                   <div class="containerList__div">
                     <p class="containerList__text">Dados Pessoais</p>
-                    <p class="containerList__circle"></p>
+                    <p class="containerList__circle-2"></p>
 
                  </div>
             </div>
@@ -49,7 +51,7 @@ export default class Header {
             <div class="containerList" >
                  <div class="containerList__div">
                     <p class="containerList__text">Pagamento </p>
-                    <p class="containerList__circle"> </p>
+                    <p class="containerList__circle-3"> </p>
                     <p class="containerList__line2"> </p>
                   <div/>
             </div>
@@ -59,7 +61,7 @@ export default class Header {
         `;
         }
         if (this.progressBar && window.innerWidth < 1024) {
-            this.progressBar.innerHTML = ``;
+            this.progressBar.innerHTML = "";
         }
     }
 }

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

@@ -107,6 +107,8 @@
     left: 10px;
 }
 .slick-next {
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
     z-index: 4;
     right: 10px;
 }

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

@@ -2,12 +2,20 @@
 .footerCheckout {
     border-top: none;
     color: $color-gray2;
-    border-top: 1px solid $color-black-500;
 
     &__wrapper {
-        align-items: center;
         display: flex;
-        justify-content: space-between;
+        align-items: center;
+        width: 100% !important;
+        margin-top: 52px !important;
+
+        .container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            border-top: 1px solid $color-black-500;
+        }
     }
 
     &__address {
@@ -19,6 +27,8 @@
         line-height: 13px;
         text-transform: capitalize;
         max-width: 40%;
+        width: 80%;
+        margin-left: 32px;
 
         @include mq(md, max) {
             margin-bottom: 24px;
@@ -31,8 +41,10 @@
         display: flex;
         justify-self: center;
         list-style: none;
-        padding: 18px 0;
+        padding: 16px 0;
         margin: 0;
+        width: 100%;
+        justify-content: flex-end;
 
         @include mq(md, max) {
             align-self: center;
@@ -53,6 +65,9 @@
         display: flex;
         list-style-type: none;
         margin: 0;
+        width: 100%;
+        margin-right: 32px;
+        justify-content: flex-end;
 
         li:last-child {
             margin-left: 16px;
@@ -100,4 +115,83 @@
             margin: 0 0 0 10px;
         }
     }
+
+    &__prateleira {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        h2 {
+            font-weight: 400;
+            font-size: 24px;
+            color: $color-black;
+            font-family: $font-family-secundary;
+            margin-bottom: 20px;
+        }
+        .container-carrossel {
+            max-width: 100%;
+            display: flex;
+        }
+
+        li {
+            list-style: none;
+            img {
+                width: 242px;
+                height: 242px;
+            }
+            .prateleira-text {
+                color: $color-black;
+                text-align: center;
+                margin: 20px 0;
+            }
+            .btn-prateleira {
+                display: flex;
+                margin-bottom: 25px;
+                align-items: center;
+                justify-content: center;
+
+                button {
+                    display: flex;
+                    align-items: center;
+                    border: none;
+                    border-radius: 8px;
+                    color: $color-white;
+                    height: 26px;
+                    padding: 5px;
+                    margin: 5px;
+                    background: $color-blue-100;
+                }
+            }
+        }
+        .slick-slide {
+            margin-right: 16px;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        .slick-prev,
+        .slick-next {
+            border: none;
+            background-color: transparent;
+            top: 40%;
+        }
+
+        .slick-next {
+            right: 20px;
+        }
+
+        .btn-list-prateleira {
+            width: 100%;
+            border: none;
+            border-radius: 8px;
+            background: $color-blue-100;
+            color: $color-white;
+            font-family: $font-family;
+            font-weight: bold;
+            height: 42px;
+        }
+    }
 }

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

@@ -79,7 +79,9 @@
                     justify-content: center;
                 }
 
-                &__circle {
+                &__circle-1,
+                &__circle-2,
+                &__circle-3 {
                     display: flex;
                     align-items: center;
                     justify-content: center;

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

@@ -17,6 +17,7 @@ $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 
 $color-blue: #4267b2;
+$color-blue-100: #00c8ff;
 
 $color-green: #4caf50;