Merge pull request 'feat: cria funcao para adicionar prateleira de produtos, e estilizacao para prateleira, além de de estruturar slick da pratereira, para todas as versoes' (#4) from feature/footerShielf into development

Reviewed-on: EmmanuelVitor/m3-academy-template-checkout-EmmanuelVitor#4

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

@@ -8,8 +8,9 @@ export default class Footer {
     async init() {
         await this.selectors();
         // this.onUpdate();
-        this.createPayments();
+        this.createfooterShelf();
-        this.createDevelopedBy()
+        this.insertImagesPayments();
+        this.insertImagesDevelopedBy();
     }
 
     async selectors() {
@@ -37,7 +38,7 @@ export default class Footer {
 
         observer.observe(target, config);
     }
-    createPayments() {
+    insertImagesPayments() {
         this.footerCheckoutPayments.innerHTML = `
             <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
             <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" />
@@ -50,7 +51,7 @@ export default class Footer {
         this.footerCheckoutVtexPci.innerHTML =
             ` <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" />`
     }
-    createDevelopedBy() {
+    insertImagesDevelopedBy() {
         this.footerCheckoutDevelopedBy.innerHTML = `
             <li>
                 <a href="https://vtex.com/br-pt/">
@@ -63,13 +64,71 @@ export default class Footer {
             </a>
         </li>
         `;
+    }
+    async createfooterShelf() {
+        this.footerCheckoutShelf.innerHTML = ``;
+        this.footerCheckoutShelf.innerHTML += `
+        <h2 class="footerCheckout__prateleira__sugestionTitle" >Você também pode gostar:</h2>
+        <ul class="footerCheckout__prateleira__list"> </ul>
+        `;
+
+        const requestApi = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
+            .then((response) => response.json())
+
+        requestApi.forEach((produtos) => {
+
+            const getImage = produtos.items[0].images[0].imageUrl;
+            const getNameProduto = produtos.productName;
+            const getLink = produtos.link
+            const footerCheckouShielfList = document.querySelector(".footerCheckout__prateleira__list")
+
+            console.log(footerCheckouShielfList);
+            footerCheckouShielfList.innerHTML += `
+                <li class="footerCheckout__card">
+                    <div class="footerCheckout__container">
+                        <img class="footerCheckout__container__img" src="${getImage}" alt="" />
+                        <div class="footerCheckout__subContainer">
+                            <h3 class="footerCheckout__subContainer__name">${getNameProduto}</h3>
+                            <ul class="footerCheckout__subContainer__sku">
+                                ${produtos.items.map(sku => `<li class="footerCheckout__subContainer__sku__skuName">${sku.name}</li>`
+            ).join("")}
+                            </ul>
+                            <a class="footerCheckout__subContainer__link" href="${getLink}">ver produto</a>
+                        </div>
+                    </div>
+                </li>
+            `;
+        });
+        this.addCarrossel();
+
+
     }
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elementToUseInSlick = document.querySelector(".footerCheckout__prateleira__list");
-        $(elemento).slick({
+
+        $(elementToUseInSlick).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            infinite: true,
+            arrows: true,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                        slidesToScroll: 1,
+                    }
+                },
+                {
+                    breakpoint: 491,
+                    settings: {
+                        slidesToShow: 2,
+                        slidesToScroll: 1,
+                    }
+                }
+            ]
         });
     }
 
+
 }

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

@@ -13,7 +13,9 @@
     -ms-touch-action: pan-y;
     touch-action: pan-y;
     -webkit-tap-highlight-color: transparent;
+
 }
+
 .slick-list {
     position: relative;
     overflow: hidden;
@@ -30,6 +32,7 @@
         cursor: hand;
     }
 }
+
 .slick-slider .slick-track,
 .slick-slider .slick-list {
     -webkit-transform: translate3d(0, 0, 0);
@@ -47,6 +50,8 @@
     margin-left: auto;
     margin-right: auto;
 
+
+
     &:before,
     &:after {
         content: "";
@@ -60,18 +65,30 @@
     .slick-loading & {
         visibility: hidden;
     }
+
+
 }
+
 .slick-slide {
     float: left;
     height: 100%;
     min-height: 1px;
     outline: none;
+    margin: 0 8px;
+
+    @media (min-width: 2500px) {
+        margin: 0 8.5px;
+
+    }
+
     [dir="rtl"] & {
         float: right;
     }
+
     img {
         display: block;
     }
+
     &.slick-loading img {
         display: none;
     }
@@ -96,26 +113,61 @@
         border: 1px solid transparent;
     }
 }
+
 .slick-arrow {
     font-size: 0;
     position: absolute;
+    border: none;
+    width: 13.64px;
+    height: 29.47px;
+    bottom: 43.33%;
+
+    @media (min-width: 2500px) {
+        width: 26px;
+        height: 58px;
     }
+
+    @media (max-width: 490px) {
+        bottom: 45.33%
+    }
+}
+
 .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;
+    left: 20px;
+
+    @media (min-width: 2500px) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg");
     }
+
+    @media (max-width: 490px) {
+        left: 13px;
+    }
+}
+
 .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: 20px;
+
+    @media (min-width: 2500px) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg");
     }
