From 00c7b535365515d053e35d3c3e3bbf8516136816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Thu, 8 Dec 2022 22:02:24 -0300 Subject: [PATCH] feat: cria prateleira de produtos --- meta/pages/home.js | 120 +----- src/arquivos/js/app/app.js | 2 + .../app/components/Prateleira/Prateleira.js | 6 +- src/arquivos/js/app/partials/Shelf.js | 16 + src/arquivos/js/config/slick.js | 11 +- src/arquivos/sass/main.scss | 23 +- src/arquivos/sass/pages/_home.scss | 44 +- src/arquivos/sass/partials/_flags.scss | 54 ++- src/arquivos/sass/partials/_prateleira.scss | 391 ++++++++---------- src/arquivos/sass/partials/_slider.scss | 32 ++ src/arquivos/sass/utils/_variaveis.scss | 3 +- src/arquivos/sprite/left-gray-arrow.png | Bin 0 -> 2209 bytes src/arquivos/sprite/right-gray-arrow.png | Bin 0 -> 2204 bytes src/template-pagina/caina-home.html | 6 + ...drao.html => caina-prateleira-padrao.html} | 30 +- ...html => caina-prateleira-padrao.vtex.html} | 12 +- 16 files changed, 308 insertions(+), 442 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/left-gray-arrow.png create mode 100644 src/arquivos/sprite/right-gray-arrow.png rename src/template-prateleira/{prateleira-padrao.html => caina-prateleira-padrao.html} (81%) rename src/template-prateleira/{prateleira-padrao.vtex.html => caina-prateleira-padrao.vtex.html} (91%) diff --git a/meta/pages/home.js b/meta/pages/home.js index b3ca2d6..089f853 100644 --- a/meta/pages/home.js +++ b/meta/pages/home.js @@ -122,120 +122,18 @@ module.exports = { }, ], }, - //==================== - // MOSAICO - //==================== { - 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: "caina-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 a386bdd..f0564ba 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..1d8fb5e 100644 --- a/src/arquivos/js/app/components/Prateleira/Prateleira.js +++ b/src/arquivos/js/app/components/Prateleira/Prateleira.js @@ -96,8 +96,8 @@ export default class Prateleira { //ex atualziar atualizar() { this.flagDeDesconto(); - this.precoParcelado(); - this.precoBoleto(); + //this.precoParcelado(); + //this.precoBoleto(); } criarHtmlPrecoBoleto(valor) { @@ -123,7 +123,7 @@ export default class Prateleira { createFlagDesconto($elemento, percentualDeDesconto) { var $flag = $("

