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,60 +49,86 @@ 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 = `
         <ul class="footerCheckout__container-ul">
-            <li class="footerCheckout__wrapper-li">
+        <li class="footerCheckout__wrapper-li">
-                <figure class="footerCheckout__figure-img-tickets">
+        <figure class="footerCheckout__figure-img-tickets">
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard"/>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="AmericaExpress"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="AmericaExpress"/>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="VisaCard"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="VisaCard"/>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard"/>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"/>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"/>
-                </figure>
+        </figure>
-            </li>
+        </li>
         </ul>`;
     }
 
     creatVtexIconPci () {
         this.vtexIconPci.innerHTML = `
-       <ul class="footerCheckout__container-ul">
+        <ul class="footerCheckout__container-ul">
-            <li class="footerCheckout__wrapper-li">
+        <li class="footerCheckout__wrapper-li">
-                <figure class="footerCheckout__figure-img-vtex">
+        <figure class="footerCheckout__figure-img-vtex">
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo Vtex"/>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo Vtex"/>
-                </figure>
+        </figure>
-            </li>
+        </li>
-       </ul>`
+        </ul>`
     }
 
     creatDevIconsM3 () {
         this.devIcons.innerHTML = `
         <li class="footerCheckout__container-li-m3Icon">
-            <a href="https://vtex.com/br-pt/">
+        <a href="https://vtex.com/br-pt/">
                 <span>Powered By</span>
                     <figure class="footerCheckout__figure-img-vtexIcon">
-                        <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="LogoVTEX">
+                    <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="LogoVTEX">
                     </figure>
-            </a>
+                    </a>
-        </li>
+                    </li>
-        <li class="footerCheckout__container-li-m3Icon">
+                    <li class="footerCheckout__container-li-m3Icon">
-            <a href="https://agenciam3.com/">
+                    <a href="https://agenciam3.com/">
-                <span>Developed By</span>
+                    <span>Developed By</span>
                     <figure class="footerCheckout__figure-img-m3Icon">
-                        <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3">
+                    <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3">
                     </figure>
-            </a>
+                    </a>
-        </li>`
+                    </li>`
-    }
+                }
 }

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>
 
+