feat(footer): estiliza prateleira desktop

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

@@ -68,8 +68,14 @@ export default class Footer {
     }
 
     async renderPrateleira() {
+
         if (this.prateleira) {
 
+            const prateleiraTitle = document.createElement("h2");
+            const titleNode = document.createTextNode("Você também pode gostar:");
+            prateleiraTitle.classList.add("prateleira__title");
+            prateleiraTitle.appendChild(titleNode);
+
             const prateleiraSlick = document.createElement("ul");
             prateleiraSlick.classList.add("prateleira__carousel");
 
@@ -86,13 +92,17 @@ export default class Footer {
                     console.log(product)
 
                     const productImageUrl = product.items[0].images[0].imageUrl;
-                    console.log("productImageUrl:", productImageUrl);
                     const productName = product.productName;
-                    console.log("productName:", productName);
                     const productSkus = product.items;
-                    console.log("productSkus:", productSkus);
+                    const productLink = product.link;
                     let skusStructure = "";
 
+
+                    console.log("productImageUrl:", productImageUrl);
+                    console.log("productName:", productName);
+                    console.log("productSkus:", productSkus);
+                    console.log("productLink:", productLink);
+
                     productSkus.forEach((sku) => {
                         console.log("sku:", sku);
                         skusStructure += `
@@ -110,14 +120,17 @@ export default class Footer {
                             <div class="prateleira__item--description">
                                 <p class="prateleira__item--name">${productName}</p>
                                 <ul class="prateleira__item--options">${skusStructure}</ul>
+                                <a class="prateleira__item--link" href="${productLink}">
                                     <button type="button" class="prateleira__item--button">Ver produto</button>
+                                </a>
                             </div>
                         </li>
                     `
                 })
 
-                prateleiraSlick.innerHTML = cardsStructure;
+                this.prateleira.appendChild(prateleiraTitle);
                 this.prateleira.appendChild(prateleiraSlick);
+                prateleiraSlick.innerHTML = cardsStructure;
 
                 if(window.innerWidth > 1024) {
                     this.addCarrossel(prateleiraSlick);
@@ -132,6 +145,7 @@ export default class Footer {
         $(element).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            infinite: false
         });
     }
 

checkout/src/arquivos/sass/checkout.scss

@@ -2,4 +2,5 @@
 @import "./lib/slick";
 @import "./partials/header";
 @import "./partials/footer";
+@import "./partials/prateleira";
 @import "./checkout/checkout.scss";

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

@@ -1,8 +1,6 @@
 /* Slider */
 
 .slick-slider {
-    margin: 0;
-
     position: relative;
     display: block;
     box-sizing: border-box;
@@ -16,11 +14,14 @@
     touch-action: pan-y;
     -webkit-tap-highlight-color: transparent;
 }
+
 .slick-list {
+    // height: 100%;
+    margin: 0 -8px 0 -8px;
+
     position: relative;
     overflow: hidden;
     display: block;
-    margin: 0 -8px 0 -8px;
     padding: 0;
 
     &:focus {
@@ -42,6 +43,8 @@
 }
 
 .slick-track {
+    // height: 100%;
+
     position: relative;
     left: 0;
     top: 0;
@@ -65,8 +68,8 @@
 }
 .slick-slide {
     margin: 0 8px;
-    // width: 242px;
 
+    //código prévio
     float: left;
     height: 100%;
     min-height: 1px;
@@ -74,9 +77,11 @@
     [dir="rtl"] & {
         float: right;
     }
+
     img {
         display: block;
     }
+
     &.slick-loading img {
         display: none;
     }
@@ -101,41 +106,50 @@
         border: 1px solid transparent;
     }
 }
+
 .slick-arrow {
-    font-size: 0;
     position: absolute;
+    top: 50%;
+    border: 0;
+    font-size: 0;
+    z-index: 4;
+    transform: translateY(-50%);
 }
+
 .slick-prev {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
     no-repeat center center;
-    z-index: 4;
     left: 10px;
+
 }
 .slick-next {
-    z-index: 4;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
     right: 10px;
 }
-.slick-arrow.slick-hidden {
+
-    display: none;
+// .slick-arrow.slick-hidden {
-}
+//     display: none;
-.slick-dots {
+// }
-    li {
+
-        margin: 0.5em;
+// .slick-dots {
-        button {
+//     li {
-            overflow: hidden;
+//         margin: 0.5em;
-            text-indent: 999999999px;
+//         button {
-            height: 1em;
+//             overflow: hidden;
-            width: 1em;
+//             text-indent: 999999999px;
-            border-radius: 1em;
+//             height: 1em;
-            background-color: #fff;
+//             width: 1em;
-            :focus {
+//             border-radius: 1em;
-                outline: none;
+//             background-color: #fff;
-            }
+//             :focus {
-        }
+//                 outline: none;
-        &.slick-active button {
+//             }
-            &:focus {
+//         }
-                outline: none;
+//         &.slick-active button {
-            }
+//             &:focus {
-        }
+//                 outline: none;
-    }
+//             }
-}
+//         }
+//     }
+// }

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

@@ -9,13 +9,6 @@
 //     border-top: none;
 //     color: $color-gray2;
 
-    &__prateleira {
-        // margin-top: 101px;
-        height: 448px;
-        background-color: green;
-        width: 100%;
-    }
-
     &__wrapper {
         margin: 0;
         width: 100%;

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

@@ -1,31 +1,99 @@
 /* _prateleira.scss */
 .footerCheckout__prateleira {
-    // estilos no _footer.scss
+    // margin-top: 101px;
-}
+    height: 448px;
+    // background-color: green;
 
-.prateleira__carousel {
+    .prateleira__title {
-    margin: 0;
+        margin: 0 0 20px;
-    list-style-type: none;
+        line-height: 38px;
-}
+        font-family: $font-family-secundary;
-
+        font-size: 24px;
-.prateleira__item {
+        font-weight: 400;
-    width: 242px;
+        // font-style: normal;
-    height: 390px;
+        text-align: center;
-    background: red;
+        color: $black-500;
-
-
-        &--image-container {
-            width: 242px;
-            height: 242px;
-
-            img {
-                width: 242px;
-                height: 242px;
     }
+
+    .prateleira__carousel {
+        // (_slick.scss .slick-slider)
+        margin: 0;
+        height: 390px;
+    }
+
+    .prateleira__item {
+        // height: 100%;
+        // background: yellow;
+
+        button {
+            border: none;
+            border-radius: 8px;
+            line-height: 18px;
+            font-size: 13px;
+            font-family: $font-family;
+            font-weight: 700;
+            color: $color-white;
+            background: $blue-300;
+            text-align: center;
+            text-transform: uppercase;
+
+            font-style: normal;
+            display: flex;
+            align-items: center;
+            letter-spacing: 0.05em;
+        }
+
+        &--image {
+            height: 242px;
         }
 
         &--description {
-            background: yellow;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
         }
 
+        &--name {
+            margin: 20px 0 0;
+            font-family: $font-family;
+            // font-style: normal;
+            // font-weight: 400;
+            line-height: 18px;
+            font-size: 13px;
+            text-align: center;
+            color: $black-500;
+        }
+
+        &--options {
+            margin: 0 auto;
+            display: flex;
+            gap: 5px;
+            list-style: none;
+
+            button {
+                padding: 5px;
+            }
+        }
+
+        &--link {
+            button {
+                width: 100%;
+                padding: 12px 0;
+                justify-content: center;
+            }
+        }
+    }
 }
+
+// .slick-track {
+
+//     &:nth-child(3) {
+
+//         div li div {
+//             background: red;
+//         }
+//         // &--image-container {
+//         //     //#B1D7F1;
+//         // }
+//     }
+// }

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -8,7 +8,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
 $black-300: #292929;
 $black-500: #000000;
 
-$color-white: #fff;
+$color-white: #ffffff;
 
 $color-gray-rename: #c4c4c4;
 $blue-300: #00C8FF;