feat: Cria slick desktop mobile

checkout/src/arquivos/js/checkout.js

@@ -6,11 +6,10 @@ import Footer from "./components/Footer";
 import Cart from "./components/Cart";
 import Email from "./components/Email";
 import Shipping from "./components/Shipping";
-import Payment from "./components/Payment";
 
 const m3Checkout = new Container({
     appName: "m3-checkout",
-    components: [CheckoutUI, Header, Footer, Cart, Email, Shipping, Payment],
+    components: [CheckoutUI, Header, Footer, Cart, Email, Shipping],
 });
 
 m3Checkout.start();

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

@@ -8,17 +8,77 @@ export default class Footer {
     async init() {
         this.imgLinks = "https://agenciamagma.vteximg.com.br/arquivos/";
         await this.selectors();
+        this.events();
         this.buildIconList();
         this.buildDevelopedByList();
-        // this.onUpdate();
+        this.buildSlickItems();
+        this.onUpdate();
     }
 
     async selectors() {
         this.footerIconList = await waitElement(".footerCheckout__stamps");
         this.footerDevelopedByList = await waitElement(".footerCheckout__developedBy");
-        //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
+        this.checkoutVazio = await waitElement(".empty-cart-content", {
-        // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
+            timeout: 5000,
-        // this.checkoutVazio = await waitElement(".empty-cart-content");
+            interval: 1000,
+        });
+        this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
+    }
+
+    events() {
+        window.addEventListener("hashchange", this.onUpdate.bind(this));
+    }
+
+    buildSlickItems() {
+        const slickItems = fetch(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        )
+            .then(function (response) {
+                return response.json();
+            })
+            .then(function (data) {
+                const slickItems = data.map((item) => {
+                    const div = document.createElement("div");
+
+                    const ul = document.createElement("ul");
+
+                    const items = item.items;
+
+                    items.forEach((item) => {
+                        const li = document.createElement("li");
+                        li.classList.add("prateleira__option");
+
+                        li.innerHTML = item.name;
+
+                        ul.appendChild(li);
+                    });
+
+                    div.classList.add("prateleira__item");
+                    const jpg = item.items[0].images[0].imageUrl;
+                    div.innerHTML = `
+                    <img class="prateleira__image" src="${jpg}" />
+                    <h2 class="prateleira__product-name">${item.productName}</h2>
+                    <ul class="prateleira__options">
+                        ${ul.innerHTML}
+                    </ul>
+                    <button class="prateleira__button">VER PRODUTO</button>
+                `;
+
+                    return div;
+                });
+
+                return slickItems;
+            });
+
+        const buildSlickItems = () => {
+            slickItems.then((items) => {
+                items.forEach((item) => {
+                    this.footerPrateleira.appendChild(item);
+                });
+            });
+        };
+
+        buildSlickItems();
     }
 
     buildIconList() {
@@ -87,25 +147,64 @@ export default class Footer {
         });
     }
 
-    // onUpdate() {
+    onUpdate() {
-    //     //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        //Função qeu 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
+        // 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
+        // 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;
+        this.footerPrateleira.style.display = "none";
-    //     let config = { childList: true, attributes: true };
-    //     let observer = new MutationObserver((mutations) => {
-    //         mutations.forEach(function (mutation) {
-    //             console.log(mutation.type);
-    //         });
-    //     });
 
-    //     observer.observe(target, config);
+        if (
-    // }
+            window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" &&
-    // async addCarrossel() {
+            this.checkoutVazio.style.display === "none"
-    //     const elemento = await waitElement("#my-element");
+        )
-    //     $(elemento).slick({
+            this.footerPrateleira.style.display = "";
-    //         slidesToShow: 4,
+
-    //         slidesToScroll: 1,
+        let target = this.checkoutVazio;
-    //     });
+        let config = { childList: true, attributes: true };
-    // }
+        let observer = new MutationObserver((mutations) => {
+            mutations.forEach(
+                function (mutation) {
+                    console.log(mutation);
+                    if (mutation.type === "attributes" && mutation.attributeName === "style") {
+                        if (target.style.display === "none") {
+                            console.log("carrinho cheio");
+
+                            if (!this.footerPrateleira.classList.contains("slick-initialized"))
+                                this.addCarrossel();
+                            this.footerPrateleira.style.display = "";
+                        } else {
+                            this.footerPrateleira.style.display = "none";
+                            console.log("carrinho vazio");
+                        }
+                    }
+                }.bind(this)
+            );
+        });
+
+        observer.observe(target, config);
+    }
+
+    addCarrossel() {
+        const elemento = this.footerPrateleira;
+        $(elemento).slick({
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                        slidesToScroll: 1,
+                    },
+                },
+                {
+                    breakpoint: 768,
+                    settings: {
+                        slidesToShow: 2,
+                        slidesToScroll: 1,
+                    },
+                },
+            ],
+        });
+    }
 }

checkout/src/arquivos/sass/checkout.scss

@@ -5,3 +5,4 @@
 @import "./partials/footer";
 @import "./partials/menu";
 @import "./partials/autenticacao";
+@import "./partials/prateleira";

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

