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

@@ -14,6 +14,7 @@ export default class Footer {
         await this.renderIconCreditCards();
         await this.renderIconVtexPci();
         await this.renderIconsDeveloped();
+
         this.trocaTitle();
     }
 
@@ -27,6 +28,7 @@ export default class Footer {
         this.titleCart = await waitElement(".empty-cart-title");
         this.subTitleCart = await waitElement(".empty-cart-message");
         this.buttonCart = await waitElement("#cart-choose-products");
+        this.prateleiraInfoCards = await waitElement(".footerCheckout__prateleira");
     }
 
     onUpdate() {
@@ -53,6 +55,7 @@ export default class Footer {
     produtos(data) {
         return {
             imagem: data["items"][0]["images"][0]["imageUrl"],
+            link: data["link"],
             nome: data["productName"],
             tamanho: data["items"].map((val) => val["name"]),
         };
@@ -65,6 +68,35 @@ export default class Footer {
         //console.log(data);
         const Items = data.map((val) => this.produtos(val));
         console.log(Items);
+        await this.renderInfoCards(Items);
+    }
+    estruturaInfoCard(items) {
+        let listaInfocards = ``;
+        for (const i of items) {
+            const elem = `<li class="infoCard">
+            <img class="infoCard__image" src="${
+                i["imagem"]
+            }" /><div class="infoCard__content"><p class="infoCard__text">${i["nome"]}</p>
+            <div class="infoCard__tamanho">${this.tamanhosProdutos(i["tamanho"], i["link"])}</div>
+            <a class="infoCard__link" href="${i["link"]}">VER PRODUTO</a></div></li>`;
+            listaInfocards += elem;
+        }
+        return listaInfocards;
+    }
+    tamanhosProdutos(tam, link) {
+        let listaTamanhos = `<ul class>`;
+        for (const n of tam) {
+            const nums = `<li class=infoCard__tamanho__numero><a class=infoCard__tamanho__numero__link href="${link}">${n}</a></li>`;
+            listaTamanhos += nums;
+        }
+        listaTamanhos += `</ul>`;
+        return listaTamanhos;
+    }
+
+    async renderInfoCards(Items) {
+        this.prateleiraInfoCards.innerHTML = `<h2>Você também pode gostar:</h2><ul class="infoCards">${this.estruturaInfoCard(
+            Items
+        )}</ul>`;
     }
 
     renderIconCreditCards() {

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

@@ -1,24 +1,29 @@
 /* _footer.scss */
+
 .footerCheckout {
-    width: 100%;
+    margin: 0 !important;
+    width: 100% !important;
     display: flex;
     flex-direction: column;
-    border-top: none;
+    border-top: 1px solid #000000;
     color: $color-gray2;
 
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
+        margin: 0 !important;
     }
     .container {
+        width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        margin: 0 !important;
     }
     &__address {
-        color: $color-gray2;
+        color: $color-black;
         font-family: $font-family;
         font-style: normal;
         font-weight: normal;
@@ -110,6 +115,7 @@
         display: flex;
         margin-top: 170px;
         .empty-cart-title {
+            margin: 0 !important;
             h2 {
                 font-family: $font-family;
                 font-weight: 700;
@@ -118,6 +124,7 @@
             }
         }
         .empty-cart-links {
+            margin-top: 32px;
             #cart-choose-products {
                 margin: 0;
                 padding: 16px 64px;
@@ -127,6 +134,9 @@
                 font-family: $font-family-secundary;
                 font-weight: 400;
                 font-size: 14px;
+                &::hover {
+                    cursor: pointer;
+                }
             }
         }
     }