+
+    @media (max-width: 490px) {
+        right: 13px;
+    }
+}
+
 .slick-arrow.slick-hidden {
     display: none;
 }
+
 .slick-dots {
     li {
         margin: 0.5em;
+
         button {
             overflow: hidden;
             text-indent: 999999999px;
@@ -123,10 +175,12 @@
             width: 1em;
             border-radius: 1em;
             background-color: #fff;
+
             :focus {
                 outline: none;
             }
         }
+
         &.slick-active button {
             &:focus {
                 outline: none;

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

@@ -30,7 +30,11 @@
                 content: none;
             }
 
-            & .footerCheckout__address {
+        }
+
+    }
+
+    &__address {
         color: $color-gray2;
         font-family: $font-family;
         font-style: normal;
@@ -62,7 +66,7 @@
         }
     }
 
-            & .footerCheckout__stamps {
+    &__stamps {
         align-items: center;
         display: flex;
         justify-content: center;
@@ -109,7 +113,7 @@
 
     }
 
-            & .footerCheckout__vtexpci {
+    &__vtexpci {
         img {
             width: 53px;
             height: 33px;
@@ -121,7 +125,7 @@
         }
     }
 
-            & .footerCheckout__developedBy {
+    &__developedBy {
         display: flex;
         align-items: center;
         justify-content: flex-end;
@@ -131,6 +135,12 @@
         gap: 10.73px;
         margin: 0;
 
+        @media (max-width:375px),
+        (max-width:1024px) {
+            order: 3;
+            margin-top: 16px;
+            justify-content: flex-start;
+        }
 
         li:first-child {
 
@@ -213,9 +223,6 @@
 
 
 
-            }
-        }
-
     }
 
 }

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

@@ -1 +1,181 @@
 /* _prateleira.scss */
+
+
+.footerCheckout__prateleira {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    li {
+        list-style: none;
+    }
+
+    &__sugestionTitle {
+        font-family: $font-family-secundary;
+        color: $color-black2;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+
+        @media (min-width:2500px) {
+            font-size: 48px;
+            line-height: 76px;
+
+        }
+    }
+
+    &__list {
+        display: flex;
+        gap: 16px;
+        margin: 0 0 56px;
+
+        @media (min-width:2500px) {
+            gap: 16.94px;
+        }
+
+        .footerCheckout__card {
+            width: 100%;
+
+            height: 100%;
+
+            @media (min-width:2500px) {
+                min-width: 485.07px;
+                height: 686px;
+
+            }
+
+            @media (min-width:1270px) {
+                min-width: 242px;
+            }
+
+
+
+
+            .footerCheckout__container {
+
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 20px;
+                height: auto;
+
+                li,
+                a {
+
+                    font-family: $font-family;
+                    background-color: $color-blue2;
+                    color: $color-white;
+                    border-radius: 8px;
+                    font-weight: 700;
+                    font-size: 13px;
+                    line-height: 18px;
+
+                    display: flex;
+                    align-items: center;
+                    text-align: center;
+                    letter-spacing: 0.05em;
+                    text-transform: uppercase;
+                    padding: 5px;
+
+
+                    @media (min-width:2500px) {
+                        font-size: 26px;
+                        line-height: 35px;
+                    }
+                }
+
+                &__img {
+                    width: 100%;
+                    height: auto;
+
+                    @media (min-width:2500px) {
+                        min-width: 485.07px;
+                        height: 485.07px;
+                    }
+
+                    @media (min-width:370px) and (max-width:376px) {
+                        width: 164px;
+
+                    }
+
+                    @media (max-width:490px) {
+                        height: 164px;
+
+                    }
+                }
+
+                .footerCheckout__subContainer {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    row-gap: 20px;
+                    height: auto;
+                    width: 100%;
+
+                    &__name {
+                        margin: 0;
+                        font-family: $font-family;
+                        color: $color-black2;
+                        border-radius: 8px;
+                        font-weight: 400;
+                        font-size: 13px;
+                        line-height: 18px;
+
+                        @media (min-width:2500px) {
+                            font-size: 26px;
+                            line-height: 35px;
+
+                        }
+
+                        @media (max-width:490px) {
+                            text-align: center;
+
+                        }
+                    }
+
+
+                    &__sku {
+                        width: 100%;
+                        margin: 0;
+
+                        display: flex;
+                        flex-wrap: nowrap;
+                        justify-content: center;
+                        gap: 5px;
+                        display: flex;
+                        align-items: center;
+
+                        @media (max-width:1270px) {
+                            flex-wrap: wrap;
+                            min-height: 61px;
+
+                            &__skuName {
+                                height: 28px;
+                            }
+                        }
+                    }
+
+                    &__link {
+                        width: 100%;
+                        display: flex;
+                        justify-content: center;
+                        padding: 12px 0;
+
+                        &:hover,
+                        &:active {
+                            text-decoration: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.none {
+    display: none;
+}

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

@@ -6,6 +6,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
+$color-black2: #000000;
 
 $color-white: #fff;
 
@@ -14,8 +15,12 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
+$color-gray6: #C4C4C4;
+$color-gray7: #e0e0e0;
 
 $color-blue: #4267b2;
+$color-blue2: #00C8FF;
+;
 
 $color-green: #4caf50;