diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..ea8697f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/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 = ` +
+

Você também pode gostar:

+
+ + `; + + this.prateleira.innerHTML = itemsStructure; + } + + renderItems() { + let itemsCards = ``; + + this.list.forEach((item) => { + const sku = item.items.map((resp) => `
  • ${resp}
    • `); + itemsCards += ` +
  • +
    + Imagem Ponto Turístico +
    +
    +

    ${item.description}

    +
    +
    + +
    + +
    • + `; + }); + + this.items.innerHTML = itemsCards; + } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".footerCheckout__prateleira-container"); $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, + infinite: false, + prevArrow: + "", + nextArrow: + "", }); } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..486757f 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/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") - 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; + position: absolute; + left: 1%; + right: 0; + top: 40%; + bottom: 60%; + width: 14px; + height: 30px; + color: $color-gray6; } .slick-next { - z-index: 4; - right: 10px; + // z-index: 4; + position: absolute; + left: 97.5%; + right: 0; + top: 40%; + bottom: 60%; + width: 14px; + height: 30px; + color: $color-gray6; } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..f536f9c 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/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 { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 008f697..82d7f8b 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/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;