From b1e1f349dc3de9d21b7cdd040d2a161ed02f3c1d Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 26 Jan 2023 15:23:31 -0300 Subject: [PATCH] feat: adiciona product description e seu css --- store/blocks/pdp/product.jsonc | 272 ++++++++++-------- styles/css/vtex.button.css | 12 + styles/css/vtex.flex-layout.css | 109 +------ styles/css/vtex.store-components.css | 5 + styles/css/vtex.tab-layout.css | 43 +++ .../product/agenciamagma.store-theme.scss | 1 - styles/sass/pages/product/vtex.button.scss | 3 + .../sass/pages/product/vtex.flex-layout.scss | 7 + .../pages/product/vtex.store-components.scss | 7 + .../sass/pages/product/vtex.tab-layout.scss | 35 +++ 10 files changed, 278 insertions(+), 216 deletions(-) create mode 100644 styles/css/vtex.button.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.button.scss 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 eb0fe37..a1a4fd3 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,127 +10,153 @@ "product-questions-and-answers" ] }, - "tab-layout#desc":{ - "children": [ - "tab-list#home", - "tab-content#desc" - ], - "props": { - "blockClass": "desc", - "defaultActiveTabId": "desc1" - } -}, -"tab-list#home": { - "children": [ - "tab-list.item#desc1", - "tab-list.item#desc2", - "tab-list.item#desc3", - "tab-list.item#desc4", - "tab-list.item#desc5" - ] -}, -"tab-list.item#desc1": { - "props": { - "tabId": "desc1", - "label": "Descrição", - "defaultActiveTab": true - } -}, -"tab-list.item#desc2": { - "props": { - "tabId": "desc2", - "label": "Descrição" - } -}, -"tab-list.item#desc3": { - "props": { - "tabId": "desc3", - "label": "Descrição" - } -}, -"tab-list.item#desc4": { - "props": { - "tabId": "desc4", - "label": "Descrição" - } -}, -"tab-list.item#desc5": { - "props": { - "tabId": "desc5", - "label": "Descrição" - } -}, - "tab-content#desc": { - "children": [ - "tab-content.item#desc1", - "tab-content.item#desc2", - "tab-content.item#desc3", - "tab-content.item#desc4", - "tab-content.item#desc5" - ] - }, - "tab-content.item#desc1": { - "children": [ - - "flex-layout.row#description" - ], - "props": { - "tabId": "desc1" - } - }, - "tab-content.item#desc2": { - "children": [ - - ], - "props": { - "tabId": "desc2" - } - }, - "tab-content.item#desc3": { - "children": [ - - ], - "props": { - "tabId": "desc2" - } -}, -"tab-content.item#desc4": { - "children": [ - - ], - "props": { - "tabId": "desc2" - } -}, -"tab-content.item#desc5": { - "children": [ - - ], - "props": { - "tabId": "desc2" - } -}, + "tab-layout#desc": { + "children": [ + "tab-list#home", + "tab-content#desc" + ], + "props": { + "blockClass": "desc", + "defaultActiveTabId": "desc1" + } + }, + "tab-list#home": { + "children": [ + "tab-list.item#desc1", + "tab-list.item#desc2", + "tab-list.item#desc3", + "tab-list.item#desc4", + "tab-list.item#desc5" + ] + }, + "tab-list.item#desc1": { + "props": { + "tabId": "desc1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#desc2": { + "props": { + "tabId": "desc2", + "label": "Descrição" + } + }, + "tab-list.item#desc3": { + "props": { + "tabId": "desc3", + "label": "Descrição" + } + }, + "tab-list.item#desc4": { + "props": { + "tabId": "desc4", + "label": "Descrição" + } + }, + "tab-list.item#desc5": { + "props": { + "tabId": "desc5", + "label": "Descrição" + } + }, + "tab-content#desc": { + "children": [ + "tab-content.item#desc1", + "tab-content.item#desc2", + "tab-content.item#desc3", + "tab-content.item#desc4", + "tab-content.item#desc5" + ] + }, + "tab-content.item#desc1": { + "children": [ + "flex-layout.row#description-row" + ], + "props": { + "tabId": "desc1" + } + }, + "tab-content.item#desc2": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc3": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc4": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc5": { + "children": [], + "props": { + "tabId": "desc2" + } + }, "html#breadcrumb": { "props": { "tag": "section", "testId": "breadcrumbs", "blockClass": "pdp-breadcrumb" }, - "children": ["breadcrumb"] + "children": [ + "breadcrumb" + ] }, "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] + "children": [ + "rich-text#specifications" + ] }, "rich-text#specifications": { "props": { "text": "##### Product Specifications" } }, - "flex-layout.row#description": { + "flex-layout.row#description-row": { "props": { - "marginBottom": 7 + "blockClass": "description-row" }, - "children": ["product-description"] + "children": [ + "flex-layout.col#image-description", + "flex-layout.col#description" + ] + }, + "flex-layout.col#description": { + "props": { + "blockClass": "description" + }, + "children": [ + "product-description" + ] + }, + "product-description": { + "props": { + "blockClass": "product-description-m3" + } + }, + "flex-layout.col#image-description": { + "props": { + "blockClass": "image-description" + }, + "children": [ + "image#img-descricao" + ] + }, + "image#img-descricao": { + "props": { + "blockClass":"img-descricao", + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" + // "blockClass":"img-descricao" + } }, "condition-layout.product#availability": { "props": { @@ -152,9 +178,11 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": [ + "flex-layout.col#stack", + "flex-layout.col#right-col" + ] }, - "stack-layout": { "props": { "blockClass": "product" @@ -165,7 +193,6 @@ "product-specification-badges" ] }, - "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -174,16 +201,19 @@ "displayValue": "SPECIFICATION_NAME" } }, - "flex-layout.col#stack": { - "children": ["stack-layout"], + "children": [ + "stack-layout" + ], "props": { "width": "60%", "rowGap": 0 } }, "flex-layout.row#product-image": { - "children": ["product-images"] + "children": [ + "product-images" + ] }, "product-images": { "props": { @@ -217,29 +247,30 @@ "share#default" ] }, - "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "product-name" }, - "children": ["vtex.store-components:product-name"] + "children": [ + "vtex.store-components:product-name" + ] }, - "sku-selector": { "props": { "variationsSpacing": 3, "showValueNameForImageVariation": true } }, - "flex-layout.row#buy-button": { "props": { "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": [ + "add-to-cart-button" + ] }, - "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -269,9 +300,10 @@ "props": { "blockClass": "message-availability" }, - "children": ["availability-subscriber"] + "children": [ + "availability-subscriber" + ] }, - "share#default": { "props": { "social": { diff --git a/styles/css/vtex.button.css b/styles/css/vtex.button.css new file mode 100644 index 0000000..f3eadae --- /dev/null +++ b/styles/css/vtex.button.css @@ -0,0 +1,12 @@ +/* +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 */ +.bg-action-primary { + background-color: black; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..24adda2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,17 @@ -.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 */ +.flexRowContent :global(.vtex-button) { + background-color: black; } -@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 { +.flexRowContent--description-row { 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; -} + justify-content: center; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9470a1a..5d78632 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -28,4 +28,9 @@ .productDescriptionContainer { width: 50% !important; + margin-left: 32px; +} + +.pointerEventsNone { + display: none; } \ 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..2287928 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,43 @@ +/* +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 { + margin-bottom: 32px; + display: flex; + gap: 197px; +} + +.listItem :global(.vtex-button) { + background-color: white; + color: #BFBFBF; + border: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; +} + +.listItemActive :global(.vtex-button) { + background-color: white; + color: black; + border: 0; + border-bottom: 2px black solid; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} + +.bg--primary-action { + background-color: red; +} \ 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 8d604c0..f7710ca 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -5,4 +5,3 @@ .html--pdp-breadcrumb { background-color: white; } - diff --git a/styles/sass/pages/product/vtex.button.scss b/styles/sass/pages/product/vtex.button.scss new file mode 100644 index 0000000..47490ab --- /dev/null +++ b/styles/sass/pages/product/vtex.button.scss @@ -0,0 +1,3 @@ +.bg-action-primary{ + background-color: black; +} 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..6cc4e56 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,7 @@ +.flexRowContent :global(.vtex-button){ + background-color: black; +} +.flexRowContent--description-row{ + display: flex; + justify-content: center; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 143ae93..47170fa 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -19,4 +19,11 @@ } .productDescriptionContainer{ width: 50% !important; + margin-left: 32px; +} +.container--product-description-m3{ + +} +.pointerEventsNone{ + display: none; } 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..79bc257 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,35 @@ +.listContainer{ + margin-bottom: 32px; + display: flex; + gap: 197px; +} +.listItem :global(.vtex-button){ + background-color: white; + color: #BFBFBF; + border: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; +} +.listItemActive :global(.vtex-button){ + background-color: white; + color: black; + border: 0; + border-bottom: 2px black solid; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} +// .listContainer :global(.b--action-primary){ +// background-color: black; +// } +.bg--primary-action{ + background-color: red; +} +