fix: consertando merge indevido

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

@@ -8,12 +8,20 @@ export default class Footer {
     async init() {
         await this.selectors();
         // this.onUpdate();
+        this.showPrateleira();
+        // this.addCarrossel();
+        this.displaySlick();
     }
 
     async selectors() {
         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
+        this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
+        this.footerStamps = await waitElement(".footerCheckout__stamps");
+        this.footerAddress = await waitElement(".footerCheckout__address");
+        this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.cartTitulo =  await waitElement("#cart-title");
     }
 
     onUpdate() {
@@ -30,11 +38,133 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
+    showPrateleira() {
+        let prateleira = this.footerPrateleira;
+        prateleira.innerHTML = `
+
+        <h2 class="prateleira-title"> Você também pode gostar:</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(function (data) {
+                return data.map(function (produto) {
+
+                    let li = document.createElement("li")
+                    li.setAttribute("id", produto.productId)
+                    li.innerHTML = `
+
+
+                <img class="color-img" src = " ${produto.items[0].images[0].imageUrl}" alt = Imagem "${produto.productName}" />
+
+                <p class="prateleira-name" >${produto.productName}</p>
+                <div class ="prateleira-sku">
+
+                ${produto.items.map((name) => {
+                        return `<a name="sku" class="sku"> ${name.name}
+
+                </a>` }).join(" ")}
+                </div>
+
+                <button class="prateleira-button"> ver produto</button>
+                `
+                    prateleira.children[1].appendChild(li)
+
+                });
+
+            }).then(() => { this.addCarrossel();});
+
+
+        this.footerStamps.innerHTML = `
+
+        <li class="footerCheckout__listImage ">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <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/vtexPCIM3Academy.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 displaySlick() {
+        const orderForm = await window.vtexjs.checkout.getOrderForm();
+        const items = orderForm.items.length;
+
+        $(window).on("orderFormUpdated.vtex", (evt, oF) => {
+            if (oF.items.length <= 0) {
+                this.footerPrateleira.style.display = "none";
+            } else {
+                this.addCarrossel();
+                this.footerPrateleira.style.display = "block";
+            }
+            if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") {
+                this.footerPrateleira.style.display = "none";
+            }
+        });
+        if (items === 0) {
+            this.footerPrateleira.style.display = "none";
+        }
+    }
+
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".container-carrossel-item");
         $(elemento).slick({
+
+            infinite: false,
+            arrows: true,
+            variabreWidth: true,
             slidesToShow: 4,
             slidesToScroll: 1,
+            responsive: [
+
+                {
+                    breakpoint: 1025,
+                    settings:
+                    {slidesToShow: 3,
+                    slidesToScroll: 1,}
+                },
+                {
+                    breakpoint:376,
+                    settings:
+                    {slidesToShow: 2,
+                    slidesToScroll: 1,}
+                }
+            ]
         });
     }
 }

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/_footer.scss

@@ -6,28 +6,70 @@
     &__wrapper {
         align-items: center;
         display: flex;
+    }
+
+    .container {
+        display: flex;
+        align-items: center;
+        margin: 0;
         justify-content: space-between;
+
+        @media (min-width: 1200px) {
+            width: 100%;
+        }
+
+        @include mq(md, max) {
+            margin: 0 0 0 9px;
+            display: grid;
+        }
+    }
+
+    .color-img {
+        background-color: rgb(238, 238, 238);
     }
 
     &__address {
-        color: $color-gray2;
         font-family: $font-family;
+        color: $color-gray2;
+        margin: 27px 0 24px 0;
+        width: 269px;
         font-size: 10px;
         line-height: 12px;
         text-transform: capitalize;
-        max-width: 40%;
 
         @include mq(md, max) {
             margin-bottom: 24px;
             max-width: 100%;
         }
+
+
+        @include mq(xl, min) {
+            font-family: $font-family;
+            color: $color-black-100;
+            width: 537px;
+            font-size: 20px;
+            line-height: 27px;
+            text-transform: capitalize;
+        }
+
+        @include mq(md, max) {
+            margin: 0px 0 16px 7px;
+            font-family: $font-family;
+            color: $color-black-100;
+            font-size: 10px;
+            line-height: 14px;
+            width: 269px;
+            text-transform: capitalize;
+        }
     }
 
     &__stamps {
-        align-items: center;
         display: flex;
+        align-items: center;
         justify-self: center;
         list-style: none;
+        width: 404px;
+        margin: 16px 189px 16px 137px;
 
         @include mq(md, max) {
             align-self: center;
@@ -35,31 +77,69 @@
         }
 
         &__divider {
-            background-color: $color-gray4;
             display: inline-block;
+            background-color: $color-gray4;
             height: 24px;
             margin: 0 8px;
             width: 1px;
         }
+
+        @include mq(xl, min) {
+            width: 690px;
+
+        }
+
+        @include mq(md, max) {
+            width: 342px;
+            margin: 16px 0 16px 0;
+            order: -1;
+        }
+
+
+
     }
 
     &__developedBy {
-        align-items: center;
         display: flex;
-        list-style-type: none;
+        align-items: center;
+        width: 217px;
         margin: 0;
+        list-style-type: none;
 
-        li:last-child {
+        .vtex-rigth1 {
-            margin-left: 16px;
+            width: 15%;
         }
 
+        .vtex-rigth2 {
+            width: 8%;
+        }
+
+        .list {
+            @include mq(xl, min) {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 25px;
+                width: 388px;
+            }
+
+            @include mq(md, max) {
+                margin: 0 0 16px 7px;
+            }
+        }
+
+
         a {
-            align-items: center;
-            color: $color-gray2;
             display: flex;
             font-family: $font-family;
+<<<<<<< HEAD
+=======
+            color: $color-gray2;
+>>>>>>> feature/footer
             font-size: 10px;
             line-height: 12px;
+            align-items: center;
             text-decoration: none;
 
             span {

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

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

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

@@ -1 +1,137 @@
 /* _prateleira.scss */
+.footerCheckout {
+    .container-carrossel-item {
+        @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;
+        }
+    }
+}