Merge pull request 'feature/adiciona-prateleira-e-slick' (#2) from feature/adiciona-prateleira-e-slick into development

Reviewed-on: #2

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

@@ -6,18 +6,51 @@ export default class Footer {
     }
 
     async init() {
+        this.list = [
+            {
+                image: "https://picsum.photos/242/242",
+                description: "Sandália Azul Spike Amarração",
+                items: [34, 35, 36, 37, 38, "Rosa"],
+            },
+            {
+                image: "https://picsum.photos/242/242",
+                description: "Sandália Roxo Spike Amarração",
+                items: [34, 35, 36, 37, 38],
+            },
+            {
+                image: "https://picsum.photos/242/242",
+                description: "Sandália Verde Spike Amarração",
+                items: [34, 35, 36, 37, 38],
+            },
+            {
+                image: "https://picsum.photos/242/242",
+                description: "Jaqueta Masculina Thermoball Eco",
+                items: ["VERDE", "AZUL", "JAQUETA AZUL"],
+            },
+            {
+                image: "https://picsum.photos/242/242",
+                description: "Sandália Amarela Spike Amarração",
+                items: [34],
+            },
+        ];
+
         await this.selectors();
         // this.onUpdate();
+        this.renderPrateleira();
+        this.items = document.querySelector(".footerCheckout__prateleira-container");
+        this.renderItems();
+        await this.addCarrossel();
     }
 
     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.checkoutVazio = await waitElement(".empty-cart-content");
+        this.prateleira = await waitElement(".footerCheckout__prateleira");
     }
 
     onUpdate() {
-        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        //Função que fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
         // 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
         let target = this.checkoutVazio;
@@ -30,11 +63,60 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
+    renderPrateleira() {
+        let itemsStructure = `
+        <div class="footerCheckout__prateleira__title">
+          <h2>Você também pode gostar:</h2>
+        </div>
+        <ul
+          class="footerCheckout__prateleira-container"
+          data-slick='{"slidesToShow": 4, "slidesToScroll": 1}'
+        ></ul>
+        `;
+
+        this.prateleira.innerHTML = itemsStructure;
+    }
+
+    renderItems() {
+        let itemsCards = ``;
+
+        this.list.forEach((item) => {
+            const sku = item.items.map((resp) => `<li>${resp}</li>`);
+            itemsCards += `
+              <li class="items">
+                <figure>
+                  <img
+                    src="${item.image}"
+                    alt="Imagem Ponto Turístico"
+                  />
+                </figure>
+                <div class="items__detail">
+                  <p>${item.description}</p>
+                </div>
+                <div class="items__sku">
+                  <ul>
+                    ${sku}
+                  </ul>
+                </div>
+                <button>
+                  VER PRODUTO
+                </button>
+              </li>
+            `;
+        });
+
+        this.items.innerHTML = itemsCards;
+    }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".footerCheckout__prateleira-container");
         $(elemento).slick({
-            slidesToShow: 4,
+            infinite: false,
-            slidesToScroll: 1,
+            prevArrow:
+                "<button><img class='a-left control-c prev slick-prev' src='https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg' /></button>",
+            nextArrow:
+                "<button><img class='a-right control-c next slick-next' src='https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg' /></button>",
         });
     }
 }

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

