From 8e3aae3c91798c8aafc501e864fa17ded65ae144 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Wed, 21 Dec 2022 14:02:47 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20cria=20funcao=20para=20adicionar=20prat?= =?UTF-8?q?eleira=20de=20produtos,=20e=20estilizacao=20para=20prateleira,?= =?UTF-8?q?=20al=C3=A9m=20de=20de=20estruturar=20slick=20da=20pratereira,?= =?UTF-8?q?=20para=20todas=20as=20versoes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 71 +++- checkout/src/arquivos/sass/lib/_slick.scss | 64 ++- .../src/arquivos/sass/partials/_footer.scss | 375 +++++++++--------- .../arquivos/sass/partials/_prateleira.scss | 180 +++++++++ .../src/arquivos/sass/utils/_variaveis.scss | 5 + 5 files changed, 500 insertions(+), 195 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 0e2c4e2..99f3d49 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/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.createDevelopedBy() + this.createfooterShelf(); + this.insertImagesPayments(); + this.insertImagesDevelopedBy(); } async selectors() { @@ -37,7 +38,7 @@ export default class Footer { observer.observe(target, config); } - createPayments() { + insertImagesPayments() { this.footerCheckoutPayments.innerHTML = ` @@ -50,7 +51,7 @@ export default class Footer { this.footerCheckoutVtexPci.innerHTML = ` ` } - createDevelopedBy() { + insertImagesDevelopedBy() { this.footerCheckoutDevelopedBy.innerHTML = `
  • @@ -63,13 +64,71 @@ export default class Footer {
    • `; + } + async createfooterShelf() { + this.footerCheckoutShelf.innerHTML = ``; + this.footerCheckoutShelf.innerHTML += ` +

    Você também pode gostar:

    + + `; + + 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 += ` +
  • +
    + +
    +

    ${getNameProduto}

    +
      + ${produtos.items.map(sku => `
    • ${sku.name}
      • ` + ).join("")} +
    + ver produto +
    +
    +
    • + `; + }); + this.addCarrossel(); + + } async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ + const elementToUseInSlick = document.querySelector(".footerCheckout__prateleira__list"); + + $(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, + } + } + ] }); } + } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..ca85619 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/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") - no-repeat center center; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") 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,14 +175,16 @@ width: 1em; border-radius: 1em; background-color: #fff; + :focus { outline: none; } } + &.slick-active button { &:focus { outline: none; } } } -} +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 51d3c4f..28dc37b 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -30,192 +30,199 @@ content: none; } - & .footerCheckout__address { - color: $color-gray2; - font-family: $font-family; - font-style: normal; - font-weight: 400; - font-size: 10px; - line-height: 12px; - text-transform: capitalize; - width: 100%; - max-width: 269px; - - @media(min-width:2500px) { - font-size: 20px; - line-height: 27px; - max-width: none; - width: 537px; - min-width: 537px; - } - - @media(max-width:1024px) { - margin-bottom: 16px; - order: 2; - } - - - - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; - } - } - - & .footerCheckout__stamps { - align-items: center; - display: flex; - justify-content: center; - justify-self: center; - list-style: none; - width: 100%; - - @media (min-width: 2500px) { - min-width: 690px; - - } - - @media (max-width: 1024px) { - justify-content: flex-start; - margin: 0; - margin-bottom: 23px; - margin-left: -5px; - order: 1; - } - - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; - } - - img { - width: 34.78px; - height: 20px; - - @media(min-width:2500px) { - width: 69.63px; - height: 39.06px; - } - } - - - &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; - width: 1px; - } - - } - - & .footerCheckout__vtexpci { - img { - width: 53px; - height: 33px; - - @media(min-width:2500px) { - width: 103.52px; - height: 64.44px; - } - } - } - - & .footerCheckout__developedBy { - display: flex; - align-items: center; - justify-content: flex-end; - list-style-type: none; - margin: 0; - width: 33%; - gap: 10.73px; - margin: 0; - - - li:first-child { - - a { - display: flex; - - &::after { - content: ""; - background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png") no-repeat center center; - background-size: 100%; - display: block; - min-width: 44.92px; - height: 16px; - - @media (min-width: 2500px) { - width: 87.73px; - height: 31.25px; - } - } - - span { - width: 100%; - min-width: 61px; - margin-right: 10.12px; - } - } - } - - li:last-child { - margin-left: 16px; - - a { - display: flex; - - &::after { - content: ""; - background: url(" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png") no-repeat center center; - background-size: 100%; - display: block; - width: 28.66px; - height: 15.65px; - - @media(min-width:2500px) { - width: 55.98px; - height: 30.55px; - } - } - - span { - - width: 100%; - min-width: 61px; - margin-right: 10.12px; - } - } - - } - - a { - align-items: center; - color: $color-gray2; - display: flex; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - text-decoration: none; - - @media(min-width:2500px) { - font-size: 18px; - line-height: 25px; - } - - span { - width: 100%; - } - - } - - - - } } } + &__address { + color: $color-gray2; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + width: 100%; + max-width: 269px; + + @media(min-width:2500px) { + font-size: 20px; + line-height: 27px; + max-width: none; + width: 537px; + min-width: 537px; + } + + @media(max-width:1024px) { + margin-bottom: 16px; + order: 2; + } + + + + @include mq(md, max) { + margin-bottom: 24px; + max-width: 100%; + } + } + + &__stamps { + align-items: center; + display: flex; + justify-content: center; + justify-self: center; + list-style: none; + width: 100%; + + @media (min-width: 2500px) { + min-width: 690px; + + } + + @media (max-width: 1024px) { + justify-content: flex-start; + margin: 0; + margin-bottom: 23px; + margin-left: -5px; + order: 1; + } + + @include mq(md, max) { + align-self: center; + margin-bottom: 12px; + } + + img { + width: 34.78px; + height: 20px; + + @media(min-width:2500px) { + width: 69.63px; + height: 39.06px; + } + } + + + &__divider { + background-color: $color-gray4; + display: inline-block; + height: 24px; + margin: 0 8px; + width: 1px; + } + + } + + &__vtexpci { + img { + width: 53px; + height: 33px; + + @media(min-width:2500px) { + width: 103.52px; + height: 64.44px; + } + } + } + + &__developedBy { + display: flex; + align-items: center; + justify-content: flex-end; + list-style-type: none; + margin: 0; + width: 33%; + gap: 10.73px; + margin: 0; + + @media (max-width:375px), + (max-width:1024px) { + order: 3; + margin-top: 16px; + justify-content: flex-start; + } + + li:first-child { + + a { + display: flex; + + &::after { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png") no-repeat center center; + background-size: 100%; + display: block; + min-width: 44.92px; + height: 16px; + + @media (min-width: 2500px) { + width: 87.73px; + height: 31.25px; + } + } + + span { + width: 100%; + min-width: 61px; + margin-right: 10.12px; + } + } + } + + li:last-child { + margin-left: 16px; + + a { + display: flex; + + &::after { + content: ""; + background: url(" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png") no-repeat center center; + background-size: 100%; + display: block; + width: 28.66px; + height: 15.65px; + + @media(min-width:2500px) { + width: 55.98px; + height: 30.55px; + } + } + + span { + + width: 100%; + min-width: 61px; + margin-right: 10.12px; + } + } + + } + + a { + align-items: center; + color: $color-gray2; + display: flex; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; + text-decoration: none; + + @media(min-width:2500px) { + font-size: 18px; + line-height: 25px; + } + + span { + width: 100%; + } + + } + + + + } + } \ No newline at end of file diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..fa22e0f 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/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; +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 37ed550..f8ce165 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/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;