feat: adiciona scss prateleira

checkout/src/arquivos/js/components/CheckoutUI.js

@@ -1,5 +1,5 @@
 import { isSmallerThen768 } from "../helpers/MediasMatch";
-import { alterarTamanhoImagemSrcVtex } from "../helpers/vtexUtils";
+import { alterarskuImagemSrcVtex } from "../helpers/vtexUtils";
 import waitForEl from "../helpers/waitForEl";
 
 export default class CheckoutUI {
@@ -55,7 +55,7 @@ export default class CheckoutUI {
     resizeImages() {
         $(".product-image img").each((i, el) => {
             const $el = $(el);
-            $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height));
+            $el.attr("src", alterarskuImagemSrcVtex($el.attr("src"), this.width, this.height));
         });
     }
 

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

@@ -46,7 +46,7 @@ export default class Footer {
         let pratileira = this.footerPratileira;
         pratileira.innerHTML = `
 
-        <h2 class="text-foot"> Você Também pode gosta:</h2>
+        <h2 class="prateleira-title"> Você também pode gostar:</h2>
         <ul class=" container-carrossel-item"></ul>
 
         `
@@ -64,16 +64,16 @@ export default class Footer {
 
                 <img class="color-img" src = " ${produto.items[0].images[0].imageUrl}" alt = Imagem "${produto.productName}" />
 
-                <p class="numeProduct" >${produto.productName}</p>
+                <p class="prateleira-name" >${produto.productName}</p>
-                <div class ="container-tamanho-cores">
+                <div class ="prateleira-sku">
 
                 ${produto.items.map((name) => {
-                        return `<a name="tamanho" class="tamanho"> ${name.name}
+                        return `<a name="sku" class="sku"> ${name.name}
 
                 </a>` }).join(" ")}
                 </div>
 
-                <button class="bottons"> ver produto</button>
+                <button class="prateleira-button"> ver produto</button>
 
 
                 `

checkout/src/arquivos/js/helpers/vtexUtils.js

@@ -3,10 +3,10 @@
  * @param {string} src url da imagem na VTEX
  * @param {int} width
  * @param {int} height
- * @return {string} url da imagem com o tamanho alterado
+ * @return {string} url da imagem com o sku alterado
  */
 
-export function alterarTamanhoImagemSrcVtex(src, width, height) {
+export function alterarskuImagemSrcVtex(src, width, height) {
     if (typeof src == "undefined") {
         console.warn("Parametro 'src' não recebido.");
 

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,5 +1,4 @@
 /* Slider */
-
 .slick-slider {
     position: relative;
     display: block;
@@ -14,6 +13,7 @@
     touch-action: pan-y;
     -webkit-tap-highlight-color: transparent;
 }
+
 .slick-list {
     position: relative;
     overflow: hidden;
@@ -30,6 +30,7 @@
         cursor: hand;
     }
 }
+
 .slick-slider .slick-track,
 .slick-slider .slick-list {
     -webkit-transform: translate3d(0, 0, 0);
@@ -61,7 +62,9 @@
         visibility: hidden;
     }
 }
+
 .slick-slide {
+
     float: left;
     height: 100%;
     min-height: 1px;
@@ -96,23 +99,37 @@
         border: 1px solid transparent;
     }
 }
+
 .slick-arrow {
     font-size: 0;
     position: absolute;
 }
+
 .slick-prev {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
         no-repeat center center;
+        border: none;
+        background-color: transparent;
+        top: 38%;
     z-index: 4;
-    left: 10px;
+    left: 6px;
 }
+
 .slick-next {
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
+        border: none;
+        background-color: transparent;
+        bottom: 57%;
+        right: 22px;
     z-index: 4;
-    right: 10px;
+
 }
+
 .slick-arrow.slick-hidden {
     display: none;
 }
+
 .slick-dots {
     li {
         margin: 0.5em;

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

@@ -1 +0,0 @@
-/* _menu.scss */

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

@@ -1 +1,139 @@
 /* _prateleira.scss */
+.footerCheckout {
+    .container-carrossel-item {
+        margin: 0 132px;
+
+        @include mq(md, max) {
+            margin: 0 16px;
+        }
+    }
+
+    .slick-slide {
+        width: 242px;
+        margin: 0 16px 0 0;
+    }
+
+    .prateleira-title {
+        display: flex;
+        justify-content: center;
+        font-family: $font-family-secundary;
+        color: $color-black-500;
+        margin: 0 0 20px 0;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+
+        @include mq(xl, min) {
+            font-family: $font-family-secundary;
+            color: $color-black-500;
+            font-size: 48px;
+            line-height: 76px;
+            text-align: center;
+        }
+
+        @include mq(sm, max) {
+            font-size: 14px;
+            line-height: 28px
+        }
+    }
+
+    .prateleira-sku {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 20px;
+
+        @include mq(sm, max) {
+            flex-wrap: wrap
+        }
+
+
+        .sku {
+            display: flex;
+            font-family: $font-family;
+            color: $color-white-500;
+            background: $color-blue-100;
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 18px;
+            letter-spacing: 0.05em;
+
+            margin-left: 5px;
+            border-radius: 8px;
+            min-width: 9.3%;
+            padding: 4px;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            text-transform: uppercase;
+            text-decoration: none;
+
+            @include mq(xl, min) {
+                display: flex;
+                align-items: center;
+                text-align: center;
+                font-family: $font-family;
+                color: $color-white-500;
+                font-weight: 700;
+                font-size: 26px;
+                line-height: 35px;
+                letter-spacing: 0.05em;
+                text-transform: uppercase;
+            }
+
+            @include mq(sm, max) {
+                margin-bottom: 10px;
+            }
+        }
+    }
+
+    .prateleira-name {
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        margin: 20px 0;
+
+        @include mq(xl, min) {
+            font-family: $font-family;
+            color: $color-black-500;
+            font-size: 26px;
+            line-height: 35px;
+            text-align: center;
+        }
+
+        @include mq(sm, max) {
+            font-size: 13px;
+            line-height: 18px;
+            text-align: center;
+        }
+    }
+
+    .prateleira-button  {
+        font-family: $font-family;
+        color: $color-white-500;
+        background: $color-blue-100;
+        text-transform: uppercase;
+        font-size: 13px;
+        line-height: 18px;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        margin-bottom: 56px;
+        width: 100%;
+        height: 42px;
+        border: none;
+        border-radius: 8px;
+        text-align: center;
+        align-items: center;
+
+        @include mq(xl, min) {
+            font-family: $font-family;
+            color: $color-white-500;
+            font-weight: 700;
+            font-size: 26px;
+            line-height: 35px;
+            letter-spacing: 0.05em;
+            align-items: center;
+            text-align: center;
+            text-transform: uppercase;
+        }
+    }
+}