Feat(Checkout): Cria função ProgressBar e prateleira(estilizada no desktop)

checkout/src/arquivos/js/components/CheckoutUI.js

@@ -66,4 +66,5 @@ export default class CheckoutUI {
             );
         });
     }
+    
 }

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

@@ -6,10 +6,16 @@ export default class Footer {
     }
 
     async init() {
+        this.list = await this.Api();
         await this.selectors();
         // this.onUpdate();
         this.addIconsCardAndVtxpci();
         this.addIconVtexAndM3();
+        this.createShelf();
+        this.shelfList = await waitElement(".footerCheckout__shelfList");
+        this.shelfItens();
+        // await this.shelfUpdate();
+        this.addCarrossel();
     }
 
     async selectors() {
@@ -18,6 +24,11 @@ export default class Footer {
         this.checkoutVazio = await waitElement(".empty-cart-content");
         this.iconesCartoesAndVtexpci = await waitElement(".footerCheckout__stamps");
         this.iconsVtexAndM3 = await waitElement(".footerCheckout__developedBy");
+        this.prateleira = await waitElement(".footerCheckout__prateleira");
+        this.itensShelf = await waitElement(".footerCheckout__prateleira", {
+            timeout: 5000,
+            interval: 1000,
+        });
     }
 
     onUpdate() {
@@ -35,10 +46,12 @@ export default class Footer {
         observer.observe(target, config);
     }
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".footerCheckout__shelfList");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            arrows: true,
+            infinite: false,
         });
     }
     addIconVtexAndM3() {
@@ -83,4 +96,48 @@ export default class Footer {
             `;
         }
     }
+    createShelf() {
+        if (this.itensShelf) {
+            this.itensShelf.innerHTML = `
+            <div class="footerCheckout__prateleira-title-wrapper">
+                <h2 class="footerCheckout__prateleira-title" >Você também pode gostar:</h2>
+            </div>
+            <ul class="footerCheckout__shelfList"></ul>
+            `;
+        }
+    }
+    async shelfItens() {
+        let structure = "";
+
+        this.list.forEach((response) => {
+            const sku = response.skus.map(
+                (item) => `<li class="footerCheckout__shelfList-skus">${item}</li>`
+            );
+
+            structure += `
+            <li class="footerCheckout__shelfList-wrapper">
+                <figure class="footerCheckout__shelfList-wrapper" ><img src ="${response.img}"/></figure>
+                <figcaption class="footerCheckout__shelfList-name">${response.name}</figcaption>
+                <div class="footerCheckout__shelfList-skus-wrapper" ><ul class="footerCheckout__shelfList-skus-wrapper">${sku}</ul></div>
+                <button type="button" class="footerCheckout__shelfList-button"><a href="${response.link}">Ver Produto</a></button>
+            </li>
+            `;
+        });
+        this.shelfList.innerHTML = structure;
+    }
+    async Api() {
+        const api =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+        return fetch(api)
+            .then((response) => response.json())
+            .then((data) => {
+                const peçaBase = data.map((response) => ({
+                    name: response.productName,
+                    skus: response.items.map((item) => item.name),
+                    img: response.items[0].images[0].imageUrl,
+                    link: response.link,
+                }));
+                return peçaBase;
+            });
+    }
 }

checkout/src/arquivos/js/components/Header.js

@@ -8,8 +8,8 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        // console.log(this.item);
         this.progressBarCronstructor();
+        await this.progressBarProgress();
     }
 
     async selectors() {
@@ -18,7 +18,10 @@ export default class Header {
         //     timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
         //     interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         // });
-        this.progressBar = await waitElement(".progress-bar");
+        this.progressBar = await waitElement("#progressBar", {
+            timeout: 5000,
+            interval: 1000,
+        });
     }
 
     progressBarCronstructor() {
@@ -29,7 +32,7 @@ export default class Header {
                     <div class="div-flex1">
                         <div class="div-itens">
                             <p class="p-text">Meu Carrinho</p>
-                            <p class="p-bola"></p>
+                            <p id="p-bola1" class="p-bola1"></p>
                             <p class="p-borda-1"></p>
                         </div>
                     </div>
@@ -39,7 +42,7 @@ export default class Header {
                     <div class="div-flex2">
                         <div class="div-itens">
                             <p class="p-text">Dados Pessoais</p>
-                            <p class="p-bola"></p>
+                            <p id="p-bola2" class="p-bola2"></p>
                             <p class="p-borda-meio"></p>
                         </div>
                     </div>
@@ -48,7 +51,7 @@ export default class Header {
                     <div class="div-flex3">
                         <div class="div-itens">
                             <p class="p-text">Pagamento</p>
-                            <p class="p-bola"></p>
+                            <p id="p-bola3" class="p-bola3"></p>
                             <p class="p-borda-2"></p>
                         </div>
                     </div>
@@ -56,5 +59,124 @@ export default class Header {
             </ul>
             `;
         }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
+    }
+    async progressBarProgress() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarLista = document.querySelectorAll("#progressBar ul li");
+            progressBarLista.forEach((li) => {
+                const Bola1 = li.children[0].children[0].children["p-bola1"];
+                const Bola2 = li.children[0].children[0].children["p-bola2"];
+                const Bola3 = li.children[0].children[0].children["p-bola3"];
+
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    if (Bola1) {
+                        Bola1.classList.add("active");
+                    }
+
+                    if (Bola2) {
+                        if (Bola2.classList.contains("active")) {
+                            Bola2.classList.remove("active");
+                        }
+                    }
+                    if (Bola3) {
+                        if (Bola3.classList.contains("active")) {
+                            Bola3.classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
+                ) {
+                    if (Bola1) {
+                        if (Bola1.classList.contains("active")) {
+                            Bola1.classList.remove("active");
+                        }
+                    }
+                    if (Bola2) {
+                        Bola2.classList.add("active");
+                    }
+                    if (Bola3) {
+                        if (Bola3.classList.contains("active")) {
+                            Bola3.classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    if (Bola1) {
+                        if (Bola1.classList.contains("active")) {
+                            Bola1.classList.remove("active");
+                        }
+                    }
+
+                    if (Bola2) {
+                        if (Bola2.classList.contains("active")) {
+                            Bola2.classList.remove("active");
+                        }
+                    }
+
+                    if (Bola3) {
+                        Bola3.classList.add("active");
+                    }
+                }
+
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        if (Bola1) {
+                            Bola1.classList.add("active");
+                        }
+
+                        if (Bola2) {
+                            if (Bola2.classList.contains("active")) {
+                                Bola2.classList.remove("active");
+                            }
+                        }
+                        if (Bola3) {
+                            if (Bola3.classList.contains("active")) {
+                                Bola3.classList.remove("active");
+                            }
+                        }
+                    } else if (
+                        window.location.hash === "#/email" ||
+                        window.location.hash === "#/profile" ||
+                        window.location.hash === "#/shipping"
+                    ) {
+                        if (Bola1) {
+                            if (Bola1.classList.contains("active")) {
+                                Bola1.classList.remove("active");
+                            }
+                        }
+                        if (Bola2) {
+                            Bola2.classList.add("active");
+                        }
+
+                        if (Bola3) {
+                            if (Bola3.classList.contains("active")) {
+                                Bola3.classList.remove("active");
+                            }
+                        }
+                    } else if (window.location.hash == "#/payment") {
+                        if (Bola1) {
+                            if (Bola1.classList.contains("active")) {
+                                Bola1.classList.remove("active");
+                            }
+                        }
+
+                        if (Bola2) {
+                            if (Bola2.classList.contains("active")) {
+                                Bola2.classList.remove("active");
+                            }
+                        }
+                        if (Bola3) {
+                            Bola3.classList.add("active");
+                        }
+                    }
+                });
+            });
+        }
     }
 }