@@ -263,11 +263,6 @@
 
                 .accordion-body {
                     p {
-                        @include mq(mobile, max) {
-                            width: 100%;
-                            max-width: -webkit-fill-available;
-                        }
-
                         &.client-email {
                             width: 100%;
                             margin-bottom: 16px;
@@ -282,6 +277,10 @@
                             margin: 0;
                             width: 46%;
 
+                            @include mq(mobile, max) {
+                                width: 100%;
+                            }
+
                             &::placeholder {
                                 font-weight: 400;
                                 font-size: 14px;
@@ -292,7 +291,8 @@
 
                         &.client-last-name {
                             @include mq(mobile, max) {
-                                margin-right: 15px;
+                                margin-right: 15px !important;
+                                max-width: -webkit-fill-available;
                             }
                         }
 
@@ -302,6 +302,10 @@
                             flex-direction: column;
                             margin: 0;
                             width: 46%;
+
+                            @include mq(mobile, max) {
+                                width: 100%;
+                            }
                         }
 
                         &.client-last-name {
@@ -354,6 +358,10 @@
                         div {
                             width: 46%;
 
+                            p {
+                                width: 100%;
+                            }
+
                             @include mq(mobile, max) {
                                 width: 100%;
                                 max-width: -webkit-fill-available;

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

@@ -1,10 +1,12 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: 1px solid $black-500;
+    &__wrapper {
-    padding: 16px 32px;
+        border-top: 1px solid $black-500;
+        padding: 16px 32px;
 
-    @include mq(mobile, max) {
+        @include mq(mobile, max) {
-        padding: 22px 8px 16px;
+            padding: 22px 8px 16px;
+        }
     }
 
     .container {

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

@@ -1 +1,198 @@
 /* _prateleira.scss */
+.footerCheckout__prateleira {
+    padding: 0 132px 56px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    &::before {
+        content: "Você também pode gostar:";
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        color: $black-500;
+        font-family: $font-family-secundary;
+        text-align: center;
+
+        @include mq(4k, min) {
+            font-size: 48px;
+            line-height: 76px;
+        }
+    }
+
+    @include mq(tablet, max) {
+        padding-right: 15px;
+    }
+
+    @include mq(mobile, max) {
+        padding: 0 17px 54px 16px;
+    }
+
+    .slick-arrow {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: map-get($z-index, level1);
+    }
+
+    .slick-list {
+        margin-top: 20px;
+    }
+
+    .slick-prev {
+        left: 142px;
+        border: none;
+        background-color: transparent;
+        outline: 0;
+        background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") !important;
+        background-size: contain;
+        background-repeat: no-repeat;
+        width: 13px;
+        height: 29px;
+
+        @include mq(tablet, max) {
+            left: 16px;
+        }
+
+        @include mq(mobile, max) {
+            left: 26px;
+        }
+
+        @include mq(4k, min) {
+            width: 26px;
+            height: 58px;
+        }
+    }
+
+    .slick-next {
+        right: 142px;
+        border: none;
+        background-color: transparent;
+        outline: 0;
+        background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") !important;
+        background-size: contain;
+        background-repeat: no-repeat;
+        width: 13px;
+        height: 29px;
+
+        @include mq(tablet, max) {
+            right: 16px;
+        }
+
+        @include mq(mobile, max) {
+            right: 26px;
+        }
+
+        @include mq(4k, min) {
+            width: 26px;
+            height: 58px;
+        }
+    }
+
+    .slick-track {
+        display: flex;
+    }
+
+    .slick-slide {
+        height: auto;
+
+        & > div,
+        .prateleira__item {
+            height: 100%;
+            display: flex !important;
+            flex-direction: column;
+            margin: 0 4px;
+            max-width: -webkit-fill-available;
+        }
+    }
+
+    .prateleira {
+        &__product-name {
+            font-weight: 400;
+            font-size: 13px;
+            text-align: center;
+            line-height: 18px;
+            color: $black-500;
+            margin: 20px 0;
+
+            @include mq(4k, min) {
+                font-size: 26px;
+                line-height: 35px;
+            }
+        }
+
+        &__options {
+            flex: 1;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap;
+            list-style-type: none;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+
+        &__option {
+            margin-right: 5px;
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 18px;
+            color: $white-500;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            background-color: $blue-500;
+            border-radius: 8px;
+            padding: 5px;
+            cursor: pointer;
+
+            @include mq(mobile, min) {
+                &:hover {
+                    background: $blue-600;
+                }
+
+                &:active {
+                    background: $blue-500;
+                }
+            }
+
+            @include mq(4k, min) {
+                font-size: 26px;
+                line-height: 35px;
+            }
+
+            &:last-of-type {
+                margin-right: 0;
+            }
+        }
+
+        &__button {
+            border: none;
+            width: 100%;
+            background: $blue-500;
+            border-radius: 8px;
+            padding: 12px 0;
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 18px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            color: $white-500;
+
+            @include mq(mobile, min) {
+                &:hover {
+                    background: $blue-600;
+                }
+
+                &:active {
+                    background: $blue-500;
+                }
+            }
+
+            @include mq(4k, min) {
+                font-size: 26px;
+                line-height: 35px;
+            }
+        }
+    }
+}