From a67889e624fa2eb42e4e80b907ad95c044c41722 Mon Sep 17 00:00:00 2001 From: Gabriel Lehmann Date: Fri, 10 Feb 2023 20:25:31 -0300 Subject: [PATCH] fix: description tab-layout --- store/blocks/pdp/product.jsonc | 131 ++++++++++++++++-- styles/css/vtex.store-components.css | 14 ++ styles/css/vtex.tab-layout.css | 34 +++++ .../pages/product/vtex.store-components.scss | 15 ++ .../sass/pages/product/vtex.tab-layout.scss | 25 ++++ 5 files changed, 211 insertions(+), 8 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 e96a0eb..fb3af3c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,114 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + // "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,8 +131,28 @@ "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": { "conditions": [ @@ -179,12 +300,6 @@ "children": ["add-to-cart-button"] }, - "add-to-cart-button": { - "props": { - "blockClass": "add-to-cart-button" - } - }, - "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 31f1f39..93ac2bd 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -330,4 +330,18 @@ display: flex; justify-content: flex-start; align-items: center; +} + +.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..a69bf17 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,34 @@ +/* +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 { + border-bottom: solid 1px #b9b9b9; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; +} + +.listContainer :global(.vtex-button) { + border: 0; + background-color: transparent; + color: #b9b9b9; +} + +.listItemActive { + border-bottom: solid 2px black; + margin-bottom: unset; +} + +.listItemActive :global(.vtex-button) { + color: black; +} + +.container { + margin: 0 40px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 16ba9b0..2f1bafb 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -332,3 +332,18 @@ justify-content: flex-start; align-items: center; } + +// Descrição do produto + +.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..a629583 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,25 @@ +.listContainer { + border-bottom: solid 1px #b9b9b9; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; +} + +.listContainer :global(.vtex-button) { + border: 0; + background-color: transparent; + color: #b9b9b9; +} + +.listItemActive { + border-bottom: solid 2px black; + margin-bottom: unset; +} + +.listItemActive :global(.vtex-button) { + color: black; +} + +.container { + margin: 0 40px; +}