From a4c4be5e68f85a5366a868618741b91e5f4e4f59 Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Wed, 25 Jan 2023 01:01:38 -0300 Subject: [PATCH] feat: parte description estilizada --- store/blocks/pdp/product.jsonc | 95 +++++++++++++------ styles/css/vtex.flex-layout.css | 6 +- styles/css/vtex.store-components.css | 20 +++- styles/css/vtex.tab-layout.css | 51 ++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 6 +- .../pages/product/vtex.store-components.scss | 41 +++++--- .../sass/pages/product/vtex.tab-layout.scss | 43 +++++++++ 7 files changed, 216 insertions(+), 46 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 93f167e..74dea6c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -53,7 +53,7 @@ }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, - + "stack-layout": { "props": { "blockClass": "product" @@ -73,20 +73,20 @@ "displayValue": "SPECIFICATION_NAME" } }, - + "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "58%", + "width": "50%", "rowGap": 0 } }, - + "flex-layout.row#product-image": { "props": {}, "children": ["product-images"] }, - + "product-images": { "props": { "blockClass": "divImagens", @@ -100,7 +100,7 @@ "showPaginationDots": false } }, - + "flex-layout.col#right-col": { "props": { "blockClass": "divInfoProduct", @@ -125,7 +125,7 @@ "share#default" ] }, - + "flex-layout.row#product-modelo": { "props": { "blockClass": "divNomeProductModelo" @@ -147,7 +147,7 @@ "showValueNameForImageVariation": true } }, - + "flex-layout.row#buy-button": { "props": { "marginTop": 4, @@ -155,7 +155,7 @@ }, "children": ["add-to-cart-button"] }, - + "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -187,7 +187,7 @@ }, "children": ["availability-subscriber"] }, - + "share#default": { "props": { "social": { @@ -198,19 +198,29 @@ } } }, - + "tab-layout#product": { "children": ["tab-list#product", "tab-content#product"], "props": { - "blockClass": "product", + "blockClass": "estrutura", "defaultActiveTabId": "product1" } }, "tab-list#product": { - "children": ["tab-list.item#product1", "tab-list.item#product2", "tab-list.item#product3", "tab-list.item#product4"] + "props": { + "blockClass": "Guias" + }, + "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": { + "blockClass": "renderGuia", "tabId": "product1", "label": "Descrição 1", "defaultActiveTab": true @@ -218,77 +228,104 @@ }, "tab-list.item#product2": { "props": { + "blockClass": "renderGuia", "tabId": "product2", "label": "Descrição 2" } }, "tab-list.item#product3": { "props": { + "blockClass": "renderGuia", "tabId": "product3", "label": "Descrição 3" } }, "tab-list.item#product4": { "props": { + "blockClass": "renderGuia", "tabId": "product4", "label": "Descrição 4" } }, + "tab-list.item#product5": { + "props": { + "blockClass": "renderGuia", + "tabId": "product5", + "label": "Descrição 5" + } + }, "tab-content#product": { - "children": ["tab-content.item#product1", "tab-content.item#product2", "tab-content.item#product3","tab-content.item#product4"] + "props": { + "blockClass": "listRender" + }, + "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": ["flex-layout.row#description"], "props": { - "tabId": "product1" + "tabId": "product1", + "blockClass": "renderConteudo" } }, "tab-content.item#product2": { "children": ["flex-layout.row#description"], "props": { - "tabId": "product2" + "tabId": "product2", + "blockClass": "renderConteudo" } }, "tab-content.item#product3": { "children": ["flex-layout.row#description"], "props": { - "tabId": "product3" + "tabId": "product3", + "blockClass": "renderConteudo" } }, "tab-content.item#product4": { "children": ["flex-layout.row#description"], "props": { - "tabId": "product4" + "tabId": "product4", + "blockClass": "renderConteudo" + } + }, + "tab-content.item#product5": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product5", + "blockClass": "renderConteudo" } }, - "flex-layout.col#divImgDescription":{ - "props":{ - "blockClass":"divImgDescription", - "width":"50%" + "flex-layout.col#divImgDescription": { + "props": { + "blockClass": "divImgDescription", + "width": "50%" }, - "children":["image#imgDescription"] - + "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" + "blockClass": "imgDescription" } }, "flex-layout.row#description": { "props": { "marginBottom": 7 }, - "children": ["flex-layout.col#divImgDescription" , "product-description"] + "children": ["flex-layout.col#divImgDescription", "product-description"] }, - "newsletter": { "props": { "blockClass": "newsletter", "label": "Assine nossa newsletter", - "placeholder" : "Digite Seu e-mail" + "placeholder": "Digite Seu e-mail" } } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a063a70..d89dd56 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,8 +11,8 @@ margin-top: 16px; margin-left: 40px; margin-bottom: 16px; + padding: 0px; padding-right: 40px !important; - padding: 0; } .flexRowContent--divProduct .stretchChildrenWidth { width: 100% !important; @@ -35,4 +35,8 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); +} + +.flexCol--divImgDescription { + margin-right: 32px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c9246f8..2470c39 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,7 +8,7 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; + background: black; } .container { @@ -29,6 +29,7 @@ } .container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag { max-height: 100% !important; + max-width: 664px; margin-bottom: 16px; } .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb { @@ -54,8 +55,7 @@ .buttonContainer--newsletter { padding-left: 0 !important; } - -:global(.vtex-button) { +.buttonContainer--newsletter :global(.vtex-button) { border-radius: 0; background-color: black; border: 0; @@ -66,4 +66,18 @@ line-height: 19px; text-align: center; border-bottom: 3px solid #bfbfbf; +} + +.imageElement--imgDescription { + width: 100%; + max-width: 664px; +} + +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; } \ 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..50bda2f --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,51 @@ +/* +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 */ +.container--estrutura { + margin-left: 40px; + padding-right: 40px !important; +} +.container--estrutura .listContainer--Guias { + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + border-bottom: 1px solid #B9B9B9; + padding: 0px 64px; + margin-bottom: 36px; +} +.container--estrutura .listContainer--Guias .listItem--renderGuia { + margin: 0; + padding: 0; +} +.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #BFBFBF; +} +.container--estrutura .listContainer--Guias .listItemActive--renderGuia { + border-bottom: 3px solid #000000; + background-color: white; +} +.container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: black; + background-color: white !important; + border: 0; +} +.container--estrutura .contentContainer--listRender { + margin-left: 32px; + padding-right: 72px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 837fe57..7500bd7 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,8 +2,8 @@ margin-top: 16px; margin-left: 40px; margin-bottom: 16px; + padding: 0px; padding-right: 40px !important; - padding: 0; .stretchChildrenWidth { width: 100% !important; } @@ -28,3 +28,7 @@ color: rgba(146, 146, 146, 0.48); } } +.flexCol--divImgDescription{ + margin-right: 32px; +} + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 0f372bd..7c9f616 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,5 +1,5 @@ .newsletter { - background: red; + background: $color-black; } .container { margin: 0; @@ -15,6 +15,7 @@ width: 100% !important; .productImageTag { max-height: 100% !important; + max-width: 664px; margin-bottom: 16px; } } @@ -43,16 +44,32 @@ } .buttonContainer--newsletter { padding-left: 0 !important; + :global(.vtex-button) { + border-radius: 0; + background-color: black; + border: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + border-bottom: 3px solid #bfbfbf; + } } -:global(.vtex-button) { - border-radius:0; - background-color: black; - border: 0; - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - border-bottom: 3px solid #bfbfbf; + +.imageElement--imgDescription { + width: 100%; + max-width: 664px; +} +.productDescriptionContainer { + + .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + } } 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..47f57df --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,43 @@ +.container--estrutura{ + margin-left: 40px ; + padding-right: 40px !important; + .listContainer--Guias { + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + border-bottom: 1px solid #B9B9B9; + padding: 0px 64px; + margin-bottom: 36px; + .listItem--renderGuia{ + margin: 0; + padding: 0; + :global(.vtex-button) { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #BFBFBF; + } + } + .listItemActive--renderGuia{ + border-bottom: 3px solid #000000; + background-color: white; + :global(.vtex-button) { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: black; + background-color: white !important; + border: 0; + } + } + } + .contentContainer--listRender{ + margin-left: 32px; + padding-right: 72px; + + } +}