From 5a508361a102399e0086bca51a4c672d59d882b3 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Fri, 27 Jan 2023 12:38:59 -0300 Subject: [PATCH] feat(product): adicionando description e estilos na mesma product --- store/blocks/pdp/product.jsonc | 100 +++++++++- styles/configs/style.json | 24 +-- styles/css/vtex.breadcrumb.css | 2 +- styles/css/vtex.store-components.css | 6 +- styles/css/vtex.tab-layout.css | 176 ++++++++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 170 +++++++++++++++++ styles/sass/utils/_vars.scss | 2 +- 7 files changed, 461 insertions(+), 19 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 42c21a4..4b400ed 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + "tab-layout#description", "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", @@ -32,6 +32,102 @@ }, "children": ["product-description"] }, + "product-images#description-content": { + "props": { + "displayMode": "first-image", + "zoomMode": "disable", + "blockClass": "image-description" + } + }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description-block", + "defaultActiveTabId": "firstTab" + } + }, + "tab-list#description": { + "children": [ + "tab-list.item#firstTab", + "tab-list.item#secondTab", + "tab-list.item#thirdTab", + "tab-list.item#fourthTab", + "tab-list.item#fifthTab" + ] + }, + "tab-list.item#firstTab": { + "props": { + "tabId": "firstTab", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#secondTab": { + "props": { + "tabId": "secondTab", + "label": "Descrição" + } + }, + "tab-list.item#thirdTab": { + "props": { + "tabId": "thirdTab", + "label": "Descrição" + } + }, + "tab-list.item#fourthTab": { + "props": { + "tabId": "fourthTab", + "label": "Descrição" + } + }, + "tab-list.item#fifthTab": { + "props": { + "tabId": "fifthTab", + "label": "Descrição" + } + }, + "tab-content#description": { + "children": [ + "tab-content.item#firstTab", + "tab-content.item#secondTab", + "tab-content.item#thirdTab", + "tab-content.item#fourthTab", + "tab-content.item#fifthTab" + ], + "props": { + "blockClass": "description-content" + } + }, + "tab-content.item#firstTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "firstTab" + } + }, + "tab-content.item#secondTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "secondTab" + } + }, + "tab-content.item#thirdTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "thirdTab" + } + }, + "tab-content.item#fourthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fourthTab" + } + }, + "tab-content.item#fifthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fifthTab" + } + }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -122,7 +218,7 @@ // "flex-layout.row#buy-button", "availability-subscriber", "html#shipping-simulator" - // "share#default" + // "share#default" //reder social ] }, diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..f486303 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -253,84 +253,84 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index e244435..ec3c09c 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -17,7 +17,7 @@ line-height: 19px; color: #929292; } -@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .container { padding: 16px 40px; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 32058cc..32a7696 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,7 +13,7 @@ margin: 0; max-width: 100%; } -@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .container { padding: 16px 40px; } @@ -32,7 +32,7 @@ max-height: 904px !important; cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default; } -@media (min-width: 1025px) and (max-width: 2560px) { +@media (min-width: 1025px) and (max-width: 1920px) { .productImageTag--main, .videoContainer { max-height: 664px !important; } @@ -63,7 +63,7 @@ border-radius: 8px; max-width: calc(100% - 16px); } -@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .carouselGaleryThumbs .productImagesThumb { width: 90px !important; height: 90px !important; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..b12144a --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,176 @@ +/* +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;600;700&display=swap"); +/* Grid breakpoints */ +.container--description-block { + padding: 16px 360px; + margin: 0; + max-width: 100%; +} +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block { + padding: 16px 40px; + } +} +.container--description-block .listContainer { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #B9B9B9; + height: 38px; + margin-bottom: 32px; + padding: 0 64px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block .listContainer { + flex-direction: column; + row-gap: 16px; + border-top: 1px solid #B9B9B9; + border-bottom: 1px solid #B9B9B9; + height: auto; + padding: 16px 0; + align-items: flex-start; + } +} +.container--description-block .listContainer .listItem { + height: 38px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} +.container--description-block .listContainer .listItem :global(.vtex-button__label) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #BFBFBF; + padding: 0 16px !important; +} +@media (min-width: 1025px) and (max-width: 1920px) { + .container--description-block .listContainer .listItem :global(.vtex-button__label) { + font-size: 18px; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block .listContainer .listItem :global(.vtex-button__label) { + font-size: 18px; + padding: 0 !important; + } +} +.container--description-block .listContainer .listItem :global(.vtex-button) { + background: transparent; + border: none; +} +.container--description-block .listContainer .listItemActive { + border-bottom: 2px solid #000; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block .listContainer .listItemActive { + border: none; + } +} +.container--description-block .listContainer .listItemActive :global(.vtex-button__label) { + color: #000; +} +.container--description-block .contentContainer--description { + display: flex; + align-items: flex-start; + justify-content: space-evenly; + gap: 32px; +} + +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content { + padding-bottom: 16px; + border-bottom: 1px solid #BFBFBF; + } +} +.contentContainer--description-content .contentItem { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 32px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem { + flex-direction: column; + gap: 16px; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productImagesContainer--image-description) { + width: 50%; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productImagesContainer--image-description) { + width: 100%; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 50%; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 100%; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} +@media (min-width: 1025px) and (max-width: 1920px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 24px; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 20px; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) { + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 16px; + padding: 0; +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: #929292; +} +@media (min-width: 1025px) and (max-width: 1920px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) { + font-size: 16px; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) { + font-size: 14px; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-fadeBottom) { + background-image: none; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-showMoreButton) { + display: none; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..54886e1 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,170 @@ +.container--description-block { + padding:16px 360px; + margin: 0; + max-width: 100%; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + padding: 16px 40px; + } + + .listContainer { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #B9B9B9; + height: 38px; + margin-bottom: 32px; + padding: 0 64px; + + @media #{$mq-tablet}, #{$mq-mobile}{ + flex-direction: column; + row-gap: 16px; + border-top: 1px solid #B9B9B9; + border-bottom: 1px solid #B9B9B9; + height: auto; + padding: 16px 0; + align-items: flex-start; + } + + .listItem { + height: 38px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; + + :global(.vtex-button__label) { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #BFBFBF; + padding: 0 16px !important; + + @media #{$mq-desktop}{ + font-size: 18px; + } + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 18px; + padding: 0 !important; + } + } + :global(.vtex-button) { + background: transparent; + border: none; + } + } + + .listItemActive { + border-bottom: 2px solid $color-black0; + + @media #{$mq-tablet}, #{$mq-mobile} { + border: none; + } + + :global(.vtex-button__label) { + color: $color-black0; + } + } + } + + .contentContainer--description { + display: flex; + align-items: flex-start; + justify-content: space-evenly; + gap: 32px; + } +} + +.contentContainer--description-content{ + + @media #{$mq-tablet}, #{$mq-mobile}{ + padding-bottom: 16px; + border-bottom: 1px solid #BFBFBF; + } + + .contentItem { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 32px; + + @media #{$mq-tablet}, #{$mq-mobile}{ + flex-direction: column; + gap: 16px; + } + + :global(.vtex-store-components-3-x-productImagesContainer--image-description){ + width: 50%; + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100%; + } + } + + :global(.vtex-store-components-3-x-productDescriptionContainer){ + width: 50%; + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100%; + } + + :global(.vtex-store-components-3-x-productDescriptionTitle ) { + font-family:$font-family; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + color: $color-gray7; + margin-bottom: 8px; + + @media #{$mq-desktop} { + font-size: 24px; + } + + @media #{$mq-tablet}, #{$mq-mobile}{ + font-size: 20px; + } + } + + :global(.vtex-store-components-3-x-container) { + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 16px; + padding: 0; + + :global(.vtex-store-components-3-x-content) { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: $color-gray6; + + @media #{$mq-desktop} { + font-size: 16px; + } + + @media #{$mq-tablet}, #{$mq-mobile}{ + font-size: 14px; + } + } + + :global(.vtex-store-components-3-x-fadeBottom ){ + @media #{$mq-tablet}, #{$mq-mobile}{ + background-image: none; + } + } + + :global(.vtex-store-components-3-x-showMoreButton) { + display: none; + } + } + } + } + +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 428172e..c3963f0 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -41,6 +41,6 @@ $z-index: ( ) !default; //media-queries -$mq-desktop: "(min-width: 1025px) and (max-width: 2560px)"; +$mq-desktop: "(min-width: 1025px) and (max-width: 1920px)"; $mq-tablet: "(min-width: 769px) and (max-width: 1024px)"; $mq-mobile: "(min-width: 280px) and (max-width: 768px)";