checkout/src/arquivos/sass/checkout.scss

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

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

@@ -129,8 +129,8 @@ body {
             margin-top: 47px;
         }
     }
-    div#client-profile-data.span6.client-profile-data{
+    div.step.accordion-group.client-profile-data {
-        .client-profile-email{
+    .client-profile-email{
             margin-bottom: 6px;
         }
         .client-profile-summary{
@@ -179,13 +179,16 @@ body {
             color: $color-gray9;
         }
     }
-    // a#payment-group-SPEIPaymentGroup.payment-group-item,
+    // form.form-page.client-pre-email.anim-death.anim-current{
-    // a#payment-group-MercadoPagoPaymentGroup.payment-group-item,
+    //     span{
-    // a#payment-group-PSEPaymentGroup.payment-group-item,
+    //         div#client-profile-data.span6.client-profile-data span{
-    // a#payment-group-promissoryPaymentGroup.payment-group-item,
+    //             font-size: 20px;
-    // a#payment-group-creditDirectSalePaymentGroup.payment-group-item,
+    //             line-height: 23px;
-    // a#payment-group-creditControlPaymentGroup.payment-group-item {
+    //         }
-    //     display: none;
+    //         &::after{
+    //             display: none;
+    //         }
+    //     }
     // }
     a#payment-group-creditCardPaymentGroup.payment-group-item,
     a#payment-group-bankInvoicePaymentGroup.payment-group-item {

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

@@ -99,16 +99,22 @@
 .slick-arrow {
     font-size: 0;
     position: absolute;
+    top: 50%;
+    transform: translateY(-100%);
 }
 .slick-prev {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
         no-repeat center center;
     z-index: 4;
-    left: 10px;
+    left: 0;
+    border: none;
 }
 .slick-next {
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
     z-index: 4;
-    right: 10px;
+    right: 16px;
+    border: none;
 }
 .slick-arrow.slick-hidden {
     display: none;

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

@@ -35,7 +35,9 @@
                     font-family: $font-family-secundary;
                     color: $color-black2;
                 }
-                .p-bola{
+                .p-bola1,
+                .p-bola2,
+                .p-bola3 {
                     border: 1px solid $color-black2;
                     border-radius: 50%;
                     width: 10px;
@@ -83,6 +85,9 @@
                     width: 100.8%;
                     transform: translateY(-7px);
                 }
+                .active{
+                    background: $color-black2;
+                }
             }
         }
     }

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

