feat: construcao e estilizacao do slick

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

@@ -12,6 +12,7 @@ export default class Footer {
         this.changeTextBtnChooseProducts()
         this.setImagesFooter()
         this.onUpdate();
+        this.addCarrossel()
     }
 
     async selectors() {
@@ -20,6 +21,7 @@ export default class Footer {
         this.checkoutVazio = await waitElement(".empty-cart-content");
         this.titleCart = await waitElement("#cart-title");
         this.btnChooseProducts = await waitElement("#cart-choose-products");
+        this.footer = await waitElement(".footerCheckout");
         this.footerStamps = await waitElement(".footerCheckout__stamps");
         this.footerDevelopment = await waitElement(".footerCheckout__developedBy");
     }
@@ -46,7 +48,7 @@ export default class Footer {
     }
 
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".footerCheckout__prateleira__container-Slick");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
@@ -136,7 +138,46 @@ export default class Footer {
     }
 
     createShelf(data) {
+        const containerPrateleira = document.querySelector(".footerCheckout__prateleira");
+        const containerSlick = document.createElement('div')
+        containerSlick.classList.add("footerCheckout__prateleira__container-Slick")
+        const contentTextYouLike = document.createElement('span')
+        contentTextYouLike.classList.add("footerCheckout__prateleira__textYouLike")
+        contentTextYouLike.innerText = "Você também pode gostar:"
         const products = data
-        console.log(products)
+        containerPrateleira.appendChild(contentTextYouLike)
+        containerPrateleira.appendChild(containerSlick)
+        products.forEach(product => {
+            const cardProduct = document.createElement('div')
+            cardProduct.classList.add("cardProduct")
+            const productName = product.productName
+            const productLink = product.link
+            const skus = product.items
+            const imgProduct = product.items[0].images[0].imageUrl
+            let containerCardProduct = ""
+            containerCardProduct += `
+            <div class="cardProduct__contentImg">
+                <img src="${imgProduct}" />
+            <div>
+            <div class="cardProduct__contentName">
+                <span>${productName}</span>
+            </div>
+            <div class="cardProduct__contentVariation">
+            `
+            for (let i = 0; i < skus.length; i++) {
+                const sku = skus[i]
+                containerCardProduct += `<span>${sku.name}</span> `
+            }
+
+            containerCardProduct += `</div>
+            <div class="cardProduct__contentBtn">
+                <a href="${productLink}">
+                    <span>Ver produto</span>
+                </a>
+            </div>
+            `
+            cardProduct.innerHTML = containerCardProduct
+            containerSlick.append(cardProduct)
+        })
     }
 }

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

@@ -12,6 +12,108 @@ footer .footerCheckout__wrapper {
     width: 94.9734%;
     margin: auto auto 0 auto;
 }
+
+.footerCheckout__prateleira {
+    width: 100% !important;
+    border-bottom: 1px solid $color-black;
+    padding-bottom: 3.37rem;
+
+    &__textYouLike {
+        width: 100%;
+        font-family: $font-family-secundary;
+        font-weight: 400;
+        font-size: 1.4rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: $color-black;
+        margin-bottom: 1.25rem;
+    }
+
+    &__container-Slick {
+        width: 79.53125%;
+        margin: 0 auto;
+
+        .slick-slide {
+            margin: 0 0.5rem;
+        }
+
+        .slick-prev {
+            top: 50%;
+            left: 22px;
+            border: none;
+        }
+
+        .slick-next {
+            background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg) no-repeat center center;
+            top: 50%;
+            right: 22px;
+            border: none;
+            background-color: transparent;
+        }
+
+        .cardProduct__contentName {
+            margin: 1.25rem 0;
+
+            span {
+                font-family: $font-family;
+                color: $color-black;
+                font-size: 0.813rem;
+
+            }
+        }
+
+        .cardProduct__contentVariation {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.313rem;
+
+            span {
+                white-space: nowrap;
+                background-color: #00c8ff;
+                color: #fff;
+                font-family: "Open Sans",sans-serif;
+                font-weight: 700;
+                font-size: .813rem;
+                padding: 0.313rem;
+                border-radius: 0.5rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            /* margin: 2px 0;
+            white-space: nowrap;
+            display: inline-block; */
+        }
+
+        .cardProduct__contentBtn {
+            margin-top: 1.125rem;
+            a {
+                text-decoration: none;
+
+                span {
+                    width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background: $color-blue2;
+                    padding: 0.75rem 0;
+                    border-radius: 0.5rem;
+                    color: white;
+                    font-size: 13px;
+                    font-weight: 700;
+                }
+
+                &:hover {
+                    opacity: 0.8;
+                }
+            }
+        }
+    }
+}
+
 footer .footerCheckout__prateleira,
 header {
     width: 79.53125%;

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

@@ -1,6 +1,5 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: 1px solid $color-black;
     color: $color-gray2;
     padding: 1rem 0;
 
@@ -14,6 +13,7 @@
             align-items: center;
             display: flex;
             justify-content: space-between;
+            padding: 1.3rem 2rem;
         }
     }
 
@@ -27,6 +27,10 @@
         text-transform: capitalize;
         max-width: 40%;
 
+        display: flex;
+        justify-content: flex-start;
+        flex: 1;
+
         @include mq(md, max) {
             margin-bottom: 24px;
             max-width: 100%;
@@ -34,16 +38,27 @@
     }
 
     &__payments {
-        img {
+        li {
             width: 32.78px;
+
+            img {
+                width: 100%;
             }
         }
 
+    }
+
     &__stamps {
         align-items: center;
         display: flex;
         justify-self: center;
         list-style: none;
+        margin: 0;
+        gap: 0.873rem;
+
+        display: flex;
+        justify-content: center;
+        flex: 1;
 
         @include mq(md, max) {
             align-self: center;
@@ -65,6 +80,10 @@
         list-style-type: none;
         margin: 0;
 
+        display: flex;
+        justify-content: flex-end;
+        flex: 1;
+
         li:last-child {
             margin-left: 16px;
         }