From c05964b4b9cd35d981d1266cc7d1f58714de081b Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Sun, 29 Jan 2023 21:02:42 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20descri=C3=A7=C3=A3o=20produt?= =?UTF-8?q?o=201440px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 4 + react/components/PixPrice/PixPrice.tsx | 4 +- store/blocks/pdp/product-description.jsonc | 110 ++++++++++++++++++ store/blocks/pdp/product.jsonc | 7 +- styles/css/vtex.tab-layout.css | 57 +++++++++ .../sass/pages/product/vtex.tab-layout.scss | 47 ++++++++ styles/sass/utils/_vars.scss | 1 + 7 files changed, 225 insertions(+), 5 deletions(-) create mode 100644 store/blocks/pdp/product-description.jsonc create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index e62f510..186743f 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -16,3 +16,7 @@ border: none; border-radius: 0; } + +[class*="html--descriptionText"] { + width: 50%; +} diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx index 792763b..1909a52 100644 --- a/react/components/PixPrice/PixPrice.tsx +++ b/react/components/PixPrice/PixPrice.tsx @@ -3,9 +3,9 @@ import { useProduct } from "vtex.product-context"; import styles from "./styles.module.css"; const PixPrice = () => { - const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); + // const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); - console.log(inputCep); + // console.log(inputCep); // .placeholder = "Type name here.."; diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc new file mode 100644 index 0000000..eddb3cf --- /dev/null +++ b/store/blocks/pdp/product-description.jsonc @@ -0,0 +1,110 @@ +{ + "tab-layout#productPage": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + "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": true + } + }, + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "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": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description1" + } + }, + "tab-content.item#description2": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description2" + } + }, + "tab-content.item#description3": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description3" + } + }, + "tab-content.item#description4": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description4" + } + }, + "tab-content.item#description5": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description5" + } + }, + "html#descriptionImage": { + "props": { + "blockClass": "descriptionImage" + }, + "children": ["product-images#description"] + }, + "html#descriptionText": { + "props": { + "blockClass": "descriptionText" + }, + "children": ["product-description"] + }, + "product-images#description": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled" + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0b03d0c..d0e2bbf 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,10 @@ "children": [ "html#breadcrumb", "flex-layout.row#product-container", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#description", + "tab-layout#productPage", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..58dbc7d --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,57 @@ +/* +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%27"); +/* Grid breakpoints */ +.container--description { + margin-top: 16px; +} + +.contentItem { + display: flex; + justify-content: center; + gap: 32px; + margin-top: 32px; +} + +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid #bfbfbf; +} + +.listItem { + padding-top: 0; + padding-bottom: 0; + margin: 0; +} + +.listItem :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + text-transform: capitalize; + margin: 0; +} + +.listItemActive :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #292929; + border-bottom: 2px solid #292929; + border-radius: 0; + text-transform: capitalize; +} \ 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..24a8c41 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,47 @@ +.container--description { + margin-top: 16px; +} + +.contentItem { + display: flex; + justify-content: center; + gap: 32px; + margin-top: 32px; +} + +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid $color-gray10; +} + +.listItem { + padding-top: 0; + padding-bottom: 0; + margin: 0; +} + +.listItem :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: $color-gray10; + text-transform: capitalize; + margin: 0; +} + +.listItemActive :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: $color-black; + border-bottom: 2px solid $color-black; + border-radius: 0; + text-transform: capitalize; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 1f5de96..0dd6147 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -13,6 +13,7 @@ $color-gray6: #cccccc; $color-gray7: #929292; $color-gray8: #575757; $color-gray9: #afafaf; +$color-gray10: #bfbfbf; $color-blue: #4267b2; -- 2.34.1