diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c0db49a..d6836a4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,112 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#description", + "tab-layout#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"] + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + + "tab-content.item#description1": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "description1" + } + }, + + "tab-content.item#description2": { + "children": [], + "props": { + "tabId": "description2" + } + }, + + "tab-content.item#description3": { + "children": [], + "props": { + "tabId": "description3" + } + }, + + "tab-content.item#description4": { + "children": [], + "props": { + "tabId": "description4" + } + }, + + "tab-content.item#description5": { + "children": [], + "props": { + "tabId": "description5" + } + }, "html#breadcrumb": { "props": { "tag": "section", @@ -30,7 +129,20 @@ "props": { "marginBottom": 7 }, - "children": ["product-description"] + "children": ["product-images#description", "flex-layout.col#description"] + }, + "product-description#notitle": { + "props": { "showTitle": false } + }, + "flex-layout.col#description": { + "props": { + "preventVerticalStretch": true, + "rowGap": 5 + }, + "children": ["product-description", "product-description#notitle"] + }, + "product-images#description": { + "props": { "displayMode": "first-image" } }, "condition-layout.product#availability": { "props": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..55b5032 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,12 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.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; -} +/* +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 { + margin: 32px 72px 16px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b4ee58f..36ab70e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -54,4 +54,18 @@ width: 90px; height: 90px; border-radius: 8px !important; +} + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ 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..ea739c4 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,36 @@ +/* +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 */ +.listContainer { + width: 94.44%; + margin: 0 40px; + padding: 0 80px; + border-bottom: 1px solid #bfbfbf; + justify-content: space-between; +} + +.listContainer :global(.vtex-button) { + background: white; + border: 0; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-bottom: 0; +} + +.listItemActive :global(.vtex-button) { + color: black; + padding-bottom: 0; +} + +.listItemActive { + border-bottom: 2px solid black; + margin-bottom: unset; +} \ 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..415280b --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,3 @@ +.flexRow { + margin: 32px 72px 16px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3659790..7ec920b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -48,3 +48,17 @@ height: 90px; border-radius: 8px !important; } + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} 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..58f6761 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,27 @@ +.listContainer { + width: 94.44%; + margin: 0 40px; + padding: 0 80px; + border-bottom: 1px solid #bfbfbf; + justify-content: space-between; +} + +.listContainer :global(.vtex-button) { + background: white; + border: 0; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-bottom: 0; +} + +.listItemActive :global(.vtex-button) { + color: black; + padding-bottom: 0; +} + +.listItemActive { + border-bottom: 2px solid black; + margin-bottom: unset; +}