From b21329b923e9f1cd081cdcb74814e73301b40e11 Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Tue, 24 Jan 2023 20:50:16 -0300 Subject: [PATCH] feat: parte funcional do description --- react/components/Html/index.tsx | 2 + react/components/Html/styles.css | 3 + store/blocks/pdp/product.jsonc | 138 ++++++++++++++---- styles/css/agenciamagma.store-theme.css | 16 -- .../product/agenciamagma.store-theme.scss | 8 - 5 files changed, 111 insertions(+), 56 deletions(-) create mode 100644 react/components/Html/styles.css delete mode 100644 styles/css/agenciamagma.store-theme.css delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..5f9d79c 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,8 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css"; + const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..204b205 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,3 @@ + [class*="html--pdp-breadcrumb"] { + background-color: #fff; + } \ No newline at end of file diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b8e75c8..ee64e0c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,13 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + "tab-layout#product", + + + // "flex-layout.row#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + "shelf.relatedProducts", "product-questions-and-answers" ] @@ -26,12 +30,6 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -53,14 +51,9 @@ "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" @@ -80,7 +73,7 @@ "displayValue": "SPECIFICATION_NAME" } }, - + "flex-layout.col#stack": { "children": ["stack-layout"], "props": { @@ -88,19 +81,15 @@ "rowGap": 0 } }, - - "flex-layout.row#product-image": { - "props":{ - - }, + "props": {}, "children": ["product-images"] }, - + "product-images": { "props": { - "blockClass":"divImagens", + "blockClass": "divImagens", "aspectRatio": { "desktop": "auto", "phone": "16:9" @@ -114,7 +103,7 @@ "flex-layout.col#right-col": { "props": { - "blockClass":"divInfoProduct", + "blockClass": "divInfoProduct", "preventVerticalStretch": true, "rowGap": 0 }, @@ -122,8 +111,8 @@ "flex-layout.row#product-name", "flex-layout.row#product-modelo", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", + "flex-layout.row#list-price-savings", "product-installments", // "product-separator", "sku-selector", @@ -136,17 +125,17 @@ "share#default" ] }, - + "flex-layout.row#product-modelo": { "props": { - "blockClass":"divNomeProductModelo" + "blockClass": "divNomeProductModelo" }, "children": ["product-identifier.product"] }, "flex-layout.row#product-name": { "props": { - "blockClass":"divNomeProduct", + "blockClass": "divNomeProduct", "marginBottom": 3 }, "children": ["vtex.store-components:product-name"] @@ -158,7 +147,7 @@ "showValueNameForImageVariation": true } }, - + "flex-layout.row#buy-button": { "props": { "marginTop": 4, @@ -166,7 +155,7 @@ }, "children": ["add-to-cart-button"] }, - + "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -198,7 +187,7 @@ }, "children": ["availability-subscriber"] }, - + "share#default": { "props": { "social": { @@ -208,5 +197,90 @@ "Pinterest": true } } + }, + + "tab-layout#product": { + "children": ["tab-list#product", "tab-content#product"], + "props": { + "blockClass": "product", + "defaultActiveTabId": "product1" + } + }, + "tab-list#product": { + "children": ["tab-list.item#product1", "tab-list.item#product2", "tab-list.item#product3", "tab-list.item#product4"] + }, + "tab-list.item#product1": { + "props": { + "tabId": "product1", + "label": "Descrição 1", + "defaultActiveTab": true + } + }, + "tab-list.item#product2": { + "props": { + "tabId": "product2", + "label": "Descrição 2" + } + }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição 3" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição 4" + } + }, + "tab-content#product": { + "children": ["tab-content.item#product1", "tab-content.item#product2", "tab-content.item#product3","tab-content.item#product4"] + }, + "tab-content.item#product1": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product1" + } + }, + "tab-content.item#product2": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product2" + } + }, + "tab-content.item#product3": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product3" + } + }, + "tab-content.item#product4": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product4" + } + }, + + "flex-layout.col#divImgDescription":{ + "props":{ + "blockClass":"divImgDescription", + "width":"50%" + }, + "children":["image#imgDescription"] + + }, + + "image#imgDescription": { + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-600-auto?v=637781133812700000&width=600&height=auto&aspect=true 600w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true 800w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-1200-auto?v=637781133812700000&width=1200&height=auto&aspect=true 1200w", + "blockClass":"imgDescription" + } + }, + "flex-layout.row#description": { + "props": { + "marginBottom": 7 + }, + "children": ["flex-layout.col#divImgDescription" , "product-description"] } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css deleted file mode 100644 index 00098e6..0000000 --- a/styles/css/agenciamagma.store-theme.css +++ /dev/null @@ -1,16 +0,0 @@ -/* -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 */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: #fff; -} \ 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 deleted file mode 100644 index a3f7a45..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: $color-white; -} -