From 5f536d3bcbd0775b06ce411e7cc1f79782dc628e Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Fri, 10 Feb 2023 12:23:49 -0300 Subject: [PATCH] feat: Cria prateleira desktop mobile --- store/blocks/pdp/product.jsonc | 42 +++++++- .../product-summary/product-summary.jsonc | 15 ++- styles/css/vtex.breadcrumb.css | 3 + styles/css/vtex.flex-layout.css | 4 + styles/css/vtex.modal-layout.css | 100 +++--------------- styles/css/vtex.product-highlights.css | 23 ++-- styles/css/vtex.product-price.css | 47 ++++++++ styles/css/vtex.product-summary.css | 59 ++++------- styles/css/vtex.rich-text.css | 9 +- styles/css/vtex.slider-layout.css | 91 +++++++++++----- styles/css/vtex.store-components.css | 17 ++- .../sass/pages/product/vtex.flex-layout.scss | 5 + .../sass/pages/product/vtex.modal-layout.scss | 3 + .../product/vtex.product-highlights.scss | 3 + .../pages/product/vtex.product-price.scss | 49 +++++++++ .../pages/product/vtex.product-summary.scss | 15 +++ styles/sass/pages/product/vtex.rich-text.scss | 8 ++ .../pages/product/vtex.slider-layout.scss | 67 ++++++++++++ .../pages/product/vtex.store-components.scss | 19 ++-- styles/sass/utils/_vars.scss | 3 +- 20 files changed, 389 insertions(+), 193 deletions(-) create mode 100644 styles/sass/pages/product/vtex.modal-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-highlights.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index aec545a..3cd7069 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,11 +7,51 @@ "tab-layout", //"flex-layout.row#specifications-title", //"product-specification-group#table", - "shelf.relatedProducts" + "flex-layout.row#shelf-row" //"product-questions-and-answers" ] }, + "flex-layout.row#shelf-row": { + "children": ["flex-layout.col#shelf-col"], + "props": { + "blockClass": "shelf-product-row" + } + }, + "flex-layout.col#shelf-col": { + "children": ["rich-text#shelf-related", "list-context.product-list"], + "props": { + "blockClass": "shelf-product-col" + } + }, + + "rich-text#shelf-related": { + "props": { + "text": "### Você também pode gostar:", + "blockClass": "shelf-title" + } + }, + + "list-context.product-list": { + "children": ["slider-layout#shelf-prod"], + "blocks": ["product-summary.shelf"] + }, + + "slider-layout#shelf-prod": { + "props": { + "itemsPerPage": { + "(min-width:1025px)": 4, + "(min-width:768px)": 3, + "(max-width:767px)": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "showPaginationDots": "always", + "blockClass": "slide-shelf", + "colGap": 16 + } + }, + "html#breadcrumb": { "props": { "tag": "section", diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..54c378d 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -3,12 +3,13 @@ "children": [ "stack-layout#prodsum", "product-summary-name", - "flex-layout.col#productRating", - "product-summary-space", + //"flex-layout.col#productRating", + //"product-summary-space", "product-list-price#summary", - "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "product-selling-price#summary" + //"flex-layout.row#selling-price-savings" + //"product-installments#summary" + //"add-to-cart-button" ] }, "flex-layout.col#productRating": { @@ -81,9 +82,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 86dd71f..ac835bf 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,6 +13,9 @@ padding: 0 40px; margin: 32px 0 0; } +.container .homeLink { + padding: 0; +} .container .homeLink::before { content: "Home"; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 1d1b077..6437e07 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,6 +11,10 @@ .flexRow .flexCol--info-availability, .flexRow .flexCol--rightCol { position: relative; } +.flexRow--shelf-product-row { + padding: 0 40px; + margin: 16px 0 0; +} .flexRow .flexRowContent--productPanel { margin: 16px 0; padding: 0 40px; diff --git a/styles/css/vtex.modal-layout.css b/styles/css/vtex.modal-layout.css index 3ff69e2..92aef43 100644 --- a/styles/css/vtex.modal-layout.css +++ b/styles/css/vtex.modal-layout.css @@ -1,89 +1,13 @@ -@media screen and (min-width: 40em) { - .paper--quickview { - height: 260px; - width: 580px; - } - - .actionsContainer--quickview { - padding: 0 2rem 2rem 2rem; - } -} - -@media screen and (min-width: 50em) { - .paper--quickview { - height: 450px; - width: 900px; - } -} - - -@media screen and (min-width: 75em) { - .paper--quickview { - width: calc(100% - 4rem); - height: auto; - } -} - -@media screen and (min-width: 82em) { - .actionsContainer--quickview { - padding: 0 2.5rem 2.5rem 2.5rem; - } -} - -.paper--quickview { - min-width: 320px; - max-width: 96rem; -} - -.headerContainer--quickview { - border: none; - position: absolute; - right: 0; -} - -.actionsContainer--quickview { - height: 100%; - width: 100%; - transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out; - border-top-style: solid; - border-top-width: 1px; - border-top-color: transparent; - box-shadow: -4px 0px 27px -12px transparent; -} - -.actionsContentWrapper { - border-top-width: 1px; - border-top-style: solid; - border-top-color: #aaa; - padding-top: 1.5rem; -} - -.contentContainer--quickviewContent { - padding: 2.5rem 0 2.5rem 2rem; - overflow-x: hidden; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); +/* Grid breakpoints */ .triggerContainer--quickview { - padding: .75rem; -} - -.triggerContainer { - outline: none; -} - -.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) { - border-top-color: rgb(238, 238, 238); - box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64); -} - -.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper { - border-top-color: transparent; -} - -.closeButton { - padding-right: 1rem; -} - -.paper--product-gifts { - padding: 1.5rem; -} + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-highlights.css b/styles/css/vtex.product-highlights.css index c08e8e4..890e7e3 100644 --- a/styles/css/vtex.product-highlights.css +++ b/styles/css/vtex.product-highlights.css @@ -1,12 +1,13 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); +/* Grid breakpoints */ .productHighlightWrapper--collection { - position: absolute; - top: 10px; - left: 5px; - width: 200px; -} - -.productHighlightText { - background: antiquewhite; - border-radius: 20px; - padding: 5px 10px; -} + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 8533852..5cccda7 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -39,4 +39,51 @@ } .installments--sellingInfo .installmentValue::after { content: " sem juros"; +} + +.listPrice--summary { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + text-decoration: line-through; +} +@media only screen and (max-width: 1024px) { + .listPrice--summary { + font-size: 12px; + line-height: 16px; + } +} +.listPrice--summary::before, .listPrice--summary::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +@media only screen and (max-width: 1024px) { + .listPrice--summary::before, .listPrice--summary::after { + font-size: 12px; + line-height: 16px; + } +} +.listPrice--summary::before { + content: "de "; +} +.listPrice--summary::after { + content: " por"; +} +.listPrice--summary .listPriceValue { + text-decoration: none; +} + +.sellingPrice--summary--hasListPrice { + margin: 8px 0; + font-weight: 700; + font-size: 24px; + line-height: 33px; +} +@media only screen and (max-width: 1024px) { + .sellingPrice--summary--hasListPrice { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..93dc97b 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,25 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); +/* Grid breakpoints */ .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 16px 0 8px; } - -.brandName { - font-weight: 600; +.nameContainer .productNameContainer { + font-weight: 400; font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; + line-height: 25px; + color: #000; } +@media only screen and (max-width: 1024px) { + .nameContainer .productNameContainer { + font-size: 14px; + line-height: 19px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 0bb4020..9ec4a4c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,4 +7,11 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--shelf-title { + justify-content: center; + margin: 0 0 32px; +} +.container--shelf-title .heading { + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..0686a47 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,72 @@ -.sliderLayoutContainer { - justify-content: center; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); +/* Grid breakpoints */ +.sliderLayoutContainer--slide-shelf { + padding: 0 19px; + margin: 0 0 113px; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +@media only screen and (max-width: 1024px) { + .sliderLayoutContainer--slide-shelf { + margin: 0 0 105px; + padding: 0 17px; + } } - -.sliderTrackContainer { - max-width: 100%; +@media only screen and (max-width: 767px) { + .sliderLayoutContainer--slide-shelf { + margin: 0 0 65px; + padding: 0 15px; + } } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.sliderLayoutContainer--slide-shelf .slideChildrenContainer { + margin: 0 8px; } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +@media only screen and (max-width: 1024px) { + .sliderLayoutContainer--slide-shelf .slideChildrenContainer { + margin: 0 6px; + } } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +@media only screen and (max-width: 767px) { + .sliderLayoutContainer--slide-shelf .slideChildrenContainer { + margin: 0 4px; + } } +.sliderLayoutContainer--slide-shelf .caretIcon { + display: none; +} +.sliderLayoutContainer--slide-shelf .sliderLeftArrow { + padding: 0; + margin: 0; + left: 0; +} +.sliderLayoutContainer--slide-shelf .sliderLeftArrow::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg); +} +.sliderLayoutContainer--slide-shelf .sliderRightArrow { + padding: 0; + margin: 0; + right: 0; +} +.sliderLayoutContainer--slide-shelf .sliderRightArrow::after { + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg); +} +.sliderLayoutContainer--slide-shelf .paginationDotsContainer { + top: calc(100% + 32px); + align-items: center; +} +.sliderLayoutContainer--slide-shelf .paginationDotsContainer .paginationDot { + margin: 0 6px; + background-color: #000; +} +.sliderLayoutContainer--slide-shelf .paginationDotsContainer .paginationDot--isActive { + height: 17px !important; + width: 17px !important; + background-color: #fff; + border: 0.5px solid #000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8f487f7..9b6edad 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,6 +9,11 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ +@media only screen and (min-width: 1025px) { + .productDescriptionContainer { + padding-right: 32px; + } +} .productDescriptionContainer .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -79,7 +84,7 @@ @media only screen and (max-width: 1024px) { .container .productImageTag--main { min-height: 994px; - max-width: auto; + max-width: none; } } @media only screen and (max-width: 767px) { @@ -249,7 +254,7 @@ padding: 27px 0 0; width: 280px; } -@media only screen and (max-width: 509px) { +@media only screen and (max-width: 767px) { .container .shippingContainer { margin: 0 0 24px; width: 100%; @@ -304,12 +309,6 @@ line-height: 16px; color: #afafaf; } -.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input):focus::before { - display: none; -} -.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input)::before { - content: "asdasd"; -} .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; position: absolute; @@ -318,7 +317,7 @@ white-space: nowrap; text-decoration-line: underline; } -@media only screen and (max-width: 509px) { +@media only screen and (max-width: 767px) { .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { left: auto; top: calc(100% + 8px); diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index eef4503..4857eda 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -6,6 +6,11 @@ } } + &--shelf-product-row { + padding: 0 40px; + margin: 16px 0 0; + } + .flexRowContent--productPanel { margin: 16px 0; padding: 0 40px; diff --git a/styles/sass/pages/product/vtex.modal-layout.scss b/styles/sass/pages/product/vtex.modal-layout.scss new file mode 100644 index 0000000..58d018e --- /dev/null +++ b/styles/sass/pages/product/vtex.modal-layout.scss @@ -0,0 +1,3 @@ +.triggerContainer--quickview { + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-highlights.scss b/styles/sass/pages/product/vtex.product-highlights.scss new file mode 100644 index 0000000..16078cb --- /dev/null +++ b/styles/sass/pages/product/vtex.product-highlights.scss @@ -0,0 +1,3 @@ +.productHighlightWrapper--collection { + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index dc5c00c..4d8a127 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -37,3 +37,52 @@ } } } + +.listPrice--summary { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray16; + text-decoration: line-through; + + @include mq(lg, max) { + font-size: 12px; + line-height: 16px; + } + + &::before, + &::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + @include mq(lg, max) { + font-size: 12px; + line-height: 16px; + } + } + + &::before { + content: "de "; + } + + &::after { + content: " por"; + } + + .listPriceValue { + text-decoration: none; + } +} + +.sellingPrice--summary--hasListPrice { + margin: 8px 0; + font-weight: 700; + font-size: 24px; + line-height: 33px; + + @include mq(lg, max) { + font-size: 18px; + line-height: 25px; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..11f3466 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,15 @@ +.nameContainer { + padding: 16px 0 8px; + + .productNameContainer { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-black2; + + @include mq(lg, max) { + font-size: 14px; + line-height: 19px; + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..9987918 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,8 @@ +.container--shelf-title { + justify-content: center; + margin: 0 0 32px; + + .heading { + margin: 0; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..3469277 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,67 @@ +.sliderLayoutContainer--slide-shelf { + padding: 0 19px; + margin: 0 0 113px; + + @include mq(lg, max) { + margin: 0 0 105px; + padding: 0 17px; + } + + @include mq(md, max) { + margin: 0 0 65px; + padding: 0 15px; + } + + .slideChildrenContainer { + margin: 0 8px; + + @include mq(lg, max) { + margin: 0 6px; + } + + @include mq(md, max) { + margin: 0 4px; + } + } + + .caretIcon { + display: none; + } + + .sliderLeftArrow { + padding: 0; + margin: 0; + left: 0; + + &::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg); + } + } + + .sliderRightArrow { + padding: 0; + margin: 0; + right: 0; + + &::after { + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg); + } + } + + .paginationDotsContainer { + top: calc(100% + 32px); + align-items: center; + + .paginationDot { + margin: 0 6px; + background-color: $color-black2; + + &--isActive { + height: 17px !important; + width: 17px !important; + background-color: $color-white; + border: 0.5px solid $color-black2; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 0e534af..f86db8a 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,4 +1,8 @@ .productDescriptionContainer { + @include mq(lg, min) { + padding-right: 32px; + } + .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -30,6 +34,7 @@ } .container { + //margin: 0; padding: 0; .carouselContainer { @@ -74,7 +79,7 @@ @include mq(lg, max) { min-height: 994px; - max-width: auto; + max-width: none; } @include mq(md, max) { @@ -281,7 +286,7 @@ position: relative; padding: 27px 0 0; - @include mq(cstm, max) { + @include mq(md, max) { margin: 0 0 24px; width: 100%; } @@ -346,14 +351,6 @@ font-size: 12px; line-height: 16px; color: $color-gray10; - - &:focus::before { - display: none; - } - - &::before { - content: "asdasd"; - } } :global(.vtex-address-form__postalCode-forgottenURL) { @@ -364,7 +361,7 @@ white-space: nowrap; text-decoration-line: underline; - @include mq(cstm, max) { + @include mq(md, max) { left: auto; top: calc(100% + 8px); right: 0; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index b6a5ba2..99052ab 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -21,6 +21,7 @@ $color-gray12: #868686; $color-gray13: #b9b9b9; $color-gray14: #bfbfbf; $color-gray15: #b9b9b999; +$color-gray16: #bababa; $color-blue: #4267b2; @@ -33,7 +34,7 @@ $grid-breakpoints: ( sm: 640px, md: 768px, lg: 1025px, - xl: 2500px, + xl: 1920px, ) !default; $z-index: (