feat adicionando css ao slick e corrigindo bugs

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

@@ -11,6 +11,7 @@ export default class Footer {
         this.addPaymentsIcons();
         this.addPciIcons();
         this.onUpdateShelf();
+        this.addVtexIcon();
     }
 
     async selectors() {
@@ -20,6 +21,10 @@ export default class Footer {
         this.paymentIconsContainer = await waitElement(".footerCheckout__payments");
         this.iconPci = await waitElement(".footerCheckout__vtexpci");
         this.shelfContainer = $(".footerCheckout__prateleira");
+        this.footer = $(".footerCheckout");
+        this.vtexIcon = $("a[href='https://vtex.com/br-pt/']");
+        this.m3Icon = $("a[href='https://agenciam3.com/']");
+        this.titleFooter = $(".footer-title");
     }
 
     onUpdate() {
@@ -29,9 +34,12 @@ export default class Footer {
         let target = this.checkoutVazio;
         let config = { attributes: true };
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
+            mutations.forEach(() => {
                 if (target.style.display === "block") {
+                    console.log(this.titleFooter);
                     this.shelfContainer.empty();
+                    this.titleFooter.remove();
+
                     $(".slick-slider").removeClass("slick-slider slick-initialized");
                 } else {
                     this.createShelf();
@@ -65,6 +73,7 @@ export default class Footer {
 
             if (hash !== "cart") {
                 this.shelfContainer.empty();
+                this.titleFooter.remove();
                 $(".slick-slider").removeClass("slick-slider slick-initialized");
             } else {
                 this.createShelf();
@@ -128,6 +137,17 @@ export default class Footer {
             this.iconPci.innerHTML = html;
         }
     }
+    addVtexIcon() {
+        const logoM3Academy = `<span>Developed By</span>
+        <img src="/arquivos/logoM3M3Academy.png" alt=""/>
+        `;
+
+        const logoVtex = `<span>Powered By</span>
+        <img src="/arquivos/logoVTEXM3Academy.png" alt=""/>`;
+
+        this.vtexIcon.html(logoVtex);
+        this.m3Icon.html(logoM3Academy);
+    }
 
     async createShelf() {
         const data = await fetch(
@@ -135,6 +155,7 @@ export default class Footer {
         );
         const products = await data.json();
         const hash = window.location.hash.replace("#/", "");
+        const shelfTitle = `<h2 class="footer-title">Você também pode gostar:</h2>`;
 
         const html = products.map(
             (product) => `
@@ -144,7 +165,7 @@ export default class Footer {
             }>
                 <span class="product-card__description">${product.productName}</span>
                 <div class="product-card__skus">
-                    ${product.items.map((item) => `<button>${item.name}</button>`)}
+                    ${product.items.map((item) => `<button>${item.name}</button>`).join(",")}
                 </div>
                 <button class="product-card__btn" >
                 <a class="product-card__link" >ver produto</a>
@@ -155,6 +176,7 @@ export default class Footer {
 
         if (this.shelfContainer && hash === "cart") {
             this.shelfContainer.html(html);
+            this.footer.prepend(shelfTitle);
         }
     }
 }

checkout/src/arquivos/sass/checkout.scss

@@ -3,3 +3,4 @@
 @import "./partials/header";
 @import "./partials/footer";
 @import "./checkout/checkout.scss";
+@import "./partials/prateleira.scss";

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

@@ -43,21 +43,6 @@
             text-transform: uppercase;
             padding: 16px;
 
-            // background: $color-black;
-            // border: none;
-            // border-radius: 5px;
-            // transition: ease-in 0.22s all;
-            // outline: none;
-            // font-family: $font-family;
-            // font-style: normal;
-            // font-weight: 500;
-            // font-size: 14px;
-            // line-height: 16px;
-            // text-align: center;
-            // letter-spacing: 0.05em;
-            // color: $color-white;
-            // text-transform: uppercase;
-
             &:hover {
                 background: lighten($color-black, 5);
             }

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

@@ -9,17 +9,8 @@ html {
     min-height: 100%;
 }
 
-footer .footerCheckout__wrapper {
+
-    width: 94.9734%;
+
-    margin: auto auto 0 auto;
-}
-footer .footerCheckout__prateleira,
-header {
-    padding: 29px 0px;
-    width: 100%;
-    margin: 0 auto;
-    border-bottom: 1px solid black;
-}
 
 body {
     display: flex;

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

@@ -62,6 +62,7 @@
     }
 }
 .slick-slide {
+
     float: left;
     height: 100%;
     min-height: 1px;
@@ -135,58 +136,3 @@
     }
 }
 
-/* _prateleira.scss */
-.product-card {
-    .product-card__img {
-        width: 100%;
-        max-width: 75.7789%;
-    }
-
-    .product-card__description {
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 26px;
-        line-height: 35px;
-        text-align: center;
-
-        color: #000000;
-        margin-bottom: 20px;
-    }
-
-    .product-card__skus {
-        button {
-            cursor: pointer;
-            background-color: $color-blue2;
-            padding: 8px;
-            border: none;
-            font-family: "Open Sans";
-            font-style: normal;
-            font-weight: 700;
-            font-size: 26px;
-            line-height: 35px;
-            letter-spacing: 0.05em;
-            text-transform: uppercase;
-            color: #ffffff;
-        }
-    }
-    .product-card__btn {
-        margin-top: 10px;
-        background-color: $color-blue2;
-        border-radius: 8px;
-        width: 100%;
-        max-width: 485px;
-        padding: 12px;
-    }
-    .product-card__link {
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 700;
-        font-size: 26px;
-        line-height: 35px;
-        letter-spacing: 0.05em;
-        text-transform: uppercase;
-
-        color: #ffffff;
-    }
-}

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

@@ -3,21 +3,49 @@
     border-top: none;
     color: $color-gray2;
 
+    .footer-title {
+        font-family: $font-family-secundary;
+        font-weight: 400;
+        font-size: 48px;
+        line-height: 76px;
+        text-align: center;
+        color: $color-black3;
+    }
+
+    .container {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        align-items: center;
+
+        &::before {
+            display: none;
+        }
+        &::after {
+            display: none;
+        }
+    }
+
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
+        border: 1px solid black;
+        margin-top: 54px;
+        padding: 16px 63px;
     }
 
     &__address {
-        color: $color-gray2;
         font-family: $font-family;
         font-style: normal;
         font-weight: normal;
-        font-size: 10px;
-        line-height: 12px;
         text-transform: capitalize;
         max-width: 40%;
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 27px;
+        text-transform: capitalize;
+        color: #292929;
 
         @include mq(md, max) {
             margin-bottom: 24px;
@@ -30,6 +58,7 @@
         display: flex;
         justify-self: center;
         list-style: none;
+        margin: 0;
 
         @include mq(md, max) {
             align-self: center;
@@ -43,6 +72,14 @@
             margin: 0 8px;
             width: 1px;
         }
+        img {
+            width: 69px;
+        }
+    }
+    &__vtexpci {
+        img {
+            width: 103px;
+        }
     }
 
     &__developedBy {
@@ -53,6 +90,9 @@
 
         li:last-child {
             margin-left: 16px;
+            a img {
+                max-width: 55px;
+            }
         }
 
         a {
@@ -66,10 +106,19 @@
             line-height: 12px;
             text-decoration: none;
 
+            img {
+                max-width: 87px;
+            }
+
             span {
                 margin-right: 8px;
+                font-family: "Open Sans";
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 25px;
+                color: #292929;
             }
         }
     }
 }
-

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

@@ -1,4 +1,10 @@
 /* _header.scss */
+header {
+    padding: 29px 0px;
+    width: 100%;
+    margin: 0 auto;
+    border-bottom: 1px solid black;
+}
 .headerCheckout {
     .container {
         width: 79.53125%;

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

@@ -0,0 +1,82 @@
+/* _prateleira.scss */
+
+.footerCheckout__prateleira {
+    
+    padding: 0 253px;
+    .slick-prev {
+        left: 270px;
+    }
+    .slick-next {
+        // background-image: url("/arquivos/arrow-right-M3Academy.svg");
+        background-image: url("/checkout/src/arquivos/assets/svgs/arrow-right-mini-M3Academy.svg");
+        right: 270px;
+        background-color: transparent;
+    }
+    .slick-arrow {
+        top: calc(50% - 26px);
+        width: 26px;
+        height: 58px;
+        padding: 0;
+        border: none;
+        background-size: contain;
+        background-repeat: no-repeat;
+    }
+    .slick-slide {
+        padding: 0 8px;
+    }
+}
+.product-card {
+    &__img {
+        width: 100%;
+    }
+
+    &__description {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 26px;
+        line-height: 35px;
+        text-align: center;
+        display: block;
+        color: #000000;
+        margin-bottom: 20px;
+    }
+
+    &__skus {
+        display: flex;
+        justify-content: center;
+        button {
+            cursor: pointer;
+            background-color: $color-blue2;
+            padding: 8px;
+            border: none;
+            font-family: "Open Sans";
+            font-style: normal;
+            font-weight: 700;
+            font-size: 26px;
+            line-height: 35px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            color: #ffffff;
+        }
+    }
+    &__btn {
+        margin-top: 10px;
+        background-color: $color-blue2;
+        border-radius: 8px;
+        width: 100%;
+        padding: 12px;
+        border: none;
+    }
+    &__link {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 26px;
+        line-height: 35px;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+
+        color: #ffffff;
+    }
+}