diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b41d781..59b8a51 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -126,7 +126,6 @@ "flex-layout.row#cart", "product-assembly-options", "product-gifts", - "availability-subscriber", "shipping-simulator" ] @@ -200,7 +199,13 @@ } }, "tab-list#product": { - "children": ["tab-list.item#product1", "tab-list.item#product2"] + "children": [ + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" + ] }, "tab-list.item#product1": { "props": { @@ -215,8 +220,32 @@ "label": "Descrição" } }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição" + } + }, + "tab-list.item#product5": { + "props": { + "tabId": "product5", + "label": "Descrição" + } + }, "tab-content#product": { - "children": ["tab-content.item#product1", "tab-content.item#product2"] + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] }, "tab-content.item#product1": { "children": ["product-images#descricao", "product-description"], @@ -225,11 +254,29 @@ } }, "tab-content.item#product2": { - "children": ["product-description"], + "children": ["product-images#descricao", "product-description"], "props": { "tabId": "product2" } }, + "tab-content.item#product3": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product3" + } + }, + "tab-content.item#product4": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product4" + } + }, + "tab-content.item#product5": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product5" + } + }, "list-context.product-list#shelf": { "blocks": ["product-summary.shelf#shelf"], "children": ["slider-layout#shelf-products"] diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 17fb098..4945797 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -157,4 +157,21 @@ position: relative; left: 70px; top: 8px; +} + +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +.productDescriptionContainer .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + 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 index ae31ca0..d63cf56 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -1,4 +1,64 @@ +/* +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;600;700&display=swap"); +/* Grid breakpoints */ +.container { + margin-bottom: 16px; +} + +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; +} +.listContainer .listItem { + padding: 0; + margin: 0; +} +.listContainer .listItem :global(.vtex-button) { + background: white; + border: none; + border-radius: 0; +} +.listContainer .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: initial; +} +.listContainer .listItemActive :global(.vtex-button) { + background: white; + border-bottom: 2px solid #000000; + border-radius: 0; +} +.listContainer .listItemActive :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: #000000; + text-transform: initial; +} + .contentItem { display: flex; flex-direction: row; -} + gap: 32px; +} \ 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 cd73e7c..f66a67b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -159,3 +159,23 @@ top: 8px; } } + +//Estilização da descrição do produto +.productDescriptionContainer { + .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + } + .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + 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..e91615b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,54 @@ +.container { + margin-bottom: 16px; +} +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; + .listItem { + padding: 0; + margin: 0; + :global(.vtex-button) { + background: white; + border: none; + border-radius: 0; + :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: initial; + } + } + } + .listItemActive { + :global(.vtex-button) { + background: white; + border-bottom: 2px solid #000000; + border-radius: 0; + :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: #000000; + text-transform: initial; + } + } + } +} +.contentItem { + display: flex; + flex-direction: row; + gap: 32px; +}