From b5d1991c4c0d995b4ecba6344084dddb1135266c Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Mon, 6 Feb 2023 17:16:49 -0300 Subject: [PATCH] feat: cria conteudo da respondivo da area de descricao, contendo bloco tab-layout, image-product e texto da descricao --- store/blocks/pdp/product.jsonc | 11 +- store/blocks/pdp/tab-layout-product.jsonc | 120 +++++++++++++++++ styles/css/vtex.flex-layout.css | 122 +++++------------- styles/css/vtex.slider-layout.css | 2 +- styles/css/vtex.store-components.css | 47 +++++++ styles/css/vtex.tab-layout.css | 79 ++++++++++++ .../product/agenciamagma.store-theme.scss | 3 +- .../sass/pages/product/vtex.flex-layout.scss | 44 +++++++ .../pages/product/vtex.slider-layout.scss | 3 +- .../pages/product/vtex.store-components.scss | 57 +++++++- .../sass/pages/product/vtex.tab-layout.scss | 89 +++++++++++++ styles/sass/utils/_vars.scss | 1 + 12 files changed, 471 insertions(+), 107 deletions(-) create mode 100644 store/blocks/pdp/tab-layout-product.jsonc create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss 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 61ab69c..32494a9 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + "tab-layout#tab-product", "list-context.product-list#m3-shelf-retaletd", "newsletter#m3-newsletter", "product-questions-and-answers" @@ -27,12 +25,7 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, + "condition-layout.product#availability": { "props": { "conditions": [ diff --git a/store/blocks/pdp/tab-layout-product.jsonc b/store/blocks/pdp/tab-layout-product.jsonc new file mode 100644 index 0000000..a8ce6a3 --- /dev/null +++ b/store/blocks/pdp/tab-layout-product.jsonc @@ -0,0 +1,120 @@ +{ + "tab-layout#tab-product": { + "children": ["tab-list#tab-product", "tab-content#tab-product"], + "props": { + "blockClass": "tab-product", + "defaultActiveTabId": "tab-product1" + } + }, + "tab-list#tab-product": { + "props": { + "blockClass": "m3-tab-list-product" + }, + "children": [ + "tab-list.item#tab-product1", + "tab-list.item#tab-product2", + "tab-list.item#tab-product3", + "tab-list.item#tab-product4", + "tab-list.item#tab-product5" + ] + }, + "tab-list.item#tab-product1": { + "props": { + "blockClass": "m3-tab-list-item-product", + "tabId": "tab-product1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#tab-product2": { + "props": { + "blockClass": "m3-tab-list-item-product ", + "tabId": "tab-product2", + "label": "Descrição" + } + }, + "tab-list.item#tab-product3": { + "props": { + "blockClass": "m3-tab-list-item-product ", + "tabId": "tab-product3", + "label": "Descrição" + } + }, + "tab-list.item#tab-product4": { + "props": { + "blockClass": "m3-tab-list-item-product ", + "tabId": "tab-product4", + "label": "Descrição" + } + }, + "tab-list.item#tab-product5": { + "props": { + "blockClass": "m3-tab-list-item-product ", + "tabId": "tab-product5", + "label": "Descrição" + } + }, + + "tab-content#tab-product": { + "children": [ + "tab-content.item#tab-product1", + "tab-content.item#tab-product2", + "tab-content.item#tab-product3", + "tab-content.item#tab-product4", + "tab-content.item#tab-product5" + ] + }, + "tab-content.item#tab-product1": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "tab-product1" + } + }, + "tab-content.item#tab-product2": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "tab-product2" + } + }, + "tab-content.item#tab-product3": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "tab-product3" + } + }, + "tab-content.item#tab-product4": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "tab-product4" + } + }, + "tab-content.item#tab-product5": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "tab-product5" + } + }, + "flex-layout.row#description": { + "props": { + "blockClass": "description", + "marginBottom": 7 + }, + "children": ["product-images#imageDescription", "product-description"] + }, + "flex-layout.row#wrapperImageDescription": { + "props": { + "blockClass": "imageDescription", + "width": "50%" + }, + "children": ["product-images#imageDescription"] + }, + "product-images#imageDescription": { + "props": { + "blockClass": "imageDescription", + "displayMode": "first-image", + "aspectRatio": { + "desktop": "1:1" + } + } + } +} diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..0693381 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,34 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +/* Grid breakpoints */ +.flexRow--description :global(.vtex-store-components17-x-container) { + padding-left: 0 !important; + padding-right: 0 !important; + width: 100% !important; + max-width: 94.4444444444% !important; + background-color: red; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; +.flexRowContent--description { + gap: 32px; +} +@media (min-width: 1920px) { + .flexRowContent--description .stretchChildrenWidth { + width: unset !important; } } - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; +@media (max-width: 1024px) { + .flexRowContent--description { + display: flex; + flex-direction: column; } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} + .flexRowContent--description .stretchChildrenWidth { + width: unset !important; + } +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 4d0c281..e67f4b4 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -16,7 +16,7 @@ .sliderTrackContainer--m3-carousel-products { max-width: 94.712%; - margin: 0 auto; + margin: 0 40px; } @media (max-width: 590px) { .sliderTrackContainer--m3-carousel-products { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 133654e..7899658 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -112,4 +112,51 @@ max-width: 84px; height: 32px; border-bottom: 3px solid #BFBFBF; +} + +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +.productDescriptionContainer .content { + text-align: justify; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + max-width: 632px; +} +@media (min-width: 1920px) { + .productDescriptionContainer .content { + max-width: 872px !important; + font-size: 18px; + line-height: 25px; + } +} +@media (max-width: 1024px) { + .productDescriptionContainer .content { + font-size: 14px; + line-height: 19px; + max-width: none; + } +} + +.productImageTag--imageDescription--main { + max-height: 632px !important; +} +@media (min-width: 1920px) { + .productImageTag--imageDescription--main { + max-height: 872px !important; + } +} +@media (max-width: 1024px) { + .productImageTag--imageDescription--main { + max-height: unset !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..5753e91 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,79 @@ +/* +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 */ +/* Grid breakpoints */ +.container--tab-product { + width: 100%; + max-width: 94.44%; + margin: 0 auto; +} +@media (min-width: 1920px) { + .container--tab-product { + max-width: 1840px; + } +} +.container--tab-product .listContainer--m3-tab-list-product { + justify-content: space-around; + border-bottom: 1px solid #B9B9B9; + margin-bottom: 32px; +} +@media (max-width: 1024px) { + .container--tab-product .listContainer--m3-tab-list-product { + flex-direction: column; + } +} +.container--tab-product .listContainer--m3-tab-list-product .listItem { + margin: 0; + padding: 0; +} +.container--tab-product .listContainer--m3-tab-list-product .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #BFBFBF; + text-transform: capitalize; +} +.container--tab-product .listContainer--m3-tab-list-product .listItem--m3-tab-list-item-product { + background: #fff; + border: none !important; + width: 114px; +} +.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product, +.container--tab-product .listContainer--m3-tab-list-product .listItemActive { + background: #fff; + border: none !important; +} +.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button), +.container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) { + background-color: #fff; + border: none; + border-bottom: 2px solid #000000; + border-radius: 0; + position: relative; + top: 2px; +} +@media (max-width: 1024px) { + .container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button), + .container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) { + border-bottom: 0; + top: 0; + } +} +.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button) :global(.vtex-button__label), +.container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; +} \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..f94fd95 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -4,5 +4,4 @@ .html--pdp-breadcrumb { background-color: green; -} - +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..e2b0812 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,44 @@ +// INICIO DESCRIÇÃO +.flexRow--description { + :global(.vtex-store-components17-x-container) { + padding-left: 0 !important; + padding-right: 0 !important; + width: 100% !important; + max-width: 94.444444444444444444444444444444% !important; + background-color: red; + } +} + +.flexRowContent--description { + gap: 32px; + + @media (min-width:1920px) { + .stretchChildrenWidth { + width: unset !important; + // width: 100% !important; + } + } + + @media (max-width:1024px) { + + display: flex; + flex-direction: column; + + .stretchChildrenWidth { + width: unset !important; + } + } +} + +// @media (max-width: 1024px) { +// .flexRowContent--description { +// display: flex; +// flex-direction: column; +// } + +// .flexRowContent--description .stretchChildrenWidth { +// width: 100% !important; +// } +// } + +// FIM DESCRIÇÃO \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index c55d345..8bb74ba 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -8,7 +8,8 @@ .sliderTrackContainer--m3-carousel-products { max-width: 94.712%; - margin: 0 auto; + // margin: 0 auto; + margin: 0 40px; @media (max-width:590px) { max-width: 78.933333333333333333333333333333%; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1a9d212..8eae560 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -117,4 +117,59 @@ } } -// FIM NEWSLETTER \ No newline at end of file +// FIM NEWSLETTER + +// INICIO DESCRIÇÃO +.flexRow--description {} + +.productDescriptionContainer { + .productDescriptionTitle { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + } + + .content { + text-align: justify; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + max-width: 632px; + // max-width: 632px !important; + + @media (min-width:1920px) { + + max-width: 872px !important; + font-size: 18px; + line-height: 25px; + + } + + @media (max-width:1024px) { + font-size: 14px; + line-height: 19px; + max-width: none; + // max-width: none !important; + } + } +} + +.productImageTag--imageDescription--main { + max-height: 632px !important; + + @media (min-width:1920px) { + max-height: 872px !important; + } + + @media (max-width:1024px) { + max-height: unset !important; + } +} + +// FIM DESCRIÇÃO \ 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..d004e08 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,89 @@ +.container--tab-product { + + width: 100%; + max-width: 94.44%; + margin: 0 auto; + + @media (min-width:1920px) { + max-width: 1840px; + + } + + + + .listContainer--m3-tab-list-product { + justify-content: space-around; + border-bottom: 1px solid #B9B9B9; + margin-bottom: 32px; + + @media (max-width:1024px) { + flex-direction: column; + } + + .listItem { + margin: 0; + padding: 0; + + :global(.vtex-button) { + + :global(.vtex-button__label) { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + + display: flex; + align-items: center; + text-align: center; + + color: #BFBFBF; + text-transform: capitalize; + } + } + } + + .listItem--m3-tab-list-item-product { + background: #fff; + border: none !important; + width: 114px; + + } + + .listItemActive--m3-tab-list-item-product, + .listItemActive { + background: #fff; + border: none !important; + + + :global(.vtex-button) { + background-color: #fff; + border: none; + border-bottom: 2px solid #000000; + border-radius: 0; + position: relative; + top: 2px; + + + + @media (max-width:1024px) { + border-bottom: 0; + top: 0; + } + + :global(.vtex-button__label) { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + + color: #000000; + + + } + } + } + + + } +} \ No newline at end of file diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 18a0fe6..b2401b0 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,4 @@ +$font-family : "Open Sans"; $color-black: #000000; $color-black2: #292929;