@@ -1 +1,94 @@
 /* _prateleira.scss */
+.footerCheckout {
+    border-top: none;
+    color: $color-gray2;
+
+    .footerCheckout__prateleira{
+        width: 79.38%;
+        margin-bottom: 54px;
+    }
+    .footerCheckout__shelfList{
+        margin: 0;
+    }
+    .footerCheckout__shelfList-wrapper{
+        margin: 0;
+    }
+    .footerCheckout__shelfList-wrapper,
+    .footerCheckout__shelfList-name,
+    .footerCheckout__shelfList-skus-wrapper,
+    .footerCheckout__shelfList-button {
+        margin-right: 16px;
+    }
+
+
+    .footerCheckout__prateleira-title{
+        font-family: $font-family-secundary;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+        color: $color-black2;
+    }
+    .footerCheckout__shelfList-name{
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 18px;
+        text-align: center;
+        color: $color-black2;
+        margin: 20px 0;
+        width: 95%;
+    }
+    .footerCheckout__shelfList-skus-wrapper{
+        .footerCheckout__shelfList-skus{
+            background: $color-blue2;
+            border-radius: 8px;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            width: max-content;
+            padding: 4px 5.6px 4px 5.6px;
+            color: $color-white;
+            margin-right: 5px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 18px;
+        }
+        display: flex;
+        text-align: center;
+        justify-content: center;
+
+        li::marker{
+            font-size: 0;
+        }
+        &#text{
+            font-size: 0;
+        }
+    }
+    .footerCheckout__shelfList-button{
+        justify-content: center;
+        width: 95%;
+        background: $color-blue2;
+        border-radius: 8px;
+        padding: 0;
+        border: none;
+        height: 42px;
+        margin: 20px 0 0 0;
+
+        a{
+            color: $color-white;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 18px;
+        }
+    }
+}