feat(Footer): Aplica prateleira e aplica o slick

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

@@ -7,10 +7,12 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.requestApi();
+        this.requestApi();
+        this.addCarrossel();
         this.creatPaymentsIcons();
         this.creatVtexIconPci();
         this.creatDevIconsM3();
+        this.onUpdate();
 
     }
 
@@ -33,22 +35,13 @@ export default class Footer {
 
         observer.observe(target, config);
     }
-    async addCarrossel() {
-        const elemento = await waitElement("#my-element");
-        $(elemento).slick({
-            slidesToShow: 4,
-            slidesToScroll: 1,
-        });
-    }
-
     requestApi () {
         this.divPrateleira.innerHTML =
-        `<h3>Você também pode gostar:</h3>
+        `<h3 class="footerCheckout__prateleira-title" >Você também pode gostar:</h3>
-        <ul class="ulProduct"></ul>
+        <ul class="footerCheckout__prateleira-ul" id="footerCheckout__prateleira-ul-id"></ul>
         `
         const api = 'https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319';
-        let itemStrutucture = '';
+        const ulProdut = document.querySelector('.footerCheckout__prateleira-ul');
-        const ulProdut = document.querySelectorAll('.ulProdut');
 
         fetch(api)
         .then((response) => {
@@ -56,13 +49,39 @@ export default class Footer {
         })
         .then((data) => {
             data.forEach((prod) => {
-                itemStrutucture += `
+                const imgProd = prod.items[0].images[0].imageUrl;
-                `
+                const nameProd = prod.productName;
+                const linkProd = prod.link;
+                ulProdut.innerHTML += `
+                <li class="footerCheckout__prateleira-li-prod">
+                <figure class="footerCheckout__prateleira-figure-prod">
+                <img src="${imgProd}" alt="Imagem Produto">
+                </figure>
+                <div class="footerCheckout__prateleira-div-text">
+                <h2>${nameProd}</h2>
+                <ul>
+                ${prod.items.map((name) => `<li>
+                ${name.name}</li>`).join('')}
+                </ul>
+                <a href="${linkProd}">
+                Ver Produto
+                </a>
+                </div>
+                </li>`
             })
         });
-
-        ulProdut = itemStrutucture;
     };
+    async addCarrossel() {
+        const prateleiraProd = await waitElement("#footerCheckout__prateleira-ul-id");
+        if(window.screen.width > 1024) {
+        $(prateleiraProd).slick({
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            infinite: false,
+            arrows: true,
+        });
+    }
+    }
 
     creatPaymentsIcons () {
         this.payments.innerHTML = `

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

@@ -43,9 +43,10 @@
     position: relative;
     left: 0;
     top: 0;
-    display: block;
+    display: flex;
     margin-left: auto;
     margin-right: auto;
+    column-gap: 16px;
 
     &:before,
     &:after {
@@ -101,14 +102,18 @@
     position: absolute;
 }
 .slick-prev {
+    border: none;
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
         no-repeat center center;
     z-index: 4;
     left: 10px;
 }
 .slick-next {
+    border: none;
     z-index: 4;
     right: 10px;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
 }
 .slick-arrow.slick-hidden {
     display: none;
@@ -134,3 +139,9 @@
         }
     }
 }
+
+@media only screen and (width: 1280px) {
+    .slick-slide {
+        width: 242px !important;
+    }
+}

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

@@ -92,6 +92,8 @@
         width: 100%;
     }
 
+    // CARDS FOOTER
+
     &__container-ul {
         list-style-type: none;
         margin: 0;
@@ -106,12 +108,11 @@
 
     &__figure-img-tickets {
         display: flex;
-        column-gap: 13.22px;
+        column-gap: 13.35px;
-        margin-right: 13.35px;
     }
 
     &__figure-img-tickets img {
-        width: 35.65px;
+        width: 100%;
         height: 20px;
     }
 
@@ -140,5 +141,123 @@
 
     }
 
+    // PRATELEIRA DE PRODUTOS
 
+    &__prateleira {
+        margin: 20px 132px 54px;
+    }
+
+    &__prateleira-title {
+        font-family: $font-family-secundary;
+        font-size: 24px;
+        font-weight: 400;
+        line-height: 38px;
+        font-style: normal;
+        color: $color-black-500;
+        text-align: center;
+        margin: 43px 0 20px;
+    }
+    &__prateleira-ul{
+        list-style-type:none;
+        display: flex;
+        align-items: center;
+        margin: 0;
+    }
+
+    &__prateleira-li-prod {
+        width: 100%;
+    }
+
+    &__prateleira-figure-prod {
+        margin: 0;
+    }
+
+    &__prateleira-figure-prod img {
+        object-fit: cover;
+    }
+
+    &__prateleira-div-text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    &__prateleira-div-text ul {
+        margin: 0 0 20px;
+        list-style: none;
+    }
+
+    &__prateleira-div-text h2 {
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 18px;
+        color: $color-black-500;
+        text-align: center;
+        margin: 20px 0;
+    }
+
+    &__prateleira-div-text ul {
+        column-gap: 5px;
+        display: flex;
+        align-items: center;
+    }
+
+    &__prateleira-div-text li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        margin: 0;
+        padding: 0;
+        background-color: $color-blue-200;
+        color: $color-white;
+        border-radius: 8px;
+        text-align: center;
+        font-size: 13px;
+        font-family: $font-family;
+        font-weight: 700;
+        font-style: normal;
+        line-height: 18px;
+        padding: 5px;
+        transition: ease-in-out 250ms;
+        border: 1px solid $color-blue-200;
+    }
+
+    &__prateleira-div-text a {
+        text-decoration: none;
+        justify-content: center;
+        display: flex;
+        width: 100%;
+        max-width: 242px;
+        background: $color-blue-200;
+        height: 42px;
+        align-items: center;
+        border-radius: 8px;
+        color: $color-white;
+        font-family: $font-family;
+        font-size: 13px;
+        font-weight: 700;
+        line-height: 18px;
+        font-style: normal;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        transition: ease-in-out 250ms;
+        border: 1px solid $color-blue-200;
+
+        &:hover {
+            background-color: $color-white;
+            color: $color-blue-200;
+        }
+    }
 }
+
+@media only screen and (width: 1280px){
+    .footerCheckout {
+        &__prateleira-li-prod {
+            width: 242px !important;
+        }
+    }
+ }

checkout/src/template-checkout/checkout-footer.html

@@ -37,3 +37,4 @@
     </div>
 </footer>
 
+