From c42ef44da4570ccd9c7a536606f529be1d9c1b71 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Wed, 7 Dec 2022 13:57:52 -0300 Subject: [PATCH] feat: cria a prateleira de produtos --- meta/pages/home.js | 119 +----- src/arquivos/js/app/app.js | 2 + .../app/components/Prateleira/Prateleira.js | 2 +- src/arquivos/js/app/partials/Shelf.js | 16 + src/arquivos/js/config/slick.js | 11 +- src/arquivos/sass/main.scss | 28 +- src/arquivos/sass/pages/_home.scss | 44 +- src/arquivos/sass/partials/_flags.scss | 55 ++- src/arquivos/sass/partials/_prateleira.scss | 382 +++++++----------- src/arquivos/sass/partials/_slider.scss | 33 ++ src/arquivos/sass/utils/_variaveis.scss | 2 +- src/arquivos/sprite/arrow-left-prateleira.png | Bin 0 -> 2166 bytes .../sprite/arrow-right-prateleira.png | Bin 0 -> 2165 bytes src/template-pagina/template-home.html | 6 + .../prateleira-padrao.html | 14 +- .../prateleira-padrao.vtex.html | 60 +-- 16 files changed, 307 insertions(+), 467 deletions(-) create mode 100644 src/arquivos/js/app/partials/Shelf.js create mode 100644 src/arquivos/sass/partials/_slider.scss create mode 100644 src/arquivos/sprite/arrow-left-prateleira.png create mode 100644 src/arquivos/sprite/arrow-right-prateleira.png diff --git a/meta/pages/home.js b/meta/pages/home.js index 802e91d..beb57c9 100644 --- a/meta/pages/home.js +++ b/meta/pages/home.js @@ -122,119 +122,20 @@ module.exports = { ], }, //==================== - // MOSAICO + // PRATELEIRA //==================== { - id: "banner-01", + id: "prateleira-01", objects: [ { - type: "banner", - name: "banner 01", - contents: [ - { - name: "banner 01 content", - active: true, - type: "image", - file: "banner-01.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "banner-02", - objects: [ - { - type: "banner", - name: "banner 02", - contents: [ - { - name: "banner 02 content", - active: true, - type: "image", - file: "banner-02.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "banner-03", - objects: [ - { - type: "banner", - name: "banner 03", - contents: [ - { - name: "banner 03 content", - active: true, - type: "image", - file: "banner-03.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "banner-04", - objects: [ - { - type: "banner", - name: "banner 04", - contents: [ - { - name: "banner 04 content", - active: true, - type: "image", - file: "banner-04.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "banner-05", - objects: [ - { - type: "banner", - name: "banner 05", - contents: [ - { - name: "banner 05 content", - active: true, - type: "image", - file: "banner-05.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "mobile-banner-05", - objects: [ - { - type: "banner", - name: "banner 05 mobile", - contents: [ - { - name: "banner 05 mobile content", - active: true, - type: "image", - file: "banner-05.png", - width: 500, - height: 500, - }, - ], + type: "Produtos Relacionados", + name: "CONFIRA NOSSAS NOVIDADES", + properties: { + layout: "prateleira-padrao", + type: "QuemViuViuTambem", + "number-of-columns": 12, + "number-of-items": 12, + }, }, ], }, diff --git a/src/arquivos/js/app/app.js b/src/arquivos/js/app/app.js index 399e5d7..6dd3994 100644 --- a/src/arquivos/js/app/app.js +++ b/src/arquivos/js/app/app.js @@ -20,6 +20,7 @@ import Promocao from "./partials/Promocao"; import MenuContents from "./partials/MenuContents"; import Login from "./partials/Login"; import Prateleira from "./components/Prateleira/Prateleira"; +import Shelf from "./partials/Shelf"; import PrateleiraService from "./components/Prateleira/PrateleiraService"; @@ -38,6 +39,7 @@ const app = new Container({ ScrollToTop, AutoComplete, Prateleira, + Shelf, ], services: [PrateleiraService], pages: [ diff --git a/src/arquivos/js/app/components/Prateleira/Prateleira.js b/src/arquivos/js/app/components/Prateleira/Prateleira.js index 8218c4d..2cf7758 100644 --- a/src/arquivos/js/app/components/Prateleira/Prateleira.js +++ b/src/arquivos/js/app/components/Prateleira/Prateleira.js @@ -96,7 +96,7 @@ export default class Prateleira { //ex atualziar atualizar() { this.flagDeDesconto(); - this.precoParcelado(); + // this.precoParcelado(); this.precoBoleto(); } diff --git a/src/arquivos/js/app/partials/Shelf.js b/src/arquivos/js/app/partials/Shelf.js new file mode 100644 index 0000000..7071af7 --- /dev/null +++ b/src/arquivos/js/app/partials/Shelf.js @@ -0,0 +1,16 @@ +import slickConfig from "Config/slick" + +export default class Shelf { + constructor() { + this.selectors(); + this.createSlider(); + } + + selectors() { + this.shelf = $(".shelf ul"); + } + + createSlider() { + this.shelf.slick(slickConfig.productShelf.defaultShelf) + } +} diff --git a/src/arquivos/js/config/slick.js b/src/arquivos/js/config/slick.js index 96e961a..786150f 100644 --- a/src/arquivos/js/config/slick.js +++ b/src/arquivos/js/config/slick.js @@ -59,7 +59,7 @@ export default { productShelf: { defaultShelf: { lazyLoad: "ondemand", - dots: true, + dots: false, arrows: true, infinite: true, slidesToShow: 4, @@ -69,17 +69,13 @@ export default { { breakpoint: 1200, settings: { - lazyLoad: "ondemand", slidesToShow: 3, slidesToScroll: 3, - infinite: true, }, }, { breakpoint: 800, settings: { - arrows: true, - lazyLoad: "ondemand", slidesToShow: 2, slidesToScroll: 2, }, @@ -87,9 +83,8 @@ export default { { breakpoint: 576, settings: { - arrows: false, - slidesToShow: 2, - slidesToScroll: 2, + slidesToShow: 1, + slidesToScroll: 1, }, }, ], diff --git a/src/arquivos/sass/main.scss b/src/arquivos/sass/main.scss index 414e081..4182980 100644 --- a/src/arquivos/sass/main.scss +++ b/src/arquivos/sass/main.scss @@ -5,17 +5,6 @@ @import "./utils/all"; -@import "./pages/home"; -@import "./pages/categoria"; -@import "./pages/produto"; -@import "./pages/institucional"; -@import "./pages/erro"; -@import "./pages/login"; - -@import "./components/mini-cart"; -@import "./components/newsletter"; -@import "./components/instagram-gallery"; - @import "./partials/header"; @import "./partials/menu"; @import "./partials/barraDeVantagens"; @@ -24,4 +13,19 @@ @import "./partials/prateleira"; @import "./partials/ajustes"; @import "./partials/flags"; -@import "./partials/search" +@import "./partials/search"; +@import "./partials/slider"; + + +@import "./components/mini-cart"; +@import "./components/newsletter"; +@import "./components/instagram-gallery"; + +@import "./pages/home"; +@import "./pages/categoria"; +@import "./pages/produto"; +@import "./pages/institucional"; +@import "./pages/erro"; +@import "./pages/login"; + + diff --git a/src/arquivos/sass/pages/_home.scss b/src/arquivos/sass/pages/_home.scss index e85dbd0..d1baf2c 100644 --- a/src/arquivos/sass/pages/_home.scss +++ b/src/arquivos/sass/pages/_home.scss @@ -18,16 +18,8 @@ } .slick-arrow { - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 5; - padding: 0; - border: 0; - font-size: 0; - background-color: transparent; - outline: 0; - cursor: pointer; + + @extend .sprite; @include mq(md, max) { @@ -59,13 +51,10 @@ } .slick-dots { - display: flex !important; - align-items: center; - justify-content: center; + position: absolute; z-index: 5; - margin: 0; width: 100%; bottom: 14px; left: 0; @@ -75,26 +64,17 @@ } li { - display: flex; - margin: 0 4px; - - .slick-active { - width: 16px; - height: 16px; - border: 11ps solid $white-500; - background: transparent; + &.slick-active { + button { + width: 16px; + height: 16px; + background: transparent; + border: 11ps solid $white-500; + } } } - button { - padding: 0; - border: 0; - outline: 0; - background: $white-500; - width: 10px; - height: 10px; - } } } @@ -141,4 +121,8 @@ white-space: nowrap; } } + + .shelf { + margin-bottom: 172px; + } } diff --git a/src/arquivos/sass/partials/_flags.scss b/src/arquivos/sass/partials/_flags.scss index 61df5a9..e6d08b6 100644 --- a/src/arquivos/sass/partials/_flags.scss +++ b/src/arquivos/sass/partials/_flags.scss @@ -1,43 +1,38 @@ .flags-product { - display: block; - pointer-events: none; position: absolute; - width: 100%; - z-index: 5; + top: 0; + left: 0; + z-index: 10; + padding: 8px; - p { - background-repeat: no-repeat; - color: $color-white; + .flag { display: none; - font-size: 11px; - float: right; - font-weight: 700; + + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + margin: 0 0 8px; min-width: 54px; - margin: 7px 100% 0 7px; - overflow: hidden; - padding: 2.5px 4px; - text-indent: -9999px; - + max-width: max-content; + height: 20px; + &.novo, &.produto-off { - background: $color-black2; - display: table; - float: left; - text-indent: 0; - width: 50px; + display: flex; + align-items: center; + justify-content: center; - &:after { - content: "OFF"; - display: inline-block; - } } &.novo { - background-color: $color-pink; - border-radius: 5px; - display: table; - float: left; - text-indent: 0; - text-transform: uppercase; + font-weight: bold; + background: $blue-500; + color: $white-500; + } + + &.produto-off { + font-weight: 900; + color: $white-500; + background-color: $black-500; } } } diff --git a/src/arquivos/sass/partials/_prateleira.scss b/src/arquivos/sass/partials/_prateleira.scss index f6ec583..1e965c2 100644 --- a/src/arquivos/sass/partials/_prateleira.scss +++ b/src/arquivos/sass/partials/_prateleira.scss @@ -1,263 +1,189 @@ -/***************************************************************/ -/**-- Prateleiras --------------------------********************/ -/*-------------------------------------------------------------*/ - -.prateleira-de-produtos { - position: relative; - - .slick-next, - .slick-prev { - @extend .sprite; - background-color: transparent; - border: none; - cursor: pointer; - font-size: 0; - outline: none; - padding: 0; - position: absolute; - top: 30%; - z-index: 1; - - @include mq(md, max) { - transform: scale(0.8); - } - } - - .slick-next { - @extend .sprite; - @extend .sprite-circled-arrow-right; - left: auto; - right: -60px; - - @include mq(md, max) { - right: -35px; - } - - @include mq_range(md, xl) { - right: -45px; - } - } - - .slick-prev { - @extend .sprite; - @extend .sprite-circled-arrow-left; - right: auto; - left: -60px; - - @include mq(md, max) { - left: -35px; - } - - @include mq_range(md, xl) { - left: -45px; - } - } - - .slick-dots { - bottom: 20px; - height: 17px; - position: absolute; - pointer-events: none; - text-align: center; - width: 100%; - - @include mq(md, max) { - margin-top: 16px; - position: initial; - } - - &, - li { - align-items: center; - display: flex !important; - justify-content: center; - } - - li { - display: inline-block; - margin: 0 4px; - } - - button { - background-color: $color-black2; - border: none; - cursor: pointer; - height: 10px; - outline: none; - padding: 0; - pointer-events: all; - transition: all 0.15s ease-in-out; - width: 10px; - } - - .slick-active { - button { - background-color: $color-pink; - height: 16px; - width: 16px; - } - } - } - +.shelf { h2 { - color: $color-pink; - font-size: 24px; - margin: 0 0 24px; + margin: 0; + line-height: 19px; + font-size: 16px; + margin: 0 0 16px 0; text-align: center; - text-transform: lowercase; } ul { - max-width: 95%; - margin: auto; + margin: 0; + @include mq(md, max) { + padding: 0 32px; + } + } + + .slick-track { + display: flex; + } + + .slick-slide { + height: auto; + + & > div, li { + height: 100%; + } + } + + .slick-arrow { + @extend .sprite; @include mq(md, max) { - max-width: 300px; + transform: translateY(-50%) scale(0.7); } } - li { - display: inline-block; - vertical-align: top; - padding: 0 2.5px; + .slick-prev { + right: 100%; + + @include mq(md, max) { + left: 0; + right: auto; + transform-origin: left; + } + + @extend .sprite-arrow-left-prateleira; } -} -.produto-na-prateleira { - padding: 0 5px; - position: relative; - text-align: center; + .slick-next { + left: 100%; - .product-image { - overflow: hidden; + @include mq(md, max) { + right: 0; + left: auto; + transform-origin: right; + + + } + + @extend .sprite-arrow-right-prateleira; + + } + + .produto-na-prateleira { position: relative; + margin: 0 15px; + display: flex; + flex-direction: column; + height: 100%; + .product-image { + overflow: hidden; + position: relative; + padding-top: 100%; + margin-bottom: 16px; - .lazyload__sibling { - padding-bottom: 100%; - - + div { - top: 0; - left: 0; + &:hover { + .foto-secundaria { + opacity: 1; + pointer-events: all; + } + } + .foto-principal, + .foto-secundaria { position: absolute; width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 5; } - } - .lazyload__sibling img { - left: 50%; - max-width: initial; - position: relative; - transform: translateX(-50%); - width: 100%; - } - - .foto-principal, - .foto-secundaria { - transition: all 0.25s linear; - } - - &:hover .foto-secundaria, - .foto-principal { - visibility: visible; - opacity: 1; - z-index: 1; - } - - .foto-secundaria { - position: absolute; - width: 100%; - top: 0; - z-index: -1; - visibility: hidden; - opacity: 0; - } - } - - .informacoes .nome { - font-size: 14px; - line-height: 16px; - margin-top: 16px; - min-height: 34px; - text-transform: capitalize; - } - - .price { - margin: 8px 0 17px; - - > div { - line-height: 1.3; - } - .antigo { - color: $color-gray2; - font-size: 14px; - min-height: 18px; - text-decoration: line-through; - } - - .principal { - font-size: 18px; - font-weight: 700; - } - - .parcelado { - color: $color-gray2; - font-size: 12px; - - strong { - font-weight: normal; - } - } - - .boleto { - display: none; - } - } - - .compra { - .btn-compra { - margin: 0; - display: block; - transition: all 0.25s linear 0.25s; - - @include mq(md, min) { - visibility: hidden; + .foto-secundaria { opacity: 0; + pointer-events: none; + transition: all 0.2s ease-in-out; } + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .indisponivel, .disponivel { + flex: 1; + display: flex; + flex-direction: column; + } + + + .nome { + text-align: center; + text-transform: uppercase; + line-height: 12px; + font-size: 10px; + font-weight: 500; + margin-bottom: 17px; + } + + .price { + text-align: center; + text-transform: uppercase; + margin-bottom: 17px; + + .antigo { + margin-bottom: 4px; + color: $gray-300; + line-height: 12px; + font-size: 10px; + text-decoration: line-through; + } + + .principal { + font-weight: 900; + margin-bottom: 4px; + line-height: 16px; + font-size: 13px; + } + + .parcelado { + line-height: 12px; + font-size: 10px; + color: $gray-300; + } + } + + .btn-compra { a { - background-color: $color-green; - color: $color-white; - display: block; - font-size: 14px; - letter-spacing: 1px; - padding: 15px 0; + background-color: $black-500; + display: flex; + align-items: center; + justify-content: center; + height: 50px; + line-height: 12px; + font-size: 10px; + font-weight: bold; + color: $white-500; text-transform: uppercase; - transition: all 0.15s linear; - @include mq(lg) { - &:hover { - background-color: $color-green2; - } + transition: background-color 0.2s linear; + @include mq(md, max) { &:active { - background-color: $color-green3; + background: lighten($black-500, 10); } } } + &:hover { + background: lighten($black-500, 10); + } } - } - @include mq(lg) { - &:hover .compra .btn-compra { - visibility: visible; - opacity: 1; - z-index: 1; + + .indisponivel { + display: none; + .erro { + display: flex; + justify-content: center; + align-items: center; + height: 50px; + line-height: 12px; + font-size: 10px; + font-weight: bold; + color: $red-300; + } } } - - .indisponivel { - color: $color-pink; - font-weight: bold; - margin: 5px 0; - } } diff --git a/src/arquivos/sass/partials/_slider.scss b/src/arquivos/sass/partials/_slider.scss new file mode 100644 index 0000000..428252c --- /dev/null +++ b/src/arquivos/sass/partials/_slider.scss @@ -0,0 +1,33 @@ +.slick-arrow { + position: absolute; + top: 50%; + transform: rotateY(-50%); + z-index: 5; + padding: 0; + border: 0; + font-size: 0; + background-color: transparent; + outline: 0; + cursor: pointer; +} + +.slick-dots { + display: flex !important; + align-items: center; + justify-content: center; + margin: 0; + + li { + display: flex; + margin: 0 4px; + } + button { + padding: 0; + border: 0; + outline: 0; + background: $white-500; + + width: 10px; + height: 10px; + } +} diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index eade496..348971d 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -1,5 +1,5 @@ // fonts -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap"); $font-family: "Inter", sans-serif; $font-weight-light: 300; diff --git a/src/arquivos/sprite/arrow-left-prateleira.png b/src/arquivos/sprite/arrow-left-prateleira.png new file mode 100644 index 0000000000000000000000000000000000000000..eef16458bb0a7ada8f72d56f7efc6bd4e2020b7a GIT binary patch literal 2166 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 rN5)c;SpF~pf1K + +
+
+ +
+