feat(footer): cria prateleira desktop com slick

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

@@ -8,6 +8,7 @@ export default class Footer {
     async init() {
         await this.selectors();
         this.replaceEmptyCartContent();
+        this.renderPrateleira();
         this.stampsHTML();
         this.developedByHTML();
         this.onUpdate();
@@ -21,10 +22,12 @@ export default class Footer {
         this.emptyCartTitle = await waitElement(".empty-cart-title");
         this.continueShopping = await waitElement("#cart-choose-products");
         this.prateleira = await waitElement(".footerCheckout__prateleira");
+        // this.prateleiraSlick = await waitElement(".prateleira__carousel")
     }
 
     replaceEmptyCartContent() {
         if (this.checkoutVazio) {
+            console.log("entrou no if do replaceContent()")
             this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
             this.continueShopping.textContent = "Continuar comprando";
         }
@@ -35,21 +38,24 @@ export default class Footer {
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
         if(this.checkoutVazio) {
+            console.log("entrou no if do onUpdate()")
+
             let target = this.checkoutVazio;
             let config = { attributes: true };
 
-            this.cartTitle.style.display = "none";
+            // this.cartTitle.style.display = "none";
-            this.prateleira.style.display = "none";
+            // this.prateleira.style.display = "none";
 
             let observer = new MutationObserver((mutations) => {
-                mutations.forEach((mutation) => {
+                mutations.forEach(() => {
-                    console.log("mutation type: ", mutation.typ)
+
-                    console.log("rolou mutation")
                     if(this.checkoutVazio.style.display == "block") {
                         console.log("Carrinho está vazio")
                         this.cartTitle.style.display = "none";
                         this.prateleira.style.display = "none";
+
                     } else {
+
                         console.log("Carrinho NÃO está vazio");
                         this.cartTitle.style.display = "block";
                         this.prateleira.style.display = "block";
@@ -61,13 +67,73 @@ export default class Footer {
         }
     }
 
-    // async addCarrossel() {
+    async renderPrateleira() {
-    //     const elemento = await waitElement("#my-element");
+        if (this.prateleira) {
-    //     $(elemento).slick({
+
-    //         slidesToShow: 4,
+            const prateleiraSlick = document.createElement("ul");
-    //         slidesToScroll: 1,
+            prateleiraSlick.classList.add("prateleira__carousel");
-    //     });
+
-    // }
+            const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319");
+            console.log("await fetch response:", response);
+            const productsList = await response.json();
+            console.log("await fetch productsList:", productsList);
+
+            let cardsStructure = "";
+
+            if(productsList) {
+
+                productsList.forEach((product) => {
+                    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);
+                    let skusStructure = "";
+
+                    productSkus.forEach((sku) => {
+                        console.log("sku:", sku);
+                        skusStructure += `
+                            <li>
+                                <button type="button">${sku.name}</button>
+                            </li>
+                        `
+                    })
+
+                    cardsStructure += `
+                        <li class="prateleira__item">
+                            <div class="prateleira__item--image-container">
+                                <img class="prateleira__item--image" src="${productImageUrl}" />
+                            </div>
+                            <div class="prateleira__item--description">
+                                <p class="prateleira__item--name">${productName}</p>
+                                <ul class="prateleira__item--options">${skusStructure}</ul>
+                                <button type="button" class="prateleira__item--button">Ver produto</button>
+                            </div>
+                        </li>
+                    `
+                })
+
+                prateleiraSlick.innerHTML = cardsStructure;
+                this.prateleira.appendChild(prateleiraSlick);
+
+                if(window.innerWidth > 1024) {
+                    this.addCarrossel(prateleiraSlick);
+                }
+            }
+        }
+    }
+
+    async addCarrossel(element) {
+        console.log("chamada do addCarrossel()");
+        // const elemento = await waitElement(this.prateleiraSlick);
+        $(element).slick({
+            slidesToShow: 4,
+            slidesToScroll: 1,
+        });
+    }
 
     async stampsHTML() {
         const stamps = await waitElement('.footerCheckout__stamps');

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

@@ -1,4 +1,14 @@
 .checkout-container {
+    // background: yellow;
+    // height: 100%;
+    // box-sizing: border-box;
+
+    // &:before,
+    // &:after {
+    //     display: none;
+    // }
+
+
 	.client-pre-email {
 		border-color: $color-gray4;
 		font-family: $font-family;
@@ -287,3 +297,12 @@
 		}
 	}
 }
+
+// .transactions-container {
+//     height: 0;
+
+//     &::before,
+//     &::after {
+//         display: none;
+//     }
+// }

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

@@ -1,22 +1,38 @@
 .container {
+    // background: salmon;
+
+    // &:before,
+    // &:after {
+    //     display: none;
+    // };
+
     @include mq(md, max) {
         width: 100%;
     }
 }
 
 .cart-template {
+    // background: red;
+    margin: 0;
+
+
     font-family: $font-family;
     @include mq(md, max) {
         padding: 0 0;
     }
+
     .item-unit-label {
         display: none;
     }
+
     .cart {
-        border: 3px solid $color-gray3;
+        // margin: 0;
-        box-sizing: border-box;
+        // background: purple;
+        // border: 1px solid red;
+        // $color-gray3;
         border-radius: 5px;
         padding: 16px;
+        box-sizing: border-box;
 
         @include mq(md, max) {
             margin: 0px 0 25px 0;
@@ -24,10 +40,31 @@
             border-right: none;
             border-radius: 0;
         }
+
+        // .cart-items {
+        //     font-family: $font-family-secundary;
+
+        //     thead {
+        //         line-height: 16px;
+        //         font-size: 14px;
+        //         // font-style: normal;
+        //         // font-weight: 400;
+        //         color: $black-300;
+        //     }
+
+        //     .product-image img {
+        //         display: block;
+        //         width: 60px;
+        //         height: 60px;
+        //         transform: scaleX(-1);
+        //     }
+        // }
     }
+
     .cart-fixed.affix {
         position: relative !important;
     }
+
     .cart-fixed {
         font-family: $font-family;
         width: 100%;
@@ -48,7 +85,7 @@
         }
 
         .cart {
-            border: 1px solid $color-gray4;
+            // border: 1px solid $color-gray4;
 
             ul li {
                 border-top: none;
@@ -749,6 +786,8 @@
         flex-direction: column;
         width: 343px;
 
+        margin-bottom: 43px;
+
         @include mq(md, max) {
             padding: 0 16px;
             width: calc(100% - 32px);

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

@@ -51,3 +51,4 @@
 		}
 	}
 }
+

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

@@ -1,6 +1,8 @@
 /* Slider */
 
 .slick-slider {
+    margin: 0;
+
     position: relative;
     display: block;
     box-sizing: border-box;
@@ -18,7 +20,7 @@
     position: relative;
     overflow: hidden;
     display: block;
-    margin: 0;
+    margin: 0 -8px 0 -8px;
     padding: 0;
 
     &:focus {
@@ -62,6 +64,9 @@
     }
 }
 .slick-slide {
+    margin: 0 8px;
+    // width: 242px;
+
     float: left;
     height: 100%;
     min-height: 1px;

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

@@ -1 +1,31 @@
 /* _prateleira.scss */
+.footerCheckout__prateleira {
+    // estilos no _footer.scss
+}
+
+.prateleira__carousel {
+    margin: 0;
+    list-style-type: none;
+}
+
+.prateleira__item {
+    width: 242px;
+    height: 390px;
+    background: red;
+
+
+        &--image-container {
+            width: 242px;
+            height: 242px;
+
+            img {
+                width: 242px;
+                height: 242px;
+            }
+        }
+
+        &--description {
+            background: yellow;
+        }
+
+}

checkout/src/template-checkout/checkout-footer.html

@@ -2,7 +2,60 @@
     MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no footer, deverá ser feito através de javaScript. -->
 
 <footer class="footerCheckout">
-    <div class="footerCheckout__prateleira"></div>
+    <div class="footerCheckout__prateleira">
+
+
+        <li class="prateleira__item">
+            <div class="prateleira__item--image-container">
+                <img class="prateleira__item--image" src="${item.image}" />
+            </div>
+            <div class="prateleira__item--description">
+                <p class="prateleira__item--name">${item.title}</p>
+                <ul class="prateleira__item--options">
+                    <li>
+                        <button type="button"></button>
+                    </li>
+                </ul>
+                <button type="button" class="prateleira__item--button">Ver produto</button>
+            </div>
+        </li>
+
+
+        <!-- <ul class="prateleira__carousel">
+            <li class="prateleira__card">
+                <div class="prateleira__card--">
+                <img class="prateleira__card--image" src="${imageUrl}" />
+                </div>
+                <div class="prateleira__card--description">
+                    <p class="prateleira__card--title">
+                        ${product.productName}
+                    </p>
+                    <div class="prateleira__card--options">
+
+                    </div>
+                    <button class="prateleira__card--button">VER PRODUTO</button>
+                </div>
+            </li>
+
+            <li class="prateleira__card">
+                <div class="prateleira__card--">
+                <img class="prateleira__card--image" src="${imageUrl}" />
+                </div>
+                <div class="prateleira__card--description">
+                    <p class="prateleira__card--title">
+                        ${product.productName}
+                    </p>
+                    <div class="prateleira__card--options">
+
+                    </div>
+                    <button class="prateleira__card--button">VER PRODUTO</button>
+                </div>
+            </li>
+        </ul> -->
+
+
+
+    </div>
     <div class="footerCheckout__wrapper">
         <div class="footerCheckout__address">
             <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>