@@ -3,6 +3,7 @@
 .slick-slider {
     position: relative;
     display: block;
+    height: 390px;
     box-sizing: border-box;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -15,6 +16,8 @@
     -webkit-tap-highlight-color: transparent;
 }
 .slick-list {
+    width: 100%;
+    height: 390px;
     position: relative;
     overflow: hidden;
     display: block;
@@ -43,7 +46,9 @@
     position: relative;
     left: 0;
     top: 0;
-    display: block;
+    height: 390px;
+    display: flex;
+    justify-content: center;
     margin-left: auto;
     margin-right: auto;
 
@@ -63,9 +68,20 @@
 }
 .slick-slide {
     float: left;
-    height: 100%;
+    width: 23.726% !important;
+    height: 390px;
     min-height: 1px;
     outline: none;
+    margin: 0 8px;
+
+    &:first-child {
+        margin: 0 8px 0 0;
+    }
+
+    &:last-child {
+        margin: 0 0 0 8px;
+    }
+
     [dir="rtl"] & {
         float: right;
     }
@@ -96,19 +112,30 @@
         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")
+    // background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
-        no-repeat center center;
+    //     no-repeat center center;
     z-index: 4;
-    left: 10px;
+    position: absolute;
+    left: 1%;
+    right: 0;
+    top: 40%;
+    bottom: 60%;
+    width: 14px;
+    height: 30px;
+    color: $color-gray6;
 }
 .slick-next {
-    z-index: 4;
+    // z-index: 4;
-    right: 10px;
+    position: absolute;
+    left: 97.5%;
+    right: 0;
+    top: 40%;
+    bottom: 60%;
+    width: 14px;
+    height: 30px;
+    color: $color-gray6;
 }
 .slick-arrow.slick-hidden {
     display: none;

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

@@ -3,10 +3,129 @@
     border-top: none;
     color: $color-gray2;
 
+    li {
+        list-style: none;
+    }
+
+    p,
+    ul {
+        margin: 0;
+    }
+
+    &__prateleira {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        &__title {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            height: 38px;
+            margin-bottom: 20px;
+
+            h2 {
+                font-family: "Tenor Sans";
+                font-style: normal;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 38px;
+                color: $color-black;
+                margin: 0;
+            }
+        }
+    }
+
+    &__prateleira-container {
+        display: flex;
+        width: 100%;
+        height: 390px;
+
+        .slick-arrow {
+            border: none;
+            background: transparent;
+            padding: 0;
+        }
+    }
+
+    .items {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 23.577%;
+        height: 390px !important;
+
+        figure {
+            width: 100%;
+            margin: 0 0 20px 0;
+        }
+
+        img {
+            width: 100%;
+        }
+
+        &__detail {
+            font-family: "Open Sans";
+            font-style: normal;
+            font-weight: 400;
+            font-size: 13px;
+            display: flex;
+            justify-content: center;
+            line-height: 18px;
+            margin: 0 0 20px 0;
+
+            @media (min-width: 1025px) and (max-width: 1107px) {
+                font-size: 11.5px;
+            }
+        }
+
+        &__sku {
+            margin: 0 0 20px 0;
+
+            ul {
+                display: flex;
+                justify-content: center;
+                gap: 5px;
+            }
+
+            li {
+                font-family: "Open Sans";
+                font-style: normal;
+                font-weight: 700;
+                font-size: 13px;
+                line-height: 18px;
+                color: $color-white;
+                padding: 5px;
+                background: $color-blue;
+                border-radius: 8px;
+
+                @media (min-width: 1025px) and (max-width: 1107px) {
+                    font-size: 11.5px;
+                }
+            }
+        }
+
+        button {
+            border: none;
+            width: 100%;
+            height: 42px;
+            font-family: "Open Sans";
+            font-style: normal;
+            font-weight: 700;
+            font-size: 13px;
+            color: $color-white;
+            line-height: 18px;
+            padding: 0;
+            background: $color-blue;
+            border-radius: 8px;
+        }
+    }
+
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
+        margin-top: 56px !important;
     }
 
     &__address {

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

@@ -7,15 +7,16 @@ $font-family-secundary: "Tenor Sans", sans-serif;
 /* Colors */
 $color-black: #000000;
 
-$color-white: #fff;
+$color-white: #ffffff;
 
 $color-gray: #6c6c6c;
 $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
+$color-gray6: #858585;
 
-$color-blue: #4267b2;
+$color-blue: #00c8ff;
 
 $color-green: #4caf50;