algoritimo para fazer o slick aparecer

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

@@ -40,50 +40,47 @@ export default class Footer {
         observer.observe(target, config);
     }
 
-    mostraFooter(){
+    mostraFooter() {
         let pratileira = this.footerPratileira;
-        // let adress = this.footerAddress;
-        // let developedBy = this.footerDevelopedBy;
-        // let icon = this.footerStamps;
-
         pratileira.innerHTML = `
 
-        <h2> Você Também pode gosta:</h2>
+        <h2 class="text-foot"> Você Também pode gosta:</h2>
         <ul class=" container-carrossel-item"></ul>
         `
 
         fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
 
-        .then((Response)=> Response.json())
+            .then((Response) => Response.json())
-        .then(function (data){
+            .then(function (data) {
-            return data.map(function (produto){
+                return data.map(function (produto) {
 
-                let li = document.createElement("li")
+                    let li = document.createElement("li")
-                li.setAttribute("id", produto.productId)
+                    li.setAttribute("id", produto.productId)
-                li.innerHTML = `
+                    li.innerHTML = `
 
-                <figure>
-                <img src = " ${produto.items[0].images[0].imageUrl }" alt = Imagem "${produto.productName}" />
-                </figure>
 
+                <img class="color-img" src = " ${produto.items[0].images[0].imageUrl}" alt = Imagem "${produto.productName}" />
+
+                <p class="numeProduct" >${produto.productName}</p>
                 <div class ="container-tamanho-cores">
-                <input name="tamanho" type-"radio"/>
-                ${produto.items.map((name)=> {return `<label name="tamanho"> ${name.name}
 
-                </label>` })}
+                ${produto.items.map((name) => {
-                </div>
+                        return `<a name="tamanho" class="tamanho"> ${name.name}
-                <div>
+
-                <button></button>
+                </a>` }).join(" ")}
                 </div>
 
+                <button class="bottons"> ver produto</button>
+
+
                 `
-                pratileira.children[1].appendChild(li)
+                    pratileira.children[1].appendChild(li)
-                console.log(pratileira)
+                    // console.log(pratileira)
+
+                });
 
             });
 
-        });
-
 
         this.footerStamps.innerHTML = `
 
@@ -91,39 +88,61 @@ export default class Footer {
         <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
         </li>
         <li class="footerCheckout__listImage">
-        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
         </li>
         <li class="footerCheckout__listImage">
-        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png">
         </li>
         <li class="footerCheckout__listImage">
-        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png">
         </li>
         <li class="footerCheckout__listImage">
-        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png">
         </li>
         <li class="footerCheckout__listImage">
-        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png">
         </li>
         <li class="footerCheckout__listImage">
-        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png">
         </li>
+        <li><span class=" footerCheckout__stamps__divider"></span></li>
         <li class="footerCheckout__listImage">
-        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
-        </li>
-        <li class="footerCheckout__listImage">
-        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
         </li>
 
 
-        `
+        `;
+
+
+        this.footerDevelopedBy.innerHTML = `
+
+    <li class=" list ">
+    <span>Power By</span>
+    <img class="vtex-rigth1" src=" https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
+
+    <span>Developed By</span>
+    <img class="vtex-rigth2" src=" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
+    </li>
+
+
+
+
+
+
+    `;
     }
 
 
 
+
+
     async addCarrossel() {
         const elemento = await waitElement(".container-carrossel-item");
         $(elemento).slick({
+
+            infinite: false,
+            arrows: true,
+            variabreWidth: true,
             slidesToShow: 4,
             slidesToScroll: 1,
         });

checkout/src/arquivos/sass/checkout.scss

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

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

@@ -3,14 +3,15 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
+
 html {
     height: 100%;
     min-height: 100%;
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    width: 100%;
-    margin: auto auto 0 auto;
+    // margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,
 header {

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

@@ -1,6 +1,7 @@
 /* Slider */
 
 .slick-slider {
+
     position: relative;
     display: block;
     box-sizing: border-box;
@@ -62,6 +63,7 @@
     }
 }
 .slick-slide {
+
     float: left;
     height: 100%;
     min-height: 1px;
@@ -103,12 +105,21 @@
 .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: 39%;
     z-index: 4;
     left: 10px;
 }
 .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: 27px;
     z-index: 4;
-    right: 10px;
+
 }
 .slick-arrow.slick-hidden {
     display: none;
@@ -133,4 +144,9 @@
             }
         }
     }
+
+
+
+
+
 }

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

@@ -7,13 +7,39 @@
     &__wrapper {
         align-items: center;
         display: flex;
-        justify-content: space-between;
+        // justify-content: space-between;
-    //     position: fixed;
+        //     position: fixed;
-    // bottom: 0;
+        // bottom: 0;
-    // left: 0;
+        // left: 0;
     }
 
+    .container {
+        display: flex;
+        align-items: center;
+        margin: 0;
+        justify-content: space-between;
+
+        @media (min-width: 1200px) {
+            width: 100%;
+
+        }
+
+    }
+
+    .color-img {
+        background-color: rgb(238, 238, 238);
+
+    }
+
+    &__listImage {
+        // margin: 0 12px;
+    }
+
+
+
     &__address {
+        margin: 27px 0 24px 0;
+        width: 269px;
         color: $color-gray2;
         font-family: $font-family;
         font-style: normal;
@@ -21,15 +47,35 @@
         font-size: 10px;
         line-height: 12px;
         text-transform: capitalize;
-        max-width: 40%;
+        // max-width: 40%;
 
         @include mq(md, max) {
             margin-bottom: 24px;
             max-width: 100%;
         }
+
+
+        @media (min-width: 2500px) {
+            width: 537px;
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 20px;
+            line-height: 27px;
+
+
+            text-transform: capitalize;
+
+
+
+            color: #292929;
+
+        }
     }
 
     &__stamps {
+        width: 404px;
+        margin: 16px 189px 16px 137px;
         align-items: center;
         display: flex;
         justify-self: center;
@@ -47,18 +93,46 @@
             margin: 0 8px;
             width: 1px;
         }
+
+        @media (min-width: 2500px) {width: 690px;}
+
+
     }
 
     &__developedBy {
+        width: 217px;
         align-items: center;
         display: flex;
         list-style-type: none;
         margin: 0;
 
         li:last-child {
-            margin-left: 16px;
+            // margin-left: 16px;
         }
 
+        .vtex-rigth1 {
+            width: 15%;
+
+        }
+
+        .vtex-rigth2 {
+            width: 8%;
+        }
+
+        .list{
+            font-family: 'Open Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 18px;
+line-height: 25px;
+
+/* Neutras/Preto */
+
+color: #292929;
+
+        }
+
+
         a {
             align-items: center;
             color: $color-gray2;
@@ -73,6 +147,10 @@
             span {
                 margin-right: 8px;
             }
+
+        }
+        @media (min-width: 2500px) {
+            width:388px ;
         }
     }
 }

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

@@ -110,7 +110,7 @@
             li #progress-bar-circle-1.active,
             li #progress-bar-circle-2.active,
             li #progress-bar-circle-3.active {
-                border: none;
+                // border: none;
                 background-color: $color-liPonto;
             }
 
@@ -119,7 +119,7 @@
                 position: absolute;
                 left: 26%;
                 transform: translateY(-50%);
-                bottom: 3px;
+                bottom: 4px;
                 width: 98%;
                 height: 1px;
                 border-top: 1px solid $color-liPonto;

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

@@ -1 +1,155 @@
 /* _prateleira.scss */
+
+.footerCheckout{
+
+    .container-carrossel-item{
+        margin: 0 132px;
+    }
+.slick-slide{
+    width: 242px;
+    margin: 0 16px 0 0;
+}
+
+.text-foot{
+    display: flex;
+    justify-content: center;
+    margin: 0 0 20px 0;
+    font-family: 'Tenor Sans';
+    font-family: 'Tenor Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    /* identical to box height, or 158% */
+
+    text-align: center;
+
+    color: #000000;
+
+    @media (min-width: 2500px) {
+
+        font-family: 'Tenor Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 48px;
+line-height: 76px;
+/* identical to box height, or 158% */
+
+text-align: center;
+
+color: #000000;
+
+    }
+}
+
+.container-tamanho-cores{
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+
+
+    .tamanho{
+        //     width: 26px;
+        //     background: #00C8FF;
+        // border-radius: 8px;
+        margin-left: 5px;
+            background: #00C8FF;
+            border-radius: 8px;
+            min-width: 9.3%;
+            padding: 4px;
+            justify-content: center;
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 18px;
+            display: flex;
+            align-items: center;
+            text-align: center;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            color: #FFFFFF;
+            text-decoration: none;
+
+            @media (min-width: 2500px) {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 700;
+                font-size: 26px;
+                line-height: 35px;
+                display: flex;
+                align-items: center;
+                text-align: center;
+                letter-spacing: 0.05em;
+                text-transform: uppercase;
+
+                color: #FFFFFF;
+
+
+            }
+        }
+
+}
+
+.numeProduct{
+    margin: 20px 0;
+    display: flex;
+    justify-content: center;
+
+    @media (min-width: 2500px) {
+        font-family: 'Open Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 26px;
+line-height: 35px;
+text-align: center;
+
+color: #000000;
+    }
+}
+
+
+
+
+.bottons  {
+    margin-bottom: 56px;
+//     display: flex;
+// justify-content: center;
+    width: 100%;
+    height: 42px;
+    background: #00c8ff;
+    border: none;
+    border-radius: 8px;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 18px;
+    align-items: center;
+    text-align: center;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: #FFFFFF;
+
+    @media (min-width: 2500px) {font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 26px;
+        line-height: 35px;
+
+        align-items: center;
+        text-align: center;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+
+        color: #FFFFFF;}
+
+
+
+}
+
+}
+
+
+
+