") .addClass("flag produto-off") - .text(percentualDeDesconto + "%"); + .text(percentualDeDesconto + "%OFF"); $elemento.find(".flags-product .DiscountHightLight").append($flag); } diff --git a/src/arquivos/js/app/partials/Shelf.js b/src/arquivos/js/app/partials/Shelf.js new file mode 100644 index 0000000..4e87df8 --- /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 af35dae..c4f890b 100644 --- a/src/arquivos/js/config/slick.js +++ b/src/arquivos/js/config/slick.js @@ -58,7 +58,7 @@ export default { productShelf: { defaultShelf: { lazyLoad: "ondemand", - dots: true, + dots: false, arrows: true, infinite: true, slidesToShow: 4, @@ -68,17 +68,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, }, @@ -86,9 +82,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 4275639..d53de5b 100644 --- a/src/arquivos/sass/main.scss +++ b/src/arquivos/sass/main.scss @@ -5,17 +5,7 @@ @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/slider"; @import "./partials/header"; @import "./partials/menu"; @import "./partials/search"; @@ -25,3 +15,14 @@ @import "./partials/prateleira"; @import "./partials/ajustes"; @import "./partials/flags"; + +@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 cd7106a..f230779 100644 --- a/src/arquivos/sass/pages/_home.scss +++ b/src/arquivos/sass/pages/_home.scss @@ -2,6 +2,10 @@ .main-banners { margin-bottom: 38px; + @include mq(md, max) { + margin-bottom: 32px; + } + img { width: 100%; } @@ -18,17 +22,6 @@ } .slick-arrow { - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: map-get($z-index, level-1); - padding: 0; - border: 0; - outline: 0; - font-size: 0; - background-color: transparent; - cursor: pointer; - @extend .sprite; @include mq(md, max) { @@ -59,13 +52,10 @@ } .slick-dots { - display: flex !important; - align-items: center; - justify-content: center; position: absolute; left: 0; bottom: 14px; - margin: 0; + z-index: map-get($z-index, level-1); width: 100%; @@ -73,9 +63,6 @@ } li { - display: flex; - margin: 0 4px; - &.slick-active { button { width: 16px; @@ -85,21 +72,16 @@ } } } - - button { - width: 10px; - height: 10px; - padding: 0; - border: 0; - outline: 0; - background: $white-500; - } } } .advantages { margin-bottom: 117px; + @include mq(md, max) { + margin-bottom: 89px; + } + &__list { margin: 0; display: flex; @@ -142,4 +124,12 @@ font-size: 10px; } } + + .shelf { + margin-bottom: 172px; + + @include mq(md, max) { + margin-bottom: 80px; + } + } } diff --git a/src/arquivos/sass/partials/_flags.scss b/src/arquivos/sass/partials/_flags.scss index 2a609fc..6746390 100644 --- a/src/arquivos/sass/partials/_flags.scss +++ b/src/arquivos/sass/partials/_flags.scss @@ -1,43 +1,37 @@ .flags-product { - display: block; - pointer-events: none; position: absolute; - width: 100%; - z-index: 5; + top: 0; + left: 0; + z-index: map-get($z-index, level-2); + padding: 8px; - p { - background-repeat: no-repeat; - color: #fff; + .flag { display: none; - font-size: 11px; - float: right; - font-weight: 700; + line-height: 12px; + font-size: 10px; + 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: #142032; - display: table; - float: left; - text-indent: 0; - width: 50px; - - &:after { - content: "OFF"; - display: inline-block; - } + display: flex; + align-items: center; + justify-content: center; } &.novo { - background-color: #f71963; - border-radius: 5px; - display: table; - float: left; - text-indent: 0; - text-transform: uppercase; + font-weight: 700; + color: $white-500; + background: $blue-500; + } + + &.produto-off { + font-weight: 900; + color: $white-500; + background: $black-500; } } } diff --git a/src/arquivos/sass/partials/_prateleira.scss b/src/arquivos/sass/partials/_prateleira.scss index 8938be6..9f535c0 100644 --- a/src/arquivos/sass/partials/_prateleira.scss +++ b/src/arquivos/sass/partials/_prateleira.scss @@ -1,263 +1,200 @@ -/***************************************************************/ -/**-- 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: #142032; - 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: #f71963; - height: 16px; - width: 16px; - } - } - } +.shelf { + border: 1px solid blue; h2 { - color: #f71963; - font-size: 24px; - margin: 0 0 24px; + margin: 0 0 16px; + line-height: 19px; + font-size: 16px; text-align: center; - text-transform: lowercase; } ul { - max-width: 95%; - margin: auto; + border: 1px solid green; + margin: 0; - @include mq(md, max) { - max-width: 300px; + @include mq(lg, max) { + padding: 0 32px; } } - li { - display: inline-block; - vertical-align: top; - padding: 0 2.5px; + /*PRA QUANDO TIVER PRODUTO INDISPONIVEL, PRECISA TER O MESMO HEIGHT DE UM PRODUTO NORMAL NA PRATELEIRA*/ + .slick-track { + display: flex; } -} -.produto-na-prateleira { - padding: 0 5px; - position: relative; - text-align: center; + .slick-slide { + height: auto; + border: 1px solid yellow; - .product-image { - overflow: hidden; + & > div, + li { + height: 100%; + } + } + + .slick-arrow { + @extend .sprite; + + @include mq(lg, max) { + transform: translateY(-50%) scale(0.7); + } + } + + .slick-prev { + right: 100%; + border: 1px solid red; + + @include mq(lg, max) { + left: 0; + right: auto; + transform-origin: left; + } + + @extend .sprite-left-gray-arrow; + } + + .slick-next { + left: 100%; + + @include mq(lg, max) { + right: 0; + left: auto; + transform-origin: right; + } + + @extend .sprite-right-gray-arrow; + } + + .produto-na-prateleira { position: relative; + display: flex; + flex-direction: column; + border: 1px solid red; + height: 100%; + margin: 0 15px; - .lazyload__sibling { - padding-bottom: 100%; + .product-image { + position: relative; + padding-top: 100%; + overflow: hidden; + margin-bottom: 16px; - + div { - top: 0; - left: 0; + &:hover { + .foto-secundaria { + opacity: 1; + pointer-events: all; + } + } + .foto-principal, + .foto-secundaria { position: absolute; width: 100%; + top: 0; + bottom: 0; + height: 100%; + z-index: map-get($z-index, level-1); } - } - .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: hsla(220, 1%, 43%, 1); - font-size: 14px; - min-height: 18px; - text-decoration: line-through; - } - - .principal { - font-size: 18px; - font-weight: 700; - } - - .parcelado { - color: hsla(220, 1%, 43%, 1); - 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; } - a { - background-color: #2fab61; - color: #fff; - display: block; - font-size: 14px; - letter-spacing: 1px; - padding: 15px 0; - text-transform: uppercase; - transition: all 0.15s linear; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } - @include mq(lg) { + .disponivel, + .indisponivel { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + .nome { + line-height: 12px; + font-size: 10px; + font-weight: 500; + text-transform: uppercase; + text-align: center; + margin-bottom: 17px; + } + + .price { + text-align: center; + text-transform: uppercase; + margin-bottom: 17px; + + .antigo { + margin-bottom: 4px; + color: $gray-300; + text-decoration: line-through; + font-size: 10px; + line-height: 12px; + } + + .principal { + margin-bottom: 4px; + font-weight: 900; + font-size: 13px; + line-height: 16px; + } + + .parcelado { + font-size: 10px; + line-height: 12px; + color: $gray-400; + } + } + + .btn-compra { + a { + display: flex; + align-items: center; + background: $black-500; + justify-content: center; + height: 50px; + line-height: 12px; + font-weight: bold; + font-size: 10px; + color: $white-500; + transition: background-color 0.2s linear; + + @include mq(lg, max) { + &:active { + background: lighten($black-500, 10); + } + } + + @include mq(lg, min) { &:hover { - background-color: hsla(138, 66%, 41%, 1); + background: lighten($black-500, 10); } &:active { - background-color: hsla(138, 50%, 41%, 1); + background: $black-500; } } } } - } - @include mq(lg) { - &:hover .compra .btn-compra { - visibility: visible; - opacity: 1; - z-index: 1; + .indisponivel { + display: none; + .erro { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + font-size: 10px; + line-height: 12px; + font-weight: bold; + color: $red-300; + } } } - - .indisponivel { - color: #f71963; - 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..5ab44a6 --- /dev/null +++ b/src/arquivos/sass/partials/_slider.scss @@ -0,0 +1,32 @@ +.slick-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + padding: 0; + border: 0; + outline: 0; + font-size: 0; + background-color: transparent; + cursor: pointer; +} + +.slick-dots { + display: flex !important; + align-items: center; + justify-content: center; + margin: 0; + + li { + display: flex; + margin: 0 4px; + } + + button { + width: 10px; + height: 10px; + padding: 0; + border: 0; + outline: 0; + background: $white-500; + } +} diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index 042d8fe..5bc1844 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -1,6 +1,6 @@ // 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-height: 1.5; @@ -16,6 +16,7 @@ $red-300: #db4c4c; $gray-100: #e0e0e0; $gray-200: #bdbdbd; $gray-300: #828282; +$gray-400: #6d6e70; $gray-500: #333; // universal diff --git a/src/arquivos/sprite/left-gray-arrow.png b/src/arquivos/sprite/left-gray-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..d5273a51df91d8744b33bdc41a129164ab67e066 GIT binary patch literal 2209 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 + +

+
+ +
+